Practice: - Build an Flower Marketplace website: o For users: register, login/out, payment, product detail view, create order with other users.. By channeling our skills and knowledge in
INTRODUCTION
Reason for choosing the topic
The decision to embark on this capstone project focused on developing an e- commerce platform for a flower marketplace was driven by several compelling reasons Here are some key motivations behind our choice:
Growing Demand: The flower industry has witnessed a significant increase in online shopping trends, with more and more consumers turning to the convenience and accessibility of e-commerce platforms This growing demand presents a unique opportunity to create a specialized flower marketplace that caters specifically to the needs of flower enthusiasts and vendors
Untapped Potential: While various e-commerce platforms exist, there is a distinct lack of dedicated flower marketplaces that offer a seamless and immersive user experience By addressing this gap in the market, we aim to tap into the untapped potential of the floral industry and provide a platform that showcases the beauty of flowers while delivering a user-friendly interface
Technological Innovation: E-commerce is at the forefront of technological innovation, continually pushing the boundaries of what is possible in terms of user experience, personalized recommendations, and efficient logistics By focusing on developing an e-commerce platform for flowers, we have the opportunity to leverage cutting-edge technologies and explore new possibilities for enhancing the customer journey and vendor operations within the floral industry
Creative Expression: Flowers have long been associated with beauty, emotions, and expression Building an e-commerce platform for flowers allows us to combine our passion for technology with the aesthetic appeal and symbolic significance of floral arrangements This project provides a platform for creative expression, enabling us to design an interface that showcases the artistry and uniqueness of each floral creation
Business and Entrepreneurial Opportunities: E-commerce has opened up new avenues for entrepreneurs and small businesses to thrive By creating a flower marketplace, we aim to empower local florists and suppliers, providing them with a digital platform to reach a broader customer base This project not only serves as a learning experience but also presents potential business opportunities and the chance to contribute to the growth of the floral industry
Social Impact: Flowers have the power to evoke emotions, brighten someone's day, and symbolize special moments By developing an e-commerce platform for flowers, we strive to facilitate the celebration of life's milestones, from birthdays and weddings to expressions of sympathy and gratitude This project allows us to make a positive impact on people's lives by enabling them to connect with loved ones through the language of flowers
Overall, this capstone project offers a unique combination of technological innovation, entrepreneurial opportunities, creative expression, and social impact By channeling our skills and knowledge into building a specialized e-commerce platform for the floral industry, we aim to create a transformative digital experience that connects people with the beauty and significance of flowers.
Project goals
The primary goal of this capstone project is to develop an e-commerce platform for a flower marketplace that meets the specific needs and demands of flower enthusiasts and vendors To achieve this overarching objective, we have defined the following project goals:
1 User-Friendly Interface: Create an intuitive and visually appealing user interface that allows customers to browse, search, and purchase flowers effortlessly Focus on responsive design principles to ensure a seamless experience across various devices and screen sizes
2 Comprehensive Product Catalog: Build a comprehensive product catalog that showcases a wide variety of flowers, including different types, colors, arrangements, and accompanying gifts Implement robust inventory management systems to ensure accurate product availability and timely updates
3 Vendor Integration: Develop a vendor integration system that allows local florists and suppliers to seamlessly upload their inventory, manage orders, and track deliveries Enable vendors to showcase their unique offerings, providing them with a platform to reach a broader customer base
4 Secure Payment Processing: Implement secure payment processing mechanisms, ensuring that customers can make transactions with confidence Integrate popular payment gateways and implement industry-standard security measures to protect sensitive customer information
5 Personalized Recommendations: Leverage data analytics and machine learning algorithms to provide personalized recommendations to customers based on their preferences, purchase history, and browsing behavior Enhance the shopping experience by suggesting complementary products and relevant promotions
6 Seamless Delivery Logistics: Establish a streamlined delivery logistics system that ensures prompt and reliable delivery of flowers to customers' desired locations Collaborate with delivery partners to optimize routes, track shipments, and provide real-time updates to customers
7 Customer Support and Feedback: Implement robust customer support channels, including live chat, email support, and a comprehensive FAQ section Collect and analyze customer feedback to continuously improve the platform's features, user experience, and overall customer satisfaction
8 Performance Optimization: Employ performance optimization techniques to ensure fast loading times, smooth navigation, and minimal downtime Conduct thorough testing and monitoring to identify and resolve any performance bottlenecks
9 Search Engine Optimization (SEO): Implement effective SEO strategies to improve the platform's visibility in search engine results and attract organic traffic Optimize product descriptions, meta tags, and URLs to enhance discoverability and drive targeted traffic to the platform
10 Scalability and Future Expansion: Build a scalable architecture that allows for future expansion, accommodating a growing number of users, vendors, and products Consider modular design principles to facilitate the addition of new features and integrations as the platform evolves
By accomplishing these project goals, we aim to create a robust and user-centric e-commerce platform for a flower marketplace This platform will not only provide a delightful shopping experience for customers but also empower local florists and suppliers, fostering growth and innovation within the floral industry.
Project mission
Our project mission is to revolutionize the way people connect with the beauty and emotions of flowers through the development of an exceptional e-commerce platform for a flower marketplace We are committed to creating an immersive and user-friendly digital experience that celebrates the artistry and significance of floral arrangements while empowering both customers and vendors within the floral industry
Our mission encompasses the following core principles:
Accessibility: We strive to make the joy and beauty of flowers accessible to everyone By providing a user-friendly interface, seamless browsing experience, and a comprehensive product catalog, we aim to enable customers from all walks of life to explore, select, and purchase flowers effortlessly
Quality and Variety: We are dedicated to curating a diverse selection of high- quality flowers and floral arrangements Our mission is to connect customers with local florists and suppliers who share our commitment to craftsmanship, ensuring that each order is a unique expression of beauty and care
Customer Delight: Customer satisfaction is at the heart of our mission We aim to provide exceptional customer support, personalized recommendations, and secure payment processing, ensuring that every interaction with our platform exceeds expectations Our goal is to create moments of joy and celebration for our customers as they express their emotions and mark special occasions with flowers
Empowering Local Florists and Suppliers: We believe in the power of collaboration and community Our mission is to empower local florists and suppliers by providing them with a digital platform to showcase their creations and reach a wider audience We strive to foster growth, innovation, and economic opportunities within the floral industry, supporting the passion and talent of floral artisans
Environmental Responsibility: We are committed to environmental sustainability and responsible sourcing practices We aim to partner with florists and suppliers who prioritize eco-friendly practices, such as sustainable farming methods and packaging materials Our mission is to promote the beauty of nature while preserving and protecting it for future generations
Continuous Improvement: Our mission extends beyond the initial development of the e-commerce platform We are dedicated to continuous improvement, actively seeking customer feedback, and leveraging data-driven insights to enhance the platform's features, user experience, and overall performance We aim to adapt and evolve in response to the evolving needs and expectations of our users and the floral industry
By staying true to our mission, we aspire to create an exceptional digital platform that not only connects customers with the beauty and emotions of flowers but also contributes to the growth, sustainability, and innovation of the floral industry.
Scope
- Design and implement a user-friendly interface for customers to browse and purchase flowers
- Develop a system for vendors to manage their flower inventory and fulfill orders
- Integrate secure payment processing mechanisms for seamless and protected transactions
- Utilize data analytics and machine learning to provide personalized recommendations to customers
- Collaborate with delivery partners to implement a reliable delivery logistics system
- Implement customer support channels, including live chat and email support
- Optimize performance to ensure fast loading times and minimal downtime
- Implement search engine optimization strategies to improve the platform's visibility
- Build a scalable architecture to accommodate future growth and expansion
- Conduct thorough testing and monitoring to ensure a smooth user experience.
Expected results
We expected to produce the ecosystem for flower industry with two separated modules
- Wholesale Website in which included: o Client Website: serves the most part of the ecosystem Allows user to trade flower in mass production and mass payload by enhance the multi-vendor system o Administrator Website: serves the administrator tasks for manage and insight
- Retailer Website in which included: o Client Website: serves the retail flowers and flowery products such as: cut flowers, design flowery, art model flowery and Accessories included o Administrator Website: manage data and tasks to comprehend the administrator.
THEORY FOUNDATION
ReactJS
React is an open-source JavaScript library that is widely used for building user interfaces (UIs) for web applications It was developed by Facebook and gained popularity for its efficiency and flexibility in creating interactive and dynamic UI components React follows a component-based architecture, allowing developers to build reusable UI elements that can be combined to create complex and responsive applications
React is often referred to as a framework, although it is technically a library
It provides a powerful set of tools and features that simplify the development of web applications With React, developers can create UI components that are modular, reusable, and easy to maintain
One of the key advantages of using React is its virtual DOM (Document Object Model) concept React maintains a virtual representation of the actual DOM, enabling efficient updates to the UI by selectively rendering only the components that have changed This approach significantly improves performance, as it minimizes unnecessary re-rendering of the entire UI
React's component-based architecture promotes reusability and modularity Developers can create individual components that encapsulate specific functionality and can be easily reused across different parts of an application This modular approach enhances code organization, readability, and maintainability
Furthermore, React has a vibrant and active community, which has contributed to the development of numerous third-party libraries and tools These resources extend React's capabilities, providing solutions for state management (such as Redux or MobX), routing (like React Router), and UI component libraries (such as Material-
UI or Ant Design), among others This rich ecosystem allows developers to leverage pre-existing solutions and accelerate the development process
In summary, React is a powerful JavaScript library that simplifies the creation of interactive and dynamic user interfaces for web applications Its component-based architecture, virtual DOM, and declarative programming approach contribute to efficient development, code reusability, and maintainability React's popularity and active community make it a versatile and widely adopted choice for building modern web applications.
Vite
Vite is a fast and lightweight development framework for building modern web applications It aims to optimize the development experience by focusing on speed and simplicity With Vite, developers can create performant and efficient applications using popular JavaScript frameworks like React, Vue, and Svelte
Vite stands out for its unique development server that leverages native ES module support in modern browsers It takes advantage of the browser's ability to directly import ES modules, which eliminates the need for bundling during development This approach significantly reduces build times and allows for near- instantaneous hot module replacement (HMR), enabling fast and responsive development feedback
Vite is designed to be framework-agnostic, meaning it can be used with different JavaScript frameworks and libraries It provides out-of-the-box support for popular frameworks like React, Vue, and Svelte, allowing developers to quickly scaffold and build applications without much configuration
One of the key features of Vite is its dependency pre-bundling Rather than bundling all dependencies together, Vite analyzes and transforms the dependencies on-demand This on-demand approach results in faster load times during development and better overall performance in production
Vite also offers a rich plugin system, allowing developers to extend its functionality and customize the development environment to their specific needs Plugins can be used to enhance features like CSS preprocessing, TypeScript support, linting, testing, and more
Furthermore, Vite provides an optimized production build process that generates highly optimized and minified code bundles It takes advantage of advanced bundling techniques to reduce the bundle size and improve performance, resulting in faster loading times for end-users
Vite's simplicity, speed, and versatility make it a popular choice for modern web development It enables developers to build lightweight and performant applications by leveraging native browser capabilities Whether you are using React, Vue, Svelte, or other frameworks, Vite offers a delightful development experience and helps streamline the process of building modern web applications
.NET is a versatile and powerful framework developed by Microsoft for building a wide range of applications, including web, desktop, mobile, and cloud- based applications It provides a comprehensive set of tools, libraries, and runtime environments that facilitate the development, deployment, and management of robust and scalable applications
The NET Framework encompasses a collection of technologies that enable developers to create applications using different programming languages such as C#, VB.NET, and F# It provides a common runtime environment called the Common Language Runtime (CLR), which manages memory, handles exceptions, and ensures the execution of code written in various languages
.NET offers a high level of interoperability, allowing developers to integrate existing code and libraries into their applications seamlessly It supports multiple programming languages, enabling teams to work collaboratively using their preferred language while sharing common code and resources
In recent years, Microsoft introduced NET Core, a cross-platform and open- source framework that is the successor to the NET Framework .NET Core provides increased flexibility, performance, and portability, enabling developers to build applications that can run on Windows, macOS, and Linux
Furthermore, NET supports modern development practices such as microservices architecture, containerization, and cloud-based deployments It integrates seamlessly with popular cloud platforms like Microsoft Azure, enabling developers to build scalable and resilient applications that can leverage the power of the cloud
In summary, the NET framework provides developers with a robust and versatile platform for building a variety of applications Its extensive class library, cross-language compatibility, interoperability, and support for modern development practices make it a popular choice for creating high-quality software solutions Whether you are building web applications, desktop applications, mobile apps, or cloud-based services, NET offers a comprehensive and reliable framework to meet your development needs.
Javascript
JavaScript often abbreviated JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS Over 97% of websites use JavaScript on the client side for web page behavior, often incorporating third-party libraries All major web browsers have a dedicated JavaScript engine to execute the code on users' devices JavaScript is a high-level, often just-in-time compiled language that conforms to the ECMAScript standard
It has dynamic typing, prototype-based object-orientation, and first-class functions It is multi-paradigm, supporting event-driven, functional, and imperative programming styles It has application programming interfaces (APIs) for working with text, dates, regular expressions, standard data structures, and the Document Object Model (DOM) The ECMAScript standard does not include any input/output (I/O), such as networking, storage, or graphics facilities In practice, the web browser or other runtime system provides JavaScript APIs for I/O
JavaScript engines were originally used only in web browsers, but are now core components of some servers and a variety of applications The most popular runtime system for this usage is Node.js Although Java and JavaScript are similar in name, syntax, and respective standard libraries, the two languages are distinct and differ greatly in design.
APIs structure
API (Application Programming Interface) structure refers to the organization and design principles applied when building an API It encompasses the way endpoints, request methods, data formats, and overall architecture are structured to enable effective communication between systems and facilitate the exchange of data
An API structure typically follows a set of conventions and best practices to ensure consistency, scalability, and ease of use Here are some key aspects of API structure:
1 Endpoint Structure: APIs are organized around endpoints, which represent specific functionalities or resources Each endpoint typically has a URL path and corresponds to a specific action or operation Well-designed APIs often adhere to a hierarchical structure, with clear and intuitive endpoint naming conventions
2 Request Methods: APIs utilize different HTTP methods (such as GET, POST, PUT, DELETE) to indicate the type of operation being performed on a resource These methods define how clients interact with the API endpoints It is essential to use the appropriate HTTP methods based on the action being performed to maintain consistency and adhere to RESTful principles
3 Data Formats: APIs commonly support various data formats for data exchange, such as JSON (JavaScript Object Notation) and XML (eXtensible Markup Language) Choosing a widely supported and lightweight format like JSON is often preferred due to its simplicity, human-readability, and compatibility with different programming languages
4 Authentication and Authorization: API structure includes mechanisms for authentication and authorization to ensure secure access to protected resources This may involve the use of API keys, OAuth, or token-based authentication to validate and authorize client requests
5 Versioning: As APIs evolve over time, it is crucial to incorporate versioning into the API structure Versioning allows for backward compatibility while introducing new features or modifications to existing endpoints This ensures that clients relying on previous API versions are not impacted by breaking changes
6 Error Handling: Well-designed APIs provide informative and standardized error responses to assist developers in troubleshooting and handling errors effectively Error responses should include appropriate HTTP status codes, error messages, and helpful descriptions to aid in debugging
7 Documentation: Clear and comprehensive API documentation is essential for developers to understand how to use the API correctly Proper documentation should include endpoint descriptions, request/response examples, parameter details, and guidelines for authentication and error handling
8 Rate Limiting and Throttling: To manage API usage and prevent abuse, rate limiting and throttling mechanisms can be implemented These controls restrict the number of requests a client can make within a given timeframe, ensuring fair usage and protecting the API from excessive traffic or malicious attacks
9 Pagination and Filtering: When dealing with large datasets, APIs often provide pagination and filtering options to retrieve data in smaller, manageable chunks These features enable efficient data retrieval by specifying the number of records to retrieve per request or applying filters based on specific criteria
10 Consistency and Standards: Maintaining a consistent API structure across endpoints, error responses, and data formats helps improve developer experience and simplifies integration for clients Following industry standards and design principles, such as REST (Representational State Transfer), can ensure a cohesive and well- structured API architecture
In summary, API structure encompasses the organization, design, and conventions applied when building an API A well-structured API follows best practices, such as clear endpoint structure, proper use of HTTP methods, support for standard data formats, robust authentication and error handling mechanisms, comprehensive documentation, and adherence to industry standards A thoughtfully designed API structure fosters ease of use, scalability, and effective communication between systems.
MERN Stack
The MERN stack, consisting of MongoDB, Express.js, React, and Node.js, is a popular and powerful combination for building web applications MongoDB, a NoSQL database, offers flexibility and scalability, allowing developers to handle dynamic and evolving data Express.js provides a robust backend framework for building APIs and handling server-side logic
React, a frontend JavaScript library, offers a component-based approach for creating interactive user interfaces Node.js, a server-side JavaScript runtime, enables efficient and scalable server-side development Together, these technologies form a versatile and efficient stack that empowers developers to create modern, full-stack web applications with ease.
PROBLEM STATEMENT
Current status research
Currently, the purchase and sale of traditional flowers through physical transactions are facing quite large obstacles and seem to have formed a difficult habit of business people
Wholesale florists are having a hard time recoup their revenue from flower sales due to debt and money confinement issues
Wholesale flower buyers are also a household business, so they are very focused on the revenue generated from retailing flowers and whether or not the sale of flowers will also greatly affect the trade between retail florists and wholesale florists
Today, with online flower delivery, the flower industry has evolved once again, enabling florists to grow their local sales and reach customers in new and exciting ways In fact, the online flower shop market size is expected to grow 2.8% in 2022 and reach a total market value of $5.3 billion in the US alone
By multiple reasons, online shopping is now take place the original shopping or traditional shopping, such as:
- Customers are more comfortable with online ordering: One of the biggest factors driving the growth of online flower delivery is customers’ comfort with online ordering During the pandemic, e-commerce grew exponentially as people explored new ways to get products delivered while quarantine and social distancing measures were in place
- Customers expect businesses to offer quick delivery:Customer demand for quick delivery has increased quickly in recent years According to Search Engine Journal, searches for “next day flower delivery” have increased 800% year over year This highlights the immediacy with which customers expect to have products in hand after ordering online
3.1.2 Revenue and growth rate of e-commerce market in Vietnam
Vietnam's e-commerce market has made great strides, especially since 2015 Compared with Southeast Asian countries, Vietnam is a country with a strong and prominent e-commerce platform Therefore, although the growth rate of e-commerce in Vietnam has slowed down in the last 2 years, Vietnam is still a potential e- commerce market for businesses to exploit and invest
Specifically, in 2015, the growth rate of Vietnam's B2C e-commerce market reached 37% with a revenue of more than 4 billion USD Over the years, e-commerce in Vietnam has always achieved positive growth with an average growth rate of about 25% Vietnam's e-commerce market in 2020 will grow by 18%, with B2C e- commerce market revenue reaching 11.8 billion USD This is the lowest growth rate in the past 5 years due to the impact of the Covid-19 epidemic However, this growth rate is still an impressive number compared to other countries in the world, leading in Southeast Asia
3.1.3 Consumer behavior in the Vietnamese e-commerce market
In January 2021, We Are Social and HootSuite's "Digital in Vietnam 2021" report surveyed Internet users aged 16 to 64 in Vietnam about e-commerce In which, 85.5% of users have ever searched for a product or service over the Internet 77.3% of users have visited an online store or e-commerce platform
78.7% of consumers have purchased at least one product or service online However, when analyzed further, this number varies by age group Specifically, 70.6% of consumers aged 16-24 said that they shopped online within 1 month of the survey period This number is 10% lower than the purchasing rate of 25-54 year olds
It can be seen that, with the impact of Covid-19, young customers are still financially dependent or not rich tend to spend more sparingly
3.1.4 Surveying the trend of using e-commerce of Vietnamese
The top 3 e-Commerce platform specify for flowery in Vietnam
Overview: https://potico.vn/ is one of the first company to introduce “single- vendor” flower delivery and tradition by calling the hotlone
Overview: This is the website that is said to be the number 1 flower service not only in Ho Chi Minh City Ho Chi Minh City but also the number 1 service in
Vietnam Hoayeuthuong.com provides flowers to 63 provinces and cities across the country with a variety of flowers for customers to choose freely
With the supply of locally sourced flowers to ensure freshness and the support of that key local community They are also dedicated to bringing Vietnamese flowers to the global market That's why they are working hard to create a worldwide network of flowers
Overview: Although Shopee is more than flowery, it still one of the most used E-commerce platform for flower marketplace.
User types of system
1 User The user already has an account
2 Admin The administrator of the website content management.
Features
Register x Allow users to create an account to log into the system
Login x x Allow users to log in to the system to buy products
Logout x x Allow users to logout of system
View product market x x Allow users to view product current market price and seller info
Manage profile x x Allow users to manage their profile by view, change info and edit
Find product x x Allow users to locate their product
See product list x x Allow users to find their product in different type and variety See product market detail x x Allow users to see the current market of product
Create order X Allow users to create orders on their purpose to purchase the product on market
Allow users manage their order(order status, information, shipping address, amount)
Allow users to deposit to order as a type of pre-pay for the order and allow order to be on list of transfering Payment (pay order) x Allow users to fully pay for their order Review product(public) x Allow users to review their products when finishing order
Allow users to see the product detail such as type, category, diameter of the head of flowers,…
Manage Wallet X Allow users to manage their integrated wallet
Connect new bank account x Allow users to connect their bank account to wallet for further functions
Deposit/withdraw x Allow users deposit into the integrated wallet of platform Create a category in product x Allow admin to create categories for specify product
Create Demand x Allow users to create demand for selling or ask to buy products
Manage Demand x Allow users to manage their demand
Allow users to manage shipping address(CRUD) for locate where physical trading should happen Developer panel x Development enviroment for testing
Register x Allow users to create an account to log into the system
Allow users to log in to the system to buy products (Can using one account that may register to wholesale platform)
Logout x x Allow users to logout of system
Find product x x Allow users to find their wanted products that available on platform
See product list x x Allow users to view their product in list of different variety
See product detail x Allow users to view the product detail
Add to cart x Allow users to add the items to their cart for further payment and purchase
Manage order x Allow users to manage their order(tracking and editting shipping info,…) Payment (pay order) x Allow users to pay for their products Review product x Allow users to check the product before fisnishing order
Add new product for sell X Allow users to add new product for selling them
Manage their sell and sold product X Allow users to manage their products
Manage profit x x Allow users to manage their profit
Manage Wallet X Allow users to manage their integrated wallet
Deposit/withdraw x Allow users to deposit money into the integrated wallet
Manage store X Allow users to manage their store(selling products,…)
Manage profile x Allow users to manage their profile(CRUD informations)
DESIGN APPLICATION
Database Design
Figure 4: Wholesale System Database Design
Figure 5: Retailer System Database Design
Use case diagram
Figure 6: Wholesale System Admin Use Case b Retailer
Figure 7: Retailer System Admin Use Case
Figure 8: Wholesale System User Use Case b Retailer User
Figure 9: Retailer System User Use Case
4.2.3 Use-case specification a Log in
Brief Description The way user application logins
Actor(s) All user login into system
This usecase starts when the user wants to access the system
1 User “Login” function on the system
2 User enter the correct username and password then click "Log in"
3 The system will return user to Main Page
Enter the wrong login information
1 If the user enters an invalid password, the system will ask you to re-enter password
2 If the user enters an invalid username, the system will ask you to re-enter username
The user already has an account on the system
Success The user accesses the system
Failure The user cannot log in
Brief Description The way customer creates personal account
This use case starts when the user chooses the function to register
1 When the user selects the "Register" function in the system, the system will display the Registration page with information about username, password, phone number, email, address, etc
2 Customer fills out the above information and press the "Register" button
Fill out the information missing
The system requires you to enter your name, address, personal phone number, name of vendor(customize)
User successfully connected to the system
Success User create account successfully
Failure User create account failure
None c Add to cart (Only in retail)
Table 6: Add to cart (Retailer) Brief
Name Add product to cart
Brief Description The way customer add product to cart
This use case starts when the customer selects the function to add to cart
1 Customer chooses the product that customer wants to add to cart
2 Customers can view product details before they add to cart
Fill out the information missing
The system forces you to choose the quantity before adding to the cart
The customer has successfully logged into the app and the product the customer is looking for is still on sale
Success Customer add to cart successfully
Failure Customer cannot add to cart
Brief Description The way customer search product
This use case starts when the Customer chooses the function to search product:
1 Customer chooses the "Search” box in search bar on header
2 Customer enter name of product and click search
3 The application will display products by keywords that customers use to search
Customer enters a keyword that is not in the database
Notification system that this product does not exist
Success Customer can see list of products
Failure Customer cannot find any results
Brief Description The way Customer Pay for what they want to purchase
This use case starts after the customer create order
1 Customer chooses the " Checkout" function in the system
2 Customers must fill in the recipient's address, name, and phone number or using already added information
3 The notification system that the product has been ordered
The system returns to the cart site
Customer successfully accessed into the Cart page and select button “Checkout”
Table 9: Deposit Order (Wholesale) Brief
Brief Description The way Customer deposit for the order
This use case starts after the customer choose payment method
4 Customer chooses the "Deposit(Đặt cọc)" function in the system
5 Customer must have enough amount on Wallet
6 The notification system that the product has been deposit
The system returns to the order page
Success Product order deposit successfully
Failure Product order deposit failed
Brief Description The way customer view products
This use case starts when the customer chooses the function to View Product
1 Customer choose the product that they want to view
2 The system redirects customer to the product detail h Edit personal information
Table 11: Edit Personal Info Brief
Brief Description The way user edit personal information
This usecase starts when the user chooses the function to edit personal information
1 User chooses the "user icon" in the system
2 The system displays “Edit personal information” screen
3 User re-enter new information and clicks "Edit" button
4 The notification system has successfully change information
User confirmation of new information failed
The system requires the user to enter a new information
User successfully logged into the system
Success User change information successfully
Failure User change information failure
Table 12: Manage User, Product Brief
Brief Description The way admin delete user, product
This use case starts when the user chooses the function to delete user, product
1 Admin chooses the " delete” in the system
2 The notification system has successfully change information
User successfully logged into the system with type Admin
Name Add product, brand, category
Brief Description The way admin add product, brand, category to system
This use case starts when the admin chooses the function to add product, brand, category to system
1 Admin choose product in product management
2 The system displays product list, brand list, sub category
3 Admin choose product and click “Submit” button
The information is missing out
Admin can not add product, brand, category to system
The admin successfully login into the website and they are in product management
Success Admin add product to system successfully
Failure Admin add product to system failure
Sequence diagram
Figure 10: Admin Add New Product Sequence Diagram
Figure 11: Admin Delete User, Product S.D
Figure 16: User Trade with Demand S.D
Figure 19: User As Seller Manage Order Status S.D
Figure 20: User Deposit By Balance Check S.D
Figure 21: User as Buyer Accept Order
Figure 22: User Connect Bank Account to Wallet S.D
Figure 23: User manage Store by edit Profile
Figure 24: User Manage Demand in Store S.D
Figure 25: User manage their wallet: view transaction, balance, money transfer status, amount S.D
Figure 26: User Deposit to Wallet
Figure 27: User Withdraw from Wallet S.D
Figure 28: User in Retailer Add to Cart S.D
Figure 29: User in Retailer View Product S.D
Figure 30: User in Retailer Rating S.D
Figure 33: User in Retailer Search S.D
Figure 34: User in Retailer Pay Order S.D
Figure 35: User in Retailer Edit Profile S.D
Figure 36: User in Retailer manage their Store
ACHIEVEMENT RESULT
Implementation 1 Tools
- Front-end development: o ReactJS o HTML/CSS/Javascript + Typescript o TailwindCSS o React State Management Library: react-redux, @redux-toolskit o React Functional Components Library: react-image-scaler, react- currency-input-field,… o TailwindCSS library: Official Plugins(Typography, Table), Flowbite,
- Back-end development: o Net Core 7 o Net Core 7 Extension Library: Dapper, CountryCode,… o MongoDB + Daemon o ExpressJS o NodeJS + Nodemon
- Front-end Build Tools: o ViteJS o Eslint
- Third-party APIs: o VietQR.io
- Version Control/CICD: o Gitlab o Github o Sourcetree o GitDraken
Website Interface
1 Route to Main Page of website if user not login yet then route to /login
2 Route to register b Login Page
3 Button to verify login and authentication
4 Change to register page c Register Form
2 Input password and retype pass word
3 Accept Privacy and Term of Conditions
7 Open User Menu e Market cont
3 All Products > Click on a Products to see product detail f Product Detail
2 Product Market, click on one of the card(demand) to see trading data of it and create order with its demand (See figure 42)
3 All Products > Click on a Products to see product detail
Figure 43: Create order with the chosen demand h Order Page
3 Order Card/Table can be switch with functions [2] i Order detail
2 Create a transaction with two types : deposit and withdraw, when deposit > type amount and click “Nạp Tiền” a modal show up with QR code to fast fill bank info or manual clip info See figure 46
3 Connected Bank Account, user want to add new bank account, click “Thêm tài khoản mới +”, see figure 49 k Modal QR
1 QR code for scanning with Smart Banking app
2 Click on “Tôi đã chuyển khoản” after transfer money to complete deposit l Withdraw
1 Choose bank account wanted to transfer to
3 Click on “Rút tiền” to complete withdraw m Modal Add New Bank Account
Figure 49: Modal add new bank account
1 Choose bank account wanted to transfer to
3 Click on “Rút tiền” to complete withdraw n Store
3 Route to other components : Vendor Info (thông tin cửa hàng), Shipping
Address(địa chỉ nhận hàng), Demand (tin đăng)
5 Update Vendor Info o Shipping address
2 Config or update address p Your Demand
2 Demand Card, click to see detail of demand, see figure 53 q Demand Detail
2 Button to move to order page
3 Button to move to cart page
1 Show total price of products
2 List of products added to cart
2.1 Button to buy this product
2.2 Button to remove product from cart
3 Total number of products in the cart
4 Button to buy all products in the cart
3 Number of flowers in stock
5 Button to add flower to the cart
7 Show information of the owner of the flower garden
2.3 Display the user's listings for sale
SOFTWARE TESTING
Achievement
Practice and apply knowledge gained from university:
❖ Understand how to manage and implement a project
❖ Learn more new technologies to apply to software development: React, Vite, TailwindCSS, Typescript
Advantages
❖ Features are developed based on user experience, so they should follow the main principle of UX design
❖ Suitable for small and medium e-commerce models, multi vendor, easy to manage, support marketing and analysis methods
❖ The function buttons are easy to press, and the user interface is appealing
❖ Multiple functions help user to have a better experiences
Disadvantages
❖ The website requires an medium good internet connection
❖ Functions and graphics take time to process information
❖ The ability to log in is limited, only work with original register and Google
❖ Functionality is limited because it is in the development stage
❖ Some requirement may not be implement yet due to lack of time.
Future Development
❖ Improved interface, flexibility in payment with many forms
❖ Develop on the whole website with fully functioning so that users can access the way they want
❖ The development team will improve and upgrade with mobile app in the future with new features for users
[ 1 ] ReactJS: Facebook (n.d.) ReactJS Documentation Retrieved from https://reactjs.org/
[ 2 ] HTML/CSS: Mozilla (n.d.) MDN Web Docs - HTML Retrieved from https://developer.mozilla.org/en-US/docs/Web/HTML
[ 3 ] JavaScript: Mozilla (n.d.) MDN Web Docs - JavaScript Retrieved from https://developer.mozilla.org/en-US/docs/Web/JavaScript
[ 4 ] TypeScript: TypeScript (n.d.) TypeScript Documentation Retrieved from https://www.typescriptlang.org/docs/
[ 5 ] TailwindCSS: Tailwind Labs (n.d.) Tailwind CSS Documentation Retrieved from https://tailwindcss.com/docs
[ 6 ] React Redux: Redux (n.d.) React Redux Documentation Retrieved from https://react-redux.js.org/
[ 7 ] Redux Toolkit: Redux Toolkit (n.d.) Redux Toolkit Documentation Retrieved from https://redux-toolkit.js.org/
[ 8 ] React Image Scaler: GitHub (n.d.) React Image Scaler Retrieved from https://github.com/bmcmahen/react-image-scaler
[ 9 ] React Currency Input Field: GitHub (n.d.) React Currency Input Field Retrieved from https://github.com/benjamin-dobell/react-currency-input-field
[ 10 ] Flowbite: Flowbite (n.d.) Flowbite Documentation Retrieved from https://flowbite.com/docs
[ 11 ] DaisyUI: DaisyUI (n.d.) DaisyUI Documentation Retrieved from https://daisyui.com/docs
[ 12 ] NET Core: Microsoft (n.d.) .NET Core Documentation Retrieved from https://docs.microsoft.com/en-us/dotnet/core/
[ 13 ] Dapper: GitHub (n.d.) Dapper Retrieved from https://github.com/DapperLib/Dapper
[ 14 ] CountryCode: NuGet (n.d.) CountryCode Package Retrieved from https://www.nuget.org/packages/CountryCode/
[ 15 ] MongoDB: MongoDB (n.d.) MongoDB Documentation Retrieved from https://docs.mongodb.com/
[ 16 ] ExpressJS: Express (n.d.) Express.js Documentation Retrieved from https://expressjs.com/
[ 17 ] Node.js: Node.js (n.d.) Node.js Documentation Retrieved from https://nodejs.org/en/docs/
[ 18 ] Swagger UI: Swagger (n.d.) Swagger UI Retrieved from https://swagger.io/tools/swagger-ui/
[ 19 ] ViteJS: Vite (n.d.) Vite Documentation Retrieved from https://vitejs.dev/
[ 20 ] ESLint: ESLint (n.d.) ESLint Documentation Retrieved from https://eslint.org/docs/
[ 21 ] Vercel: Vercel (n.d.) Vercel Documentation Retrieved from https://vercel.com/docs
[ 22 ] Viettel IDC: Viettel IDC (n.d.) Viettel IDC Retrieved from https://viettelidc.com.vn/
[ 23 ] VietQR.io: VietQR.io (n.d.) VietQR.io Documentation Retrieved from https://vietqr.io/
[ 24 ] GitLab: GitLab (n.d.) GitLab Documentation Retrieved from https://docs.gitlab.com/
[ 25 ] GitHub: GitHub (n.d.) GitHub Docs Retrieved from https://docs.github.com/
[ 26 ] Sourcetree: Atlassian (n.d.) Sourcetree Documentation Retrieved from https://www.sourcetreeapp.com/documentation
[ 27 ] GitKraken: GitKraken (n.d.) GitKraken Documentation Retrieved from https://support.gitkraken.com/
[ 28 ] Vietnam Flowers and Ornamental Plants Association (VOVFA) (n.d.) VOVFA - Vietnam Flowers and Ornamental Plants Association Retrieved from http://www.vovfa.vn/
[ 29 ] Vietnam National Administration of Tourism (n.d.) Vietnam National Administration of Tourism Retrieved from https://vietnamtourism.gov.vn/
[ 30 ] International Floriculture Expo (IFE) (n.d.) International Floriculture Expo Retrieved from https://www.floriexpo.com/
[ 31 ] Florint (n.d.) Florint - International Florist Organization Retrieved from https://www.florint.org/
[ 32 ] Floraculture International (n.d.) Floraculture International - Global Flower Industry News Retrieved from https://www.floracultureinternational.com/
[ 33 ] FloralDaily (n.d.) FloralDaily - Global Floriculture News Retrieved from https://www.floraldaily.com/
[ 34 ] Union Fleurs (n.d.) Union Fleurs - International Flower Trade
Association Retrieved from https://www.unionfleurs.org/
[ 1 ] Hoang, H., & Le, T (2020) "An Analysis of the Vietnamese Flower Market: Opportunities and Challenges." International Journal of Economics, Commerce and Management, 8(8), 309-318
[ 2 ] Nguyen, T T (2019) "The Competitive Structure and Market
Performance of the Vietnamese Flower Industry." Journal of Economics and Development Studies, 7(3), 32-40
[ 3 ] Le, T P., & Nguyen, T H (2018) "Analysis of Consumer Behavior and Preferences in the Vietnamese Flower Market." Asian Journal of
[ 4 ] Nguyen, V T., & Hoang, V H (2017) "Competitive Strategies and Market Structure in the Vietnamese Flower Industry." International Journal of Management and Economics, 53(1), 71-81
[ 1 ] Mr Pham Quoc Viet, Developer, FMP Joint Stock Co i NodeJS Support (10% of total work)
[ 2 ] Mr Phan Minh Tai, C.T.O, FMP Joint Stock Co i .Net Instructor (5% of total work) ii .Net Backend Maintainer (5% of total work)
La Quang Huy 18110017@student.hcmute.edu.vn Back-end, Front-end,
Huỳnh Văn Hạnh 18110012@student.hcmute.edu.vn Front-end, Documentation
Task Total Time Cost Reserve Maintainance