Building an e commerce website selling second hand items Xây dựng website thương mại điện tử bán đồ cũ
PROJECT FUNDAMENTALS
E-commerce
E-commerce refers to the buying, selling, and exchanging of goods and services through electronic systems like the internet and computer networks It exists in several forms, including business-to-business (B2B), business-to-consumer (B2C), and consumer-to-consumer (C2C) transactions As a crucial aspect of modern commerce, e-commerce provides significant opportunities and advantages for both businesses and consumers, contributing to trade expansion and economic growth.
To successfully engage in e-commerce, businesses must establish a robust infrastructure and skilled human resources A reliable internet connection is crucial for efficient information processing, alongside servers for data storage and management software for e-commerce operations Additionally, having knowledgeable sales personnel is essential for understanding products and markets, while marketing teams must be proficient in online marketing tools to drive success.
E-commerce brings many business opportunities for businesses, including:
Previously, businesses could only reach customers within a certain radius area However, with e-commerce, businesses can reach customers around the world, 24/7 This helps businesses expand their markets and increase sales
E-commerce significantly lowers operating and management expenses by eliminating the need for traditional storefronts and sales staff, resulting in reduced transportation and storage costs This cost-saving approach enables businesses to enhance their profitability while streamlining their operations.
E-commerce helps businesses compete with other businesses in the same field Businesses can offer more attractive products, services, prices, promotions, etc to attract customers
E-commerce brings countless benefits to businesses and consumers:
Increased customer access: e-commerce helps businesses overcome geographical boundaries to reach customers 24/7
• Reduce Operating and Management Costs:
By eliminating many expenses for physical stores as well as logistics and inventory management
• Enhance Competitiveness: by the many benefits that e-commerce brings to business owners, it gives them more opportunities to break through and boost their competitive edge
Easy access to e-commerce platforms as well as convenient payment and shipping have made the online shopping experience better than ever
Figure 1 2 The convenience and speed of e-commerce
With many e-commerce platforms coexisting and competing, the product diversity is extremely wide
E-commerce platforms frequently offer lower prices than traditional retailers, leading to intense price competition This ensures that shoppers can consistently find products at unexpectedly affordable rates.
E-commerce encompasses several models, each tailored to specific transactional dynamics and participant roles:
In a B2B business model, companies sell products or services to other businesses, which may either be the end-users or resell to consumers These transactions typically involve longer sales cycles but result in higher order values and more frequent purchases.
B2C businesses sell directly to their end-users Anything you buy in an online store as a consumer — from wardrobe and household supplies to entertainment — is done as part of a B2C transaction
C2C ecommerce businesses — sometimes referred to as online marketplaces — connect consumers to exchange goods and services and typically make their money by charging transaction or listing fees.
Introduction to TypeScript Programming Language
JavaScript, originally known as ECMAScript, began as a basic scripting language designed for browsers, primarily intended for short code snippets within web pages Initially, writing extensive code was uncommon, leading to slow execution in early web browsers However, as its popularity grew, web developers increasingly utilized JavaScript to enhance interactivity and create dynamic user experiences on the web.
TypeScript, developed by Microsoft, is a superset of JavaScript that enhances code quality through static typing, allowing developers to define the data types of their variables, such as numbers or strings.
With TypeScript, you can also create custom data types called "interfaces" and
"types" to make your code easier to understand It's like giving your data a name and a structure
1.2.2 Why Use TypeScript Programming Language:
TypeScript enhances JavaScript by introducing static typing, enabling developers to define types for variables, function parameters, and return values This feature aids in identifying errors early in the development process and improves tooling support, resulting in more reliable and maintainable codebases.
By providing type annotations, TypeScript makes code more self-documenting and easier to understand It also helps developers navigate and refactor code more confidently, improving overall code maintainability
Static typing helps identify type mismatch errors during compile time, reducing runtime errors in production and contributing to a more stable application.
TypeScript's tooling support, including features like autocompletion, type checking, and inline documentation, enhances developer productivity It helps developers write code faster, with fewer errors, and with better code quality
As projects expand, managing JavaScript code can become increasingly difficult TypeScript addresses this challenge by offering a robust type system that enhances the structure and organization of large codebases, facilitating easier project scaling and comprehension.
TypeScript, a superset of JavaScript, enables the gradual migration of existing JavaScript code to TypeScript This feature allows development teams to adopt TypeScript incrementally, eliminating the necessity for a complete code rewrite.
TypeScript boasts a vibrant and engaged community, offering a wealth of documentation, tutorials, and resources Its robust ecosystem of libraries, frameworks, and tools makes it an ideal choice for diverse projects and use cases.
Introduction to PostgreSQL Database Management System
PostgreSQL is a robust open-source object-relational database system that enhances the SQL language to manage complex data workloads effectively Originating from the POSTGRES project at UC Berkeley in 1986, it boasts over 35 years of continuous development Renowned for its architecture, reliability, and data integrity, PostgreSQL is supported by a dedicated open-source community that drives innovation It is ACID-compliant since 2001, compatible with all major operating systems, and features powerful extensions like PostGIS for geospatial data Consequently, PostgreSQL has emerged as the preferred open-source relational database for numerous individuals and organizations.
1.3.2 Why Choose PostgreSQL to Build E-commerce Website:
PostgreSQL is a powerful, open-source database system designed to assist developers in creating robust applications and administrators in ensuring data integrity and fault tolerance Its extensive features allow for effective data management, regardless of dataset size Additionally, PostgreSQL's high extensibility enables users to define custom data types, create unique functions, and integrate code from various programming languages without the need to recompile the database.
PostgreSQL aims to adhere to the SQL standard while maintaining its traditional features and avoiding poor architectural choices Although many SQL standard features are supported, they may have slightly different syntax or functionality Future updates will likely enhance conformance, especially following the release of version 16 in September.
2023, PostgreSQL conforms to at least 170 of the 179 mandatory features for SQL:2023 Core conformance As of this writing, no relational database meets full conformance with this standard
Introduction to Next.JS
Next.js is a React framework for building full-stack web applications You use React Components to build user interfaces, and Next.js for additional features and optimizations
Next.js simplifies the development process by automatically configuring essential React tooling, such as bundling and compiling This enables developers to concentrate on building their applications without the hassle of extensive configuration.
Next.js enhances initial load times and SEO by rendering pages on the server prior to delivery to the client, ensuring that the content is fully prepared before it reaches the browser.
Next.js enables the generation of static HTML pages during the build process, allowing for rapid delivery to users This approach enhances performance and scalability since the pre-rendered pages eliminate the need for server-side processing with every request.
Next.js includes API routes that enable developers to build API endpoints
16 directly within the application This can simplify the development process by keeping both frontend and backend code in the same codebase
Next.js uses a file-based routing system, where the file structure within the
`pages` directory corresponds to the URL structure of the application This makes routing intuitive and easy to manage
Next.js automatically splits the code into smaller bundles, which improves the loading time of the application by only loading the necessary JavaScript for the current page
Next.js offers Incremental Static Regeneration (ISR), enabling the incremental updating of static content without requiring a complete rebuild This functionality allows for background regeneration of pages as user traffic increases, ensuring that the content stays current and relevant.
During development, Next.js supports hot module replacement, allowing developers to see changes in real-time without needing to refresh the entire page
Next.js has built-in support for TypeScript, making it easier for developers to use static typing in their applications
Next.js supports various styling options including CSS-in-JS, global CSS, and
Sass, providing flexibility in how styles are managed and applied in the application
Next.js includes an optimized image component that automatically handles image resizing, serving responsive images, and optimizing images for faster load times
Next.js provides a way to manage environment variables, making it easier to handle different configurations for development, staging, and production
SYSTEM ANALYSIS AND DESIGN
User requirements
In a use case diagram, actors symbolize external entities such as users, systems, and administrators that interact with the system The primary actor, represented as a stick figure, is the User, who initiates a range of actions within the platform.
User: The main agent that interacts with system to perform various tasks related to
Admin: is a special user with greater access and control than regular users Their role focuses on managing and maintaining the operation of the platform
Use cases illustrate the distinct functionalities and actions that a system can execute, showcasing its behavior across different scenarios In the accompanying diagram, these use cases are depicted as ellipses, highlighting their significance in understanding system interactions.
System analysis
A business model is essential for comprehending a company's operations, as it outlines the activities supported by the system Utilizing a business methodology effectively documents application requirements and aids in identifying system issues This approach fosters a clear understanding of the system's functionality and its alignment with business processes, creating a solid information foundation.
Figure 2 1 Business model The system will be divided into two parts Part of the score goes to the admin (store owner) and the rest goes to the users
2.2.1 Section for managers (store owners):
The store owner is responsible for customer interactions, assisting those looking to search, view, purchase, or order agricultural products They also manage various operations on the website, including overseeing products, orders, and revenue To fulfill these duties, the store owner is provided with an email for system login, enabling them to perform essential functions efficiently.
First: View, add, edit, delete information related to products, this helps manage products conveniently
Second: View sales and inventory This helps store owners know the store's status during the review period
Third: View orders, reporting out of stock, confirming orders, etc to perform remote transactions with customers
Fourth: View the store's list of customers and potential customers
Customers are individuals who browse and purchase products on the website To enhance user experience and facilitate the management of personal shopping carts, the website must incorporate specific functionalities.
First: Log in to your customer account, so that the store owner can identify his customers as well as their orders, and so that customers can place orders remotely
Second: View product information, reviews to help customers clearly understand the product they want to buy
Third: Add products to the cart, as well as place an order to help customers buy products remotely without having to come to the store
System design
2.3.2 Describe the functions in the usecase diagram
Describe Allow customer to log in to the store
Actor User Trigger The user presses the login button
Pre-condition The user already has an account logged into the system before/ has successfully registered
Post condition The user is redirected to the default page with the corresponding position
22 Figure 2 5 Login function flow diagram
Figure 2 6 Sequence diagram of the login function
Describe Allows users to search for products by entered keywords
Actor User Trigger Enter keywords and press search
Pre-condition User has login
Guests or users enter a keyword search for a product that exists in the product data
Post condition Displays a list of products containing the search keyword name
Figure 2 7 Usecase diagram of search
Figure 2 8 Flow diagram of keyword search
Figure 2 9 Sequence diagram of search
Describe The user selects the product he wants to buy to add to the cart, updates the cart, and makes payment
Actor User Trigger The main actor acts on the “add cart” button, pay button
Pre-condition User has login
Only customers who have an account and are logged into the system can view their shopping cart and make payments
Post condition Displays the cart list containing previously selected products
25 Figure 2 10 Usecase diagram of search
Figure 2 11 Sequence diagram of shopping cart checkout
Figure 2 12 Shopping cart checkout flow diagram
Describe Managers are used to manage the number of products, add or remove categories and products
Actor Administrator Trigger The main actor manipulates the
Pre-condition User has login
Users with management accounts, access the management page
Post condition Display a list of products and product types to perform operations
27 Figure 2 13 Usecase diagram for administrator's product management
Figure 2 14 Usecase diagram for administrator's category management
28 Figure 2 15 Product management flow diagram
Figure 2 16 Sequence diagram for administrator's product management
Database design
STT Data Field Datatypes Note
1 id String AI PK, Store ID
3 userId String User ID, Owner of the store
STT Data Field Datatypes Note
1 id String AI PK, Billboard ID
2 storeId String FK to Store
4 imageUrl String URL of the billboard image
STT Data Field Datatypes Note
1 id String AI PK, Category ID
2 storeId String FK to Store
3 billboardId String FK to Billboard
STT Data Field Datatypes Note
1 id String AI PK, Size ID
2 storeId String FK to Store
STT Data Field Datatypes Note
1 id String AI PK, Color ID
2 storeId String FK to Store
STT Data Field Datatypes Note
1 id String AI PK, Product ID
2 storeId String FK to Store
3 categoryId String FK to Category
6 isFeatured Boolean Is the product featured?
7 isArchived Boolean Is the product archived?
8 sizeId String FK to Size
9 colorId String FK to Color
STT Data Field Datatypes Note
1 id String AI PK, Image ID
2 productId String FK to Product
STT Data Field Datatypes Note
1 id String AI PK, Order ID
2 storeId String FK to Store
3 userId String FK to User
4 isPaid Boolean Is the order paid?
5 phone String Customer phone number
STT Data Field Datatypes Note
1 id String AI PK, OrderItem ID
2 orderId String FK to Order
3 productId String FK to Product
STT Data Field Datatypes Note
1 id String AI PK, User ID
2 storeId String FK to Store
3 userId String External User ID
STT Data Field Datatypes Note
1 id String AI PK, UserProduct ID
2 userId String FK to User
3 productId String FK to Product
DEPLOYMENTS AND RESULTS
Functional decomposition diagram
Deployment
Vercel is a platform for developers that provides the tools, workflows, and infrastructure you need to build and deploy your web apps faster, without the need for additional configuration
Vercel supports popular frontend frameworks out-of-the-box, and its scalable, secure infrastructure is globally distributed to serve content from data centers near your users for optimal speeds
During development, Vercel provides tools for real-time collaboration on your projects such as automatic preview and production environments, and comments on preview deployments
Deploying a project on Vercel is simple and ideal for front-end frameworks and static sites With support for popular frameworks such as Next.js, React, and Vue.js, Vercel has become a favored platform among developers Follow this step-by-step guide to successfully deploy your project on Vercel.
1 Vercel Account: Sign up at Vercel
2 Git Repository: Ensure your project is stored in a Git repository (GitHub, GitLab, or Bitbucket):
Results
Action name Describe Success Failure
Log in • Enter email data
• Verify with clerk, then login
Redirect to the dashboard page
Return error message and unable to enter
Figure 3 1 Login page by clerk in Admin dashboard
• Products page in the admin dashboard
Action name Describe Success Failure
Search for products Enter keywords to search
Auto search and display list below
Notice that no products containing the keyword were found
Action name Describe Success Failure
Switching key words for searching
• Click “Switch key” from above the search bar
• Choose the key that you want to search by
A new key will be displayed and will be used for searching
Action name Describe Success Failure
Add a new product • Click the “Add new” button
Lead to the “Create product” page
• Cell action menu for the product
Action name Describe Success Failure
Create product • Enter the information needed
A success message appears, and a new product is created
An error message appears and unable to create a new product
Action name Describe Success Failure
The cell action menu for the product
• Click the far left icon on the entity bar
Displays a drop- down menu of options, and each will have a different action
• Copy the id of the product
Action name Describe Success Failure
• Click the “Copy id” option on the cell action menu
Success in copying the id of the product
Unable to copy the id
Action name Describe Success Failure
Editing the product • Click the
“update” option on the cell action menu
Redirect to the edit product page
An error message appears and is unable to redirect to the page
Action name Describe Success Failure
Editing the product • Enter the information needed
A success message appears, and the chosen product is edited
An error message appears and unable to edit the product
• Delete a product from cell action
Action name Describe Success Failure
Delete function • Click the trash bin icon on the top right of the edit page
Displays an interface for the delete alert option
Not displayed, and return an error message
Action name Describe Success Failure
Delete function Click the “Delete” option on the cell action menu
Displays an interface for the delete alert option
Not displayed, and return an error message
Action name Describe Success Failure
A success message appears for the successful deletion of the product
An error message appears and unable to delete the product
• Billboards page in admin dashboard
Figure 3 3 Billboards page in admin dashboard
Action name Describe Success Failure
API display to copy for development
Click to copy the API for the store
Unable to copy the API
• Categories page in admin dashboard
Figure 3 4 Categories page in admin dashboard
• Sizes page in admin dashboard
Figure 3 5 Sizes page in admin dasboard
• Colors page in admin dashboard
Figure 3 6 Colors page in admin dashboard
• Orders page in admin dashboard
Figure 3 7 Orders page in admin dashboard
• Users page in admin dashboard
Figure 3 8 Users page in admin dashboard
• Settings page in admin dashboard
Figure 3 9 Settings page in admin dashboard
Action name Describe Success Failure
Delete function Click the trash bin icon on the top right of the settings page
Displays an interface for the delete alert option
Not displayed, and return an error message
Action name Describe Success Failure
A success message appears for successfully deleting the store
An error message appears and unable to delete the store
Action name Describe Success Failure
Creating store • Click the drop- down menu on the top left of the dashboard
• Click the “Create store” option
A success message appears for successfully deleting the store
An error message appears and unable to delete the store
Action name Describe Success Failure
Redirect to the new store admin dashboard and successfully create a new store
An error message appears and unable to create a new store
Action name Describe Success Failure
Log in • Enter email data
• Verify with clerk, then login
Redirect to the store page
Return error message and unable to enter
Action name Describe Success Failure
Search for products Enter keywords to search
Auto search and display list below
Notice that no products containing the keyword were found
• Add to cart by icon
Action name Describe Success Failure
Add to cart quick button
Click the cart icon on the product
A success message appears, and the number displayed in the cart icon goes up
An error message appears and unable to add the item to the cart
Action name Describe Success Failure
Expand button for quick review
Click the expand icon to open the preview
Display the preview on the screen
An error message appears and unable to open the preview
Action name Describe Success Failure
Product profolio Click on the products to enter the portfolio
An error message appears and unable to enter the product portfolio page
Action name Describe Success Failure
Search category • click the search bar that has “search categories…” inside
Redirect to the chosen category page
An error message appears and unable to enter the category page
Action name Describe Success Failure
Search store • Click the search bar that has “search stores…” inside
Redirect to the chosen store page
An error message appears and unable to enter the store page
• Sorting products by sizes and colors
Action name Describe Success Failure
Sorting products by sizes and colors
Click on the size and color of the product that is needed
Display the product by sorting the input size and color
Error message appears and unable to sort
Action name Describe Success Failure
Cart checkout page Click the cart icon in the far right corner of the navbar
Display the cart and checkout summary
Error message appear and unable enter cart-checkout page
Action name Describe Success Failure
Removing a product from the cart
Click the “x” icon on the top right of the product
A success message is displayed, and the product is removed from the cart
An error message appears and unable to remove the product
Action name Describe Success Failure
Select the shipping option that suited
Choose the shipping method from the shipping option table
A success message is displayed, and the
“Check out” button will be available
An error message appears and unable to choose the shipping option
Action name Describe Success Failure
Click the “check out” button
Display the payment page by Stripe
An error message appears and unable to enter payment page
Figure 3 11 Payment interface by Stripe
Action name Describe Success Failure
Complete payment Enter all the necessary information for payment click “Pay”
A green tick and success message appear, and the cart is empty
An error message appears, and unable to empty the cart s
Action name Describe Success Failure
Sign out Click the user icon on the top left of the page
Choose the “Sign out” option
Sign out of the page and be redirected to the sign-in page
An error message appears and unable to sign-out
Action name Describe Success Failure
Manage user Click the user icon on the top left of the page
Redirect to the settings page
An error message appears and unable to enter the settings page
Action name Describe Success Failure
Change username Enter the new username Click “Change Username”
A success message appears, and the username has been changed successfully
An error message appears and unable to change the username
Action name Describe Success Failure
Delete user Click the trash bin icon on the right of the settings page
Displays an interface for the delete alert option
The alert option is not displayed, and it return an error message
Action name Describe Success Failure
A success message appears for a successful deleted user, then redirects to the sign-in page
An error message appears and unable to delete user
The final project successfully fulfills its fundamental objectives by providing an intuitive interface, ensuring smooth functionality, and enabling seamless integration with third-party applications.
The product has several limitations, including missing elements such as quantity details, keywords, and user reviews Additionally, users cannot view their order status after completing the payment.
In summary, the experience of studying and developing a second-hand sales website using various new tools has significantly enhanced my skills and provided valuable experience for my future endeavors.
Many challenges are posed when approaching new technology, however, by making efforts to explore and learn, I have been able to feel satisfied with the final product
The future development direction of the website includes adding new features and fixing limitations of existing ones
We are enhancing user experience by allowing customers to view their order details, which promotes transparency Additionally, to improve inventory management, we will introduce a quantity option for product listings, addressing existing limitations.
Additionally, we aim to transition the backend to a microservices architecture to enhance scalability, maintainability, and performance.