angular5-example-shopping-app

KO | EN

gitlite — search

#python #ai #go #mongodb #javascript #typescript #android #linux #golang #tailwindcss #nodejs #cli

angular5-example-shopping-app

★ 126 Open GitHub ↗

Angular 5 Example Shopping App + Angular Material + Responsive

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Angular 5 Example Shopping App + Angular Material + Responsive

> ### Made with :heart:

[![Join the chat at https://gitter.im/Angular-5-Example-Shopping-App/Lobby](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/Angular-5-Example-Shopping-App/Lobby)
[![MIT Licence](https://badges.frapsoft.com/os/mit/mit.svg?v=103)](https://opensource.org/licenses/mit-license.php)
[![Open Source Love](https://badges.frapsoft.com/os/v1/open-source.svg?v=103)](https://github.com/ellerbrock/open-source-badges/)
[![TypeScript](https://badges.frapsoft.com/typescript/love/typescript.svg?v=101)](https://github.com/ellerbrock/typescript-badges/)
[![Build Status](https://travis-ci.org/affilnost/angular5-example-shopping-app.svg?branch=master)](https://travis-ci.org/affilnost/angular5-example-shopping-app.svg?branch=master)

## [LIVE DEMO](https://affilnost.github.io/angular5-example-shopping-app/)
[![angular-example-shopping-app](https://goo.gl/kjy8Ph)](https://affilnost.github.io/angular5-example-shopping-app/)

## UI Description
The app provides a possibility to maintain shopping lists.

- Products can be searched with a search field
- Each product can be added to a shopping list
- Shopping list can be viewed
- Products can be removed from shopping list
- Name of shopping lists can be defined and changed
- User friendly design

API connection:
- App uses shutterstock.com API, but it can be easily changed to any other api

## Features
- Angular 5+
- Internationalization (translations)
- Routing
- Lazy loading (Shopping module)
- Material Design
- Custom loading page
- Responsive layout (flex layout module)
- RxJS/Observables
- Angular forms
- Http
- Scalable architecture
- Following the best practices!

## Environment installation
You need to have `Node.js` and `npm` installed on your PC/Mac.

Then just run `npm install` in the project's root.

## Development server

Run `npm start` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.

## Build

Run `npm run build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.

## Possible Issues / Improvements
* Pagination in the Product Search List
* Possibility to add multiple products (of one type) to the Shopping List and to change the count of every product
* Write tests
* Navigation: Add breadcrumbs, "Back" buttons

## Contributing
Please see the CONTRIBUTING file for guidelines.

## Deploying to GitHub Pages
`npm run deploy-to-ghpages`

## License
MIT

Enjoy :stuck_out_tongue_winking_eye:

angular5-example-shopping-app

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README