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.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 😜