Creating an e commerce website with mern stack

MINISTRY OF EDUCATION AND TRAINING HO CHI MINH CITY UNIVERSITY OF TECHNOLOGY AND EDUCATION 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 SKL 011439 Ho Chi Minh City, July 2023 MINISTRY OF EDUCATION AND TRAINING HO CHI MINH CITY UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY OF INFORMATION TECHNOLOGY  CAPSTONE PROJECT CREATING AN E-COMMERCE WEBSITE WITH MERN STACK MEMBERS: Mai Hồ An Thúy MSSV: 18110052 Hà Văn Cường MSSV: 18110003 INSTRUCTOR: Ms Mai Anh Thơ HO CHI MINH CITY – 2023 THE SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom – Happiness PROJECT ASSIGNMENT Student 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 ADVISOR Student Name: Mai Hồ An Thúy ID: 18110052 Student Name: Hà Văn Cường ID: 18110003 Major: Capstone Project Project title: Advisor: Creating an e-commerce website with MERN Stack Ms Mai Anh Thơ EVALUATION Content of the project: Strengths: Weaknesses: Approval for oral defense? (Approved or denied) Overall evaluation: (Excellent, Good, Fair, Poor) Mark: ……………… (in words: ) ADVISOR (Sign with full name) THE SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom– Happiness COMMENTARY OF REVIEWER Student 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 Content and workload of the project Strengths: Weaknesses: Approval for oral defense? (Approved or denied) Overall evaluation: (Excellent, Good, Fair, and Poor) Mark: ……………… (in words: ) REVIEWER (Sign with full name) ACKNOWLEDGEMENTS We would like to sincerely thank the professors at the Faculty of Information Technology, Department of Software Engineering and Communication, Ho Chi Minh City University of Technology and Education for their assistance in the completion of this 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 developed this 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 2.6.1 What is Socket IO? 27 2.6.2 How to use? 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.1 Overview UI 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 : Shoppe 13 Figure : Shoppe 13 Figure : Lazada 14 Figure : Sendo 15 Figure : Tiki 16 Figure : What is MongoDB? 25 Figure : React 27 Figure : Use case overview diagram 33 Figure : 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 31 : Sequence diagram Delete order 60