Ho Chi Minh City, December 2023 Major: INFORMATION TECHNOLOGY Student ID: 19110149 BUILDING A WEBSITE TO SELL AGRICULTURAL PRODUCTS... Nguyễn Phan Anh Thiện Student ID: 19110149 Projec
INTRODUCTION TO THE PROBLEM
PURPOSE OF CAPSTONE PROJECT
The purpose of the project "Building an Online Agricultural Product Marketplace" is to establish an online platform that offers a convenient and reliable shopping experience for consumers seeking agricultural products Simultaneously, it aims to support local farmers and growers by providing them with a space to showcase and sell their produce to a broader audience The project's primary focus is to bridge the gap between consumers and local agricultural producers, fostering a sense of community and trust within the agricultural marketplace.
THE OBJECTIVES OF CAPSTONE PROJECT
- Diverse Product Display with Detailed Information: To provide a user- friendly interface that presents a wide variety of agricultural products along with comprehensive details such as images, descriptions, prices, sources, and other relevant information to empower consumers to make informed purchasing decisions
- Order and Payment System: To create a secure and efficient online ordering and payment system, allowing users to conveniently add products to their cart, confirm orders, and complete payments safely
- User Account Management and Order History: To develop a user account management system, enabling users to maintain their personal information, manage delivery addresses, and monitor their order history for seamless reordering and order tracking
- Support for Local Farmers: To offer local farmers a platform to upload information about their products, set prices, and provide them with a user-friendly management interface to keep product details up to date
- Rating and Feedback System: To establish a rating and feedback system, allowing users to rate both products and local farmers, contributing to the development of trust and reliability within the community.
IMPORTANCE OF THE PROJECT IN THE AGRICULTURAL
Encouraging Sustainable Agricultural Development: The project facilitates local farmers' access to wider markets This helps them increase their income and encourages sustainable agricultural development through producing higher quality agricultural products and reaching consumers directly
Increased Consumer Access: Consumers, especially in urban areas, often have difficulty accessing local agricultural products The project provides a convenient access channel for them, helping them consume clean, fresh products and support the local community
Minimize Dependency on Export Markets: Agricultural export markets are often unstable Creating a strong domestic market helps minimize dependence on this market, while also providing opportunities for local farmers to seek more stable consumption channels
Promote Community Connection: The project opens opportunities for connection between farmers and consumers, creating a community of mutual support Consumers can
16 better understand the origin of products and contribute to the development of community agriculture
Encourages Creativity and Innovation: Having an online platform allows farmers to access technology and be more creative in advertising and marketing their products This can promote innovation and increase the value of agricultural products.
RESEARCH SCOPE
Analysis of Technology and System Structure:
Identify and analyze the technologies, frameworks, and system architectures used in building agricultural product sales websites
Evaluating Security and Data Management Protocols:
Propose and analyze data security measures and security protocols applied in the system to protect users' personal and payment information
Interface Design and User Experience (UX/UI):
Focus on designing a user-friendly interface that is easy to use and has a good experience to attract users and optimize the online shopping process
Developing Ordering and Payment System:
Research and implement an online ordering and payment system that is safe, effective and easy to use for users
Data Management and Seller Support:
Develop a database for product information management, helping sellers easily update and manage their products on the platform
THEORETICAL BASE AND RESEARCH PROBLEMS
ANALYSIS OF SIMILAR WEBSITE MODELS AND IMPACT ON THE
UFO Technology and Trading Company Limited (“FoodMap”) is a technology company in the Vietnamese agricultural sector with an agricultural e-commerce platform specializing in connecting farmers, manufacturers with consumers
At the same time, it is a unit specializing in connecting local gardeners and farmers with technology platforms and e-commerce platforms to bring Vietnamese agricultural products to the "digital market" With the goal of applying technology to enhance the value of Vietnamese agricultural products and be an extended arm to bring Vietnamese agriculture forward, FoodMap always strives tirelessly and accompanies farmers to create great buying experiences Buy quality and safe agricultural products
In order to provide quality and safe agricultural products, FoodMap established the e-commerce website Foodmap.asia in December 2018 and the website officially notified the Ministry of Industry and Trade of Vietnam
Model Summary: Foodmap.asia is an e-commerce platform focusing on food and beverage products, but currently has only little information about agricultural products and only one seller
Intuitive and easy-to-use interface
Potential to expand product and seller list
Lack of information about agricultural products and the richness of the product list The number of sellers and products is limited
Shopee is one of the leading e-commerce platforms in Southeast Asia and Taiwan, providing a diverse and convenient online shopping experience for millions of users Founded in 2015, Shopee has quickly grown, expanding its operations to many different countries The platform offers a wide range of products from clothing, electronics, home appliances, to beauty products and food, meeting diverse consumer needs
Shopee stands out with its friendly interface, simple and safe payment process, and professional customer support policy This platform also offers attractive promotions, helping buyers get the products they want at affordable prices In addition, Shopee also actively cooperates with major retailers and brands, bringing rich choices and guaranteed product quality to consumers
With convenience and excellent customer service, Shopee has become a trusted online shopping destination for millions of users in Southeast Asia and Taiwan
Model Summary: Shopee is a diverse e-commerce platform, focusing on many types of businesses, but is not suitable for agricultural products due to poor storage time
Diverse types of items and product categories
Easy-to-use interface and convenient shopping experience
Not suitable for agricultural products because it requires longer storage time
It can cause confusion for users when agricultural products are not centralized
Adopt a Better Experience with Foodmap.asia:
Enhance information about agricultural products and expand the seller list to create a more diverse and rich product database
Improve the user interface and shopping experience to engage consumers and build trust
Optimize Agricultural Products on Shopee: If possible, consider optimizing the shopping experience for agricultural products on Shopee by creating a separate category or channel for easy search and access product
Develop a Product and Seller Diversification Strategy: Focus on expanding the agricultural product list and attracting more sellers to increase diversity and choice for consumers
From these analyses, combining the strengths and avoiding the limitations of these models can help build an effective and attractive online agricultural product sales platform for users.
THEORY FOUNDATION
MERN Stack - a technology stack that includes MongoDB, Express.js, React, and Node.js - has quickly become a popular choice in the web application development community for many reasons This combination leverages the power of JavaScript from the client to the server side, creating a flexible and high-performance development environment
Using JavaScript for both front-end and back-end brings many benefits This is a powerful language, with a large community and many supporting resources Using the same language for both the front-end and back-end simplifies application development and maintenance, reducing complexity and learning curve for developers
In the MERN Stack, React is a popular JavaScript library for building user interfaces (UI) React's flexibility allows for the creation of reusable UI components, smooth interactions, and improved application performance Besides, Node.js is an environment that runs server-side JavaScript code, using a non-blocking I/O model, allowing applications to handle multiple requests simultaneously without causing blocking or delay
MongoDB, which is an unstructured database, uses JSON documents to store data
It is flexible and scalable, suitable for applications that require high flexibility and scalability
The combination of technologies in the MERN Stack creates a highly flexible, performant, and scalable web application development environment This makes it easier to build modern, interactive, and easily scalable web applications, while attracting the attention of the development community
React is a popular and powerful JavaScript library widely used in user interface (UI) development for web applications Based on the creation of UI components, React offers a flexible and efficient approach to building interactive user interfaces
React allows dividing the user interface into independent and reusable components These components can be developed independently and reused in multiple parts of the application, making source code management and maintenance easier
React uses a mechanism called Virtual DOM (Virtual Document Object Model) to improve application performance Instead of updating the entire DOM when data changes,
React updates only the elements that change, helping to optimize the update and rendering speed of the website
React uses JSX, a syntax extension of JavaScript that allows you to write JavaScript- like HTML code JSX helps developers build user interfaces in a more intuitive and readable way
React manages the state of components and passes data through properties (props) This helps build dynamic applications that are highly interactive with users
React has a large community with many supporting libraries and tools, making it easy for developers to find solutions to specific problems and enhance application scalability
- High Performance: Using Virtual DOM helps improve application performance and rendering speed
- Reusability: Components can be reused easily, helping to optimize source code management and maintenance
- Flexible State Management: React helps manage application state flexibly and easily
- Strong Community Support: The React community is large, with lots of resources and support, helping to solve development problems
In total, using React in building user interfaces provides flexibility, performance, and high code reuse, making web application development more convenient and efficient
Node.js is a server-side JavaScript code execution environment built on Chrome's JavaScript Engine (V8 Engine) It allows developers to use JavaScript to write server-side code, not just client-side like before
Key Features of Node.js:
Node.js uses a non-blocking model in handling Input/Output (I/O) operations This allows Node.js to process multiple requests simultaneously without blocking or waiting, optimizing application performance
2 Single-threaded and Event-driven:
Node.js uses a single-threaded model with an event loop to handle requests Instead of creating a new thread for each request like other multithreading models, Node.js uses a single thread to handle multiple requests This helps optimize server resource usage
Node.js supports modules, allowing applications to be divided into small parts (modules) for easy source code management and reuse Modules can be imported and exported for reuse in multiple parts of the application or in other applications
Node.js has a large community with many supporting libraries and frameworks This makes it easier to find solutions to specific problems and aids in the development process
Benefits of Using Node.js:
- High Performance: Suitable for applications that require simultaneous processing of multiple requests without blocking
- Flexibility: Single-threaded and event-driven model facilitates high-performance request handling
- Modular Development and Source Code Reuse: Support for modules allows the application to be divided into small, easy-to-manage and reused parts
In total, Node.js is a strong choice for server application development, especially for applications that require processing multiple requests simultaneously without blocking It delivers high performance and flexibility in server and web application development
Express.js is a web application framework built on Node.js, used to build web applications and APIs quickly and easily It provides the necessary features to handle HTTP requests and manage application routes
Main Features of Express.js:
Express allows defining routes (paths) for the application by attaching handler functions to each route This helps determine how to handle and respond to each HTTP request to the server
Middleware are functions that can execute before route handling functions are called This allows tasks such as authentication, error handling, or preprocessing tasks to be performed before the final processing of the route takes place
Express supports many template engines such as EJS, Pug, Handlebars, allowing to build user interfaces flexibly and easily
Express provides middleware to serve static files such as images, CSS and JavaScript, helping to create complete web applications with static and dynamic content
Express is often used to build APIs for web applications Thanks to its simple and flexible syntax, Express is a popular choice for building web services based on RESTful APIs
Benefits of Using Express.js:
Flexibility and Modularity: Express provides a flexible approach to HTTP request handling, making code reuse easier
Easy to Learn and Use: Simple syntax, easy to learn and use, especially for developers new to Node.js
Strong Community: Express has a large community, with many resources, modules and community support
In short, Express.js is a powerful framework for developing web applications and APIs based on Node.js Its simplicity, flexibility, and power make Express a popular choice for building modern and powerful web applications
MongoDB is an unstructured database management system (DBMS) developed to store and retrieve data in the form of JSON-like documents It is one of the popular NoSQL database systems, widely used for applications with high flexibility and scalability requirements
REQUIREMENT CAPTURING AND MODELING
Determine requirements
No Work Work type Regulations/Related
2 Search product Search Search by product name, product type
3 Search with image Search Search by image
4 See the list of ordered products
Search See the list of products that have been ordered
1 View products list Search View all products posted on the store
Store Managers can add multiple products to the site
3 Delete products Store Delete products when they are out of stock or no longer open for sale
Store Update product information when there is any change in price, quantity, size
Search View all orders that the user has placed, based on the information left by the customer to deliver the goods to the customer
Includes similar functionality to Farmer, adding the following functions:
No Work Work type Regulations
1 Manage all accounts in system
Search View all products posted on the store
2 View all ordered products Search View all orders that the user has placed, based on the information left by the customer to deliver the goods to the customer
1 - The website can be edited and upgraded to suit the tastes of customers and the needs of the admin such as promotions,
The website works well with many devices
Function buttons are arranged not too complicated and easy to see - The functional screens interact well with each other, creating convenience for users
3 The database is stored securely and easily accessible
The website works stably, access and processing speed is fast
4 The website meets the requirements of the user without affecting the activities of other users Compatibility
5 The design and functionality of the website can be reused for future development
The code can be used many times and can be applied to many different programs without having to change the code too much
List of actors and usecases
- View the list of products
Table 3-5LIST OF ACTORS AND USECASES
Usecase diagram
3.3.1.1 Description of Login Use Case
Description Actor logs into the system
Precondition When the actor wants to log into the system to do something
Steps 1 Actors open the web
2 Actors click to the Login part
3 Enter username and password into login form
5 Password and username are correct, and the actor will log into the system with his/her correct role
3.3.1.1 Description of Use Case Register
Description Actor registers an account in the system
Precondition When the actor wants to have an account in the system to become a
Steps (1) Actors open the web
(2) Actors click to the Login part (3) Actors click to the Create an Account part (3) Actors need to fill in all required information and have that information checked for validation before signing up
(4) Actors click on the Register to create a new account (after checking whether the account has existed, or the password is correct or not)
3.3.1.2 Description of View List of Products Use Case
Use Case View List of Products
Description Actor sees a list of all products
Precondition When the actor wants to see all products
Steps (1) Actors open the web
(2) Actors need to login to the app and after login successful actor will be move to the Home Screen
(3) Actors click on the Shop Tab in the navigation bar at the top of the website and will see the product filter and a list of products
Table 3-4 Use Case View List of Products
Description Actor search for a specific product in the system
Precondition When the actor wants to see a specific product in the system
Steps (1) Actors open the web
(2) In the Navigation Bar, Actor can input the name of the product and search
(3) The results will be shown the actor can click into the product
(4) The product’s detail of that product can be shown on that product detail screen
Table 3-6 Use Case See the list of Ordered Products
Use Case See the list of Ordered Products
Description Actor sees the list of ordered products
Precondition When the actor sees the list of ordered products
Steps (1) Actor open the web Purchase history:
(2) In My Orders in the detail button Tab the actor can review the orders he has placed
Table 3-5 Use Case See the list of Ordered Products
3.3.1.5 Description of Review Use Case
Use View List of Review
Description Actors review the products of website
Precondition When the actor wants to review the products of website
Steps (1) Actors open the web
(2) Actors need to login the app and after login successful actor will be move to the Home Screen
(3) Actors click on the Shop Tab in the navigation bar at the top of the website and will see the product filter and a list of products (4) Actors click Quick View of Product to see product details
(5) Actors scroll down and click on the comments tab to review the products
Table 3-7 Use View List of Review
3.3.1.6 Description of See Products Review Use Case
Use View List of See Products Review
Description Actor to see product reviews of website
Precondition When the actor wants to see product reviews of website
Steps (1) Actors open the web
(2) Actors need to login the app and after login successful actor will be move to the Home Screen
(3) Actors click on the Shop Tab in the navigation bar at the top of the website and will see the product filter and a list of products (4) Actors click Name of Product to see product details
Table 3-8 Use View List of See Products Review
Description Actor manages actor’s products
Precondition When the actor wants to change actor’s products
Steps (1) Actors open the web for admin
(3) Fill all information to add new product, delete or update product
Table 3-9 Use Case Manage product
Description Actor manages actor’s users
Precondition When the actor wants to change actor’s users
Steps (1) Actors open the web for admin
(3) Fill all information to add new user, delete or update user
Table 3-10 Use Case Manage user 3.3.1.9 Description of Manage Order
Description Actor manages actor’s orders
Precondition When the actor wants to see actor’s orders
Steps (1) Actors open the web for admin
(3) See all information of billing detail
Table 3-11 Use Case Manage Order
Description Actor manages actor’s Voucher
Precondition When the actor wants to see Voucher
Steps (1) Actors open the web for admin
Table 3-12 Use Case Manage Voucher
Description Actor manages actor’s Voucher
Precondition When the actor wants create order
Steps (4) Actors open cart page
(5) Actors update cart (6) Actors add voucher (7) Actor pay for the order
Table 3-13 Use Case Manage Voucher
Description Actor manages actor’s Voucher
Precondition When the actor wants sent email to admin
Steps (1) Actors open contact page
(2) Actors write a email and click send
Table 3-14 Use Case Send a email
Description Actor seach product with image
Precondition Actor want to search unknow prodcuct’s name
Steps (1) Actors click search with image button and input a image
(2) Web will show product with key predict from image
Table 3-15 Use Case search product
SYSTEM DESIGN
Database Design
Database table details
Ord Attribute Type Domain Meaning Note
Unique identifier for each document
2 lastName String Last name of the user
3 firstName String First name of the user
4 email String unique Email of the user
5 dateOfBirth String Date of birth of the user
Phone number of the user
7 password String required Password of the user
8 role String required Role of the user
9 description String Description about the user
10 image String Image of the user
11 country String Country of the user
12 city String City of the user
13 district String District of the user
14 ward String Ward of the user
15 street String Street of the user
16 addressDetail String Detailed address of the user
17 signinTimeStamp Number Sign in timestamp of the user
Ord Attribute Type Domain Meaning Note
Unique identifier for each document
2 name String Name of the product
3 description String Description of the product
4 descriptionDetail String Detailed description of the product
5 originalPrice Number Original price of the product
6 category String Category of the product
8 discount Number Discount on the product
9 unit String Unit of the product
10 discountPrice Number Discounted price of the product
12 wholesalePrice Number Wholesale price of the product
12 limitedProduct Number Limit on the product
13 totalWeight Number Total weight of the product
14 createdTime Number Creation time of the product
15 updateTime Number Update time of the product
16 infoFarmer String Information about the farmer
Ord Attribute Type Domain Meaning Note
Unique identifier for each document
2 user ObjectId required User who owns the cart
Ord Attribute Type Domain Meaning Note
Unique identifier for each document
3 discount Number required Discount of the voucher
4 startDate Date Start date of the voucher
5 expirationDate Date required Expiration date of the voucher
6 createdAt Date Creation date of the voucher
Ord Attribute Type Domain Meaning Note
Unique identifier for each document
2 user ObjectId required User who made the order
4 paymentMethod String required Payment method chosen by the user
6 orderPrice Number required Price of the order 6
Whether the farmer has confirmed the order
8 createdAt Date Date when the order was created
Ord Attribute Type Domain Meaning Note
Unique identifier for each document
2 userId ObjectId required User who made the review
3 productId ObjectId required Product that was reviewed
4 comment String Comment made by the user
5 rate Number required, min: 1, max: 5
Rating given by the user
Images attached with the review
7 createdAt Date Date when the review was created
Ord Attribute Type Domain Meaning Note
Unique identifier for each document
2 userId String User who sent the email
3 email String Email of the user
4 content String Content of the email
5 date String Date when the email was sent
6 sendTimeStamp Number Timestamp when the email was sent
Back-end structure
SEQUENCE DIAGRAM
4.4.9 Delete review product sequence diagram
4.4.11 Add account user by admin sequence diagram
4.4.12 Update account user by admin sequence diagram
4.4.13 Delete account user by admin sequence diagram
4.4.15 Create voucher by admin sequence diagram
4.4.16 Delete voucher by admin sequence diagram
4.4.17 Add to cart sequence diagram
4.4.19 Remove product in cart sequence diagram
4.4.20 Send contact to cart sequence diagram
GUI
1 Phone number Text Input Phone number
3 Role Ratio button Choose role
4 Login button button Login to website
1 Input user information form Text Input data
2 Button signup button Signup user
1 Navigate bar Navigate bar Navigate to web pages
2 Voucher Text Save voucher code to clipboard
3 English Drop menu Change languages
4 All categories Drop menu Filter product with category
5 Search with image Button Search with image
6 Search Button Search with input text
7 Cart Button Navigate to cart page
1 Filter form Text Filter product with input data
2 Name of product Text Navigate to that product detail
1 Add to cart Button Add product to cart
2 Decription Text Click to show detail of product
3 Reviews Text Click to show reviews of product
1 Form of cart detail form Manage user cart
2 Voucher Text Input and apply voucher to orrder
3 Payment menthod Ratio check box
4 Sumary Text Box Summary order
1 Order detail Text Show detail information about order
1 Information of shop Text Display information of shop
2 Email Text Send email to admin
3 Map Map Address of shop
1 Avater Image Show image of user
2 Choose file Button Change avatar of user
3 Save information Button Save information of user
4 Sign out Button Logout account
5 Change Password text Use to change user password
6 User information form text Change user information
Figure 4-16 Admin/User login page
1 Phone number Text Input Phone number
3 Role Ratio button Choose role
4 Login button button Login to website
Table 4-16Admin/User login page
6 Me Button Show information of account
7 Dashboard Form Show statistical information
Figure 4-18 Admin management accounts page
1 List users Text Click to show user detail information
2 user detail information Text Click to update user information
Table 4-18Admin management accounts page
4.5.13 Admin/farmer management products page
Figure 4-19 Admin/farmer management products page
1 List Products Text Click to show products detail information
Text Click to update products information
Table 4-19Admin/farmer management products page
4.5.14 Admin/farmer management orders page
Figure 4-20 Admin/farmer management orders page
1 Order detail Text show Order detail
2 Confirm oder Button Click to update status order
Table 4-20 Admin/farmer management orders page
1 Order detail Text show Order detail
2 Confirm oder Button Click to update status order
1 Voucher list Text Show voucher list
2 Voucher detail Text Show voucher detail information
3 Delete voucher Button Click to delete voucher
Figure 4-23 Admin/Farmer information page
1 Avater Image Show image of user
2 Choose file Button Change avatar of user
3 Save information Button Save information of user
4 Sign out Button Logout account
5 Change Password text Use to change user password
6 User information form text Change user information
Table 4-23 Admin/Farmer information page
Implementation
The project's development and implementation were completed using the following auxiliary software by the team:
- Use Visual Studio Code to implement Reactjs web application and Backend Node.js
- Use MongoDb compass to build and manage database
- Use redis desktop manager to deploy and manage redis cache database
- Use Vercel for deploying website to hosting
- Use PostMan to test API
- Use Draw.io to draw UML diagrams
5.1.2 Introduction about technologies used in the application
MongoDB is a NoSQL database that stores data in a JSON-like format, known as BSON (Binary JSON) It offers flexibility and scalability, allowing the application to handle large volumes of data efficiently MongoDB's document-oriented structure makes it suitable for storing complex data structures
Express.js is a web application framework for Node.js It simplifies the process of building web applications and APIs by providing a robust set of features for routing, middleware, and handling HTTP requests and responses Express.js helps in creating scalable and modular applications
React is a JavaScript library for building user interfaces It enables the creation of dynamic and interactive front-end components React's component-based architecture
85 facilitates the development of reusable UI elements, enhancing the application's performance and maintainability
Node.js is a runtime environment that executes JavaScript code server-side It allows developers to build scalable and high-performing applications Node.js uses an event- driven, non-blocking I/O model, making it efficient for handling multiple concurrent connections
Google Teachable Machine and TensorFlow.js:
Google Teachable Machine:This is an online tool that allows users to easily construct and deploy image classification models.Users can create and train machine learning models using image data collected through a webcam or other data sources.Upon training, Teachable Machine provides embeddable code or APIs for integration into websites or applications, enabling image classification based on the trained model
TensorFlow.js:TensorFlow.js is an open-source Google library used to build and deploy machine learning models directly in a browser or JavaScript environment.It offers powerful tools for creating, training, and deploying machine learning models directly within a browser or web applications.Particularly, TensorFlow.js excels in image classification, object detection, and performing real-time image processing tasks.
Software Testing
Unit testing is the initial phase of testing and is commonly carried out by the developers themselves This process ensures that individual elements within a software piece at the code level function properly and operate as originally intended In a test-driven environment, developers typically write and execute tests prior to handing over the software or feature to the testing team While unit testing can be done manually, automating this process expedites delivery cycles and widens test coverage Moreover, conducting unit tests aids in easier debugging as identifying issues early on means they require less time to rectify
86 compared to identifying them later in the testing phase TestLeft is an advanced tool that enables testers and developers to shift left by integrating the fastest test automation tool within any Integrated Development Environment (IDE)
Following comprehensive testing of each unit, they are integrated with other units to form modules or components designed for specific tasks or activities These assembled modules are then subjected to integration testing to ensure that entire sections of an application behave as intended (i.e., seamless interactions between units) These tests are typically outlined by user scenarios, such as logging into an application or opening files Integrated tests can be conducted by developers or independent testers and generally involve a combination of automated functional tests and manual tests
System testing is a black-box testing approach employed to evaluate the completed and integrated system as a whole, ensuring it aligns with specified requirements This method involves testing the functionality of the software end-to-end and is usually carried out by a separate testing team, distinct from the development team, before the product is deployed into production
Acceptance testing represents the final phase of functional testing, assessing whether the final software iteration is prepared for release It involves confirming that the product adheres to the original business criteria and fulfills the needs of end users This necessitates testing the product both internally and externally, meaning it needs to be evaluated by end users for beta testing in addition to the internal QA team Beta testing is crucial for gathering authentic feedback from potential customers and can address any remaining usability concerns
White-box testing revolves around the understanding and content of the Source Code (alteration within the program's Code) The testing includes the following aspects:
This technique assesses the functionality of the website in terms of functioning according to specifications It identifies and rectifies website errors including:
- Errors in data structure or external database access
- Behavioral or performance-related bugs
conclusion
Achievements
About knowledge and skills: Concerning the knowledge and skills gained throughout the development of the MERN stack agricultural product selling application, notable achievements have been made
Knowledge: Proficiency in utilizing new technologies, ranging from MongoDB, Express.js, React to Node.js, enabling the creation of a flexible, efficient, and easily scalable application
Skills: Significant progress in developing user-friendly interfaces, effective data management, handling user requests, and integrating a secure payment system
About the product (website): The completed application and its deployment have fulfilled several key requirements:
Displaying diverse agricultural products with detailed information including images, descriptions, prices, sources, and related data
Constructing a user-friendly interface enabling users to add items to a cart, confirm orders, and conduct secure online transactions
Developing a user account management system allowing easy updating of personal information, managing delivery addresses, and reviewing order histories.
Advantages
The utilization of the MERN stack has resulted in numerous advantageous aspects for the application:
- Flexible integration of technologies leading to a robust, adaptable, and easily expandable system
- User-friendly interface facilitating efficient product management and ease of use
- Secure payment system safeguarding transactions for both users and agricultural product suppliers
- Empowerment of local farmers through a platform that enables them to advertise and manage their product information effectively.
Disadvantages
Despite achieving success, some limitations have been encountered:
- Initial learning curve and adaptation to the MERN stack may require a significant amount of time
- Integration complexities when combining various technologies could lead to management challenges.
Future Work
- Enhancing user experience: Continuous improvement of the user interface and feature enrichment for a better shopping experience
- Performance optimization: Focusing on enhancing the application's efficiency to handle increased user loads and concurrent interactions
- Feature expansion: Considering the addition of new functionalities such as product rating systems, user community feedback integration, and improved management of local agricultural products
1 MongoDB, Document for Mongodb, Retrieved November 20 th , 2023, from https://docs.mongodb.com/
2 Express.js, Document for Express.js, Retrieved December 1 st , 2023, from https://expressjs.com/
3 React.js, Document for Express.js, Retrieved December 2 nd , 2023, from https://reactjs.org/docs/
4 Node.js, Document for Node.js, Retrieved November 17 th , 2023, from https://nodejs.org/en/docs/
5 Firebase, Document for Firebase, Retrieved November 15 th , 2023, from https://firebase.google.com/docs/
6 Firebase Real-time Database, Document for Firebase Real-time Database, Retrieved November 14 th , 2023, from https://firebase.google.com/docs/database
7 Firebase Authentication, Document for Firebase Authentication, Retrieved
November 18 th , 2023, from https://firebase.google.com/docs/auth
8 TensorFlow, Document for TensorFlow, Retrieved December 11 th , 2023, from https://www.tensorflow.org/api_docs
9 TensorFlow.js, Document for TensorFlow.js, Retrieved December 11 th , 2023, from https://www.tensorflow.org/js
10 Bootstrap, Document for Bootstrap, Retrieved November 5 th , 2023, from https://getbootstrap.com/docs/5.1/gettingstarted/introduction/
11 VNPAY, Hướng dẫn tích hợp Cổng thanh toán VNPAY, Retrieved December 4 th ,
2023, from https://sandbox.vnpayment.vn/apis/docs/huong-dan-tich-hop
12 PayPal, Get started with PayPal REST APIs, Retrieved December 5 th , 2023, from https://developer.paypal.com/docs/api/overview/