This project presents the design, development, and implementation of an e-commerce website using the PERN stack, with specific technologies including Vite, ReactJS, NodeJS, PassportJS for authentication, PostgreSQL for database management, a client-server model, server state management using TanStack Query, and payment processing through Stripe. The primary objective of this thesis is to build a robust, scalable, and user-friendly ecommerce platform that leverages modern web technologies. The choice of Vite as the build tool ensures a fast and optimized development process, while ReactJS provides a dynamic and responsive user interface. NodeJS serves as the backend server, offering a scalable environment for handling client requests and managing business logic. PassportJS is integrated for secure user authentication, ensuring safe and reliable access control. PostgreSQL is chosen for database management due to its reliability and efficiency in handling relational data. The client-server model is adopted to separate concerns and improve scalability and maintainability of the application. TanStack Query is utilized for effective server state management, providing efficient data fetching, caching, and synchronization capabilities. Payment processing is handled through Stripe, ensuring secure and seamless transactions for users.
Introduction
Background
E-commerce, an abbreviation for electronic commerce, involves purchasing and selling goods or services online, along with the transfer of money and data to complete these transactions It has transformed business operations by creating a global marketplace accessible to anyone with internet access This digital marketplace includes various models such as Business-to-Consumer (B2C), Business-to-Business (B2B), Consumer-to-Consumer (C2C), and Consumer-to-Business (C2B), each supporting different types of transactions
1.1.2 Importance and growth of e-commerce
The significance of e-commerce in the current economy is immense It provides many benefits, including convenience, a broader selection, competitive prices, and easy product and service comparisons Over the past ten years, e-commerce has grown exponentially Market research indicates that global e-commerce sales are expected to hit $6.54 trillion by 2023, up from $3.53 trillion in 2019 This growth is fueled by increasing internet access, the rise of mobile commerce, technological advancements, and shifting consumer preferences towards online shopping.
Problem Statement
Despite the rapid growth and potential of e-commerce, many businesses face significant challenges in building and maintaining effective e-commerce platforms These challenges include ensuring robust security measures, managing large volumes of data, providing a seamless user experience, and integrating reliable payment gateways Furthermore, businesses need scalable solutions that can handle increasing traffic and transactions without compromising performance This thesis addresses these challenges by exploring the development of a comprehensive e-commerce website using modern web technologies.
Objectives of the Thesis
The primary goal of this thesis is to design, develop, and implement a robust, scalable, and user-friendly e-commerce website using the PERN stack, specifically incorporating Vite, ReactJS, NodeJS, PassportJS, PostgreSQL, TanStack Query, and Stripe
● To create a responsive and dynamic user interface using Vite and ReactJS
● To develop a secure backend server with NodeJS and Express
● To implement secure user authentication using PassportJS
● To design and manage a relational database with PostgreSQL
● To adopt a client-server model for improved scalability
● To manage server state efficiently using TanStack Query
● To integrate Stripe for secure and seamless payment processing
● To conduct comprehensive testing to ensure the reliability and performance of the application
● To evaluate the system’s performance and gather user feedback.
Scope of the Thesis
● The design and development of the frontend using Vite and ReactJS
● Backend development with NodeJS and Express
● User authentication mechanisms using PassportJS
● Database design and management with PostgreSQL
● Implementation of a client-server model
● Server state management using TanStack Query
● Testing methodologies and performance evaluation
● In-depth analysis of alternative technology stacks
● Detailed marketing strategies for the e-commerce platform
● Long-term maintenance and updates post-deployment
● Development of mobile applications (only web-based interface is covered).
Thesis Structure
● Provides an overview of e-commerce, its importance, the problem statement, the objectives of the thesis, the scope, and the structure of the thesis.
Literature Review
E-commerce Platforms
E-commerce platforms are software solutions that allow businesses to establish online stores and manage their sales activities They offer features like product catalog management, order processing, payment integration, and customer relationship management Well-known e-commerce platforms include Shopify, WooCommerce (built on WordPress), Magento, BigCommerce, and Salesforce Commerce Cloud Each platform provides distinct features designed to meet the needs of various businesses, from small startups to large enterprises.
PERN Stack Overview
The PERN stack is a modern technology stack for building dynamic web applications, particularly suited for e-commerce websites:
● PostgreSQL: A robust and reliable open-source relational database known for its powerful features, including JSON support and ACID compliance
PostgreSQL is well-suited for handling complex data relationships and large volumes of data typical in e-commerce applications
● Express.js: A minimalist web application framework for Node.js, Express.js simplifies the creation of robust and scalable web APIs and server-side applications It offers middleware to manage HTTP requests and streamline routing
● React: React is a JavaScript library maintained by Facebook for constructing user interfaces It empowers developers to craft reusable UI components that update efficiently with data changes, thereby improving web application responsiveness and interactivity
● Node.js: Node.js is a JavaScript runtime environment that executes JavaScript code outside of web browsers, enabling developers to create scalable network applications It uses an event-driven, non-blocking I/O model, making it effective for managing concurrent requests and real-time updates
Together, PostgreSQL, Express.js, React, and Node.js (PERN stack) offer a comprehensive framework for developing modern and scalable e-commerce applications, combining the power of a relational database with the flexibility and performance of JavaScript-based technologies.
Comparison with Other Stacks
In addition to the PERN stack with PostgreSQL, several other technology stacks are commonly used for developing e-commerce websites:
● LAMP Stack (Linux, Apache, PostgreSQL, PHP/Python/Perl): A traditional stack known for its stability and widespread use PHP-based platforms like Magento and WooCommerce are built on this stack, leveraging Apache for web server functionality
● MEAN Stack (MongoDB, Express.js, Angular, Node.js): Similar to PERN but uses Angular (or AngularJS) for frontend development instead of React MEAN stack applications benefit from Angular's powerful frontend capabilities and TypeScript support
● JAMstack (JavaScript, APIs, Markup): A modern approach focusing on client-side rendering and pre-built markup Static site generators like Gatsby and Next.js are popular choices for e-commerce applications looking to optimize performance and SEO
Each stack offers unique advantages in terms of performance, scalability, developer expertise, and community support The choice of stack depends on specific project requirements, including data structure, real-time updates, and user interface complexity.
Methodology
System Requirements
3.1.1 General Goals of the System:
● Build an effective and attractive online shoe selling website for users
● Create a platform to advertise and sell shoe products from various manufacturers and brands
● Provide a safe and convenient online shopping experience for customers
● Frontend: Responsible for the user interface, shopping experience, product display, cart management, and ordering
● Backend: Manages product data, customer information, orders, and overall system management
● Database: Stores information about categories, products, orders, customers, and other critical data
● Customer Management System: Tracks customer lists and manages customer orders
3.1.3 Main Functions of the System:
● Display Product Listings: Present products with images, prices, and detailed descriptions
● Product Search: Allow users to search for products using different criteria
● Shopping Cart and Checkout: Enable users to add items to their shopping cart and securely finalize their purchases
● Customer Account Management: Manage customers' personal information, preferences, and order history
● User-Friendly Interface: Create an intuitive and easy-to-use interface that enhances user experience
● Reflect Brand and Products: Ensure the interface reflects the brand's identity and showcases products attractively
● Enhance Shopping Experience: Design the interface to make shopping enjoyable and straightforward, aligning with the website's overall goals.
Business Specifications
The business specifications for the shoe sales website application encompass comprehensive functionalities to support efficient operations and enhance user experience:
○ Add, Edit, Delete Products: Administrators can add new products, modify existing ones, and remove outdated items
○ Product Catalog: Maintain a comprehensive portfolio of shoe products, including detailed descriptions and images
○ User Reviews: Enable users to leave reviews and ratings for products, fostering customer engagement and trust
○ Search Toolbar: Provide a user-friendly search feature to quickly locate products by keywords or specific criteria
○ Category Filters: Allow users to browse and filter products by categories such as gender, brand, type, and price range
○ Manage Shopping Cart: Enable users to add, remove, and update items in their shopping cart effortlessly
○ Order Total Calculation: Automatically calculate the total order value, including taxes and shipping fees
○ Secure Payment Gateway: Implement secure and convenient payment methods to ensure customer transactions are safe and reliable
○ User Registration and Login: Offer a smooth user registration and login experience, allowing users to easily create accounts and access personalized functionalities
○ Profile Management: Enable users to securely manage their personal information, delivery addresses, and payment methods
○ Order History: Provide users with a detailed history of their past orders and current order status updates
○ Order Status Updates: Admins can update order statuses (e.g., processing, shipped, delivered) and notify users accordingly
○ Shipping Management: Track shipping details and provide users with real-time updates on their order delivery status
○ Administration Interface: Offer an intuitive dashboard for administrators to manage the website efficiently
○ Category and Inventory Management: Allow admins to oversee product categories, monitor stock levels, and track revenue
○ Website Activity Tracking: Monitor and analyze user activity on the website, including page views and visitor demographics
○ Sales and Performance Reports: Generate comprehensive reports on sales trends, popular products, revenue growth, and customer behavior insights
These business specifications outline the core functionalities and features required to develop and operate a successful shoe sales website They aim to streamline business processes, enhance user satisfaction, and optimize operational efficiency across all aspects of the e-commerce platform Adjustments can be made based on specific business needs and technical requirements during the development phase.
System Actors
Register Log in Log out Change personal information Search product
View product details View product list Add product to cart Cart management Purchase - payment View orders
Log in Log out Change personal information Search product
View product details View product list Manage (view) accounts Category management Product Management Order management Statistical report
Description: To purchase products online, users must create an account During registration, the user clicks the register button and fills out the form with their personal information
● For users: After registering an account, you can log in with that account or use a Gmail link to log in
● For administrators: If you already have an account, you can log in to access the website's management system
Description: After logging into the system, the user can choose to log out at any time
Figure 5 Update infor use case
Description: To ensure convenient product delivery to customers, users need to update all necessary information or delete and modify it as desired Administrators can also use this feature to update their personal information
Figure 6 Search product use case
Description: When users want to search for a product, they can enter the product keyword or search by selecting the desired category
Figure 7 List product use case
Description: Customers who want to browse through many products can choose to view all products available on the website or filter products by category
Figure 8 View product use case
Description: Customers or admins can view detailed information about a product by selecting it
Figure 9 Add product to cart use case
Description: To add products to the cart, customers need to select the product, choose the quantity (default is 1), and then click add to cart
Description: After adding products to the cart, users can update the quantity, delete products, or add more products by selecting from outside the cart
Description: After selecting the products they want to buy, users can proceed to checkout To complete the purchase, they need to review the delivery information and choose a payment method, either online payment or payment upon delivery
Figure 12 View order use case
Description: To review orders that have been placed, customers can select the 'Order' section
Figure 13 Manage accounts use case
Description: The admin can view information for all user accounts on the website
Figure 14 Manage categories use case
Description: The admin manages categories by filtering them according to criteria, selecting existing categories for deletion or update Additionally, the admin can create new categories by selecting and filling in the required information
Figure 15 Manage products use case
Description: The admin manages products by filtering them according to criteria, selecting existing products for deletion or updating data Additionally, the admin can create new products by selecting and filling in the necessary information
Figure 16 Manage orders use case
Description: The admin manages orders placed by users, finding them based on criteria The admin updates the status of each order according to its actual progress and has the ability to delete orders when necessary
Figure 17 Statistical report use case
Description: The admin views statistical reports on system data, including the number of users, product categories, products, orders, and revenue.
Implementation
Client Frontend
Conclusion and Future Work
Summary of Findings
In this study, we investigated the creation of an e-commerce website utilizing the PERN stack (PostgreSQL, Express.js, React, Node.js) Major discoveries from the research and implementation comprise:
● Effective Use of PERN Stack: The PERN stack provided a robust foundation for developing a dynamic and scalable e-commerce platform
● Functionalities Implemented: We effectively integrated fundamental functionalities including product management, user authentication, shopping cart administration, and secure payment processing
● User Experience Considerations: Emphasis was placed on creating a user- friendly interface and enhancing the shopping experience through intuitive design and efficient navigation
● System Performance: Performance testing demonstrated satisfactory responsiveness and reliability, crucial for handling concurrent user interactions and managing database operations effectively
● Challenges and Solutions: Addressed challenges during development, including database schema design, API integration, and frontend-backend synchronization, with corresponding solutions and optimizations.
Conclusion
In summary, leveraging the PERN stack for developing the e-commerce website demonstrated its effectiveness in delivering a contemporary online shopping platform Incorporating PostgreSQL for robust data management, Express.js for streamlined backend development, React for dynamic frontend interfaces, and Node.js for scalable server-side operations ensured the platform met both functional requirements and user expectations efficiently
The project underscored the importance of comprehensive planning, systematic development methodologies, and iterative testing to achieve a successful implementation By focusing on user-centric design principles and leveraging advanced technologies within the PERN stack, the website offers a secure, intuitive, and responsive environment for both customers and administrators.
Future Work
Looking ahead, several areas warrant further exploration and enhancement for the e- commerce website:
● Enhanced User Personalization: Enhance user engagement and satisfaction by implementing personalized recommendations tailored to user behavior and preferences
● Advanced Analytics and Reporting: Expand analytical capabilities to provide detailed insights into sales trends, customer demographics, and product performance, facilitating data-driven decision-making
● Mobile Optimization: Enhance mobile responsiveness and optimize the website for seamless performance across various devices and screen sizes
● Integration with External Services: Explore integration with third-party services such as social media platforms for enhanced marketing and customer interaction
● Enhanced Security Measures: Continuously enhance security protocols to safeguard user data and ensure secure online transactions
● Expansion of Product Offerings: Expand the product catalog with additional categories and offerings to cater to diverse customer interests and preferences
● Localization and Internationalization: Implement features to support multiple languages and currencies to accommodate global customers and expand market reach
By addressing these areas in future development phases, the e-commerce website can further solidify its competitive edge, improve user satisfaction, and adapt to evolving market demands effectively
● Hage, J (2020) Full-Stack React Projects: Modern web development using
React 16, Node, Express, and MongoDB Birmingham, UK: Packt Publishing
● Subramanian, V (2019) Pro MERN Stack: Full Stack Web App Development with Mongo, Express, React, and Node Berkeley, CA: Apress
● Li, W., & Ren, K (2020) Research on Application of PERN Stack in E- commerce Platform Development Journal of Physics: Conference Series,
● Patel, R., & Bhatt, S (2018) A Comprehensive Study on MongoDB,
Express.js, Angular.js, and Node.js (MEAN Stack) in Web Development
International Journal of Advanced Research in Computer Science, 9(3), 87-92
● PostgreSQL (n.d.) PostgreSQL Documentation Retrieved from https://www.postgresql.org/docs/
● Express.js (n.d.) Express.js Documentation Retrieved from https://expressjs.com/
● React (n.d.) React Documentation Retrieved from https://reactjs.org/
● Node.js (n.d.) Node.js Documentation Retrieved from https://nodejs.org/en/docs/
● Agile Alliance (n.d.) Agile Software Development: The Agile Manifesto Retrieved from https://agilemanifesto.org/
● Martin, R C (2008) Clean Code: A Handbook of Agile Software
Craftsmanship Upper Saddle River, NJ: Prentice Hall
The project contains two main directory, storing the two applications: the API server application for query endpoint in the ‘api’ directory and the web application in the ‘client’ directory
Appendix C: Building and testing the project
To test the project locally, the local machine must satisfy these following requirements:
With the dependencies installed, we can go to the ‘api’ directory to start the API server:
● Generate a prisma client using: ‘npx prisma generate’ to generate a prisma client on the machine (this step can be done once per machine)
● Install the server’s dependencies using: ‘npm i’, this will create a directory called ‘node_modules’ and install the server’s dependencies into it
● Run the server application using: ‘npm run dev’
And start the client application by going to the ‘client’ directory:
● Install the web application’s dependencies using: ‘npm i’, this will create a directory called ‘node_modules’ and install the web application’s dependencies into it.