↓Skip to main content
Resources for the Modern Web Resources for the Modern Web
  1. All Posts/

angular2-shop

eCommerce JavaScript

Angular2Shop (Angular eCommerce) (ng2Shop) – Fullstack (Defunct)

This is Defunct project beacause the changes in Angualr2 Beta and Breaking Changes in Angular 2

Angular2Shop is a multi tenant eCommerce application. The sample site is for home cooked meals, but can be easily accomodate for any product.
#Technology Stack

  • MEAN with Angular2

#Technical Features

  • Oauth2 with google login
  • Authentication and Authorization with Secure Rest Calls
  • GeoLocation
  • Angular2 integration with google map and places api
  • Places Autocomlete
  • Image Dropdown Component
  • File Upload Integration
  • Grapicks Magic and Image Resize
  • Session, Cookies and Local Stogare

#Site Flow and Features

  • Login with google id/local logic

##Seller

  • Create Shop (Kitchen)/ Create Multiple Shops
  • Add Products/Food Menu to Shop (Kitchen)
  • Manage Orders

##Buyer

  • Search Shops/Products near to his/her location on keyword or preference
  • Local Filter on search results
  • Add to Cart
  • Manage Cart (Add/Edit Items from cart)
  • Confirm Order

Angular2-Shop uses a number of open source projects to work properly:

  • [Angular2] – HTML enhanced for web apps!Latest Beta Version
  • [TypeScript] – Angular2 with Typescript
  • [Material] – Google Material Desing
  • [Vulgar] – Vulger Cli for Seed Project
  • [Angular-Material and Ng2Material] – For Google Material Desing
  • [node.js] – evented I/O for the backend
  • [Express] – fast node.js network app framework [@tjholowaychuk]
  • [Gulp] – the streaming build system
  • [Webpack] – build system and HMR (Hot Module Reload)
  • [MongoDB] – NoSQL DB
  • [Google Maps] – Angular2Maps (@dev)
  • [File Upload] – Angular2Upload (@dev)
  • [OAuth2 and Google Auth] – Passport.js (@dev)
  • [Rx] – Reactive JX (Flux) (@dev)
  • [Mobile-Codorva] – Codorva (@dev)

Installation

ng2Shop requires Node.js v4+ to run.
You need Gulp installed globally:

$ npm i -g gulp
$ git clone [git-repo-url] 
$ cd project-dir
$ npm i -d
$ npm start

From another terminal

$ gulp serve

### Development

Want to contribute? Great!

This project uses Gulp + Webpack + HMR (Hot Module replacement) for fast developing.
Make a change in your file and instantanously see your updates!

Open your favorite Terminal and run these commands.

First Tab:
```sh
$ node app

Second Tab:

$ gulp watch

(optional) Third:

$ karma start

More details coming soon.

Todos

  • Write Tests
  • Add Code Comments
  • Add more backend (Python-Flask / PHP /Dot Net WepAPI)
  • Integrate with Application Generator to add new models

License

MIT
[vulgar-cli]:
[proj]: https://github.com/nawalgupta/angular2shop
[git-repo-url]: https://github.com/nawalgupta/angular2shop.git
[john gruber]: http://daringfireball.net
[@thomasfuchs]: http://twitter.com/thomasfuchs
[node.js]: http://nodejs.org
[Twitter Bootstrap]: http://twitter.github.com/bootstrap/
[@tjholowaychuk]: http://twitter.com/tjholowaychuk
[express]: http://expressjs.com
[AngularJS]: http://angularjs.org
[Gulp]: http://gulpjs.com



↑