Building an cosmetics e commerce web application using net react

MINISTRY OF EDUCATION AND TRAINING HO CHI MINH CITY UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY FOR HIGH QUALITY TRAINING Ho Chi Minh City, July, 2022 CAPSTONE PROJECT INFORMATION T

MINISTRY OF EDUCATION AND TRAINING

HO CHI MINH CITY UNIVERSITY OF TECHNOLOGY AND EDUCATION

FACULTY FOR HIGH QUALITY TRAINING

Ho Chi Minh City, July, 2022

CAPSTONE PROJECT INFORMATION TECHNOLOGY

TRAN DANG TAM

S K L 0 0 9 6 2 2

BUILDING AN COSMETICS E-COMMERCE WEB

APPLICATION USING NET & REACT

LECTURER: LE VINH THINH STUDENT: TRUONG THI CAM

CAPSTONE PROJECT BUILDING AN COSMETICS E-COMMERCE WEB

APPLICATION USING NET & REACT

INSTRUCTOR: Mr Lê Vĩnh Thịnh

HCMC UNIVERSITY OF TECHNOLOGY AND EDUCATION

FACULTY OF INFORMATION TECHNOLOGY

- -

BỘ GIÁO DỤC VÀ ĐÀO TẠOBỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH

KHOA CÔNG NGHỆ THÔNG TIN

- -

Ho Chi Minh City, July 2022

CAPSTONE PROJECT BUILDING AN COSMETICS E-COMMERCE WEB

APPLICATION USING NET & REACT

INSTRUCTOR: Mr Lê Vĩnh Thịnh

HCMC UNIVERSITY OF TECHNOLOGY AND EDUCATION

FACULTY OF INFORMATION TECHNOLOGY

- -

BỘ GIÁO DỤC VÀ ĐÀO TẠOBỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH

KHOA CÔNG NGHỆ THÔNG TIN

- -

Ho Chi Minh City, July 2022

CAPSTONE PROJECT OBJECTIVES

Full name of student: Trương Thị Cam Student Id: 18110256 Full name of student: Trần Đăng Tâm Student Id: 18110359

Major: Information Technology

Project’s name: Building an cosmetics e-commerce web application using Net & React

Objectives:

Theory:

• Research NET, React, SQL server

• Research about Styled Component, Styled System, Pure React

Carousel, Chart.Js, Formik, Typescript…

• Research React framework: NextJS

• Research about Azure, Swagger UI,

• Deploy project to Azure Web Service

Practice:

• Build website with the following main features:

o Allow customers to browse products, add products to their shopping carts, checkout and pay for their purchases

o Customer can read real product reviews and wite review products that they bought

o Admin manage users, products, product categories, orders

SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom – Happiness

_

Ho Chi Minh City, … July 2022

• Deploy the database to Azure SQL Server

• Deploy frontend and backend to Azure Web Service

Execute time : 15 weeks (Start date from 7/3/2022 to 27/06/2022)

Head of industry Instructor’s name

ASSESSMENT FORM FOR INSTRUCTOR

Full name of student 1: Trương Thị Cam Student Id:18110256 Full name of student 2: Trần Đăng Tâm Student Id:18110359 Major: Information Technology

Project’s name: Building an cosmetics e-commerce web application using Net & React

Instructor’s full name: Mr Lê Vĩnh Thịnh

ASSESSMENT FORM FOR INSTRUCTOR

Full name of student 1: Trương Thị Cam Student Id:18110256 Full name of student 2: Trần Đăng Tâm Student Id:18110359 Major: Information Technology

Project’s name: Building an cosmetics e-commerce web application using Net & React

Reviewer’s full name: Mr Huỳnh Xuân Phụng

i

ACKNOWLEDGEMENTS

