Major- Information Technology Subject- Build An Grocery Store Website.pdf

MongoDB Database: Providing an explanation of the MongoDB database and why we use MongoDB Compass for storing and managing data for the online grocery store website.. Explaining how Reac

SUPERVISOR: MR.VU THANH HIEN

Group: 2

1.Nguyén Anh Tuan Student’s ID: 2011061247 Class20DTHQA1

Ho Chi Minh City, 2023

DECLARATION

| hereby declare that our web specialization project at HUTECH University,

under the guidance of Dr Vu Thanh Hien, has been carried out with honesty

and reliability We pledge that all parts of the project are the result of our collective effort and dedication as a team, consisting of Do Luong Huan and Nguyen Anh Tuan

We affirm that we have adhered to the regulations and procedures of

HUTECH University throughout the project implementation All information, data, and resources used in the project have been properly cited and referenced in the appropriate sections

We guarantee that our web specialization project meets all the requirements and objectives set forth We have conducted testing, evaluation, and quality

assurance measures to ensure the completeness and excellence of the

project

We assure that we have approached the project with a spirit of collaboration

and high ethical standards We have not violated any rules, principles, or rights of HUTECH University or any related parties We commit that we have provided detailed, truthful, and timely information and reports

We understand that non-compliance or violations of regulations and

procedures may have legal or disciplinary consequences from HUTECH

University We are ready to take responsibility for any infringements that

may occur during the project implementation

This declaration is written based on our sincerity and honesty, and it represents our web specialization project at HUTECH University under the

guidance of Dr Vu Thanh Hien, along with the contributions of Do Luong Huan and Nguyen Anh Tuan

Contents

=9 7109) 2177Ẽ 8 -ậa 1 CHAPTER 1: INTRODUCTION LH TH HH KH Hit 3 Project Rational@ HH HH TH TH Ki ng kg 3 Project Obj©CÏVe HH nh TH TH HH KH KH TK TK 4 Hesearch Objectives and SCope TH HH HH HH kh thiệt 5 CHAPTER 2: Theoretical Foundation - cLnnnn HT TH HH TH KH khu 6 FAN 90(029)2LẺađiiaaadđaiiiiiiiiaiai 6 2.1.1 MongoDB CornpaSsS LH TH nh 6 2.1.2 React and Node.jS HH HH nhe ghi k kh 7 2.1.3 EXDF©ƠSS.]S LH TH TT HH TK KH kh nh 8 2.1.4 REST#UL APL ‹‹(iịiA án SẼ 8

2.1.5 HTML, CSS, and JavaScrÏpt TT SH ng nnH HH ket 9

