Online Shopping - MERN Stack

Introduction

Welcome to the README for the Online Shopping project built using the MERN Stack. This is not a real e-commerce website but rather an educational project for learning and practicing technologies and skills related to the MERN Stack.

MERN Stack Overview

The MERN stack is a free and open-source JavaScript software stack for building dynamic web sites and web applications which has the following components:

• M: MongoDB - the standard NoSQL database.
• E: Express.js - the default web applications framework for building RESTful APIs.
• R: React.js - the JavaScript library used for building UI components.
• N: Node.js - the cross-platform, open-source server environment that can run on Windows, Linux, Unix, macOS, and more...

By combining these technologies, we can efficiently build single-page web applications with fast performance and smooth user experiences.

Project Objectives

The main objective of the Online Shopping project is to create a web application that allows users to view product listings, add products to the cart, and simulate the checkout process. This project will help us practice and gain a deeper understanding of the following aspects:

• Building a MongoDB database to store product information and orders.
• Using Express.js to create APIs for interacting with the database.
• Creating interactive user interfaces using React.
• Handling user registration, login, and account management.
• Integrating shopping cart and payment functionalities.

Getting Started

If you want to run this project on your computer, follow these steps:

1. Clone the repository from GitHub:

git clone https://github.com/tiendung8a6/Online-Shopping-MERN-Stack.git

2. Install dependencies:

cd server
npm install

cd client-admin
npm install

cd client-customer
npm install

3. Configure the MongoDB database:

Ensure you have MongoDB installed and running on your computer, and update the connection URL in the server/utils/MyConstants.js file.

4. Run the application:

cd server
npm start

cd client-admin
npm start

cd client-customer
npm start

Directory Structure

The project directory includes the following folders:

• client-admin: Contains the client-side source code for the admin interface built with React.js.
• client-customer: Contains the client-side source code for the customer interface built with React.js.
• resources: Holds various project resources.
  • images: Contains images used in the project.
  • mongodb: Contains JSON files that can be imported into the MongoDB database.
  • postman: Contains the API collection for Postman, facilitating API testing and documentation.
• server: Holds the server-side source code built with Node.js and Express.js.

How to Use

After accessing the website, you can register, log in, view the product list, add products to the cart and simulate the checkout process. If you want to manage customer accounts, manage products, manage categories, manage orders, then you can login to the admin page.

Main Technologies Used

• Front-end: React.js, HTML, CSS, JavaScript
• Back-end: Node.js, Express.js, MongoDB
• Package and Tool Management: npm, Git

References

• Lab-01.pdf
• Lab-02.pdf
• Lab-03.pdf
• Lab-04.pdf
• Lab-05.pdf
• Lab-06.pdf
• Lab-07.pdf
• Lab-08.pdf
• Lab-09.pdf
• Lab-10.pdf
• Pro MERN Stack: Full Stack Web App Development with Mongo, Express, React, and Node.pdf

Author

• Name: Ngo Tien Dung
• Contact: tiendung8a6@gmail.com
• Phone: +84 985872885