First of all, we would like to thank Mr Le Vinh Thinh, who directly supported the group during the process of choosing the topic, guiding, commenting, and giving suggestions as well as providing reference materials Overall, Mr, Thinh is really enthusiastic about guiding theories as well as programming skills, especially how to solve Once again, we would like to thank Mr Le Vinh Thinh

Secondly, we really appreciate the Faculty of Information Technology – Ho Chi Minh City University of Technology and Education’s support FIT HCMUTE creates all the most favorable conditions for us to reach the new technical knowledge and skills

We also would like to thank the teachers and classmates in the Department of Information Technology for their help in supporting us and providing a lot of useful information and knowledge to help us complete the project

With the conditions of time and limited experience of students, this report cannot avoid defects We look forward to receiving valuable comments from the teachers so that the group can improve the project in the future

We are sincerely grateful!

ii

INTRODUCTION

Nowadays, in the Era of Internet of Things, the rhythm of society becomes busier and hustling, and it is difficult to spend time shopping Concerns about time, location, unsafe traffic, bad weather, and limitations in traditional purchases can be avoided when shopping online Therefore, consumers and customers who are organizations, companies, are gradually switching to more online shopping to save time and effort

Therefore, online shopping is even more important and necessary, with just one click, they can get the product they want Online shopping has many advantages of being able to own everything Through mouse clicks, you do not need to go to place to buy After going to the sales website and selecting the product, just order, then they will bring the product to your home Online shopping allows purchases whenever you want The online stores are never closed on the internet, you can shop 24/7 Shopping in markets, commercial centers or shops is very difficult for you to compare the characteristics and prices of the product When buying online, you can easily compare and make the most suitable product choice for yourself Sometimes you encounter fastidious sellers at some sales locations With online shopping, customers do not have to pay attention to it anymore

As a result, we have launched an E-commerce website "CiTi Shop", specializing

in selling genuine cosmetics to customers who need cosmetics for beauty and health care

iii

CONTENTS

ACKNOWLEDGEMENTS i

INTRODUCTION ii

CONTENTS iii

LIST OF TABLES iv

LIST OF FIGURES vii

CHAPTER 1 OVERVIEW 1

1.1 Subject name 1

1.2 The reason for choosing the topic 1

1.3 Target 1

1.4 Technology 2

1.5 Research methods 2

CHAPTER 2 THEORETICAL BASIS 3

2.1 React framework ( NextJS) 3

2.2 Introduction to NET 4

2.3 Introduction to SQL Server 5

CHAPTER 3: SURVEYS AND REQUIREMENTS DETERMINATION 6

3.1 Survey of the current cosmetic stores online 6

3.2 Conclusion 9

CHAPTER 4: SYSTEM ANALYSIS AND DESIGN 11

4.1 Use Case Diagram 11

4.2 Use Case detail 11

4.3 Sequence diagram 40

iv

4.4 Database Diagram 63

4.5 User Interface (UI) 64

CHAPTER 5: CONCLUSION 90

5.1 Results 90

5.2 Pros 90

5.3 Cons 90

5.4 Development direction 91

REFERENCES 92

iv

LIST OF TABLES

Table 1: User role 10

Table 2: User Case Overview 12

Table 3: Use Case Sign Up 14

Table 4: Use Case Log in 15

Table 5: Use Case View Home page 16

Table 6: Use Case View product 17

Table 7: Use Case View promotion 18

Table 8: View Support page 19

Table 9: Use Case View product details 20

Table 10: View discount details 21

Table 11: Use Case Chat 22

Table 12: Use Case Log out 23

Table 13: Use Case Personal information management 24

Table 14: Usecase Personal account management 25

Table 15: Usecase Search product 26

Table 16: Usecase Order Product 27

Table 17: Usecase Add to cart 29

Table 18: Usecase Remove product from cart 30

Table 19: Usecase Payment 31

Table 20: Usecase Order tracking 32

Table 21: Usecase Comment & rating 33

Table 22: Usecase Admin page 34

Table 23: Usecase User account management 34

