Creating an e commerce website with mern stack

THE SOCIALIST REPUBLIC OF VIETNAMIndependence – Freedom – Happiness ---PROJECT ASSIGNMENTStudent Name: Mai Hồ An Thúy ID: 18110052 Student Name: Hà Văn Cường ID: 18110003 Specialization

TECHNOLOGY AND EDUCATION

MINISTRY OF EDUCATION AND TRAINING

HO CHI MINH CITY UNIVERSITY OF

GRADUATION THESIS INFORMATION TECHNOLOGY

CREATING AN E-COMMERCE WEBSITE WITH

MERN STACK

LECTURER: Ms MAI ANH THƠ STUDENTS: MAI HỒ AN THÚY

HÀ VĂN CƯỜNG

MINISTRY OF EDUCATION AND TRAINING

HO CHI MINH CITY UNIVERSITY OF TECHNOLOGY AND

EDUCATION FACULTY OF INFORMATION TECHNOLOGY

MERN STACK

THE SOCIALIST REPUBLIC OF VIETNAM

Independence – Freedom – Happiness

-PROJECT ASSIGNMENTStudent Name: Mai Hồ An Thúy ID: 18110052

Student Name: Hà Văn Cường ID: 18110003

Specialization: Capstone Project

Thesis name: Creating an e-commerce website with MERN Stack

Implementation of Content

Theory: Research and learn MERN Stack

Practice:

-Build an E-web Application:

oFor users: Basic functions of e-commerce website

-Build a Management Website:

oFor admin: Manage the information on the website

Processing time: (Starting from …/…/…… to …/…/……)

Student's signature:

Student's signature:

Student's signature:

CHAIR OF THE PROGRAM

(Sign with full name) ADVISOR

(Sign with full name)

THE SOCIALIST REPUBLIC OF VIETNAM

Independence – Freedom– Happiness

-COMMENTARY OF ADVISORStudent Name: Mai Hồ An Thúy ID: 18110052

Student Name: Hà Văn Cường ID: 18110003

Major: Capstone Project

Project title: Creating an e-commerce website with MERN Stack

Advisor: Ms Mai Anh Thơ

THE SOCIALIST REPUBLIC OF VIETNAM

Independence – Freedom– Happiness

-COMMENTARY OF REVIEWERStudent Name: Mai Hồ An Thúy ID: 18110052

Student Name: Hà Văn Cường ID: 18110003

Major: Capstone Project

Project title: Creating an e-commerce website with MERN Stack

Name of Reviewer: Dr Lê Vĩnh Thịnh

EVALUATION

1 Content and workload of the project

2 Strengths:

3 Weaknesses:

4 Approval for oral defense? (Approved or denied)

We would like to sincerely thank the professors at the Faculty of InformationTechnology, Department of Software Engineering and Communication, Ho Chi MinhCity University of Technology and Education for their assistance in the completion ofthis thesis Special thanks go out to Ms Mai Anh Thơ for energetically assisting,instructing, and sharing her experiences, ideas, and approaches with us as we developedthis topic

We have not had enough time to completely develop our thoughts on the subject,which is a problem There will always be mistakes made throughout the reporting process

We look forward to hearing from instructors and friends who have insights to share

Implementation group

Mai Hồ An Thúy

Hà Văn Cường

TABLE OF CONTENTS

CHAPTER 1: PROJECT DESCRIPTION 12

1.1 Project Overview 12

1.2 The Current Situation 12

1.2.1 Shopee 12

1.2.2 Lazada 14

1.2.3 Sendo 15

1.2.4 Tiki 16

1.3 Lesson learned 17

1.4 Requirement analysis 18

1.4.1 System requirement 18

1.4.2 Functional requirements: 20

1.4.3 Non-functional requirements: 22

CHAPTER 2: THEORY FOUNDATION 25

2.1 MERN Stack Overview 25

2.2 MongoDB 25

2.2.1 What is MongoDB? 25

2.3 Express.js 26

2.4 React 26

2.5 Node.js 27

