/Online-Shop-eCommerce-App-Angular-MongoDb-Heroku

mean-stack-angular-app-from-scratch

Primary LanguageTypeScript

Download Online Store eCommerce App in Angular + MongoDb + Heroku with complete source code

Click here for Video Tutorial !

Click here to Read Step by Step Instructions

Visit Online eCommerce Shop!

Welcome to product mart this is an Angular App where we are using Angular Material to develop pages and we are making this app from the scratch to learn angular.

This course is introduction to MEAN stack step by step. The MEAN stack uses Mongo, Express, Angular and Node for simple and scalable fullstack js applications

  • M = MONGO DB
  • E = EXPRESS
  • A = ANGULAR
  • N = NODE.JS

Learning Checklist

Below are our learning checklist. We will cover one by one each topic while making this website and hence completing our MEAN Stack Learning. Please follow all of my teaching videos here in YouTube.

  • Environment ( node, npm , expressjs, vscode ) [2019-04-06]
  • Angular CLI [2019-04-06]****
  • Use Case (Display User List) [2019-04-12]
  • Integrate with Angular Material [2019-04-12]
  • Use Components from Angular Material [2019-04-12]
  • Host application in local server ( express.js) [2019-04-12]
  • Serve the data from local server [2019-04-12]
  • adding login/logout feature
  • adding register feature
  • creating restful api server
  • consuming restful api in Auth service
  • installing mongo db
  • Configuring mongoose in Angular App
  • Integrating Restful API with mongo db
  • Deploy prod code to Cloud Platform
    • Heroku
  • Create ToolBar Component
  • Organize Project (shared and core module, feature module)

Getting Started.

git clone npm i cp .env.sample .env

Learning Materials

  • Youtube Link for Introduction to MEAN stack and Learning Angular Step by Step.
  • Articles related to Angular and related MEAN stacks can be found here in https://rupeshtiwari.com

Development server

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

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

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

Angular CLI

This project was generated with Angular CLI version 7.3.8.