Table 24: Usecase Product management 35

v

Table 25:Usecase Category management 36

Table 26:Usecase Discount management 37

Table 27: Usecase Order management 38

Table 28: Usecase Stats 39

Table 29: UI Overview 64

Table 30: Header (UI_01) 65

Table 31: Home page (UI_02) 68

Table 32: Cart PopOver (UI_03) 69

Table 33: Search Page (UI_04) 71

Table 34: Login Page (UI_05) 72

Table 35: Register page (UI_06) 73

Table 36: Cart Page (UI_07) 74

Table 37: Products List Page (UI_08) 75

Table 38: Detail of Product Page (UI_09) 77

Table 39: Payment Page (UI_10) 77

Table 40: Receiver information (UI_11) 78

Table 41: Manage Product Page (UI_12) 79

Table 42: Modal Create Product (UI_13) 80

Table 43: Modal Create Address (UI_14) 81

Table 44: User Info Page (UI_15) 82

Table 45: Manage Order Page (UI_16) 82

Table 46: Stats (UI_17) 83

Table 47: Manage Address page (UI_18) 84

Table 48: Setting account (UI_19) 85

Table 49: Order Tracking (UI_20) 86

vi

Table 50: Detail of Order (UI_21) 86

Table 51: Modal Add comment & rating (UI_22) 87

Table 52: Footer (UI_23) 88

Table 53: Chatbot (UI_24) 89

vii

LIST OF FIGURES

Figure 1: Introduction to NextJS 4

Figure 2: The website Hasaki.vn 6

Figure 3: The website Guadian.com.vn 7

Figure 4: The website Nuty.vn 8

Figure 5: Use Case Diagram 11

Figure 6: Sign up sequence diagram 41

Figure 7: Log in sequence diagram 42

Figure 8: View Home page sequence diagram 43

Figure 9: View product sequence diagram 44

Figure 10: View Promotion sequence diagram 44

Figure 11: View Support page sequence diagram 45

Figure 12: View product details sequence diagram 46

Figure 13: View discount details sequence diagram 46

Figure 14: Chat sequence diagram 47

Figure 15: Log out sequence diagram 48

Figure 16: Personal information management sequence diagram 49

Figure 17: Personal account management sequence diagram 50

Figure 18: Search product sequence diagram 51

Figure 19: Order Product sequence diagram 51

Figure 20: Add to cart sequence diagram 52

Figure 21: Remove from cart sequence diagram 53

Figure 22: Payment sequence diagram 54

Figure 23: Order tracking sequence diagram 55

Figure 24: Comment & rating sequence diagram 56

viii

Figure 25: Admin page sequence diagram 57

Figure 26: User account management sequence diagram 58

Figure 27: Product management sequence diagram 59

Figure 28: Category management sequence diagram 60

Figure 29: Discount management sequence diagram 61

Figure 30: Order management sequence diagram 62

Figure 31: View stats sequence diagram 63

Figure 32: Database Diagram 63

Figure 33: Header (UI_01) 65

Figure 34: Home page (UI_02) - 1 66

Figure 35: Home page (UI_02) - 2 66

Figure 36 Home page (UI_02) - 3 67

Figure 37 Home page (UI_02) - 4 67

Figure 38 Home page (UI_02) - 5 67

Figure 39 Home page (UI_02) – 6 67

Figure 40: Cart PopOver (UI_03) 69

Figure 41: Search Page (UI_04) 71

Figure 42: Login Page (UI_05) 72

Figure 43: Register page (UI_06) 73

Figure 44: Cart Page (UI_07) 74

Figure 45: Products List Page (UI_08) 75

Figure 46: Detail of Product Page (UI_09) - 1 76

Figure 47: Detail of Product Page (UI_09) - 2 76

Figure 48: Payment Page (UI_10) 77

Figure 49: Receiver information (UI_11) 78

ix