2.6 Socket IO 27

CHAPTER 3: SYSTEM ANALYSIS AND DESIGN 29

3.1 Identify actors and functions in use case diagrams: 29

3.2 Describe in detail each use case and actors: 30

3.2.1 Describe actors: 30

3.2.2 Describe use cases: 31

CHAPTER 4: SOFTWARE DESIGN 32

4.1 Use case Diagram 33

4.1.1 Use case Overview 33

4.2 Specification 34

4.2.1 Sign In 34

4.2.2 Manage Products 35

4.2.3 Manage Orders 37

4.2.6 Manage Reviews 40

4.3 Sequence Diagram 41

4.3.1 Shared Sequence Diagrams for Managers and Customers 41

4.3.2 Sequence diagram of Customer 46

4.3.2 Sequence diagram of Administrator 53

4.4 Activity Diagram 61

4.5 Class Diagram 66

4.5 Database Design 67

4.6 ERD Model: 70

CHAPTER 5: UI DESIGN 72

5.3 Registration interface 73

5.4 Interface to get password 74

5.5 User Interface 75

5.6 Interface of Admin Page 82

CHAPTER 6: SOFTWARE TESTING 86

CHAPTER 7: SUMMARY 93

7.1 The summary result that we got: 93

REFERENCES 94

Table of figure

Figure 1 : Shoppe 13

Figure 2 : Shoppe 13

Figure 3 : Lazada 14

Figure 4 : Sendo 15

Figure 5 : Tiki 16

Figure 6 : What is MongoDB? 25

Figure 7 : React 27

Figure 8 : Use case overview diagram 33

Figure 9 : Sign In 34

Figure 10 : Manage Products 35

Figure 11 : Manage Orders 37

Figure 12 : Manage Account 38

Figure 13 : Manage Reviews 40

Figure 14 : Sequence Diagram Login 42

Figure 15 : Sequence Diagram Sign Up 43

Figure 16 : Sequence Diagram Forgot Password 44

Figure 17 : Sequence diagram Change password 45

Figure 18 : Sequence Diagram Product Search 46

Figure 19 : Sequence diagram Add products to cart 47

Figure 20 : Sequence diagram Add products to wish list 48

Figure 21 :Sequence diagram View product list by category 49

Figure 22 : Payment Sequence Diagram 50

Figure 23 : Sequence Diagram Product Review 52

Figure 24 : Sequence Diagram Add New Product 53

Figure 25 : Sequence Diagram Edit Product Information 54

Figure 26 : Sequence diagram Delete products 55

Figure 27 : Sequence diagram Edit account permissions 56

Figure 28 : Sequence diagram Delete account 57

Figure 29 : Sequence diagram Product review management 58

Figure 30 : Sequence Diagram Check Orders 59

Figure 32 : Activity Diagram Login 61

Figure 33 : Activity Diagram Register 62

Figure 34 : Activity Diagram Searching 63

Figure 35 : Activity Diagram Cart 64

Figure 36 : Activity Diagram Payment 65

Figure 37 : Class Diagram 66

Figure 38 : ERD Model 71

Figure 39 : Overview UI 72

Figure 40 : Login interface 73

Figure 41 : Registration interface 73

Figure 42 : Interface to get password 74

Figure 43 : Interface to reset password 75

Figure 44 : Product search interface 75

Figure 45 : Cart interface 76

Figure 46 : Product details interface 77

Figure 47 : Homepage 78

Figure 48 : Account information interface 79

Figure 49 : Order Histrry 79

Figure 50 : Ordering interface 80

Figure 51 : Successful payment interface 81

Figure 52 : Homepage Interface of Admin Page 82

Figure 53 : Details interface 83

Figure 54 : Product management interface 84

Figure 55 : Interface Edit product information 84

Figure 56 : Order management interface 85

Table of Table

Table 1 : Division (user): Customer 20

Table 2 : Division (user): Administrator 21

Table 3 : User related 23

Table 4 : Staff-related 23

Table 5 : Quality 24

