yuantian94 / MERN-Project

This is repository for Online Commerce Website based on MERN

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

MERN Stack E-commerce Web Application

This is a MERN Stack e-commerce application. The application will have not only basic functionalities such as a shopping cart and product search, but also advanced things such as chat, real-time sales charts, product attributes (e.g. product color to choose from), creating testable components in React and other things. MERN consists of MongoDB (as a database), Express (a framework to make it easier to use Node), React (to create user interfaces), and Node (as a server).

Application Demo

  • main page

    1687473194259

  • Filter and search

    image

  • Product detail page

    image

  • Cart page

    image

  • Order page

    image

  • Seller Order page

    image

  • Live chat

    image

  • Seller Analytic

    image

Application features

  • Some of the e-commerce app features:

  • shopping cart

  • login, register

  • PayPal payment

  • upload images to Cloudinary and to local disk

  • searching, sorting, filtering, pagination of product list

  • multilevel categories

  • bestsellers carousel

  • star rating system and reviews

  • real time sales charts using SocketIO

  • chat using SocketIO

  • deploy application to Heroku & Render

  • React local state

  • Redux state

  • functional programming using React Hooks

How to run

Make sure you have your own credentials:

  • in backend/.env file for MONGO_URI variable
  • frontend/src/pages/user/UserOrderDetailsPage.js for PayPal client-id
  1. Open terminal on the frontend folder and run "npm install"
  2. Open terminal on the backend folder and run "npm install"
  3. Having terminal opened on the backend run "npm run dev" to run the application
  4. Optionally run seeders by running "npm run seed:data" (being in the backend folder)

About

This is repository for Online Commerce Website based on MERN


Languages

Language:JavaScript 76.2%Language:HTML 21.8%Language:CSS 2.1%Language:Procfile 0.0%