Figure 50: Manage Product Page (UI_12) 79

Figure 51: Modal Create Product (UI_13) 80

Figure 52: Modal Create Address (UI_14) 81

Figure 53: User Info Page (UI_15) 81

Figure 54: Manage Order Page (UI_16) 82

Figure 55: Stats (UI_17) 83

Figure 56: Manage Address page (UI_18) 84

Figure 57: Setting account (UI_19) 85

Figure 58: Order Tracking (UI_20) 85

Figure 59: Detail of Order (UI_21) 86

Figure 60: Modal Add comment & rating (UI_22) 87

Figure 61: Footer (UI_23) 88

Figure 62: Chatbot (UI_24) 89

CHAPTER 1 OVERVIEW

1

CHAPTER 1 OVERVIEW

1.1 Subject name

Building an cosmetics e-commerce web application CiTi Shop

1.2 The reason for choosing the topic

Nowadays, there are varieties of cosmetics available in the market than ever before, it quite obvious to us that they play a crucial role in our day to day life, Cosmetics are essentials of daily life Beauty needs as demand is indispensable, the skin care center, spa, continuously appear to serve the beauty for our customers Besides, customers can also order beauty needs at home Cosmetic has met the necessary requirements for their clients The use of cosmetics not only for beauty but also have many different effects in the body wellness

And in the Era of Internet of Things, the rhythm of society becomes busier and hustling, and it is difficult to spend time shopping So, online shopping is even more important and necessary, with just one click, they can get the product they want Online shopping has many advantages of being able to own everything

Therefore we have idea to build an E-commerce website "CiTi Shop", specializing in selling genuine cosmetics to customers who need cosmetics for beauty and health care

1.3 Target

1.3.1 Result

The goal of the project is to be able to apply the knowledge learned to be able to build a web platform for customers to shop smoothly and the store owner can manage the store well

Building website with:

- A user-friendly interface

- Management functions such as account management, orders, promotions, products and functions for customers such as ordering, viewing order information

- Ensure security features for users and customers

- Allow additional, deleted, updated products, products, promotions into database

- Display a list of business products by each type

- Display the list of products customers have chosen to buy

- Display customer information, allows updating information

Website is built by:

- Frontend: using React framework (NextJS), we learn about Bootstrap, HTML, CSS, Styled Component, Styled System, Pure React Carousel, Chart.Js, Formik, Typescript for interface design

- Backend: using Net 6

- Database: using SQL Server

- Deploy: using Azure Web Service

1.5 Research methods

- Researching documents, websites and video related to applied technologies

- Refer to the videos on Youtube

- Consult with instructors and classmates

CHAPTER 2 THEORETICAL BASIS

3

CHAPTER 2 THEORETICAL BASIS

2.1 React framework (NextJS)

2.1.1 Introduction to the React

React (also known as React.js or ReactJS) is a free and open-source front-end JavaScript library for building user interfaces based on UI components It is maintained by Meta (formerly Facebook) and a community of individual developers and companies

By library, they mean React provides helpful functions to build UI, but leaves it up to the developer where to use those functions in their application Part of React’s success

is that it is relatively unopinionated about the other aspects of building applications This has resulted in a flourishing ecosystem of third-party tools and solutions It also means, however, that building a complete React application from the ground up requires some effort Developers need to spend time configuring tools and reinventing solutions for common application requirements

2.1.2 Introduction to the NextJS

Next.js is a React framework that gives you building blocks to create web applications

By framework, we mean Next.js handles the tooling and configuration needed for React, and provides additional structure, features, and optimizations for your application Next.js allows some or all of the website to be rendered on the server-side before being sent to the client and it is one of the most popular frameworks for React

You can use React to build your UI, then incrementally adopt Next.js features to solve common application requirements such as routing, data fetching, integrations - all while improving the developer and end-user experience

CHAPTER 2 THEORETICAL BASIS

