MERN Stack E-Commerce Website

MongoDB - Express - React - Redux - NodeJS

MERN stack is intended to provide a starting point for building full-stack JavaScript applications, including dynamic web apps. The stack is made of MongoDB, Express, React, Redux, and NodeJS.

Demo

• Client demo
• Admin demo
• Back-end demo
• Dummy accounts:
• Admin Account: asd@asd.asd password: asd
• Consultant Account: yui@asd.asd password: asd

Project Breakdown

1. API Server

• Directory api
• Todo:
  • Authentication system
    • Sign up - bcrypt
    • Local login - jsonwebtoken - passport-jwt
  • User management - CRUD operations

2. React Client

• Directory client
• Created by using create-react-app
• Todo:
  • Redux store - react-redux
  • Router - react-router-dom
  • Authentication pages
    • Sign up page
    • Sign in page
    • Reset password page
    • Profile page
  • Send Email - nodemail
  • Chat Box - [socket.io]

3. Admin

• Directory admin
• Todo:
  • Verify Admin
  • Product management pages
    • Product list page
    • Product edit page
  • User management pages
    • User list page
    • User edit page
    • User history
  • Material design - Material-UI
  • Chat Box - socket.io (WIP)

Getting started

1. Clone or download the BookingWebsite repository

Usage (run fullstack app on your machine)

Prerequisites

• MongoDB
• Node
• npm

notice, you need client and server runs concurrently in different terminal session, in order to make them talk to each other

Client-side usage(PORT: 3000)

$ cd client          // go to client folder
$ yarn # or npm i    // npm install packages
$ npm start       // run it locally

Server-side usage(PORT: 5000)

// in the root level
$ cd api
$ yarn # or npm i    // npm install packages
$ npm start       // run it locally

Admin usage(PORT: 3001)

// in the root level
$ cd client   // go to server folder
$ npm i       // npm install packages
$ npm start // run it locally