Table 6 : List of Actors and Use cases 30

Table 7 : Describe actors 30

Table 8 : Describe use cases 32

Table 9 : Sign In 35

Table 10 : Manage Products 36

Table 11 : Manage Orders 38

Table 12 : Manage Account 39

Table 13 : Manage Reviews 41

Table 14 : Table “User” 67

Table 15 : Table “Products” 68

Table 16 : Table “Review” 69

Table 17 : Table “Order” 70

Table 18 : Test table 92

CHAPTER 1: PROJECT DESCRIPTION 1.1 Project Overview

The Internet and its vast advantages have drawn people in and won them over asthe present global network system has grown Utilizing the potent capabilities of theInternet and cutting-edge information and communication technology, individuals havecreated unique systems that others may use and put into effect And that will alterpeople's lives in our society so that they become more convenient and civilized

The commercial website will replace other tools for conducting internationalbusiness as the Internet spreads quickly around the globe It is essential to utilizecomputers to manage, purchase, and sell in enterprises, corporations, and as people ratherthan managing, purchasing, and selling by hand Businesses and organizations may usewebsites to market their goods and services while also enabling customers to buy andtrade stuff Finding business partners will also be simpler as a result, helping to growsales and consumer base Additionally, using credit cards for online payments is quickand easy Every business and organization has to manage, buy, and sell things online, and

it is very convenient for customers

Therefore, in order to operate and maintain the website and satisfy theaforementioned demands, new technologies are required This is why we settled on thesubject of " Creating an e-commerce website with MERN Stack," which can carry out theaforementioned tasks

1.2 The Current Situation

1.2.1 Shopee

- Shopee gives clients a wide range of payment alternatives.

- Relatively quick delivery with package tracking information

- There are frequently discount events to assist draw customers

Disadvantages:

- There is no means to aid consumers in evaluating the quality of products

- Unreasonably canceling an order

- Shopee occasionally authorizes orders swiftly and occasionally slowly

- Shopee is not in charge of warranties on goods

- The issue is that occasionally the online account does not function as intended

- The Lazada app is also simpler to use When a product page is opened, elements likeRatings and Recommendations may be rapidly accessed by tapping the links at thetop of the screen rather than scrolling down the page.

Disadvantages:

- The precision of its product search results: For instance, when you order the goodsfrom lowest to highest price, some of the things on the first page do not exactly fitthe search word

- Mistake made by the customer or seller - Lazada has given up on installmentpurchasing

- Lazada has given up offering installment shopping

- There is no point system for customers to earn points when they make purchases

- Lazada forbids product scrutiny after delivery

- Suggest charging a delivery fee to clients.

- The security of customer information is good

- Establish circumstances that will allow customers to simply return items inaccordance with the law

- It is simple for a client to purchase a thing since all the vendor needs is your phonenumber to verify its validity

Disadvantages:

- There are still bogus and low-quality items since the seller management system isnot good

- Because of the poor buyer management system, virtual items frequently arise

- Customers have access to a number of payment alternatives through Sendo

1.2.4 Tiki

Figure 5: Tiki

Advantages:

- User-friendly

- Simple, fast, and convenient transaction

- The addition of more addresses to make it simpler to choose one when placing anorder

- Tiki offers consumers a variety of payment alternatives

- Relatively quick shipping with package tracking data

- Promotions are offered to entice consumers to shop and assist them in saving money

 Product input and product verification

 Add products to the warehouse

+ Orders: Where Order Status is the section that needs special attention, in my

opinion The system must split using logical reasoning so that the merchant can monitorthe order's progress and alter order details when the client requests a modification

+Customers: Please maintain the privacy of this important information.

+ Report / Analysis: The data let us keep track of the web's functionality and

choose the best course of action for its development or upkeep

+ Payment method: Make sure it operates properly because this is one of the

most crucial features of the website because it offers a revenue stream

+ Shipping method: Make sure the deliverer, buyer, and recipient are all tied

together Because when the consumer receives the goods and the quality is still assured, itcan help us build confidence with customers, resulting in the development and increasedusage of our website

