/product-shop-and-admin-page-in-react

A Dynamic product shop and checkout page build in react.

Primary LanguageJavaScript

Products shop And Admin Page in React

A Dynamic Products Shop and the Admin page build in react.

Demo

  • For the demonstration, the code has been hosted on Heroku.
  • You can access this link to view the application.
  • You can register with the Admin user role to view all the pages

Techincal Specifications

  • The Backend is a REST API built in ExpressJs which is an MVC web-application framework for NodeJs.
  • MongoDB is used as the NoSQL Database along with ExpressJs in the backend Rest API. Mongoose, a MongoDB ODM(Object Data Mapper) has also been used along with MongoDB in the database layer.
  • The Frontend is built using ReactJs along with React-Router and Material UI as component library.

Project Specifications

  • The project has two resources: Products and Users.
  • The Project has two User Roles: Admin and User(A normal shopper).
  • The Project has Login & Register pages for the non logged-in users, a Shop page for the Logged-in users with user role as User, and Users page only visible to Admin along with actions to perform CRUD operations.
  • The Admin has the right to carry out the CRUD operation on both the resources.
  • They can Add/Remove/Edit/Delete the Products and the Users listed/have access on the site.
  • The Project was primarily built to learn Javascript and how to run it on the backend using NodeJs. Also to experiment with NoSQL Databases.

Requirements

  • Express 4.x
  • MongoDB 3.x
  • Mongoose 5.x
  • Node 8.x
  • React-Router 5.x

Installation

Clone the repository and Run the following commands in the terminal:

  • npm run install_app (This will install the server's and the client's dependency packages)
  • npm start (This will start the backend server. Alternatively, you can also run npm run start_dev to start the server with nodemon, which will look for the changes in the files and restart the server everytime)
  • cd client && npm start (This will start the Frontend React application for Dev Environment. For Production, run npm build to build the FrontEnd for deployment)