Angular 5 Example Shopping App + Angular Material + Responsive

Made with ❤️

LIVE DEMO

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 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 haveNode.jsandnpminstalled on your PC/Mac.

Then just runnpm installin the project's root.

Development server

Runnpm startfor a dev server. Navigate tohttp://localhost:4200/.The app will automatically reload if you change any of the source files.

Build

Runnpm run buildto build the project. The build artifacts will be stored in thedist/directory. Use the-prodflag 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 😜