2.2.2 Why use NET 6

.NET 6 delivers the final parts of the NET unification plan that started with NET 5 .NET 6 unifies the SDK, base libraries, and runtime across mobile, desktop, IoT, and cloud apps In addition to this unification, the NET 6 ecosystem offers:

- Simplified development: Getting started is easy New language features in C# 10 reduce the amount of code you need to write And investments in the web stack and minimal APIs make it easy to quickly write smaller, faster microservices

- Better performance: NET 6 is the fastest full stack web framework, which lowers compute costs if you're running in the cloud

CHAPTER 2 THEORETICAL BASIS

5

- Ultimate productivity: NET 6 and Visual Studio 2022 provide hot reload, new git tooling, intelligent code editing, robust diagnostics and testing tools, and better team collaboration

.NET 6 is a true unified development platform that allows developers to build applications for cloud, web, desktop, mobile, gaming, IoT and AI All these sub platforms share common base class libraries, APIs and underlying infrastructure including language and compilers

SQL Server is primarily designed and developed to compete with MySQL and Oracle database SQL Server supports ANSI SQL, which is the standard SQL (Structured Query Language) language However, SQL Server comes with its own implementation

of the SQL language, T-SQL (Transact-SQL) T-SQL is a Microsoft propriety Language known as Transact-SQL It provides further capabilities of declaring variable, exception

CHAPTER 3: SURVEYS AND REQUIREMENTS DETERMINATION

6

CHAPTER 3: SURVEYS AND REQUIREMENTS DETERMINATION

3.1 Survey of the current cosmetic stores online

- Division of detailed categories

- Search function displays specific product information

- Diverse filters

- Point points for customers and have changed points into gifts

- Manage the application to buy both online and offline at the store

- Support payment of ATM cards and Visa cards, MasterCard

CHAPTER 3: SURVEYS AND REQUIREMENTS DETERMINATION

7

- Display the evaluation, comments of the product buyer and the discussion, ask questions from customers when viewing the product

Disadvantages:

- The homepage interface is too many details, slightly confused

- On the product list page, there is no purchase button/added to the cart

- Banner ads do not slide itself

3.1.2 Guadian

Guadian.com.vn serves the shopping object of the Guardian store chain in Vietnam

Figure 3: The website Guadian.com.vn

Advantages:

- Striking colors

CHAPTER 3: SURVEYS AND REQUIREMENTS DETERMINATION

8

- Banner advertising slide slides

- List of products divided by categories: body care, beautiful, skin care

- Genuine makeup

- Filter by brand and price

- Support for payment of electronic wallets

- There is product review from users

Disadvantages:

- Advertising promotional information on top of the display page is not heterogeneous width width

- There is no payment via payment card, credit card, debit card

- Payment page separating Navbar and Footer

- Brand page separated according to the alphabet, no image, brand logo

3.1.3 Nuty Cosmetics

Nuty.vn is an ecommerce website of Nuty Cosmetics designed by Suntory Media

Figure 4: The website Nuty.vn

Advantages:

- Eye-catching main colors, creating a pleasant feeling

- Classification of products by large portfolio: makeup, bodycare, skincare, to help users easily use

CHAPTER 3: SURVEYS AND REQUIREMENTS DETERMINATION

9

- Search by products on the specific list

- Very detailed portfolio

Disadvantages:

- Cart does not automatically update

- When pressed, will buy immediately and pay all products in the cart

- There is no method of payment via card or e-wallet

- Load the page for a long time

- Navbar shopping cart does not update the amount as in the cart

- Banner ads has many items but they does not run automatically

3.2 Conclusion

3.2.1 Advantages to absorb

- UI is friendly, the colours are eye-catching

- The interface is easy to use, no need to see the instructions can still shop

- There is an account system to store customer information as well as buy applications

- Responsive interface according to equipment size

- There is a button purchased on the product item according to the list

- Integrated payment via card/e-wallet

