• Allow admin of website to manage users, orders, statistics, products, categories • Allow admin of website to create, read, update and delete CRUD product’s information • Allow admin of
INTRODUCTION
Overview of the project
The internet has revolutionized shopping, eliminating the need to drive to a nearby mall and search for parking Now, shoppers can effortlessly browse for clothing and other items using any internet-enabled device, saving time and hassle.
Same-day delivery from reputable online shopping sites allows us to receive essential items, such as meals, within minutes, highlighting the unmatched convenience and speed of online shopping.
The Covid-19 pandemic has accelerated the popularity of online shopping, presenting a unique opportunity to establish a brand in this burgeoning market Inspired by this shift, I created Old Fashioned, an innovative online clothing store To differentiate our website from traditional e-commerce platforms, we have integrated numerous user-friendly features that enhance convenience and streamline the shopping experience for our customers.
Reasons for choosing the project
The cloth retail sector presents significant opportunities for market expansion through web applications, allowing shops to reach a wider audience beyond their physical locations By breaking geographical barriers, these applications enable retailers to target customers from various regions, tapping into new markets and enhancing brand visibility, ultimately driving sales growth.
Creating a web application for a clothing store enhances its competitive edge in the digital marketplace By adopting technology and providing an online shopping experience, the store can set itself apart from competitors that depend only on physical locations This strategy allows the shop to remain innovative, appeal to tech-savvy consumers, and establish itself as a leader in the industry.
Objectives of the project
Our web application prioritizes a seamless user experience with an intuitive and user-friendly interface Customers can easily navigate various clothing categories, apply filters for refined searches, and access detailed product information By offering high-resolution images, precise descriptions, and customer reviews, we enable users to make informed purchasing decisions.
Our web application effortlessly integrates with existing shop systems such as inventory management, order processing, and customer relationship management This seamless integration optimizes operations, boosts efficiency, and reduces manual tasks, leading to significant cost savings and enhanced overall business performance.
Expected Results
• User Registration and Login: The application should allow users to create an account, providing their basic information and preferences
The application must include a detailed product catalog that organizes clothing into categories such as casual, formal, and sportswear, enabling users to easily browse and search for specific items Each product should feature comprehensive descriptions, multiple high-resolution images, and up-to-date pricing information.
Users must have the ability to easily add items to a shopping cart, review their selections, and navigate through a secure checkout process The application should accommodate a variety of payment methods, including credit and debit cards, digital wallets, and other relevant payment gateways to enhance the user experience.
Users can leave reviews and ratings for purchased products, enabling them to share their experiences The application should showcase average ratings and user feedback, assisting potential buyers in making informed purchasing decisions.
• Account Management: Users should have the ability to manage their account settings, including profile information, shipping addresses, payment methods, and communication preferences
• Store Management: Admin should have the ability to manage products, users, categories, statistics, orders
THEORY FUNDAMENTAL
Bootstrap
Bootstrap is a free, open-source framework designed for web development, streamlining the creation of responsive, mobile-first websites with its extensive set of templates This framework enhances efficiency for web developers by reducing the necessity for basic commands and functions It includes HTML, CSS, and JavaScript scripts that facilitate various web design tasks and components.
Here are some compelling reasons:
• Universal Browser Compatibility: Bootstrap exhibits compatibility with all browsers, making it a versatile choice
• Inherent Mobile-First Design: Unlike other frameworks, Bootstrap integrates a mobile-first style throughout its library, rather than as isolated files
• User-Friendly: Familiarity with HTML and CSS is sufficient to commence work with Bootstrap Comprehensive documentation is readily accessible on the official website, further facilitating its use
Bootstrap enables adaptive design for websites, utilizing responsive CSS to seamlessly adjust to various screen sizes, including large desktops, laptops, tablets, and mobile phones.
• Ease of Customization: Bootstrap presents an array of pre-existing components and functionalities that are simple to modify according to specific requirements
• Consistent Interface for Developers: Bootstrap ensures a uniform and fresh outcome for the development of user interfaces on web pages
• Open-Source Nature: Being an open-source framework, Bootstrap supports customization in a web-based environment
How apply Bootstrap to build our project?
User front-end: design the user interface for the user page so that they can manipulate and interact with it
Admin front-end: design the management interface for the admin page so that they can manipulate and manage the website
ReactJS
ReactJS is an open-source JavaScript library, maintained by Facebook and a community of developers, designed for building user interfaces It excels in creating fast, interactive user experiences, particularly for single-page applications that require high performance.
• Rich Ecosystem: ReactJS has a rich ecosystem that includes a variety of tools, libraries, and extensions that can help to enhance your development process
• Strong Community Support: ReactJS has strong community support that can provide quick solutions and contributions to the library
• Used by Large Companies: ReactJS is used by large companies like Facebook, Instagram, and WhatsApp, which speaks volumes about its efficiency and reliability
• Easy to Learn: Compared to other frameworks, ReactJS is easier to learn due to its simplicity and straightforward programming concepts
• Ability to Use JavaScript Libraries: ReactJS does not require exclusive use of JSX, and developers are free to use other JavaScript libraries
ReactJS employs a component-based architecture that fosters code reusability and boosts maintainability This modular structure allows developers to decompose intricate user interfaces into simpler, more manageable components, enhancing the overall flexibility of the code.
• Efficient Rendering: ReactJS utilizes a virtual DOM, which optimizes the performance by minimizing direct DOM manipulations This leads to efficient updates and faster rendering of the user interface
• Declarative Nature: ReactJS follows a declarative programming paradigm, which makes the code more readable and easier to debug This approach simplifies the development of complex user interfaces
• Unidirectional Data Flow: ReactJS supports a unidirectional data flow, which enhances the predictability of the application and simplifies state management
How apply ReactJS to build our project?
Building the Front-end: The component-based structure of React simplifies the organization of code, leading to a codebase that is easy to maintain
Navigating Routes: The use of React Router improves navigation by providing intuitive updates in response to URL alterations
Interacting with APIs: React enables effective data exchange with the backend using tools like the Fetch API or Axios.
NodeJS
Node.js is a powerful open-source, cross-platform JavaScript runtime that enables developers to execute JavaScript code outside of a web browser This allows for the creation of command-line tools and server-side scripting, facilitating the generation of dynamic web page content before it is delivered to users' browsers.
• Efficient Performance: Node.js operates on the V8 engine developed by Google that uses JavaScript into native machine code and operates at a super speed
Node.js operates on a single-threaded model that utilizes event looping, enabling non-blocking responses from the server This architecture significantly enhances scalability compared to traditional servers, which rely on a limited number of threads to manage incoming requests.
• Community Friendly: Node.js has a robust and active community of developers who continuously contribute to its improvement
• Freedom in Building Apps: Developers have the freedom to build apps There are no strict guidelines laid down for the developers
In Node.js, HTTP requests and responses are treated as isolated events, yet they fundamentally function as data streams Leveraging this capability allows developers to create innovative and dynamic features, enhancing the overall performance and user experience of applications.
• Real-Time Web Applications: Creating real-time web applications like chat and gaming apps are extremely easy with Node.js
How apply NodeJS to build our project?
Setting up the Server: NodeJS allows you to spin up a server quickly with just a few lines of code
Creating Routes: You can create routes to define how your app should respond to a client request to a particular endpoint
Interacting with the Database: Node.js can interact with databases to store, retrieve, and manipulate data
Building APIs: You can build APIs to serve data to your client-side application.
ExpressJS
Express.js is a fast, unopinionated, and minimalist web framework for Node.js It provides a robust set of features for web and mobile applications
Express.js utilizes a middleware architecture, where middleware functions can access the request (req) and response (res) objects, as well as the subsequent middleware function in the application's request-response cycle.
Routing in Express.js defines how an application's endpoints (URIs) respond to client requests, utilizing a routing table to execute various actions based on the HTTP method and URL.
Express.js primarily utilizes Jade as its default template engine, but it also supports various alternatives like EJS and Pug Template engines allow developers to incorporate static template files into their applications, enhancing the flexibility and efficiency of web development.
• Simplified Multiple Routing: Express.js supports multiple routing You can create route handlers for specific paths with multiple HTTP verbs at the same path
Express.js offers robust database integration, supporting various databases such as MongoDB, MySQL, and Redis This flexibility enables developers to store data in a structured format, efficiently retrieve it as needed, and perform a wide range of operations on the data.
• Debugging: Express.js provides a debugging mechanism to identify the development and production issues
• Easy to Configure and Customize: Express.js is very flexible and pluggable It is easy to configure and customize
How to apply ExpressJS to build our project?
Setting up the Server: Express.js allows you to set up a server with just a few lines of code
Defining Routes: Express.js provides a straightforward way to define routes and their handlers
Using Middleware: Express.js allows you to use middleware to handle requests and responses
Error Handling: Express.js provides a built-in error handler for handling any errors that might occur in your application
Serving Static Files: Express.js can serve static files like images, CSS files, and JavaScript files
Express.js simplifies the process of creating RESTful APIs, allowing developers to respond to HTTP requests efficiently with various status codes, which facilitates the development of a comprehensive API.
MongoDB
MongoDB is an open-source NoSQL database management system that differs from traditional relational databases by not using tables for data storage and retrieval As a NoSQL solution, it is particularly effective for handling large sets of distributed data MongoDB excels in managing document-oriented information, making it a valuable tool for storing and retrieving diverse data types.
• Document Database: MongoDB is a document database in which one collection holds different documents Number of fields, content and size of the document can differ from one document to another
MongoDB delivers exceptional performance for data persistence, particularly through its support for embedded data models that minimize I/O activity on the database management system Additionally, its built-in sharding feature facilitates horizontal scaling, making it an ideal choice for read-heavy workloads.
• Rich Query Language: MongoDB supports a rich query language that allows for complex queries, including support for array updates and projections
• High Availability: MongoDB’s replication facility, called replica set, provides automatic failover and data redundancy, which is a boon for business continuity and disaster recovery
• Horizontal Scalability: MongoDB provides horizontal scalability as part of its core functionality Sharding distributes data across a cluster of machines
• Supports Agile Practices: MongoDB supports agile practices, frequent code releases and automatic schema evolution Unlike relational databases, MongoDB enables flexible and iterative development
How to apply MongoDB to build our project?
Storing Data: You can store data in MongoDB in a flexible, JSON-like format where fields can vary from document to document
Querying Data: You can query data in multiple ways, filtering out the information you need, and it also supports real-time analytics and processing of large amounts of data
Storing Files: MongoDB can be used to store files of any size without complicating your stack
Data Security: MongoDB offers multiple security features such as authentication, auditing, and encryption at rest, ensuring your data is secure.
Machine Learning
Machine learning (ML), a subset of artificial intelligence (AI), involves creating computer systems that learn from data, allowing software applications to enhance their performance over time This versatile technology is utilized across various fields, including image and speech recognition as well as natural language processing.
30 processing, recommendation systems, fraud detection, portfolio optimization, and automating tasks
Visual search technology allows customers to easily find similar products by uploading images or screenshots of items they admire, such as a stylish jacket seen on a friend or celebrity Powered by machine learning, this image-based similarity search enhances the shopping experience on your website, making it effortless for users to discover products that match their preferences.
Enhancing user experience is crucial for online shopping, as recommending similar products based on a customer's current view keeps them engaged and encourages longer browsing sessions This strategy not only helps customers discover new items that pique their interest but also increases the likelihood of making additional purchases.
Image-based similarity search enhances the shopping experience by helping customers find exactly what they want or discover even more appealing products This targeted approach increases the likelihood of conversions, turning website visitors into paying customers and ultimately boosting sales.
How to apply Machine Learning to build our project?
Our project aims to develop an advanced fashion recommendation system utilizing Convolutional Neural Networks (CNN) and a Nearest Neighbour algorithm We will train neural networks to analyze fashion items, creating a comprehensive inventory database By employing the Nearest Neighbour algorithm, we can generate personalized product recommendations based on user-uploaded images, ensuring relevant and tailored fashion suggestions.
Convolutional Neural Networks (CNNs) are specialized artificial neural networks designed for effective image recognition They decompose images into smaller components to identify patterns, enhancing their learning capability After pre-processing the data, CNNs are trained using transfer learning from ResNet50, with additional layers incorporated at the end to adapt the architecture and weights, fine-tuning the model for specific tasks.
Transfer learning effectively addresses the challenges posed by small fashion datasets by pre-training classification models on the extensive DeepFashion dataset, which contains approximately 45,000 garment images The trained networks demonstrate impressive accuracy, characterized by low error rates, minimal loss, and strong F-scores during validation.
Built With/Dependencies: OpenCV, Tensorflow, Tqdm, streamlit, pandas, Pillow, scikit- learn, opencv-python, flask and cloudinary
SYSTEM REQUIREMENTS CAPTURING AND MODELLING
Current status surveys
The Covid-19 pandemic has severely impacted businesses worldwide, accelerating the trend of remote shopping that had already begun prior to the crisis With just a few clicks, consumers can easily place orders online, receiving packages at their doorstep within days This shift has become essential for entrepreneurs looking to adapt to changing market conditions For younger generations, mobile phones are now seen as indispensable accessories, and daily internet browsing has become a norm, further driving the popularity of online shopping.
Table 1 Advantages and disadvantages of Shopee
Advantages and disadvantages of Shopee
Advantages - Fast and Easy to Use: Shopee's app and website are designed for speed and ease of navigation
- Great on Many Devices: The platform works well on laptops, tablets, and smartphones, making it accessible to a wide range of users
- Buyer-Seller Connection: The built-in chat function allows for easy communication between buyers and sellers
- Multiple Payment Options: Shopee offers various payment methods for user convenience
- Clear Information: Shopee provides comprehensive information about the platform, its policies, and how to use its features
- Engaging Features: Features like Shopee Games and Shopee Live add a fun element to the shopping experience
Disadvantages - Ad Overload: The platform can be cluttered with advertisements, which might be distracting for some users
❖ Amazon: https://www.amazon.com/
Table 2 Advantages and disadvantages of Amazon
Advantages and disadvantages of Amazon Advantages - Multilingual Support: Amazon caters to a global audience by offering its platform in multiple languages
- User-Friendly Interface: While simple, the Amazon interface is well- designed and easy to navigate for a smooth shopping experience
- Intuitive Navigation: Finding and exploring products on Amazon is straightforward thanks to well-placed functions and clear navigation
- Detailed Product Information: Amazon provides comprehensive details about products, allowing users to make informed purchasing decisions
Amazon prioritizes transparency and accessibility by providing comprehensive information about its policies and partnership programs directly on its website Additionally, the platform ensures device compatibility, allowing users to access services effortlessly on laptops, tablets, and smartphones.
Disadvantages - Limited Payment Options: Only accept paypal and master card as payment method
❖ Louis Vuitton: https://eu.louisvuitton.com/
Table 3 Advantages and disadvantages of Louis Vuitton
Advantages and disadvantages of Louis Vuitton Advantages - Louis Vuitton’s brand and visual components, including its user experience (UX) and user interface (UI), have significantly improved over the years
Louis Vuitton has embraced the direct-to-consumer (DTC) approach, enabling the brand to maintain greater control over its reputation and enhance its understanding of customer relationships through online platforms.
- Digital Presence: Louis Vuitton’s digital presence allows it to capitalize on the growing trend of online shopping while maintaining its luxury image
Disadvantages - Lack of Two-Way Communication: Despite having a strong social media presence, Louis Vuitton lacks a dialogue between them and their customers
- Counterfeit Products: Louis Vuitton products are often counterfeited, so it’s important for customers to be careful when buying them
List of software requirement
3.2.1 List of business functional requirements
Table 4 Product Management Functional Requirement
Lookup Conducting market research to identify popular trends and flavors in the milk tea industry, and analyzing sales data to determine the most popular menu items
Archive Creating new menu items that align with customer preferences and market trends, and refining existing menu items to improve their taste and appeal
Archive Setting prices for menu items that reflect their value to customers and their profitability for the business
Archive Monitoring the performance of menu items, analyzing sales data, and identifying opportunities for improvement or product retirement
Table 5 Order Management Functional Requirement
Lookup Entering and processing customer orders in a timely and accurate manner, and verifying product availability and pricing
Archive Monitoring inventory levels and ensuring that sufficient stock is available to meet customer demand, while minimizing excess inventory
3 Order tracking and status updates
Lookup Providing customers with updates on the status of their orders, including estimated delivery or pickup times
Table 6 Payment processing management functional requirement
No Business Job Type Related Regulations/Formulas Notes
Archive provides a variety of payment options for customers, including cash, credit and debit cards, mobile payment apps, and online payment platforms This flexibility enables customers to select their preferred payment method, ensuring a seamless and convenient transaction experience.
Once a payment is accepted, it must be processed securely and efficiently, which includes verifying the payment information, authorizing the transaction, settling the funds, and reconciling the payment with the corresponding order.
Archive Implement security measures to protect the payment information of customers and prevent fraudulent transactions This can include using encryption, tokenization, and PCI compliance standards
Archive A clear policy for handling refunds or chargebacks, which occur when a customer disputes a payment or requests a refund
This involves issuing refunds, handling chargebacks, and tracking the payment status of each refund
Table 7 Reporting and analystic management functional requirement
No Business Job Type Related Regulations/Formulas Notes
To optimize operations, businesses should systematically collect data on key areas like sales, inventory, customer behavior, and employee performance This data can be gathered through diverse methods, including point-of-sale systems, customer surveys, and employee feedback, enabling informed decision-making and improved performance.
Archive The collected data should be analyzed to identify trends,
40 patterns, and insights that can inform business decisions This can involve using tools such as spreadsheets, data visualization software, and business intelligence platforms
Archive Identify key performance indicators (KPIs) that measure its success in achieving its goals
These KPIs can vary depending on the shop's objectives, but may include metrics such as sales revenue, profit margin, customer satisfaction, and employee productivity
4 Reporting Lookup Generate regular reports that summarize its performance and highlight key insights and trends
These reports can be shared with management, employees, and other stakeholders to inform
41 decision-making and facilitate communication
Table 8 Category management functional requirement
Archive Creating new menu category items that align with product preferences
2 Label category with following product
Archive Adding product to category for user to search or filter
3.2.2 List of system function requirements
● List of system function requirements
No Content Detailed description Notes
The system must facilitate seamless product inventory management by enabling users to add new items, update current listings, and remove discontinued products Additionally, it should support product categorization and effective pricing management to enhance overall efficiency.
The system should facilitate order placement and tracking, including creating new orders, updating and canceling existing orders, and providing order status updates to customers
The system should be able to process payments from customers through various payment methods, including credit/debit cards, mobile payments, and cash
The system should provide various reports and analytics, including sales reports, employee performance reports, inventory reports, and customer behavior reports
The system should be built on a scalable and secure technology stack, with regular maintenance and updates to ensure system performance and security
Users should be able to create an account with a unique username and password
The application should provide a secure login mechanism for registered users
7 Product Details Each laptop product should have a dedicated page displaying detailed information, including specifications, images, price, customer reviews, and related products
8 Shopping Cart Users should be able to add products to a shopping cart
The shopping cart should display the selected items, quantities, prices, and a subtotal
Users should have the option to modify the quantities or remove items from the cart
9 Product Search Users should be able to search for products based on criteria such as category, price range
3.2.3 List of non-functional requests
No Content Standard Detailed description Notes
1 Performance Evolutionary The system should be able to handle a large number of transactions and users without slowing down or crashing
The system must incorporate robust security measures, including encryption, authentication, and access control, to safeguard sensitive information such as customer and admin data, payment details, and business-related information.
3 Reliability Nursery likes The system should be reliable and available at all times, with minimal
45 downtime or disruption to business operations
4 Scalability Effective The system should be able to accommodate growth and changes in the business, such as expanding to new locations or adding new products and services
5 Usability The system should be user-friendly and easy to navigate for both customers and employees, with clear instructions and intuitive interfaces
6 Accessibility The system should be accessible to people with disabilities, such as those with visual or hearing impairments
7 Compatibility The system should be compatible with different types of hardware and software, and able to integrate with other systems such as accounting or inventory management software
8 Maintainability The system should be easy to maintain and update, with clear documentation and a support system in place
SYSTEM DESIGN
UseCase diagrams
4.1.1 General usecase diagram of the system
Figure 9 Usecase diagrams for user
Figure 10 Use case diagrams for admin
Usecase specifications
4.2.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) The system sends information to the database for validation
(6) Password and username are correct, and the actor will log into the system with his/her correct role
4.2.2 Description of Register Use Case
Description Actor registers an account in the system
Precondition When the actor wants to have an account in the system to become a
4.2.3 Description of View List of Products Use Case
Table 13 View list product usecase
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 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
Description Actor search for a specific product in the system
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)
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 (including the product) the actor can click into the product
(4) The product’s detail of that product can be shown on that product detail screen
Precondition When the actor wants to buy a product in the system
Steps (1) Actors open the web
(2) When found the need products, actor can add to cart button
(3) Once the product has been successfully added to the cart, the Actor proceeds to checkout his cart by various methods
(4) After the payment has been made, there will be a transaction status notification that an order confirmation email will be sent to the registered email address
4.2.6 Description of See the list of Ordered Products
Table 16 See list of ordered product usecase
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 Client:
(2) In My Orders in the 'Page' Tab the actor can review the orders he has placed
(3) Open Order page to see
Description Actor manages actor’s categories
Precondition When the actor wants to change actor’s categories
Steps (1) Actors open the web for admin
(3) Fill all information to add new category, delete or update category
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
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
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
4.2.11 Description of Edit Profile Use Case
Precondition When the actors want to change profile’s information
Steps (1) Actors open client web
(2) Open profile tab in header
4.2.12 Description of Add to Cart Use Case
Table 22 Add to Cart Use Case
Use Case Add to Cart
Description Actor add product to cart
Precondition When the actors want to add product to cart
Steps (1) Actors open client web
(2) Go to product detail page
(3) Choose quantity to put to cart
(4) Click “Add to Cart” button
Description Actor purchase for an order
Precondition When the actors want to purchase for order
Steps (1) Actors open client web
(4) Fill in delivery information and payment method
4.2.14 Description of Rating Products Use Case
Table 24 Rating Products Use Case
Precondition When the actors want to rate a product
Steps (1) Actor open client web
(2) Go to product detail page
4.2.15 Description of Cart Management Use Case
Table 25 Cart Management Use Case
Precondition When actor want to change cart items
Steps (1) Actor open client web
(2) Click “Cart” button in header
(3) See list of items in cart
Sequence diagram
4.3.4 Add New Product Sequence Diagram
Figure 14 Add new product sequence diagram
Figure 15 Update product sequence diagram
4.3.6 View Detailed Product Information Sequence Diagram
Figure 16 View detail product sequence diagram
Figure 17 Add product sequence diagram
Figure 18 Make payment sequence diagram
Figure 19 Add category sequence diagram
Figure 20 Update category sequence diagram
Figure 21 Delete category sequence diagram
Database Design
Ord Attribute Type Domain Meaning Note
1 id bigint Primary Key Id of Category
2 name varchar Name of category
3 image varchar Image of category
4 parent_category varchar Category parent
5 created_at timestamp Created date of category
6 updated_at timestamp Updated date of category
Ord Attribute Type Domain Meaning Note
1 id bigint Primary Key Id of product
2 name varchar name of product
3 description varchar Description of product
4 image varchar Image of product
5 category varchar Category of product
6 counInStock int Quantity of product
8 created_at timestamp Created date of product
9 updated_at timestamp Updated date of product
Ord Attribute Type Domain Meaning Note
1 id bigint Primary Key Id of images
2 phone int phone of user
Ord Attribute Type Domain Meaning Note
1 id bigint Primary Key Id of images
2 user_id int Foreign Key Id of user
3 cart_id int Foreign Key Id of cart relate to order
4 ship_id int Foreign Key Id of shipping information
5 payment_id int The number of products users want to buy
Ord Attribute Type Domain Meaning Note
1 id bigint Primary Key Id of cart
2 User_id int Foreign Key Id of user
3 Cart_item_id int Foreign Key Id of product in cart
6 total double The total price of products
7 created_at timestamp Created date of orders
8 updated_at timestamp Updated date of orders
Ord Attribute Type Domain Meaning Note
1 id bigint Primary Key Id of images
5 created_at timestamp Created date of user account
5 updated_at timestamp Updated date of user account
Ord Attribute Type Domain Meaning Note
1 id bigint Primary Key Id of cart item
2 Product_id int Foreign Key Id of product
3 quantity int Quantity of product
4 price int Price of product
Ord Attribute Type Domain Meaning Note
1 id bigint Primary Key Id of payment
2 Payment_method varchar Name of payment method
3 Created_at timestamp Date created
4 Updated_at timestamp Date updated
Interface design
Figure 23 Login page Table 34 Login Page
3 Reset password Text Direct to forget password page
Figure 24 Register page Table 35 Register Page
5 Login Text Direct to login page
Figure 25 Home page Table 36 Home Page
1 Search bar Textbox Search product
2 User menu Button Select action on menu
3 Cart Button Direct to cart page
4 Category Button Filter product by category
Figure 26 Profile page Table 37 Profile Page
1 Username Textbox Input to edit username
2 Email Textbox Input to edit email
3 New password Textbox Input new password to reset
4 Confirm password Textbox Confirm new password
5 Update Profile Button Update user profile
6 Orders list button Show user’s orders list
Figure 27 Cart page Table 38 Cart Page
1 Delete Button Delete product in cart
Show image and name of product
3 Quantity Button Set quantity of product to buy
Button Go back to home page
5 Checkout Button Direct to payment infor page
Figure 28 Delivery address page Table 39 Delivery Address Page
1 Phone Textbox Enter user phone number
2 Address Textbox Enter user street and house number
3 Ward Button Select user ward
4 District Button Select user district
5 Province Button Select user province
6 Continue Button Direct to payment method page
Figure 29 Product detail page Table 40 Product Detail Page
1 Quantity Button Enter product quantity
2 Add to cart Button Add product to user cart
Figure 30 Admin page Table 41 Admin Page
1 Total Sales Text Show total sales of shop
2 Total Orders Text Show total orders of shop
3 Total Products Text Show total products of shop
4 Sale Statistics Chart Show total sales each year
5 Products statistics Chart Show product status
6 Side bar List of navigation
Figure 31 Product list page Table 42 Product List
1 Number Text Show total products now
2 Create new Button Direct to add product page
3 Search bar Textbox Enter product name for searching
4 Show products Button Choose the number of products appear on the screen at the same time
5 List product Show list of products
6 Edit product Button Change information of product
7 Delete product Button Delete product
Figure 32 Category list page Table 43 Category List Page
1 Category name Textbox Enter category name
2 Image File Choose category image
3 Category parent Button Select parent category
Figure 33 Order list page Table 44 Order List Page
1 Search bar Textbox Search order
2 Order list Show order list information
3 View Order Detail Button Direct to order detail page
Figure 34 User list page Table 45 User List Page
1 Search bar Textbox Search user
2 User list Show list of users
Figure 35 Add product page Table 46 Add product page
1 Go to products Button Go back to product list page
2 Publish now Button Create a new product
3 Title Textbox Enter product name
4 Price Textbox Enter product price
5 Count In Stock Textbox Enter product quantity
6 Category Button Select product category
7 Description Textbox Enter product description
Figure 36 Admin order detail page Table 47 Admin Order Detail Page
1 Order id Text Show order id
2 Order information Show information of customer, address and order content
3 Mark as delivered Button Set order status as delivered
4 Back to Orders Button Go back to order list
Figure 37 Order page Table 48 Order Page
Show customer and order information
Show information of each order’s item
Figure 38 Payment Method Page Table 49 Payment Method Page
1 Payment method Ratio button Select payment method
2 Continue Button Direct to order page
IMPLEMENTATION AND TESTING
Implementation
During the entire process of developing and implementing the project, the team used the following supporting software:
- Use Visual Studio Code to write code and design UI, using ReactJS, NodeJS and ExpressJS
- Use MongoDB to build database
- Use Enterprise Architect 7.5.848 to draw UML diagrams
The program uses ExpressJS and NodeJS to write code for back-end, ReactJS to design UI in front-end and MongoDB to store data
Node.js is a powerful JavaScript runtime based on Chrome's V8 engine, enabling developers to execute JavaScript on the server side for the development of fast and scalable network applications Its event-driven, non-blocking I/O model enhances efficiency, making Node.js ideal for real-time applications like chat servers and gaming platforms.
Express.js is a lightweight and adaptable web application framework for Node.js, offering a comprehensive array of features for developing web and mobile applications Its clear and concise syntax simplifies routing, middleware management, and integration with databases and templating engines.
React, a JavaScript library developed by Facebook, is designed for building user interfaces It enables developers to create reusable UI components and manage application state efficiently while updating the user interface in response to data changes By utilizing a virtual DOM, React enhances performance and offers a declarative approach to UI design.
MongoDB is a flexible NoSQL database that utilizes JSON-like documents for data storage Its dynamic schema design sets it apart from traditional relational databases, making it well-suited for applications with changing data structures Renowned for its scalability and high performance, MongoDB effectively manages large volumes of unstructured data.
Software Testing
Unit testing, the first phase of software testing typically performed by developers, verifies the functionality of individual code components to ensure they operate as intended In a test-driven development environment, tests are written and executed prior to delivering the software to the testing team While manual unit testing is possible, automation significantly speeds up delivery cycles and improves test coverage By identifying issues early, unit testing simplifies debugging, making it easier to resolve problems at an earlier stage Tools like TestLeft empower testers and developers to seamlessly integrate automated testing within any IDE, promoting a shift-left approach in the development process.
After rigorous individual testing, units are assembled into modules that execute designated tasks These integrated modules undergo integration testing to confirm their seamless interaction and functionality Typically, integration tests simulate user scenarios, like logging into applications or accessing files, and can be performed either manually or through automation Conducted by developers or independent testers, these tests ensure that the units interact correctly.
System testing is a comprehensive black-box testing approach that assesses the entire integrated system to verify compliance with specified requirements This testing method focuses on evaluating the software's functionality from start to finish and is usually conducted by an independent testing team prior to the product's production release.
Acceptance testing is the crucial final stage of functional testing that verifies whether software is ready for release This phase ensures the product aligns with business requirements and fulfills end-user expectations It encompasses both internal QA team evaluations and external beta testing by users, allowing for the collection of genuine feedback and the resolution of any remaining usability concerns.
White Box Testing This technique involves examining and interacting with the source code directly It includes:
Black Box Testing This technique focuses on testing the functionality of the software without looking at the internal code structure It involves:
• Identifying incorrect or missing functionality
• Finding errors in data structures or external database access
• Identifying behavioral or performance bugs
• Checking for initialization and termination errors
ID Description Test steps Test data Expected
TC_01 Login with a valid account
Email: user@example.com Password: nam123
TC_02 Log in with an account that doesn't exist
Login failed; account does not exist
Login failed; account does not exist
TC_03 Log in with an account that is the wrong email or password
TC_06 Register with valid information
Email: user@example.com Password: nam123
TC_07 Register with an existing email account
Username: nam123 Email: user@example.com Password: nam123
Email: admin@example.c om Password: nam123
Display Admin Manage Users Screen
Display Admin Manage Categories Screen
TC_10 Crea te new cate gory
TC_11 Del ete the cat ego ry
TC_13 Crea te new prod uct
TC_15 Dele te prod uct
TC_19 Com men t prod uct
- Write a comment about the product
Comment: Good Comment has been sent successfully
Commen t has been sent successfu lly
Add to cart successfu lly
CONCLUSION
Achievements
• The course provides foundational knowledge in new technologies and frameworks in software programming and engineering, with a focus on modern software development methodologies
Mastering the MERN stack, which encompasses MongoDB, Express.js, React, and Node.js, involves a comprehensive understanding of setting up development environments, designing and implementing software solutions, testing, packaging, and deploying applications Additionally, it is essential to cultivate external skills such as effective communication, teamwork, project management, and report writing to enhance overall project success.
During the project implementation, the team utilized the MERN stack within the Visual Studio Code IDE, incorporating frameworks like Express and libraries such as React, along with CSS libraries to enhance the product The course emphasizes the effective division of frontend and backend tasks for optimal development.
• Learning the theory of MongoDB and the Express framework, gaining skills in building front-end websites, developing databases, and connecting them
• Students are introduced to Cloudinary, learning how to use its services to connect to websites, manage, and store all website images on the Cloudinary platform
• Some JavaScript theory is also covered, teaching students how to use it to handle specific website operations
• The course enhances effective teamwork skills and logical thinking, equipping students with knowledge on starting projects effectively and evenly distributing work among team members
The team developed a comprehensive system for buying and selling clothing products through a website and application, ensuring all basic required functions, such as:
- Product Search: Users can search for products and filter results
- Management Features: Admins can manage products, categories, users, orders, and view statistics
- Cart Management: Add to cart, remove products, and clear the cart
- User Account Management: Log in, log out, register, change password, and update user information
- Order Tracking: Users can review their orders and track order status
- Product Reviews: Users can comment on and rate products
- Checkout Page: Collects necessary information for order processing
- Payment Options: Users can choose between payment later and online payment via Paypal.
Advantages and disadvantages
The user interface is guided enthusiastically by the instructors, showing good or bad points continuously, ensuring aesthetics
Database, applications are uploaded on the internet, users do not need to install third- party applications to be able to use them
The errors have been thoroughly tested by all members who have been learning through the software testing course Understand the procedures for finding errors and making corrections
Adding new features often requires updated libraries, which can lead to compatibility issues with older devices This poses challenges for applications targeting users in less modern areas, making it harder for them to access the app.
Future work
• We will be building a mobile app for our website soon
• Build more features for the website, for example a map suitable for ordering
• Add payment method, add shipping method for many remote customers
[1] Bootstrap CSS Framework - Full Course for Beginners (Dec 7th 2021): https://www.youtube.com/watch?v=qfEOE4vtxE&ab_channel=freeCodeCamp.org
[2] Reactjs documentation : https://legacy.reactjs.org/
[3] Nodejs documentation: https://nodejs.org/api/
[4] Expressjs documentation: https://expressjs.com/
[5] MongoDB documentation: https://www.mongodb.com/docs/
[6] ReactJS, Pros cand Cons: https://www.javatpoint.com/pros-and-cons-of-react
[7] ExpressJS, Advantages and Disadvantages: https://data-flair.training/blogs/expressjs- advantages-and-disadvantages/
[8] MongoDB, Pros and Cons: https://www.knowledgenile.com/blogs/pros-and-cons-of- mongodb
[9] Paypal intergration checkout: https://developer.paypal.com/studio/checkout/standard/integrate
[10] Lama Dev, E-Commerce App Full Tutorial (REDUX - Stripe - JWT) - MERN Stack Shopping App (Sep 30 th , 2021): https://www.youtube.com/watch?v=y66RgYMAgSo&tw74s