+ Store locations: Regularly updating the shop address is crucial It aids in the

contractor's time estimation for delivery It will take much less time Consumers mustreceive goods as soon as feasible

+ Web builder: The connection between the front end and the back end.

Merchants can alter how their website material is displayed by using the tool known asWeb Builder The program will use the information the merchant contributed to thebackend and organize it in different ways to make it appealing on the front end

- Search products, orders, users, reviews

- Filter products by condition: colors, sizes

Payment:

- On delivery

- Via MasterCard / Visacard

Orders:

- Product reviews

Requirement of the system:

Environment: The system works on the website using MERN Stack.

Authorization and Authentication:

- Customer: As soon as you've purchased anything, review it, provide your comments,pay for it, and add it to your favorites list

- Administrators have access to user data, order data, revenue statistics, and productadditions and checks

Convenient:

- Friendly with the user

- Simple to use

- The system's buttons are simple and straightforward to operate

- To make the user happy while using it, the layout must work nicely together

Effective:

- It must be simple to use and safe to store databases

- The system runs as smoothly as quickly as it can, accessing and processing data

Suitable:

- Different computers' installed systems can communicate with one another

- The system is safe for the system and can meet the customer's needs

Related to information technology staff:

Reusable:

- The designs and operations of the system can be reused for the upcoming update

or recreated for a particular operation

- The code may be applied to other applications

2 Add Review Customers can write reviews on the product.

3 Add/Edit/Delete Cart Customers can manage the products in the cart

4 View Product Customers can view the information of the

product

5 View Order Tracking Customers can view order tracking

6 Payment Customers can choose different types of

payment options

7 View order history Customers can view order history based on

transacted invoices

8 Sign Up Customers can register on the website

9 Sign In Customers can log in to the website

10 Forgot Password In case the customer forgets the password, It

can be recovered via email or phone numberverification

11 Edit Profile Customers can edit their information

12 Add products to wish list Customers can add products to wish list

13 Filter product Customers can filter products based on colors

and sizes

14 Search Customers can search the product they want

Table 1: Division (user): Customer

Division (user): Administrator ID: AD

1 Search Product The administrator can find exactly the products they

want

2 Edit Profile The administrator can edit their information

2 View Product The administrator can view the products

3 Edit Product The administrator can update the products

4 Delete Product The administrator can delete the products

5 Manage Order Status The administrator can manage the order status

6 View sales statistics The administrator can view sales statistics

7 Edit User The administrator can manage the users

8 Delete User The administrator can delete the users

9 Manage reviews The administrator can manage reviews

10 Hide/unhide review The administrator can hide or unhide the review

11 Search review The administrator can find the review of the product

12 View the order of the

customer

The administrator can view the order of the customer

13 Manage the wallet The administrator can manage the wallet

Table 2: Division (user): Administrator

1.4.3 Non-functional requirements:

User related:

1 The software may be

upgraded and changed

communicate with one

another to increase user

4 - Through installed

software, computers

connected to a network

can share resources

- The program may

fulfill user needs

1 - The module, source code, and

other system components can

be utilized again for next

projects

- The cores don't need to be

changed when the source

code is reused and applied to

new projects

Reusability

Table 4: Staff-related

Effectiveness Get online in no

more than threeseconds

Table 5: Quality

CHAPTER 2: THEORY FOUNDATION

2.1 MERN Stack Overview

MERN Stack is a collection of strong technologies to create scalable master webapplications with backend, frontend, and database components It is a user-friendly full-stack JavaScript framework for creating dynamic webpages and apps

MERN Stack consists of four main components:

MongoDB: A cross-platform document-oriented database application

Express.js: A web application framework for Node.js

React: JavaScript library used to create user interfaces

Node.js: An open source, cross-platform, JavaScript run-time environmentexecuting JavaScript code outside of a browser

2.2 MongoDB

2.2.1 What is MongoDB?