2.1.6 Babel and Webpack ng HH ng HT ng ch 10 2.2 User Interface (UI) / User Experience (UJX) Design -ẶẶẶc.+c+csece 11 NĨ oinnhiiii4(.( 12

122009 9n (3a 13 2.3 System Developmen† - SH nH TT TH HH KH KH kiệt 14 2.3.1 Database Crea†iOn LH TH HH HH KH KH KH kiệt 15 2.3.2 Building the Back-End c HT HH ng kh tk kh 16 2.3.3 Building the Front-End nh HH khrrt 17 2.4 Testing and Bug Fixing Tnhh ngà 18 2.5 Deployment and Operation LH TH KH kiệt 18 2.6 Evaluation and lmprovemerni - ¡nàn nh khi 19 2.7 CONCIUSION 0 Ắ.G 4i 19 CHAPTER 3: Experimental ÄeSUIfS - HT TH 20

“hàn iei9(((ldiiiiiiiiiiiiiiiiŸŸ 20 3.1.1 Login FunctionalÏfy - - ch nh kg 20 3.1.2 Purchase FunctionalÌfy - ch nh nh nh nh kh kh kh nhiệt 21 3.1.3 Cart FunictionalÏfy HH TH TH HH 22 3.1.4 Payment FunctionalÌÏy - nhàn HH HH khen tk nhà 23 3.1.5 Search FunctionalÏfy - ch TH Tnhh 24 3.1.6 Purchase History FunctionalÌfy ch nh ket 25 3.1.7 Add Product FunctionalÏfy .- ch Tnhh kh net 26

=9 ¡9 nh jaaaIaaăă - 27 3.3 Description of US©-C8S@S LH HH TH nen KH kh ng 31 3.3.1 Description of LOQÌN: - ác nàn nh KH nh 31 3.3.2 Description of PurchaS©: HH HH nh kh kết 32 3.3.3 Description Of CAFÄ: HH HH HH KH KH kHkệt 33 3.3.4 Description of Payrm@niÏ: ch» nh KH kh kh kiệt 34 3.3.5 Description Of S©arCh: ch HT TH * 35 3.3.6 Description of Purchase HS†Ory: chen kh ket 36 3.3.7 Description of Add P?rodUCT: c cà nHnnH»nh nàn ng kh tk ch 37

CHAPTER 1: INTRODUCTION

Nowadays, there are numerous companies and stores in the market that trade

various goods such as phones, computers, clothing, and more Consequently, the demand for promoting the image of companies and stores is increasing, leading to

investments and expansions in various aspects Widely introducing products to the

public and expanding the market is an essential part of the business development

customers However, the majority of them still prefer the trend of online shopping

and browsing product images and prices through websites before visiting the store

or making online purchases and payments directly on the website Therefore, building an attractive and impressive online store website will help promote the store and contribute to its development and success in the fresh food retail sector There are two fundamental technology platforms applied to build the retail system: mobile applications and websites However, mobile applications have certain limitations Users need to download the application on their mobile devices

to access the online shopping system Additionally, when an application has a new version, users must update it to utilize new features On the other hand, designing

a website can overcome these issues Users only need to access the website through

a browser on their computer or mobile device, and it will automatically update

without affecting their usage Developers only need to design a website that

displays beautifully on stable web browsers, which are more reliable compared to

mobile devices

By having a well-crafted and engaging website, it will create a more

enjoyable and interesting experience for users, enhancing their satisfaction and trust in the online grocery store Additionally, a visually appealing website with intuitive navigation and comprehensive product information will attract more visitors and increase the chances of converting them into loyal customers

3

Moreover, a website provides the opportunity to integrate various marketing and promotional strategies, such as offering discounts, showcasing customer reviews, and implementing personalized recommendations These features contribute to creating a dynamic and interactive shopping experience, making customers feel valued and more inclined to make purchases

In conclusion, building an exceptional online grocery store website is crucial for promoting and succeeding in the fresh food retail industry By utilizing the advantages of websites over mobile applications, such as accessibility, ease of

updating, and compatibility, businesses can provide an enjoyable and seamless shopping experience, ultimately driving growth and establishing a strong presence

in the market

Project Objective

The website serves as a direct distribution platform for showcasing and selling the store's products and services to customers through online shopping activities It aims to provide convenience and time-saving benefits to customers

With the website, customers have a wide range of choices and can easily compare

prices of products across different online shopping platforms Therefore, it is crucial to design a website with an attractive and user-friendly interface, ensuring

easy accessibility for customers

The website's design should focus on creating a visually appealing and intuitive interface that captivates users It should be easy to navigate, allowing customers to brow se through products effortlessly By providing a seamless user

experience, the website enables customers to save time and make informed

purchasing decisions

Moreover, the website should prioritize responsive design, ensuring compatibility across different devices and screen sizes This enables customers to access the website conveniently from their desktop computers, laptops, tablets, or

mobile phones A mobile-friendly design is particularly important, considering the

growing number of users accessing websites through their smartphones

In conclusion, the website serves as a platform for direct product distribution

and online shopping activities, providing customers with time-saving benefits and

a wide array of choices A well-designed website with a visually appealing and

user-friendly interface enhances the customer experience It should prioritize easy

4

navigation, clear product information, transparent pricing, and responsive design

to cater to the needs and preferences of customers

Research Objectives and Scope

Research Target: Building a Grocery Selling Website

System Scale: The high-quality and genuine selling system serves all customers nationwide, allowing multiple customers to access it simultaneously It combines theoretical research and understanding of users' practical needs Additionally,

experiences from existing online shopping websites are considered Based on this

foundation, the goal is to develop a beautiful, high-quality, and authentic grocery

selling website with comprehensive basic functionalities

The research focuses on constructing a website dedicated to selling groceries The system is designed to cater to a wide range of customers, operating

on a national scale, and accommodating multiple concurrent users The

development process involves a combination of theoretical investigation and practical exploration of user requirements Furthermore, existing online shopping

websites are examined to gain insights and understand current trends in the

offerings

The website is developed to provide a seamless user experience, with user- friendly navigation and easy access to a wide variety of grocery products It

incorporates essential features such as product browsing, detailed product

information, transparent pricing, and secure online payment options By

integrating these functionalities, the website aims to facilitate convenient and

reliable online grocery shopping for customers

In conclusion, the research aims to develop a grocery selling website that meets the practical needs of users It combines theoretical research, practical insights from existing online shopping websites, and an understanding of user preferences The goal is to create a visually appealing, high-quality, and authentic

platform that offers a comprehensive range of basic functionalities for selling groceries

CHAPTER 2: Theoretical Foundation

Online Selling: Presenting the concept and trends of online shopping, as well

as the benefits of online selling in the grocery retail sector

MongoDB Database: Providing an explanation of the MongoDB database and why we use MongoDB Compass for storing and managing data for the online grocery store website

React and Node.js: Discussing React and Node.js, two popular development

technologies for building modern web applications Explaining how React is used

for the user interface and Node.js for the back-end of the online grocery store website

2.1 Technology used

2.1.1 MongoDB Compass

MongoDB Compass is a graphical tool for managing MongoDB databases

It is used to create and manage data collections for the online grocery store website This tool provides an easy-to-use interface for interacting with the database,

allowing users to create and view records, as well as perform queries and data modifications

MongoDB Compass offers a range of features that simplify the management

of MongoDB databases It provides a visual representation of the data schema,

allowing users to easily navigate and understand the structure of the collections

The tool also supports the creation and modification of indexes, which can enhance

the performance of database queries

With MongoDB Compass, users can perform various operations on the data,

such as inserting new records, updating existing ones, and deleting records when

necessary The tool also supports advanced query capabilities, allowing users to filter and retrieve specific data based on various criteria.

Additionally, MongoDB Compass provides a real-time view of the data, enabling users to monitor changes as they occur This can be particularly useful in scenarios where multiple users are accessing and modifying the database

concurrently

Overall, MongoDB Compass serves as a powerful and user-friendly tool for managing MongoDB databases Its intuitive interface and comprehensive

functionality make it an ideal choice for storing and managing data for the online

grocery store website, ensuring efficient and effective database operations

2.1.2 React and Node.js

React is a popular JavaScript library used for building user interfaces for web applications With React, developers can easily create dynamic and interactive

UI components that can be reused throughout the application We use React to

build the user interface for the online grocery store website, including product

pages, shopping cart, and checkout process

Node.js is a server-side JavaScript runtime environment built on the Chrome V8 JavaScript engine We use Node.js to develop the back-end of the online grocery store website With Node.js, we can handle user requests, interact with the MongoDB Compass database, and provide data and functionality to the front-end React components

React and Node.js work together to create a full-stack web application The

React components handle the presentation layer, allowing users to interact with the

website and view the products When a user performs an action, such as adding

items to the cart or making a purchase, React sends requests to the Node.js server

On the Node.js server, we can process these requests, validate user input,

and interact with the MongoDB Compass database to retrieve or modify data

Node.js acts as the intermediary between the front-end and the database, handling

business logic and ensuring the smooth operation of the online grocery store

By using React and Node.js together, we can build a responsive and

interactive user interface and a robust back-end system for the online grocery store website This combination allows for efficient and seamless communication

between the front-end and back-end components, providing users with a smooth

and enjoyable shopping experience.

2.1.3 Express.js

Express.js is a server-side web application framework based on Node.js We use Express.js to develop the back-end of the online grocery store website Express.js provides features such as routing, request and response handling,

middleware, and server-side resource management

With Express.js, we can define routes that handle different URL endpoints

of the website For example, we can have routes for product listing, adding items

to the cart, and processing payment Express.js allows us to handle incoming

requests and send appropriate responses based on the logic defined in these routes

Express.js also supports middleware, which are functions that can be

executed before or after a request is processed Middleware functions enable us to add additional functionality to the server, such as authentication, error handling,

and logging We can use existing middleware packages or create custom

middleware to suit the specific needs of the online grocery store

resources It provides an intuitive and flexible way to handle static files, such as HTML, CSS, and JavaScript files, as well as dynamically generated content Express.js can serve these files efficiently and handle caching and compression to

optimize performance

By utilizing Express.js in conjunction with Node.js, we can build a robust and scalable back-end for the online grocery store Express.js streamlines the development process by providing a structured framework and essential features for handling requests, managing routes, and integrating middleware This allows

us to create a reliable and efficient server-side solution for delivering a seamless

online shopping experience to customers

2.1.4 RESTful API

RESTful API (Representational State Transfer) is a software architectural style that allows accessing and manipulating resources over the network We use RESTful API to design and build endpoints for querying, adding, updating, and deleting data in the MongoDB Compass database RESTful API enables

communication between the front-end (React) and back-end (Node.js and MongoDB Compass) components

With RESTful API, we define a set of standardized endpoints that represent different resources of the online grocery store For example, we can have endpoints

for retrieving product information, adding items to the cart, processing orders, and managing user accounts Each endpoint is associated with a specific HTTP method (such as GET, POST, PUT, DELETE) and corresponds to a specific action on the underlying data

The API endpoints follow a RESTful design pattern, where the URL

structure reflects the resource hierarchy and the HTTP methods indicate the

desired operation For instance, to retrieve a list of products, we might use a GET request to the `/products` endpoint To add a new product, we would use a POST request to the same endpoint The API handles these requests, processes the data, and returns the appropriate response, typically in JSON format

By implementing a RESTful API, we ensure that the front-end and back-end components can communicate effectively and perform the necessary operations on the data The API acts as an intermediary, allowing the React front-end to interact

with the MongoDB Compass database via the Node.js server This separation of

concerns enables modularity and flexibility in the system architecture, making it easier to maintain, scale, and evolve the online grocery store application

Overall, the use of a RESTful API enhances the interoperability and integration between different components of the web application, facilitating

seamless data exchange and enabling a smooth user experience

2.1.5 HTML, CSS, and JavaScript

HTML (HyperText Markup Language), CSS (Cascading Style Sheets), and JavaScript are fundamental languages used to build and design the web interface

We utilize HTML to construct the structure and elements of web pages, CSS to

format and style the interface, and JavaScript to implement interactivity and dynamic functionality on the web

HTML serves as the backbone of a web page, defining its structure through

a set of tags that represent different elements such as headings, paragraphs, images,

and links It provides the foundation for organizing content and establishing the hierarchy of information on a web page.

CSS complements HTML by controlling the visual presentation of web

pages It allows us to define styles, layouts, and formatting rules for HTML

elements With CSS, we can customize the colors, fonts, sizes, margins, and other

visual aspects of the web page, providing a visually appealing and consistent user

as form validation, animations, data manipulation, and client-side interactions

Together, HTML, CSS, and JavaScript form the core building blocks of modern web development They work in conjunction to create engaging and interactive web experiences, allowing us to deliver rich content, responsive designs, and dynamic functionality to users By leveraging the capabilities of these

three languages, we can create visually appealing, user-friendly, and feature-rich

interfaces for our online grocery store website

2.1.6 Babel and Webpack

Babel and Webpack are tools that aid in the development of modern web applications Babel allows us to write new JavaScript code syntax while ensuring compatibility with older web browsers, while Webpack helps us manage and bundle the source code files of our application Both of these tools play a crucial role in the process of building and deploying the online grocery store website Babel is a JavaScript compiler that enables developers to write code using

the latest ECMAScript syntax, including features that may not be supported by all browsers It transpiles the modern JavaScript code into a backward-compatible version that can run in older browser environments This allows us to take

advantage of the latest language features without sacrificing compatibility Webpack, on the other hand, is a module bundler that helps organize and

package the various assets and dependencies of our web application It allows us

to split our code into modules, manage dependencies between them, and bundle them into optimized files for deployment Webpack also provides additional features such as code minification, tree shaking, and hot module replacement,

which enhance the performance and development experience

10

By using Babel and Webpack in our development process, we ensure that our online grocery store website is compatible with a wide range of browsers and that our codebase is efficiently bundled for production These tools enable us to leverage the latest JavaScript language features and optimize the performance of

our application

Building upon the theoretical foundations and utilizing these technologies,

we will proceed with the next steps in the development of the online grocery store

website, including designing the user interface, building the system functionality, conducting testing, and deploying the application

2.2 User Interface (UI) / User Experience (UX) Design

In this step, we will create an appealing and user-friendly interface design for the online grocery store website The interface design process focuses on both

the user experience (UX) and user interface (Ul) A well-designed interface will help users easily navigate, search, and make purchases on the website

User Experience (UX) design involves understanding the needs and

behaviors of the target users and creating an interface that caters to their preferences This includes conducting user research, creating user personas, and

developing user flows and wireframes to outline the overall structure and functionality of the website UX design also involves optimizing the website's usability, accessibility, and overall satisfaction for the users

User Interface (Ul) design focuses on the visual aspects of the website, such

as layout, color schemes, typography, and graphic elements The goal is to create

a visually appealing and cohesive design that aligns with the brand identity and

engages users UI designers will use design tools and software to create mockups

and prototypes that demonstrate the look and feel of the website

During the UI/UX design process, it is important to consider factors such as the target audience, the goals of the website, and industry best practices Designers

will collaborate with stakeholders, such as product owners and developers, to

ensure the design aligns with the overall objectives and technical feasibility The end result of the UI/UX design process will be a visually appealing and

user-friendly interface that enhances the overall user experience on the online

grocery store website This design will guide the development process and serve

as a blueprint for implementing the website's functionality and features

11

2.2.1 UX Design

During the UX Design phase, we conduct research and gain a deep

understanding of user needs We explore potential user groups, conduct surveys,

and analyze information to identify their requirements and desires Based on this understanding, we create interface frameworks and develop user flows and

wireframes to provide the best user experience

The UX Design process begins with user research, where we gather insights

into the target audience's behaviors, preferences, and pain points This research helps us identify key user personas and understand their goals and motivations

when using the online grocery store website We may conduct interviews, surveys,

or usability testing to gather feedback and validate our assumptions

Once we have a clear understanding of user needs, we move on to creating user flows User flows outline the steps users take to accomplish specific tasks on

the website, mapping out the navigation and interactions This helps us identify

any potential roadblocks or areas for improvement in the user journey

Wireframing is another crucial step in UX Design Wireframes are low- fidelity visual representations of the website's layout and structure They focus on

content placement, functionality, and navigation, without getting into visual design details Wireframes provide a blueprint for the website's information architecture

and help ensure a logical and intuitive user experience

Throughout the UX Design process, we continuously iterate and refine our designs based on user feedback and usability testing This helps us optimize the user experience, ensuring that users can easily navigate the website, find products,

and complete their purchases

By focusing on UX Design, we aim to create a website that meets the needs and expectations of users, providing them with a seamless and enjoyable shopping experience This phase sets the fou ndation for the subsequent UI Design process,

where we bring the visual elements to life.

2.2.2 Ul Design

During the UI Design phase, we create visually appealing and engaging interfaces based on the interface frameworks and wireframes designed earlier We use elements such as colors, images, icons, and typography to create aesthetically

pleasing and visually engaging interfaces At the same time, we ensure consistency, compatibility, and interactivity across different devices

The UI Design process builds upon the foundation established during the

UX Design phase It focuses on enhancing the visual aspects of the website to create a compelling and cohesive user interface We carefully select color palettes that align with the brand identity and evoke the desired emotions and associations The use of appropriate imagery helps convey the product offerings and engage users visually

Typography plays a crucial role in UI Design, as it affects readability and

sets the tone for the website We select fonts that are legible and visually pleasing, ensuring they are appropriate for different sections of the website, such as headings, body text, and navigation menus

Icons and graphics are used to enhance the user interface and provide visual

cues for navigation and interactions We design intuitive and recognizable icons that effectively communicate functionality and enhance the user experience Responsiveness and compatibility across devices are _ essential

considerations in Ul Design We ensure that the website layout and design

elements adapt seamlessly to different screen sizes, such as desktops, tablets, and

mobile devices This involves employing responsive design techniques and optimizing the user interface for touch interactions on mobile devices

Throughout the UI Design process, we maintain a balance between

aesthetics and usability We pay attention to visual hierarchy, organizing

information in a clear and intuitive manner This helps users navigate the website effortlessly and find the products they are looking for

Prototyping and user testing are important components of UI Design We

create interactive prototypes to simulate the user experience and gather feedback from users This feedback helps us identify any usability issues and make iterative improvements to the design

By focusing on UI Design, we aim to create visually appealing and user-

friendly interfaces that enhance the overall user experience on the online grocery

store website This phase brings together the visual and interactive elements to

create an engaging and memorable interface for users

2.3 System Development

Once the UI design is completed, we move on to the system development phase of the online grocery store website During this phase, we will implement the required functionalities and create the necessary pages and components for the system

The system development process involves translating the design specifications and requirements into functional code We use the chosen technologies, such as React, Node.js, and MongoDB Compass, to develop the different parts of the system

In the front-end development, we utilize React to build the user interface

components and implement the desired functionalities This includes creating

pages for product listings, shopping cart, payment processing, and user authentication We focus on writing clean and efficient code, following best practices and coding standards

In the back-end development, we leverage Node.js to handle server-side

logic and interact with the MongoDB Compass database We implement the

necessary APls and endpoints to handle user requests, such as retrieving product

information, processing orders, and managing user accounts The integration

between Node.js and MongoDB Compass allows for seamless data storage and

retrieval

Throughout the system development phase, we ensure proper

communication and data exchange between the front-end and back-end components This is achieved through RESTful API endpoints that f acilitate the transfer of data between the user interface and the server

Furthermore, we incorporate best practices for security and performance optimization during system development This includes implementing secure authentication and authorization mechanisms to protect user data and transactions

We also optimize the code and database queries to ensure efficient performance

and quick response times

The system development phase involves rigorous testing and debugging to identify and resolve any issues or bugs We conduct unit testing, integration

testing, and system testing to verify the functionality and performance of the

system This helps ensure a robust and reliable system for users to shop for groceries online

Once the system development is completed and thoroughly tested, we

proceed to the next steps of the project, including user acceptance testing and

deployment User feedback and acceptance testing help us validate the system's

functionality and usability, making necessary adjustments based on user responses

In summary, the system development phase is where we bring the design to life by implementing the functionalities and components required for the online

grocery store website It involves front-end and back-end development using technologies such as React, Node.js, and MongoDB Compass Through thorough testing and optimization, we aim to deliver a high-quality and reliable system for

users to enjoy a seamless online shopping experience

2.3.1 Database Creation

The first step in the system development phase is to create the MongoDB

Compass database to store information about products, categories, orders, and user

details We design the necessary collections and define the relationships between

them to ensure data consistency and optimize storage

In MongoDB Compass, we define the schema for each collection, specifying the fields and their data types For example, the "products" collection may include

fields such as product name, price, description, and image URL The "categories" collection may contain fields like category name and description Similarly, the

"orders" collection may include fields for order details such as order ID, customer

information, product IDs, quantities, and timestamps The "users" collection may store user details like usernames, passwords, email addresses, and shipping addresses

We establish relationships between collections using references or embedded documents, depending on the nature of the data For example, a product document may reference its corresponding category document, allowing us to

retrieve category information when querying product data We ensure the integrity

of relationships and enforce data consistency through proper data modeling

15

During the database creation process, we also consider performance

optimization techniques This involves creating appropriate indexes on fields used

for querying and ensuring efficient data retrieval Indexing can significantly improve query performance, especially when dealing with large datasets

Additionally, we implement data validation rules to ensure the integrity and

validity of the data stored in the database This includes enforcing constraints, such

as field validations, uniqueness requirements, and data format checks

By carefully designing and creating the MongoDB Compass database, we

lay the foundation for storing and managing the crucial data required for the online

grocery store system This ensures efficient data retrieval, consistency, and scalability as the system grows

Note: MongoDB Compass is a graphical user interface tool used for managing MongoDB databases It provides an intuitive way to interact with the database, design schemas, and perform CRUD operations

2.3.2 Building the Back-End

Next, we utilize Node.js and Express.js to construct the back-end of the online grocery store website In this phase, we create APIs to handle user requests and interact with the MongoDB Compass database

Using Node.js, we set up the server environment and define routes for different functionalities such as user authentication, product listing, cart

management, and order processing We implement controllers that handle these routes and perform the necessary logic, such as retrieving data from the database, processing user input, and generating responses

With Express.js, we benefit from its middleware capabilities to handle tasks

like request parsing, authentication, and error handling We can integrate third-

party middleware for additional functionality and security, such as handling cross-

origin resource sharing (CORS) or validating request data

In the back-end development process, we ensure secure communication by

implementing proper authentication and authorization mechanisms This includes techniques like token-based authentication, where users receive and send tokens with each request to authenticate their identity

We also incorporate data validation and sanitization to prevent security vulnerabilities and ensure the integrity of the data stored in the database This involves validating user input, handling potential errors or exceptions, and sanitizing user-supplied data to prevent injection attacks or other malicious

activities

By building a robust back-end system, we enable the website to handle user requests efficiently, process data securely, and interact seamlessly with the database

2.3.3 Building the Front-End

Once the back-end development is complete, we proceed to build the front- end of the online grocery store website using React The front-end development focuses on creating user interfaces, managing state, and interacting with the back-

end APIs to display data and provide functionalities to users

Using React, we divide the user interface into reusable components, such as product listings, shopping cart, user profile, and checkout We leverage React's

component-based architecture to encapsulate logic and UI elements into modular components, promoting code reusability and maintainability

We manage the application state using tools like React's built-in state

management or external libraries like Redux or MobxX This allows us to handle data persistence, manage user interactions, and synchronize data between different components

To interact with the back-end APIs, we utilize asynchronous programming techniques and libraries like Axios or Fetch to send HTTP requests and handle responses We implement features such as fetching product data, adding items to the cart, submitting orders, and handling user authentication

Additionally, we focus on creating responsive and mobile-friendly designs, ensuring the website functions well across different devices and screen sizes We utilize CSS frameworks or custom styling to create visually appealing and intuitive user interfaces

Throughout the front-end development phase, we conduct rigorous testing

to identify and fix any functional or user experience issues We verify that the

17

website functions as intended, displays data accurately, and provides a smooth and

seamless user experience

By building a well-designed and efficient front-end, we enable users to navigate the website seamlessly, interact with functionalities effortlessly, and have

an enjoyable shopping experience

2.4 Testing and Bug Fixing

After completing the system development, we proceed with testing to ensure the stability, compatibility, and security of the online grocery store website We conduct various tests, including unit testing, integration testing, and end-to-end

testing, to validate the functionality and performance of the system

During testing, we simulate different user scenarios and interactions to identify potential bugs, errors, or unexpected behavior We also test the website on

different browsers, devices, and screen resolutions to ensure compatibility and

responsiveness

When bugs or issues are discovered, we prioritize and fix them promptly This involves investigating the root cause, making the necessary code adjustments, and retesting to verify that the issues have been resolved We iterate this process

until the system meets the desired quality standards

2.5 Deployment and Operation

Once testing and bug fixing are complete, we proceed with deploying the

online grocery store website to a production environment We configure server

settings, set up necessary resources, and ensure that the website operates smoothly Deployment involves considerations such as choosing an appropriate hosting provider, setting up domain and DNS configurations, and securing the server environment We may utilize cloud platforms like Amazon Web Services

(AWS) or Microsoft Azure for scalability and reliability

After deployment, we establish monitoring and maintenance practices to

ensure the ongoing operation of the website This includes monitoring server

18

performance, handling server logs, and applying updates and patches to maintain

security and performance

2.6 Evaluation and Improvement

Following the deployment and operation phase, we conduct evaluations and gather feedback from users to improve and enhance the quality and user experience

of the online grocery store website We actively listen to user opinions, collect

feedback, and document any issues or suggestions for future improvements

We analyze user data, such as website analytics, user engagement metrics,

and conversion rates, to gain insights into user behavior and identify areas for

optimization This information helps us make informed decisions about future updates, feature enhancements, and user experience improvements

By continuously evaluating, gathering feedback, and implementing improvements, we strive to enhance the success and effectiveness of the online grocery store website

2./ Conclusion

Based on thorough research and understanding of user requirements, we have successfully built an online grocery store website that operates at a national scale, catering to multiple concurrent users By leveraging technologies such as

MongoDB Compass, Node.js, Express.js, and React, we have developed a high- quality system that meets basic requirements and provides a seamless user experience

The next steps involve deployment and operation, along with evaluation and

improvement, to ensure the continued success and efficiency of the online grocery store website

CHAPTER 3: Experimental Results

3.1 Functionality

3.1.1 Login Functionality

Tai Khoan Your HUTECH's klentity

2011064384

The user login functionality offers two methods for logging in:

Method 1: Admin Account Login - Users can log in using an admin account with

a password of "1" or by creating an account directly on MongoDB

Method 2: Google Sign-In - Users can also log in using their Google accounts,

which is supported by the "passport-google-oauth20" library

These login options provide users with flexibility and convenience when accessing the website They can choose to either use an admin account or leverage their existing Google credentials to authenticate and access the platform

20

3.1.2 Purchase Functionality

The purchasing feature allows users to view product details such as product name, price, quantity, and illustrative images of the product When users click the

"Buy" button, they will be directed to the shopping cart

With the purchasing functionality, users have access to comprehensive information about the products, enabling them to make informed decisions The

seamless transition to the shopping cart ensures a smooth and convenient purchasing process for users

21