/meanRetails

A Simple MEAN.js Retail Application

Primary LanguageTypeScript

meanRetails

A Simple MEAN.js E-Commerce Application

Table of Contents

##Dependencies

Frontend
Backend

##Features

Frontend
  • Home page with list of products.
  • Add items to Cart.
  • Hover over cart icon to view items in the cart.
  • Each item in cart will have a subtotal and grand total. On clicking checkout a mock of successful order is shown.
  • Cart icon show a badge with number of items in cart.
  • Mark items as Favorite.
  • Hover over Favorite icon to view wish list in a popover.
  • Clicking on links in footer will show route change and dummy pages.
  • Translation support is added for localization/Internationalization.
  • Toaster is added to let user know state of the action performed.
  • 'Quantity' key is considered as max number of quantity a product can be added to cart. A info toaster will be shown when it exceeds the limit and the product will not be added to cart.
  • State is maintained after the refresh.
Backend

  • Inventory Management with modules - Store, Products, Orders

  • Store module :- * Endpoint : /stores * method: GET, POST , DELETE * Operations: Add, Fetch all, Remove Store

  • Products module :- * Endpoint : /products * method: GET, POST , DELETE, Patch * Operations: Add, Fetch all, Fetch One, Update, Remove Product

  • Orders module :- * Endpoint : /orders * method: GET, POST , DELETE * Operations: Create , Fetch all, Fetch One, Cancel Order

  • All the operations can be done by using API from this Postman collection

  • Added products can be viewed in Frontend Application ngCart developed using Angular. Features available are listed in Repo of ngCart

Note: Product is fetched by making actual api call to endpoint /products and the placing orders are just a mock in Frontend App

Frontend to Backend Connection

  • Navigate to environment.ts | environment.prod.ts accordingly

  • Change the value of the server to instance uri of backend application

    • To run the backend app locally, clone the node.js app from repo and follow the steps from Readme.md

    Sample server value in environment file

      export const environment = {
    production: false,
    server: "http://localhost:3000"
  };

    Sample server value in environment file

      export const environment = {
    production: false,
    server: "https://ngShop.glitch.me"
  };

MongoDB connection

  • MongoDB Hoisted in MongoDB Atlas

  • Config.json is used to provide db connection details

  • Open <project_folder>\server\config\config.json and

Sample Connection details for local db instance

{
  "env": {
    "remoteDb": false,
    "dbHost": "127.0.0.1:27017/ngShop?retryWrites=true&w=majority",
    "dbUserName": "",
    "dbPassword": ""
  }
}

Sample Connection details for remote db instance

{
  "env": {
    "remoteDb": true,
    "dbHost": "@ngshop.0h5cq.mongodb.net/ngShop?retryWrites=true&w=majority",
    "dbUserName": "ngShop",
    "dbPassword": "ngShop"
  }
}

Development server

  • Navigate to project base folder in your local system and Run npm install.
  • npm start to start the angular and node.js application. This will start the angular application on port 4200 and node.js application on port 3000

Demo

  • Demo

  • Postman Collection

    # Note: Demo instance is connected to node.js app hoisted in (http://ngshop.glitch.me) and MongoDb hoisted in MongoDB atlas.

    There will be a initial load time for the server to start in the hoisted environment. As it will be shut down due to inactivity. Angular app will be showing the spinner