MongoDB is one of the most popular open-source NoSQL databases written inC++ It is also a document-oriented database that uses a dynamic schema to store data indocuments that resemble JSON It implies that we may store our records withoutworrying about data structure difficulties like the quantity of fields or the kinds of fieldsthat are used to hold values JSON objects and MongoDB documents are comparable

Figure 6: What is MongoDB?

2.2.2 Why should we use MongoDB?

MongoDB is a NoSQL database When our primary concern is handling a hugenumber of data with good performance, developers or project managers almost alwaysselect MongoDB MongoDB is the greatest option if we need to insert thousands ofentries in a single instant Additionally, in any RDBMS system, horizontal scaling(adding extra columns) is not a simple operation However, since MongoDB is a databasewithout a schema, it makes the process incredibly simple Additionally, the program mayautomatically handle this kind of job directly In MongoDB, performing any kind ofhorizontal scaling doesn't need any kind of administrative labor

MongoDB is good for the below types of situations:

- Product-based applications based on e-commerce

- Blog and Content Management Systems

- High-speed logging, caching, etc in the real-time

- The requirement to preserve location-specific geospatial data

- Keeping track of information pertaining to social and networking kinds

- The design may alter at any time if the application is a loosely connectedmechanism

2.3 Express.js

Express is a server-side framework for JavaScript that runs inside of js It isamong the top JavaScript Frameworks for backend development It gives the developer aplatform on which to build and manage reliable servers Express.js is used to rapidly andsimply create online and mobile apps Additionally, it gives Node.js HTTP (HyperTextTransfer Protocol) objects useful new features

2.4 React

React is a front-end JavaScript library that is free and open-source for creatinguser interfaces based on UI components

Figure 7: React

A virtual DOM is used by React.js to accelerate processing When data changes, avirtual DOM will compute the difference between the real object and tree and re-renderthe real DOM tree to aid with optimization A virtual DOM is a JavaScript object; eachobject includes all the information required to generate a DOM

2.5 Node.js

JavaScript code may be executed outside of a browser using the open-sourceserver environment Node.js, which is a cross-platform runtime environment It is not aframework nor is it a programming language It is frequently employed for creating anddeveloping a variety of backend services, including web and mobile apps It is mostlyused in production by large firms like Uber, PayPal, and Netflix

2.6 Socket IO

2.6.1 What is Socket IO?

To build a real-time application, you need to use Socketio Socketio will helpparties in different locations connect with each other, instantly transferring data throughintermediate servers Socketio can be used in many applications such as chat, onlinegames, updating the outcome of an ongoing match

Socketio is not a language, it is just a tool for real-time applications So it is not possible

to use socketio to completely replace one language, but it must be used in conjunctionwith another language That language can be php, asp.net, nodejs, etc

2.6.2 How to use?

This is where the socket will be installed The language for building servers can be

server is structured varies Here, if possible, it is recommended to use nodejs to buildservers, as it is possible to install socketio directly onto the same server If you use php,you will need to install other packages, or you will have to prepare a separate server torun socketio.

On the client side, the user interface will be built Here you can use js, or thelibraries of js such as jquery, Especially any language

CHAPTER 3: SYSTEM ANALYSIS AND DESIGN 3.1 Identify actors and functions in use case diagrams:

Customer

-Sign In / Sign Up-Forgot Password-Change Password-Edit Profile-View Order Status-Search Product-View Product Information-Filter product based on colors and sizes-Search Product

-Add/Edit/Delete Product to Cart-Add/Edit/Delete Product to Wish List-Write Customer Review

-Checkout-Logout

User

-Sign In / Sign Up-Log in

-Log out-View product information-Search

-Add/Edit/Delete Product to Cart-Add/Edit/Delete Product to Wish List

Administrator

-Login-Logout-Change/ Forgot Password-User Management

-Order Management

-Pay Salary Seller Management-Order Rollback Management-View sales statistics

Table 6: List of Actors and Use cases

3.2 Describe in detail each use case and actors:

-View transaction history-Product searching

-Filter product based on ratings and price ranges-Manage products in the cart

