THE SOCIALIST REPUBLIC OF VIETNAMIndependence – Freedom– Happiness ---Ho Chi Minh City, January 20, 2024 GRADUATION PROJECT ASSIGNMENT Student name: Nguyễn Thanh Vy Student ID: 19110
INTRODUCTION
Introduction
In the midst of the digital revolution, where consumer behaviors are continuously evolving, the landscape of retail has undergone profound transformations E-commerce has emerged as a pivotal force, reshaping conventional shopping paradigms and ushering in an era of unparalleled convenience and accessibility Embracing this shift, we proudly present our graduation project, the “Nova Store” web application
The digital era has revolutionized the way consumers engage with businesses, particularly in the retail sector With the exponential growth of online shopping, consumers now enjoy unprecedented flexibility and convenience, browsing and purchasing products from the comfort of their homes Recognizing the significance of this trend, we have embarked on a journey to redefine the online shopping experience
Our cutting-edge web application is meticulously crafted to cater to the unique needs of an electronic store, offering a seamless and immersive platform for customers to explore and purchase products Designed with the latest technologies and user-centric principles,
“Nova Store” aims to elevate the online shopping journey, ensuring a delightful and intuitive experience for every visitor.
Reasons for choosing the project
The decision to focus on the development of a web application for "Nova Store" is grounded in several strategic considerations:
Expanding Market Reach: The retail sector, particularly in the electronics industry, offers significant opportunities for expansion By creating a web application, “Nova Store” can transcend the limitations of its physical location and target a wider audience across different regions This move breaks geographical barriers, allowing the store to tap into new markets, enhance brand exposure, and drive substantial sales growth
Competitive Advantage in the Digital Marketplace: In today's digital age, having an online presence is imperative for businesses to thrive Developing a web application for
“Nova Store” provides a crucial competitive edge in the digital marketplace By embracing technology and offering an intuitive online shopping platform, “Nova Store” distinguishes itself from competitors who rely solely on traditional brick-and-mortar stores This strategic move enables “Nova Store” to not only cater to the needs of tech-savvy consumers but also positions it as an innovative leader in the industry
In essence, the choice to focus on web application development for “Nova Store” is driven by the desire to seize growth opportunities, enhance market competitiveness, and establish a strong foothold in the dynamic landscape of e-commerce.
Project Objectives
User-Friendly Online Store Interface:
- Develop an intuitive website interface for seamless user navigation and interaction
- Design a visually appealing and easy-to-use layout
- Implement clear and intuitive navigation menus and search functionalities
- Ensure responsive design for compatibility across devices
- Enable users to search, purchase, and pay for products efficiently
- Develop a robust product search mechanism with filters and sorting options
- Implement a secure and streamlined checkout process with multiple payment options
- Integrate payment gateway for secure transactions
- Provide administrators with tools to manage the online store efficiently
- Design an admin dashboard with features for product management, order management, and customer management
- Implement functionalities for adding, editing, and removing products with ease
- Develop tools for order tracking, processing, and fulfillment
- Allow administrators to create and manage promotional offers
- Implement a coupon code system for discounts and promotions
- Provide functionalities for creating, editing, and tracking coupon usage
- Ensure secure and reliable coupon code validation during checkout
- Enable efficient organization and browsing of products
- Develop a hierarchical product category structure for easy navigation
- Implement tools for adding, editing, and deleting product categories
- Ensure seamless linking of products to relevant categories for intuitive browsing
- Enable administrators to track key metrics and make data-driven decisions
- Implement analytics tools to track website, user behavior, and sales performance
- Develop customizable reports for insights into product popularity
- Provide dashboards with visualizations for easy interpretation of data
- Efficiently manage the online store's product catalog to ensure accurate listings and availability
- Develop tools for adding, editing, and removing products, including details such as title, description, images, and pricing
- Provide options for categorizing products, assigning attributes, and managing product variants
- Streamline the process of handling customer orders from placement to fulfillment
- Develop functionalities for order status updates
- Implement tools for managing order details, such as customer information, payment status, and shipping preferences
- Ensure a smooth and reliable user experience while maintaining data integrity
- Design the website with fast loading times and minimal downtime
- Implement security measures to protect user data and transactions
- Conduct thorough testing to ensure usability, performance, and reliability
- Enhance the shopping experience by providing personalized product recommendations to users
• Provide personalized product recommendations based on user preference
THEORY FUNDAMENTAL
System Architecture
We use React.js and Redux Toolkit to craft the website's UI, followed by employing Node.js within the Express framework to build the back-end Before updating the MongoDB database, various logic events are implemented, all within the framework of the MVC model
Technologies Employed
React.js is a free and open-source front-end JavaScript library for building user interfaces based on components Because React is only concerned with the user interface and rendering components to the DOM, React applications often rely on libraries for routing and other client-side functionality
The frontend is divided into various components to create the user interface These components include the main page, login page, registration page, product search page, product details page, shopping cart, order management page, header, footer, …
To navigate between pages and display the corresponding contents:
We use the loader property to display a loader while routes or layouts are being loaded This helps improve the user experience during navigation between routes:
And there are ‘action’ Actions are called whenever the website sends a non-get submission ("post", "put", "patch", "delete") to our routes Login action example:
Redux is a state management library for React applications It helps manage the state of the entire application in an easy and controllable way: save login information (users, tokens), save/remove products in carts directly to the database,…
First, we uses a "store" to hold the entire state of the application The store is a JavaScript object that contains the application state and provides methods to access and update the state,
Using ‘reducers’ that take an action and the current state of the application, and return a new copy of the state Reducers define how the application state changes based on the action that has been dispatched:
To manage forms in our React application UseState hook returns a stateful value and a function to update that value UseEffect is a Hook that performs side effects in functional components which runs after every render of the component, it's used for data fetching, subscriptions, or manually changing the DOM… Beside that, our website also use useContext, useReducer, useCallback, useRef,…
Example of usage of useState and useEffect hook in Home page:
Figure 10 useState() and useEffect in Home page
The basic fomular is declare variable for useState(), and after call API in useEffect(), the state of variables is set to the data returned
To perform HTTP requests from our application from web browser to the server and handling responses, our website use Axios to create the customFetch function:
Helping us creating and managing CSS in React by using React components Instead of using separate CSS files, we can write CSS directly in our JavaScript code, making style management easier
Material-UI provides a set of reusable and customizable React components that follow Google's Material Design principles: buttons, forms, navigation bars, dialogs, and more, allowing developers to build consistent and visually appealing user interfaces while Ant Design provides a toolkit for designing and developing user interfaces for web and mobile applications, built on the React framework Originally developed to meet Alibaba's internal needs, Ant Design has become a popular open-source project in the software development community
Beside the css in styled-component, we use MUI in client user page and Antd in client admin page, helping our website look better with a user-friendly interface:
Socket.io-client is the client-side counterpart of Socket.IO, allowing web clients to establish a connection to a Socket.IO server Here we use to create support chat between authorized user and admin:
Figure 17 socket.io-client usage
Socket.emit to send data to server and socket.on to recieve data from server:
Figure 18 socket.io-client usage
Node.js is a cross-platform, open-source JavaScript runtime environment that can run on Windows, Linux, Unix, macOS, and more Node.js runs on the V8 JavaScript engine, and executes JavaScript code outside a web browser
Node.js lets developers use JavaScript to write command line tools and for server-side scripting The ability to run JavaScript code on the server is often used to generate dynamic web page content before the page is sent to the user's web browser
Express.js is a back-end web application framework for building RESTful APIs with Node.js, released as free and open-source software under the MIT License It is designed for building web applications and APIs It has been called the de facto standard server framework for Node.js Express is the back-end component of popular development stacks like the MEAN, MERN or MEVN stack, together with the MongoDB database software and a JavaScript front-end framework or library
Mongoose is an Object Data Modeling (ODM) library for MongoDB in Node.js It help connecting and interacting to MongoDB database We use Mongoose to define schemas, perform queries, and interact with MongoDB Product schema example:
Then, in controllers, we use schema models to interact with database: Blog controller example:
Jsonwebtoken help us to create and verify authentication tokens After successful user login, our server can create a token and send it to them Upon subsequent requests, we can verify this token to authenticate them:
We create createJWT and verifyJWT functions to create and verify token:
When user login, a new JWT token is create and send by cookie to user:
VerifyJWT funtion is used to identify user and admin right to do an action:
Router is a middleware that we use to handle different HTTP requests (GET, POST, PUT, DELETE, ) for specific paths or routes in our application We declare each router in separate files:
Then using them by express() app:
SYSTEM REQUIREMENTS
Current status survey
In the era of Industry 4.0, people are accustomed to using mobile apps or making phone calls to purchase items online This mode of transaction is exceptionally convenient for individuals who are either lazy or occupied with other tasks
When shopping online, customers can save time and transportation costs They don't have to worry about the distance to the store Additionally, e-commerce stores often offer discount codes for website members Furthermore, nowadays, there are increasingly diverse payment methods being utilized E-commerce platforms can support multiple payment methods, facilitating swift and efficient payment processing
Thegioididong.com is a brand under Mobile World Joint Stock Company (stock code: MWG), a retail conglomerate in Vietnam specializing in the retail of mobile phones, digital devices, and consumer electronics According to research by EMPEA, in 2014, Thegioididong.com held a 25% market share in the mobile phone retail sector in Vietnam, making it the largest enterprise in its field [1]
- The website offers a diverse range of product categories including mobile phones, tablets, laptops, watches, PCs, and accompanying accessories, providing plenty of choices for consumers
- Regular discounts and promotions help buyers save on shopping costs
- The website provides fast and convenient delivery service, along with good customer support through various communication channels
- Despite having many categories, the products within them are limited in terms of variety
- While the interface is beautiful, it's not yet user-friendly
- Lack of PayPal payment option
FPT Shop is a brand under FPT Digital Retail Joint Stock Company (abbreviated as FPT Retail, Securities code: FRT) Established in August 2007, FPT Shop is a retail chain specializing in digital products such as mobile phones, tablets, laptops, and electronic accessories FPT Shop is the first retail system in Vietnam to be awarded ISO 9001:2000 certification for quality management according to international standards Currently, FPT Shop is the second-largest retail chain in the technology retail market.[2]
- User-friendly and visually appealing interface
- The website offers numerous categories and diverse products
- Lack of PayPal payment option.
Functional requirements
1 Guest The user does not have an account.
2 Customer Users already have a customer account on this application.
3 Admin Users already have an admin account on this application.
1 Register Guest creates new account.
2 Login Customers, Admin can log in to website
3 Logout Customers, Admin can log out of the website
4 View all products Guest, customer can see the product list.
5 Filter product Guest, customer can find the product list.
6 Categories filter Guest, customer can filter product.
7 Add to Wishlist Customer can add product to wish list.
8 View Wishlist Customer can view all products in wish list.
9 Add to Cart Customer can add product to cart from wish list, product detail page or home page.
10 View cart list Customer can view all products in cart list.
11 Edit product in cart list Customer can edit products in cart list.
12 Checkout Customer can pay for their orders.
13 View product detail Guest and customer can view detail of product.
14 View profile Customers can view their profile.
15 Edit profile Customer can edit their profile.
16 View order history Customer can view order history.
17 Add review and rating Customers can add review and rating for products
18 View all product Admin can view all products.
19 Add new product Admin can add new products.
20 Edit product Admin can edit products.
21 Delete product Admin can delete products.
22 View all category Admin can view all category.
23 Add new category Admin can add new category
24 Edit category Admin can edit category.
25 Delete category Admin can delete category.
26 View all coupon Admin can view all coupon.
27 Add new coupon Admin can add new coupon
28 Edit coupon Admin can edit coupon.
25 Delete coupon Admin can delete coupon.
26 View all paid orders Admin can view all paid orders.
27 Edit the status orders Admin can edit the status of paid orders
28 View all customers Admin can view all customers.
29 Delete customer Admin can delete customer.
31 Add Event Admin can add event
32 Edit Event Admin can edit event
33 Add Blog Admin can add blog
Non-Functional requirements
2 Process data as quickly as possible.
3 Ensure the security of personal information about customers
4 Be simple to update and expand in the future
5 Maintain high integrity for customers
Modeling requirements
- Edit product in cart list
Use Case Diagrams
Figure 33 Use case diagram - System
Figure 34 Use case diagram Customer
Figure 35 Use case diagram Admin
Use Case Description
1 UC1-01 Register Create a new account
2 UC1-02 Login Log in to the system
3 UC1-03 Logout Log out of the system
4 UC1-04 Profile management Customer can edit profile
5 UC1-05 View products View the product
6 UC1-06 Search Product Search for products
7 UC1-07 Filter Product Filter for product
8 UC1-08 Cart management Customer CRUD product in cart
10 UC1-10 View order history View paid order history
11 UC1-11 Review and rating Add review and rating for products
12 UC1-12 Messages Chat with admin
Table 5 Use case actor Users
DESCRIPTION The customer registers an account
PRECONDITIONS The accessing device has an internet connection
The customer has accessed the website
POST-CONDITIONS Customer successfully registers an account
The system saves the account information in the database
BASIC - FLOW 1 The customer visits the registration page
2 Enter full name, phone number, email, password and click the registration button
3 The system checks the user information and saves to the database
4 The system navigates to the login page when registration is successful
EXCEPTION FLOW 3a The system checks whether the email and phone already exist, and shows the notification "Email or Phone already exists" if they do
DESCRIPTION The user logs in to the system using the registered account
PRECONDITIONS Already have an account
The accessing device has an internet connection
The customer has accessed the website
POST-CONDITIONS The customer successfully logs in to the system
The system records the successful login activity
BASIC - FLOW 1 The customer accesses the Login page
2 Enter email and password and click the Login button
3 The system authenticates the login information of the account
4 For a valid account, the system notifies the user of a successful login and grants access to the authorized system
EXCEPTION FLOW 4a For an invalid account, the system shows the notification
"Email or Password is not correct" and returns to step 2
USE CASE NAME Log out
DESCRIPTION Users log out of their previous session
POST-CONDITIONS The customer has no longer has access and cannot access to the authorized system
BASIC - FLOW 1 The customer clicks on their avatar and selects the 'Logout' button from dropdown menu
3 The system will display a prompt asking, "Do you want to log out?"
5 The system ends the login session and notifies of logged out
4b The system cancels the logout process
USE CASE NAME Profile Management
DESCRIPTION The customer views and edit their profile
POST-CONDITIONS The customer’s information changed
BASIC - FLOW 1 The customer clicks on their avatar and selects the 'Profile' button from dropdown menu
2 The system navigate to the profile page
3 User views and edits the information then clicks Save change
EXCEPTION FLOW 3a The system will notify "Invalid information" when the user inputs invalid information
Table 9 Use case Profile management
USE CASE NAME View products
DESCRIPTION The customer views the details of the product
PRECONDITIONS The customer has accessed the website
BASIC - FLOW 1 The customer navigates to the website and browses the available products
2 The customer clicks on a specific product of interest
3 The system redirects the customer to the product details page
4 The system retrieves and displays all relevant information about the selected product, includes: Product name,
Description, Price, Images, Customer reviews/ratings
5 The customer can view the product details and make an informed decision
EXCEPTION FLOW 4a If the selected product is not available or cannot be found, the system notifies the customer with an appropriate error message
Table 10 Use case View product
USE CASE NAME Search products
DESCRIPTION Customer search for the specific product
PRECONDITIONS The customer has accessed the website
BASIC - FLOW 1 The customer clicks on the search bar located on the navbar of the website
2 They enter the name of the product they want to search for
3 The system dynamically displays a drop-down menu with products that match the entered search query
2a The customer enters the name of the product they want to search for and clicks on the search icon
3b The system redirects the customer to the search page and displays the product list that matches the entered keyword
EXCEPTION FLOW 3c If no products match the entered search query, the system notifies the customer with a message indicating that no results were found
Table 11 Use case Search products
USE CASE NAME Filter Product
DESCRIPTION Customer can use filter to refine their product search results
PRECONDITIONS The customer has accessed the website
POST-CONDITIONS Display all products that match the filter
BASIC - FLOW 1 The customer clicks on the "Category" button
2 The product categories will be displayed in a drop-down menu
3 The system navigates to the category page and displays the product list that belongs to the selected category
4 The customer can further refine their search by selecting filters such as price range, size, …
5 After selecting the desired filters, the customer clicks the
6 The system retrieves the products that match the applied filters and displays them to the customer
EXCEPTION FLOW 6a If there are no products available in the selected category or with the applied filters, the system notifies the customer with a message indicating no results were found
Table 12 Use case Filter product
USE CASE NAME Add to Cart
DESCRIPTION Allows customers to add products to their shopping cart
PRECONDITIONS The customer has successfully logged in to the website
POST-CONDITIONS The product has been successfully added to the customer's cart list
BASIC - FLOW 1 The customer navigates to the product detail page and clicks on the "Buy now" button
2 The system adds the selected product to the customer's cart and navigates to the cart page
1a Instead of clicking on the "Buy now" button, the customer clicks on the "Add to cart" button on the product detail page 2a The system adds the selected product to the customer's cart
EXCEPTION FLOW 1b If the customer is not logged in yet, the system notifies the customer with a message to login first before allowing them to add the product to the cart
DESCRIPTION The customer completes the payment for the order
PRECONDITIONS The customer has logged in and added the product to the cart
POST-CONDITIONS The system creates a new order
BASIC - FLOW 1 The customer clicks on the “Cart” button, and the system navigates to the cart page
2 The customer clicks on the "Checkout" button, the system navigate to Payment page
3 The customer enters personal information required for payment
4 If available, the customer enters a coupon code
5 The system checks the validity of the coupon code and applies the discount if it is valid
6 The customer selects the preferred payment method among PayPal, Credit Card, or VnPay
7 The customer performs the checkout step to finalize the payment
8 Upon successful completion, the system creates an order and navigate to the order page
EXCEPTION FLOW 2a If the cart is empty, the system will navigate to the cart page 5a If the entered coupon code does not exist or has expired, the system notifies the customer with a message indicating
USE CASE NAME View order history
DESCRIPTION The customer view paid order
PRECONDITIONS The customer has logged in and completed the payment for at least one order
POST-CONDITIONS The system displays all orders associated with the customer
BASIC - FLOW 1 The customer clicks on their avatar and selects the 'Order' button from dropdown menu
2 The system navigates to the Order page and displays the list of orders belonging to this customer
EXCEPTION FLOW 2a The system will navigate to login page if the user is not logged in yet
Table 15 Use case View order history
USE CASE NAME Add review and rating
DESCRIPTION Enables customers to provide feedback and rating for products they have purchased
PRECONDITIONS The customer has logged in and completed the payment for this product at least once
POST-CONDITIONS The user's review and rating have been posted for the respective product
BASIC - FLOW 1 The customer navigates to any product they wish to review
2 The customer clicks on the “Review now” button associated with the product
3 The system presents options for the customer to choose a rating and write a review
4 After selecting the rating and writing the review, the customer clicks on the “Submit” button to post their review
EXCEPTION FLOW 2a If the customer is not logged in yet, the system notifies them with a message stating "Login to Review" before allowing them to proceed with adding a review and rating
Table 16 Use case Review and rating
DESCRIPTION Allows customers to ask any questions they may have directly to the shop's staff
PRECONDITIONS The customer has successfully logged in to the website
BASIC - FLOW 1 The customer clicks on the chat bubble located on the bottom right corner of the page to initiate a chat session
2 The customer enters their message in the chat interface and presses enter to send the message to the staff
1 UC2-01 Login Log in to the system
2 UC2-02 Logout Log out of the system
3 UC2-03 Add Product Add information of product
4 UC2-04 Edit Product Edit information of product
5 UC2-05 Add Category Add information of category
6 UC2-06 Edit Category Edit information of category
7 UC2-07 Add Coupon Add information of coupon
8 UC2-08 Edit Coupon Edit information of coupon
9 UC2-09 Add Event Add information of event
10 UC2-10 Edit Event Edit information of event
11 UC2-11 Customer management Edit status of customer account
12 UC2-12 Order management Edit status of order
13 UC2-13 Blog management CRUD information of blog
14 UC2-14 Statistics Store revenue statistics
15 UC2-15 Messages Chat with customer
16 UC2-16 Search product Search for product
DESCRIPTION The admin logs into the system using their assigned account credentials
PRECONDITIONS The admin already has an account in the system
POST-CONDITIONS The admin successfully logs into the system
BASIC - FLOW 1 The admin accesses the Login page of the system
2 The admin enters their email and password into the respective fields
3 The system authenticates the login information
4 If the account credentials are valid, the admin logs in successfully and gains access to the system
EXCEPTION FLOW 4a If the entered email or password is invalid, the system displays an error message stating: 'Invalid Email or Password.' The admin is prompted to retry entering the correct credentials
USE CASE NAME Log out
DESCRIPTION Admin log out of their previous session
PRECONDITIONS The admin is logged in successfully to the system
POST-CONDITIONS The admin no longer has access to the system and cannot perform any further actions
BASIC - FLOW 1 The admin clicks on the Logout button within the system interface The system will display a prompt asking, "Do you want to log out?"
3 The system ends the login session and return to the login page
3a The system cancels the logout process
USE CASE NAME Add Product
DESCRIPTION The admin adds a new product to the system
PRECONDITIONS The admin is logged in successfully and navigated to the dashboard page
POST-CONDITIONS The system adds the product information to the database
BASIC - FLOW 1 The admin selects "Product" from the Navigation bar on the left side of the screen and clicks on the “Add Product” button
2 The admin enters the necessary product information into the provided fields and clicks the Submit button after completing it
3 The system will insert new product to the database
EXCEPTION FLOW 2a If there are any missing information when entering the necessary product details, the system prompts the admin with an error message to correct it before proceeding with adding the product
Table 21 Use case Add Product
USE CASE NAME Edit Product
DESCRIPTION The admin edits the existing product in the database
PRECONDITIONS The admin is logged in successfully and navigated to the dashboard page
POST-CONDITIONS The system edits the existing product information in the database
BASIC - FLOW 1 The admin selects "Product" from the Navigation bar on the left side of the screen and clicks on the “Edit Product” button
2 The admin enters the change of product information into the provided fields and clicks the Submit button after completing it
3 The system will edit product in the database
EXCEPTION FLOW 2a If there are any missing information when entering the necessary product details, the system prompts the admin with an error message to correct it
Table 22 Use case Edit Product
USE CASE NAME Add Category
DESCRIPTION The admin adds a new category to the system
PRECONDITIONS The admin is logged in successfully and navigated to the dashboard page
POST-CONDITIONS The system adds the category information to the database
BASIC - FLOW 1 The admin selects "Category" from the Navigation bar on the left side of the screen and clicks on the “Add Category” button
2 The admin enters the necessary category information into the provided fields and clicks the Submit button after completing it
3 The system will insert new category to the database
EXCEPTION FLOW 2a If there are any missing information when entering the necessary category details, the system prompts the admin with an error message to correct it before proceeding with adding the category
Table 23 Use case Add Category
USE CASE NAME Edit Category
DESCRIPTION The admin edits the existing category in the database
PRECONDITIONS The admin is logged in successfully and navigated to the dashboard page
POST-CONDITIONS The system edits the existing category information in the database
BASIC - FLOW 1 The admin selects " Category " from the Navigation bar on the left side of the screen and clicks on the “Edit Category” button
2 The admin enters the change of category information into the provided fields and clicks the Submit button after completing it
3 The system will edit category in the database
EXCEPTION FLOW 2a If there are any missing information when entering the necessary category details, the system prompts the admin with an error message to correct it
Table 24 Use case Edit Category
USE CASE NAME Add Coupon
DESCRIPTION The admin adds a new coupon to the system
PRECONDITIONS The admin is logged in successfully and navigated to the dashboard page
POST-CONDITIONS The system adds the coupon information to the database
BASIC - FLOW 1 The admin selects "Coupon" from the Navigation bar on the left side of the screen and clicks on the “Add Coupon” button
2 The admin enters the necessary coupon information into the provided fields and clicks the Submit button after completing it
3 The system will insert new coupon to the database
EXCEPTION FLOW 2a If there are any missing information when entering the necessary coupon details, the system prompts the admin with an error message to correct it before proceeding with adding the coupon
Table 25 Use case Add Coupon
USE CASE NAME Edit Coupon
DESCRIPTION The admin edits the existing coupon in the database
PRECONDITIONS The admin is logged in successfully and navigated to the dashboard page
POST-CONDITIONS The system edits the existing coupon information in the database
BASIC - FLOW 1 The admin selects "Coupon" from the Navigation bar on the left side of the screen and clicks on the “Edit Coupon” button
2 The admin enters the change of coupon information into the provided fields and clicks the Submit button after completing it
3 The system will edit coupon in the database
EXCEPTION FLOW 2a If there are any missing information when entering the necessary coupon details, the system prompts the admin with an error message to correct it
Table 26 Use case Edit Coupon
USE CASE NAME Add Event
DESCRIPTION The admin edits the existing event in the database
PRECONDITIONS The admin is logged in successfully and navigated to the dashboard page
POST-CONDITIONS The system adds the event information to the database
BASIC - FLOW 1 The admin selects "Event" from the Navigation bar on the left side of the screen and clicks on the “Add Event” button
2 The admin enters the necessary event information into the provided fields and clicks the Submit button after completing it
3 The system will insert new event to the database
EXCEPTION FLOW 2a If there are any missing information when entering the necessary event details, the system prompts the admin with an error message to correct it before proceeding with adding the event
Table 27 Use case Add Event
USE CASE NAME Edit Event
DESCRIPTION The admin edits the existing event in the database
PRECONDITIONS The admin is logged in successfully and navigated to the dashboard page
POST-CONDITIONS The system edits the existing event information in the database
BASIC - FLOW 1 The admin selects "Event" from the Navigation bar on the left side of the screen and clicks on the “Edit Event” button
2 The admin enters the change of event information into the provided fields and clicks the Submit button after completing it
3 The system will edit event in the database
EXCEPTION FLOW 2a If there are any missing information when entering the necessary event details, the system prompts the admin with an error message to correct it
Table 28 Use case Edit Event
USE CASE NAME Customer management
DESCRIPTION The admin can view customer information and having the ability to restrict user access
PRECONDITIONS The admin is logged in successfully and navigated to the dashboard page
POST-CONDITIONS View all customer information and restrict customer access
BASIC - FLOW 1 The admin selects "Customer" from the Navigation bar on the left side of the screen
2 The admin chooses a specific customer, and the system navigates to the customer detail page
3 Display all information related to the customer, including order history, personal information, etc The admin has the option to restrict this user's access
Table 29 Use case Customer management
USE CASE NAME Order management
DESCRIPTION The admin edits the status orders
PRECONDITIONS Logged in successfully dashboard page
POST-CONDITIONS The order status is updated successfully
BASIC - FLOW 1 Admin visits the dashboard page
2 The admin selects "Order " in the Navigation bar on the left side of the screen
3 Admin choose one order and click "Edit" Button
4 Admin select the status they want to
Table 30 Use case Order management
USE CASE NAME Blog management
PRECONDITIONS Logged in successfully dashboard page
POST-CONDITIONS Blog is successfully updated
BASIC - FLOW 1 Admin access ‘Edit blog’ page
2 Admin looking for blog and choose ‘Edit’
3 Admin change the blog contents
2b Admin looking for blog and choose ‘Delete’
3b Admin confirm delete 3b1 Admin cancel delete 5a Admin cancel submit
EXCEPTION FLOW 5c If there are any missing information when entering the content, the system prompts the admin with an error message to correct it
Table 31 Use case Blog management
DESCRIPTION The administrator views the sales statistics
POST-CONDITIONS The system shows statistical information on the screen
BASIC - FLOW 1 Admin selects "Dashboard" in the Navigation bar on the left side of the screen
2 Admin select filter they want to see
3 The system displays statistical information on the screen
EXCEPTION FLOW 3a The admin select wrong filter format and system return error
PRECONDITIONS The admin has successfully logged in to the website
The customer has messaged the admin
POST-CONDITIONS The customer receives a message from the admin
BASIC - FLOW 1 Admin clicks on the 'Chat' button on the right-hand menu
2 Admin selects the user who has messaged them
3 Admin types the message into the chat interface and then presses enter to send the message to the customer
Sequence Diagram
Figure 40 Order history sequence diagram
Figure 41 Cart management sequence diagram
Figure 43 Add Product sequence diagram
Figure 44 Edit Product sequence diagram
Figure 45 Add Coupon sequence diagram
Figure 46 Delete Blog sequence diagram
Class Diagram
Database
No Attribute Type Domain Meaning Note
Default unique identifier for the table
6 salePrice Number Sale price of product
10 status Array Status of Product
12 viewed Number Number of times the product has been viewed
13 createdAt Date Date when the product was created
14 updatedAt Date Date when the product was last updated
No Attribute Type Domain Meaning Note
Default unique identifier for the table
2 quantity Interger Quantity of Product
No Attribute Type Domain Meaning Note
Default unique identifier for the table
2 fullName String Full name of the user
3 email String User's email address
5 phone String User's phone number
6 address String User' address information
8 avatar String URL/path for the user's avatar
10 isBlocked Boolean Indicates if the user is blocked or not
11 createdAt Date Date when the user account was created
12 updatedAt Date Date when the user account was last updated
No Attribute Type Domain Meaning Note
Default unique identifier for the table
2 name String Name of the category
4 image String URL/path for an image associated with the category
5 description String Description of the category
Reference to the parent category
No Attribute Type Domain Meaning Note
Default unique identifier for the table
2 name String Name of the coupon
3 description String Description of the coupon
4 startDay Date Start date of the coupon
5 endDay Date End date of the coupon
6 discountType String Type of coupon
7 discountValue Number Discount value offered by the coupon
8 maxDiscount Number Value maximum of discount can use
No Attribute Type Domain Meaning Note
Default unique identifier for the table
Reference to the user the cart belongs to
Array of products in the cart, each with a product reference and quantity
No Attribute Type Domain Meaning Note
Default unique identifier for the table
Array of objects containing references to products and quantities
3 totalPrice Number Total price of all items in the order
Reference to a coupon used in the order
String Payment intent associated with the order
6 orderStatus String Status of the order
Reference to the user who placed the order
8 createdAt Date Date when the order was created
9 updatedAt Date Date when the order was last updated
No Attribute Type Domain Meaning Note
2 Content String Content of comment
No Attribute Type Domain Meaning Note
Default unique identifier for the table
3 Title String Name of Blog
4 Image String Image of Blog
5 Content String Content of blog
No Attribute Type Domain Meaning Note
Default unique identifier for the table
3 content String Content of review
6 createdAt Date Date when the review was created
No Attribute Type Domain Meaning Note
Default unique identifier for the table
3 name String Name of the coupon
4 description String Description of the coupon
5 startDay Date Start date of the coupon
6 endDay Date End date of the coupon
7 discountType String Type of coupon
8 discountValue Number Discount value offered by the coupon
9 isActive Boolean Status of event
Application interfaces
1 Username Textbox For customers to input username
2 Phone number Textbox For customers to input phone number
3 Email Textbox For customers to input email
4 Password Text For customers to input password
5 Register Button Register account to system
6 Login Text For customers to return to login page
1 Email Textbox For customers to input email
2 Password Textbox For customers to input password
3 Login Button After clicking, redirect to homepage
4 Register Text Direct to customer register page
1 Username Textbox For customers to input username
2 Phone number Textbox For customers to input phone number
3 Email Textbox For customers to input email
4 Address Textbox Display the user's address
5 City address Drop menu User selects city address
6 District address Drop menu User selects district address
7 Ward address Drop menu User selects ward address
8 Home address Drop menu User selects home address
9 Update Button Update user information to profile
10 User image Image Display user image
11 Choose image Button User selects avatar image
1 Product name Text Name of Product
2 Product image Image Image of product
3 Product price Text Price of product
4 Purchase Button Purchase to product
5 Add to cart Button Add product to cart
6 Other Product Box Redirect to other product detail page
7 Other Attribute Button Redirect to other attribute product
8 Send Button Upload the review and rating
9 Open review section Button Open review section
10 Rating Button User select the rating
11 Review Textbox User enter the review
12 Product Blog Text View product blog
13 Specifications Text View product specifications
14 Average rating Text Product average rating
Table 48 Product detail interface object
1 Search bar Input Search for product
2 Category Select Button Select for the category and navigate to category page if selected
3 Wishlist Button Navigate to wishlist page
4 Cart Button Navigate to cart page
Button Select the action on menu
6 Category list Button Navigate to corresponding category page
7 Slider Banner Image Display banner image
8 Right Banner Image Display banner image
9 Flash Sale Box Display the product that want to flash sale
10 Recommendation Box Display the product for customer
11 Category title Text Display product image
12 List of products of each category
List Display list of products of each category
13 Blog New Box Navigate to blog page
1 Popular products of this category
Box Display a list of products that most popular in this category
3 Product grid Grid Grid of products belong to this category
1 Product image Image Display product image
2 Product name Text Display product name, after click, redirect to product detail page
3 Delete icon Button Delete product from cart
4 Cart icon Button Add product to cart
1 Product image Image Display product image
2 Product name Text Display product name, after click, redirect to product detail page
3 Delete icon Button Delete product from cart
4 Reduce icon Button Reduce the number of products in the shopping cart
5 Increase icon Button Increase the number of products in the shopping cart
6 Purchase Button Redirect to payment info page
1 Product info Image Display product info
2 User info Input Display full name, phone and email of user
3 User address Text Display user address
4 Apply coupon Input Enter a coupon to discount the amount
Select the payment method that the user wants to pay for
Table 53 Payment infor interface object
1 Status Radio Choose order status
2 Product List List product in order
3 Cancel Button Request Cancel order
1 Dashboard Button View the Statistical
7 Chat Button Chat with customer
10 Line chart Chart Revenue line chart
11 Pie Chart Chart Order status
12 Product sold Table Table product sold
13 Column chart Chart Revenue column chart
1 All Product Button View all product
2 Add Product Button Navigate to Add product
Button Add product to the system
Table 56 All product interface object
1 Product Name Textbox Enter Product Name
2 Product Description Textbox Enter the Product Description
3 Model Textbox Enter model name
4 Regular Price Textbox Enter the Regular Price
5 Sale Price Textbox Enter the Sale Price
6 Main Category Select Select the Main Category
7 SubCategory Select Select the Category Child
8 Cancel Button Back to dashboard
10 Submit Button Add product to system
11 Product Image Enter the Product Image
12 Attribute Enter the Product Attribute
Table 57 Add product interface object
1 Product Name Textbox Enter Product Name
2 Product Description Textbox Enter the Product Description
3 Model Textbox Enter model name
4 Regular Price Textbox Enter the Regular Price
5 Sale Price Textbox Enter the Sale Price
6 Main Category Select Select the Main Category
7 SubCategory Select Select the Category Child
8 Cancel Button Back to dashboard
10 Submit Button Add product to system
11 Product Image Enter the Product Image
12 Attribute Enter the Product Attribute
Table 58 Edit product interface object
1 All Categogy Button View all Categogy
2 Add Categogy Button Navigate to Add Categogy
3 Add Categogy Button Navigate to Add Categogy
Table 59 All category interface object
1 Category Name Textbox Enter Category Name
2 Slug Textbox Enter Category slug
3 Category Description Textbox Enter the Category Description
4 Parent category Textbox Enter the Category Specifications
5 Submit Button Add Category to system
Table 60 Add category interface object
1 Category Name Textbox Enter Category Name
2 Slug Textbox Enter Category slug
3 Category Description Textbox Enter the Category Description
4 Parent category Textbox Enter the Category Specifications
5 Submit Button Update Category to system
Table 61 Edit category interface object
1 All Coupon Button View all Coupon
2 Add Coupon Button Navigate to Add Coupon
3 All Event Button View all Event
4 Add Event Button Add Event to the system
7 Add Coupon Button Navigate to Add Coupon
Table 62 All Coupon interface object
1 Coupon Name Textbox Enter Coupon Name
2 Customer rank Select Choose customer rank can use
3 Number of usages Textbox Number of uses of the coupon
4 Max Discount Textbox Maximum Discount Amount
5 Code Textbox Code of Coupon
6 Type Select Type of coupon
7 Discount Textbox Enter the Coupon Discount
8 Coupon Description Textbox Enter the Coupon Description
9 Expiry Textbox Enter the Coupon Expiry
10 Customer Table Choose customer can use
Table 63 Add Coupon interface object
1 Coupon Name Textbox Enter Coupon Name
2 Customer rank Select Choose customer rank can use
3 Number of usages Textbox Number of uses of the coupon
4 Max Discount Textbox Maximum Discount Amount
5 Code Textbox Code of Coupon
6 Type Select Type of coupon
7 Discount Textbox Enter the Coupon Discount
8 Coupon Description Textbox Enter the Coupon Description
9 Expiry Textbox Enter the Coupon Expiry
10 Customer Table Choose customer can use
Table 64 Edit Coupon interface object
1 Add Event Button Navigate to Add event
2 View Event Button View detail event
Table 65 All Event interface object
1 Name Event Textbox Name of event
2 Description Textbox Description of event
4 Day Select Select day start, date end of event
5 Discount Textbox Discount of event
8 Information Text Check Information of Event
9 Done Button Add event to system
10 Previous Button Back to previous step
Table 66 Add event interface object
1 Name Event Textbox Name of event
2 Description Textbox Description of event
4 Day Select Select day start, date end of event
5 Discount Textbox Discount of event
8 Information Text Check Information of Event
9 Done Button Update information event to system
10 Previous Button Back to previous step
Table 67 Edit event interface object
1 Order list Table List order
2 View Order detail Button View Detail of order
3 Edit Order detail Button Edit Detail of order
3 Order status Select Select status of order
4 Cancel Button Back to Order
5 Submit Button Update order status
Table 69 Order detail interface object
1 View Button View profile of customer
1 Profile Text Profile of customer
2 Order Text Order of customer
3 Status Select Choose customer status
4 Cancel Button Back to Order
5 Submit Button Update order status
Table 71 Customer detail interface object
1 List customer List Choose customer to chat
2 History chat Text History of chat
3 Chat box Textbox Enter chat
1 All Blog Button Navigate to all blog
2 Add Blog Button Navigate to add blog
Table 73 All blog interface object
1 Title Textbox Enter Blog Title
2 Description Textbox Enter Blog Description
5 Cancel Button Back to All Blog
6 Submit Button Add Blog to system
Table 74 Add blog interface object
1 Title Textbox Enter Blog Title
2 Description Textbox Enter Blog Description
5 Cancel Button Back to All Blog
6 Submit Button Update Blog to system
Table 75 Add blog interface object
IMPLEMENTATION SYSTEM AND TESTING
Implementation
First, our backend is developed by the MongoDB database, we use MongoDB to store data from customers and sellers.
After selecting the database for our project we choose VSCode is an extremely popular and very positive IDE for developers to create projects because VSCode can add extensions of the programming language to help them run on IDE easily and VSCode has the extension visual studio live share extension can let we join the project together on the host IDE and we can code or debug together, we can log in that extension via GitHub.
First, the base technology we use to code around our project is ReactJS, that is based on JavaScript programming language using Functional Components to create functions for our project instead of Class Components
Next, we use the Redux Toolkit to manage the state and make global state and pass data from page to page easily
We use NodeJS and ExpressJS for writing an API for connecting to FrontEnd because NodeJS now is very common and easy to find solutions when we encounter some bug
• Upload project to GitHub, where it will be stored and managed
• Log in to Render using your GitHub account, the hosting platform and application management service
• Access the Render Dashboard page and select "New" to start creating a new web service
• From the list of options, choose "Web Service" to proceed with the deployment process
• Select "Build and deploy from a git repository" option
• Connect to the repository want to deploy
• Provide all necessary information about project
• If have any environment variables to configure, add them before proceeding Then, click on "Create Web Service" to initiate the deployment process
• Once you've filled in all the project information, the deployment process will commence After it's completed, you'll see the log message "Your service is live" indicating that your service is successfully deployed and running
Testing
ID Description Test steps Test data Expected
“Đăng nhập” button on the top right
Email: user@exam ple.com Phone Number:
Register successfully and direct to Login Page
Register successfully and direct to Login Page
Email: user@exam ple.com
“Đăng nhập” button on the top right
-Enter email and password -Click submit
Email: user@exam ple.com Password:
“Login successfully” and direct to Home Page
” and direct to Home Page
Log in with an account that doesn't exist
-Enter email and password -Click submit
Email or password is not correct”
” Email or password is not correct”
Log in with an account that is the wrong password
-Enter email and password -Click submit
Email: user@exam ple.com Password: example123
Email or password is not correct”
” Email or password is not correct”
-Access Admin Site -Enter email and password
Email: admin@gm ail.com Password: admin123
Alert: “Login Successfully” and direct to dashboard page
” and direct to dashboar d page
Customer add product to wishlist
-Login by customer -Click a heart icon on top right product card
Desired products will be added to the wishlist page
Desired products will be added to the wishlist page
-Login by customer -Select Wishlist in header
Display the list of desired products
Display the list of desired products
-Login by customer -Select Wishlist in header -Click trash bin icon on the right table
The product has deleted from wishlist
The product has deleted from wishlist
Add to Cart a product in
-Login by customer -Select Wishlist in header -Click button cart on the right table
The product will be added to the cart, and the Cart page will increment by 1 in the header.
The product will be added to the cart, and the Cart page will increment by 1 in the header.
Add to cart the product in product detail page.
-Login by customer -Choose any product
The product will be added to the cart, and the Cart page will increment by 1 in the header.
The product will be added to the cart, and the Cart page will increment by 1 in the header.
Add a product that already exists in the cart
-Login by customer -Choose any product
“Add to cart” button Back to home page- -Select the recently added product -Click
The Cart button's indicator does not increase, but on the Cart page, the product count increases by 1.
The Cart button's indicator does not increase, but on the Cart page, the product count increases by 1.
-Login by customer account -Select Cart button -Click on the minus (-) or plus (+) button on the product."
The quantity will update, subsequently updating the total price
The quantity will update, subsequentl y updating the total price
-Login by customer account -Select Cart button -Click delete icon
Delete product existed in table cart and subsequently updating the total price
Delete product existed in table cart and subsequentl y updating the total price
Payment -Login by customer account Select Cart
Success notification and redirect to the checkout page
Success notification and redirect to the
- Click continue button -Select payment method paypal -Enter user name and password paypal account
-Check total price and click Complete Purchase checkout page
Redirect to HomePage and disappear label Customer name in header.
Redirect to HomePage and disappear label Customer
The admin adds products on the admin page
-The Admin visits the dashboard page
"Product" in the Navigatio n bar on the left side of the screen
The system adds the product information to the database.
The system adds the product information to the database.
"Add" to upload the product to the system
-The Admin visits the dashboard page
"Coupon " in the Navigatio n bar on the left side of the screen
The system adds the coupon information to the database.
The system adds the coupon information to the database.
"Add" to upload the coupon to the system
-Admin visits the dashboard page
"Custome r" in the Navigatio n bar on the left side of the screen
The system deletes the customer information from the database.
The system deletes the customer information from the database.
CONCLUSION AND RECOMMENDATION
Knowledges and skills
Our team has achieved significant milestones in knowledge and skills development, particularly through our work on the MERN stack electronic commerce application
In terms of knowledge, we have mastered a range of cutting-edge technologies, from MongoDB, Express.js, React, to Node.js This proficiency has enabled us to build a flexible, efficient, and easily scalable application
Additionally, our team has acquired in-depth theoretical knowledge of React, Redux, Node.js, MongoDB, and other relevant technologies We have honed our skills in building both front-end and back-end components of the website, as well as designing and connecting databases This has empowered us to develop effective teamwork abilities, enhance logical thinking, and efficiently initiate projects while evenly distributing tasks among team members.
Product
Upon completing the project, our team successfully built a comprehensive e- commerce platform, tailored to meet the diverse needs of both sellers and buyers This platform not only includes product management and a secure payment system but is also optimized to provide the best possible user experience
With an intuitive interface and seamless payment integration, users can easily browse products, add them to their cart, and securely complete transactions The platform also offers robust product management features, enabling administrators to effortlessly add, edit, and monitor products, facilitating convenient customization of product catalogs
Additionally, we have crafted a smooth and convenient online shopping experience by presenting a diverse range of products with detailed information A user account management system has also been implemented to accommodate personalization, allowing users to easily update their personal information and manage their purchase history.
Strengths and drawbacks
The user-friendly and visually appealing interface, along with intuitive operations and extensive features, meets the fundamental needs of an e-commerce platform, guaranteeing a comfortable experience for customers In addition to easily purchasing products, customers can also access their purchase history and provide feedback on product quality directly on the website This not only captures genuine customer feedback but also enables customization of the shopping experience
The code is well-structured and divided into components, making maintenance straightforward and enabling flexible development of new features for the system
Lack of practical experience in building system architecture We should consider adding an additional module in manage products, delivery orders for admin
Further optimization for search engines (SEO) could improve the website's visibility and ranking in search results, driving more organic traffic
Recommendation is not the best opion for the website, it does not fit the customer’s need perfectly.
Future improvement
Enhance the user interface further
Incorporate shipping services for the store
Support for the mobile website version
Introduce product recommendation feature for individual users
Add a chatbot and improve website performance
[1] Thegioididong.com – Wikipedia: https://vi.wikipedia.org/wiki/Thegioididong.com [2] FPT Shop – Wikipedia: https://vi.wikipedia.org/wiki/FPT_Shop
1 Website: https://cellphones.com.vn/
2 Video: https://www.youtube.com/watch?v=5WxZviNombo&list=PLkVd4_IMjZgkwcX wnpy7tenGNBbRdiRO8
3 Video: https://www.youtube.com/watch?v=tEMrD9t85v4
4 Video: https://www.youtube.com/watch?v=rMiRZ1iRC0A
5 Video: https://www.youtube.com/watch?v=y66RgYMAgSo
6 Ant Design: https://ant.design/components/overview