E-Commerce-Website-using-ReactJS-NodeJS

E-Commerce Website using MERN Stack.

A E-Commerce website developed using ReactJS for the frontend, NodeJs for the backend, MongoDB as database.

Table of contents

• Prerequisites
• Requirements
• Technologies
• Features
• Screenshots
• Contact

Prerequisites

• Text Editor (VS Code , Atom, Brackets, etc.)
• Node.js and npm - install here
• MongoDB - install here

Requirements

To run this project, install it locally using npm:

• git clone git@github.com:suhassalian27/E-Commerce-Website-using-ReactJS-NodeJS.git

  $ cd E-Commerce-Website-using-ReactJS-NodeJS
  

• To Run Backend
  • open terminal

    $ npm install
    $ npm start
    

• To Run Frontend
  • open new terminal

    $ cd frontend
    $ npm install
    $ npm start
    

Technologies

Project is created with:

• HTML5 and CSS3: Semantic Elements, CSS Grid, Flexbox
• React: Components, Props, Events, Hooks, Router, Axios, React-Bootstrap
• Redux: Store, Reducers, Actions
• Node & Express: Web API, Body Parser, File Upload, JWT
• MongoDB: Mongoose
• Development: ESLint, Babel, Git, Github,
• Deployment:

Features

List of features ready and TODOs for future development

• User Login, Signup, User Authentication.
• Admin Login.
• Add, Edit, Remove Products. (Only Admin)
• Add to Cart.

To-do list:

• Sorting
• Search

Screenshots

Home Page

This is the home page of e-commerce. It shows a list of products. It also uses React-Bootstrap Corousel for corousel.

---

Product Details Page

When the user clicks on a product it takes you to the product details page.

____________________

Cart

Shopping Cart is the heart of any e-commerce website. I have created a user-friendly shopping cart using React and Redux.

____________________

Register

I have created forms for getting user info and save them in the database.

____________________

Sign-In

Sign in page for user to sign in.

____________________

Ordering Products

Sign in page for user to sign in.

Shipping Screen

____________________

Payment Screen

____________________

Place Order Screen

____________________

Admin

Admin should be able to define products and update the count in stock whenever they like. This page is about managing ECommerce products.

View Products (admin)

____________________

Add Products (admin)

____________________

Contact

Suhas Suhas - feel free to contact me!