-Write customer review-Checkout

-Chat Facebook Plugin

Administrator

-Login to the website-Allow manager forgot password-Search Product

-Edit Profile-View Product-Edit Product-Delete Product-Manage Order Status-View Sale Statistics-Edit User

-Delete User-Manage reviews-View the orders of the customer

3.2.2 Describe use cases:

Order Use cases Description

1 Search Product Customers can find exactly the products they want

2 Add Review Customers can write reviews for the product

Customers can view order tracking

5 Payment Customers can choose different types of payments

(on delivery, by MasterCard / VisaCard)

6 View order

history

Customers can view order history based ontransacted invoices

7 Sign up Customers can register to the website

8 Sign In Customers can log in to the website

9 Forgot Password In case the customer forgets the password, it can be

recovered via email or phone number verification

12 Edit Profile Customers can edit their information

Customers can manage the products in the wish list

16 Search Product The administrator can find exactly the products

24 Create Product The administrator can create the products

26 Delete Product The administrator can delete the products

The administrator can interact with users

32 Logout The administrator can logout the website

Table 8: Describe use cases

CHAPTER 4: SOFTWARE DESIGN 4.1 Use case Diagram

4.1.1 Use case Overview

Figure 8: Use case overview diagram

4.2 Specification

4.2.1 Sign In

Figure 9: Sign InUse Case Name: Login ID:UC1 Importance: HighKey Actor: Customer,

Adminstrator Use Case Type: Detailed, Necessary

Related people and jobs of interest:

Customers want to log into the system to shop

Adminstrator wants to log into the system to participate in system management.Brief Description: This Use Case describes the process of logging in to thecustomer and management system

Constraints: Customers, Adminstrators choose the login function

Type: External (External)

Relationships: Combinations: Customers, Adminstrators

Table 9: Sign In

4.2.2 Manage Products

Main event lines

1 Adminstrators, customers choose the login function

1.1: Handle logins 1.2 Sign out

2 The system displays the result notification screen for transactions related tocustomers and adminstrators

Sub-event lines

2.1: Handling login

- Check account information

- Display successful or unsuccessful login message

2.2: Sign out

- - Display successful logout message

Use Case Name: Manage

Products

ID:UC2 Importance: High

Key Actor: Customer,

Adminstrator

Use Case Type: Detailed, Necessary

Interested people and work: Adminstrator wants to manage the product

Brief Description: This Use Case describes: Adminstrator wants to Add, delete, editproduct information

Constraints: Managers must log in with an Admin account to the system and selectthe product management function

Type: Internal

Relationships: Matching: Adminstrator

 Main event lines:

1 Log in to the system with an Admin account

2 Open the management function

3 Select the product management function

4 Display interface related to product management operations

Table 10: Manage Products

4.2.3 Manage Orders

Figure 11: Manage Orders

Use Case Name:

Manage Orders

ID:UC3 Importance: High

Key Actor:

Adminstrator

Use Case Type: Detailed, Necessary

Interested people and work: Adminstrator wants to manage the orders

Brief Description: This Use Case describes: Adminstrator wants to Add, delete,edit order status

Constraints: Managers must log in with an Admin account to the system andselect the order management function

Type: Internal

 Main event lines:

1 Log in to the system with an Admin account

2 Open the management function

3 Select the order management function

4 Display interface related to order management operations

Table 11: Manage Orders

4.2.4 Manage Account

Figure 12: Manage Account

Use Case Name:

Manage Account

ID:UC4 Importance: High

Key Actor: Adminstrator Use Case Type: Detailed, Necessary

Interested people and work: Adminstrator wants to manage the accounts

Brief Description: This Use Case describes: Adminstrator wants to add, delete, editthe account's access rights

Constraints: Managers must log in with an Admin account to the system and selectthe account management function

Type: Internal

Relationships: Matching: Adminstrator

 Main event lines:

1 Log in to the system with an Admin account

2 Open the account management function

3 Select the account management function

4 Display interface related to account management operations

Table 12: Manage Account