3.2.2 Disadvantages to avoid

- Website interface is too long

- Display the error information

- Limit unnecessary items

- Order now display payment for the cart

CHAPTER 3: SURVEYS AND REQUIREMENTS DETERMINATION

10

3.3 Requirements determination

3.3.1 User role

Table 1: User role

not logged in to system

They can interact with the system but cannot purchase items, rates and comments

They are similar to guests but they can make purchases items, rates and comments

actor who manages a website that can manage everything For example manage categories, products, users, orders

- Good traffic tolerance

- Confidentiality of customer information

- Ensure good quality of user experience

CHAPTER 4: SYSTEM ANALYSIS AND DESIGN

11

CHAPTER 4: SYSTEM ANALYSIS AND DESIGN

4.1 Use Case Diagram

Figure 5: Use Case Diagram

4.2 Use Case detail

4.2.1 System overview Use Case

CHAPTER 4: SYSTEM ANALYSIS AND DESIGN

12

Table 2: User Case Overview

become a user of the system

such as price, rate, review,…

management

Manage personal information (name, address, profile picture, phone number), user can edit and update

CHAPTER 4: SYSTEM ANALYSIS AND DESIGN

UC_14.3 Remove product from

cart

This function allows user to remove products that they don’t want to buy from cart

product purchased

management

Manage users in the system, admin can update password and block user

CHAPTER 4: SYSTEM ANALYSIS AND DESIGN

4.2.2 Use Case description

a Use Case Sign up

Table 3: Use Case Sign Up

User Case ID UC_01

Pre-conditions

CHAPTER 4: SYSTEM ANALYSIS AND DESIGN

15

Post-conditions Success: System redirects to Homepage and log in account

Fail: Show error message

2 System displaying page to enter account registration information, registration button, login button (if you already have an account)

3 Users click on registration

4 The system will check the registration information

5 Mail confirmation system for users via registered email

6 Notice of registration status

Open Issues

b Use Case Log in

Table 4: Use Case Log in

User Case ID UC_02

CHAPTER 4: SYSTEM ANALYSIS AND DESIGN

16

Pre-conditions Had account

Post-conditions Success: Notifications successfully and go to the home page

Fail: Notifications username or password incorrect

2 System displaying login page to enter accounts, passwords and login buttons

3 Users click on the login button

4 The system will check the account and password

5 Notice of login status

6 Based on authorization information, leading customers to the homepage interface

Open Issues

c Use Case View Home page

Table 5: Use Case View Home page

CHAPTER 4: SYSTEM ANALYSIS AND DESIGN

17

Pre-conditions

Post-conditions

2 System displaying homepage

Open Issues

d Use Case View product

Table 6: Use Case View product

CHAPTER 4: SYSTEM ANALYSIS AND DESIGN

18

Pre-conditions

Post-conditions

2 Users choose product items on the homepage

3 System displaying page interface all products of the store

Exception

Open Issues

Relationship

e Use Case View promotion

Table 7: Use Case View promotion

CHAPTER 4: SYSTEM ANALYSIS AND DESIGN

19

Pre-conditions

Post-conditions

2 Users choose promotional items on the homepage

3 System displaying promotion page

Exception

Open Issues

Relationship

f Use Case View Support page

Table 8: View Support page

CHAPTER 4: SYSTEM ANALYSIS AND DESIGN

20

Pre-conditions

Post-conditions

2 Users choose customer support on the homepage

3 System displaying support page

4 Users search for information related to questions

5 Search results display system are information related to user questions

Exception

Open Issues

Relationship

g Use Case View product details

Table 9: Use Case View product details

CHAPTER 4: SYSTEM ANALYSIS AND DESIGN

21

Pre-conditions

Post-conditions

2 Click on the product you want to see details

3 System displaying product detailed page

Exception

Open Issues

Relationship

h Use Case View discount details

Table 10: View discount details