https://github.com/affilnost/angular5-example-shopping-app

Angular 5 Example Shopping App + Angular Material + Responsive
https://github.com/affilnost/angular5-example-shopping-app

angular angular-2 angular-5 angular-5-quickstart angular-material angular-shopping angular2 angular5 boilerplate example-app example-code example-project material material-design shopping-app shopping-list

Last synced: about 1 month ago
JSON representation

Angular 5 Example Shopping App + Angular Material + Responsive

• Host: GitHub
• URL: https://github.com/affilnost/angular5-example-shopping-app
• Owner: affilnost
• License: mit
• Created: 2018-04-20T11:35:01.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-03-01T20:50:30.000Z (over 1 year ago)
• Last Synced: 2024-09-28T17:21:08.840Z (about 2 months ago)
• Topics: angular, angular-2, angular-5, angular-5-quickstart, angular-material, angular-shopping, angular2, angular5, boilerplate, example-app, example-code, example-project, material, material-design, shopping-app, shopping-list
• Language: TypeScript
• Homepage: https://affilnost.github.io/angular5-example-shopping-app/
• Size: 2.42 MB
• Stars: 128
• Watchers: 9
• Forks: 81
• Open Issues: 14
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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: