“SHOPPIO”

A Project Report submitted in partial fulfillment of the requirement

For the award of degree of

Master of Computer Applications

Batch: 2024-2026

Supervised By Submitted By
Ms. Charu Mukhija Sandeep Kumar
Assistant Professor MCA III Sem
Department of Computer Applications 242013

Department of Computer Applications

PANIPAT INSTITUTE OF ENGINEERING & TECHNOLOGY

KUKRUKSHETRA UNIVERSITY, KURUKSHETRA

2024-2026
 Acknowledgement

A successful completion of this project is attributed to the great and indispensable help
received from different people.

I will always be grateful and thankful to Head of Department Dr. Dinesh Verma and
Project Mentor Ms. Charu Mukhija for giving me the opportunity to learn the different
aspects of designing and implementing this system. It would never be possible for me to
design this system without your continuous assistance and guidance.

I want to thanks to my project lead Mr. Kartik for providing me platform, necessary
facilities, guidance and support for completing this project.

I would like to thanks to all faculty members of Master’s Of Computer Applications

Department who are always encourage me during progress of this project.

Sandeep Kumar
 Declaration

I, Sandeep Kumar, a student of Master of Computer Applications, in the Department

of Computer Application, Panipat Institute of Engineering and Technology, Panipat,
under class Roll No.242013 and University Roll No 00240504010012 for the Session 24-
26, hereby, declare that the project report Project Code as per scheme entitled
“SHOPPIO” has been completed by me in 3rd semester during the two-month project
training. I hereby declare that the matter embodied in this project is my original work and
has not been submitted earlier for award of any degree or diploma in any college or
university.

Date: Sandeep Kumar

 Department of Computer Applications Panipat Institute of Engineering and
Technology, Samalkha Certificate

It is certified that Sandeep Kumar, a student of Master of Computer Applications,

under class Roll No. 242013 and University Roll No. 00240504010012 for the Session
24-26 batch, has completed the project entitled “SHOPPIO” under my supervision.

The project report is the authenticate work of the candidate as per her declaration and is
found to be fit for the award of degree of Master of Computer Applications in
accordance with the rules and regulations of Kurukshetra University, Kurukshetra as per
my opinion.

I wish him all the success in his all endeavors.

Ms. Charu Mukhija

Assistant Professor

Department of Computer Applications, PIET

Counter-signed by

HOD-Computer Applications
Certificate from Company

1
 Index of Figures

Figure No. Title Page No.

3.3 Requirement Diagram 18
4.1.1 Database Management 21
5.1 DFD Diagram 25
5.2 ERD Diagram 26
5.3 Class Diagram 27
5.4 State Diagram 28
6.1 Information Architecture 30
6.4.1 Content Creation 33
7.1.1 User payment integration Testing 34
7.1.2 Seller Board Panel Function Testing 34
7.1.3 Seller Board Admin Panel 35
7.2.1 Content Rendering and Customization 37
7.2.2 Desktop View 38
7.2.3 Mobile View 38
8.1.1 Deployment 41
9.1.1 Home Page 43-44
9.1.2 Registration Page 45
9.1.3 Login Page 45
9.1.4 Contact Page 46
9.1.5 Product Catalog 46
9.1.6 Product Information 47
9.1.7 Proceed to Checkout 48
[Link] Seller Panel – Login/Register Page 49
[Link] Seller Panel- Dashboard 50
[Link] Seller Panel- Management Panel 51
9.2.1 Admin Panel-Login Page 52
9.2.2 Admin Panel- Dashboard 52
9.2.3 Admin Panel- For Seller Management 53

2
 TABLE OF CONTENTS
 Acknowledgement
 Certificate from the Student
 Certificate from the Department
 Certificate from the Company
 List Of Figures
Page No.

Chapter 1: Company Profile 2

 1.1 About the Company
 1.2 Products and Services 3
1.0.1 Website Development Services 3
1.0.2 Software Development
3
1.0.3 Mobile App Development
4
1.0.4 XR & 3D Modeling Services 3
 1.3 Work Culture and Environment 4

Chapter 2: Project Description 4

 2.1 Introduction 5
 2.2 Project Overview 5
 2.3 Project Structure 6
Chapter 3: Requirement Analysis 7
 3.1 Functional Requirements 8
3.1.1 Core Features 9
3.1.2 Additional Features 9
 3.2 Non-Functional Requirement 9
 3.3 Requirement Diagram 6
 3.4 Goals of the Project 78
Chapter 4: Technology Stack 6
 4.1 Frontend 8
3
 - [Link] 98
- Tailwind CSS 0
- Axios 56
- React Router 8
- React Toastify 9
 4.2 Backend 4
- [Link] 65
- [Link] 7
- Razorpay API 78
 4.3 Database 9
- MongoDB 9
 4.4 Deployment / DevOps 8
- Vercel 9
 4.5 Other Tools 33
- Git & GitHub (Version Control) 2
- Authentication (Custom Login & JWT) 11

Chapter 5: System Design 11

 5.1 Data Flow Diagram (DFD) 22
 5.2 Entity–Relationship (ER) Diagram 33
 5.3 Class Diagram 44
 5.4 State Diagram 55

Chapter 6: Design & Development 66

 6.1 Information Architecture 77
 6.2 Development Process 23

Chapter 7: Testing & Quality Assurance 45

 7.1 Introduction 8
 7.2 Functional Testing 5

4
  7.3 Usability Testing 66

Chapter 8: Deployment & Maintenance 7

 8.1 Hosting Selection 9
 8.2 Website Launch 5
 8.3 Maintenance Plan 6
Chapter 9: Project Snapshots 7
 9.1 Working Project Screenshot 8
 9.2 Working Admin Panel Screenshot 9

Chapter 10: Conclusion 9

 10.1 Summary of the Project 0
i

5
 Chapter 1
Company Profile

6
 CHAPTER-1

Company Profile
RiyalVerse Technology Private Limited
1.1 About the Company
RiyalVerse Technology Private Limited is a registered Indian technology company incorporated
on 26th December 2024 under the Companies Act, 2013. The company is headquartered in
Panipat, Haryana, with its operational office in Noida, Uttar Pradesh.
RiyalVerse specializes in developing Extended Reality (XR), Artificial Intelligence (AI), 3D
Modeling, Blockchain, and Web 3.0-based solutions. Its primary aim is to integrate immersive
and intelligent technologies into various sectors, including:
 Education – XR-based learning platforms and training solutions
 Healthcare – AI-powered medical education and simulation labs
 Entertainment – Virtual events and interactive experiences
 Business – Digital transformation solutions and web-based platforms
Achievements to date:
 50+ projects successfully delivered
 1000+ students trained in AR, VR, AI, and related technologies
 3 major virtual events hosted.

1.2 Products & Services

1.2.1 Website Services

RiyalVerse designs and develops professional, responsive, and user-friendly websites that are
compatible across devices and optimized for performance.

Key categories include:

 Corporate and institutional websites
 XR-enabled websites (WebAR/WebVR)
 E-commerce platforms
 Custom dashboards and portals

1.2.2 Software Development

The company provides customized software solutions tailored to client requirements in various
domains. Solutions include:
 Learning Management Systems (LMS)
7
  Healthcare and hospital dashboards
 Enterprise Resource Planning (ERP) & Customer Relationship Management (CRM)
systems
 Smart classroom management tools

1.2.3 Mobile App Development

RiyalVerse develops Android and iOS applications for educational, healthcare, and business
purposes.

Key features:
 XR-based interactive learning apps
 Gamified education tools
 AI chatbot integration
 Cross-platform compatibility and data security

1.2.4 XR & 3D Modeling Services

The company’s core expertise lies in creating immersive digital experiences. Offerings include:
 AR and VR content for education and training.
 WebXR-based spatial experiences.
 3D modeling for gaming, retail, architecture, and healthcare.
 Virtual simulation labs for practical learning.

1.3 Culture and Environment

RiyalVerse follows a collaborative and innovation-driven work culture, designed to encourage
creativity, knowledge sharing, and cross-functional teamwork. Key cultural principles include:
 Open Communication: Transparent exchange of ideas and feedback.
 Collaboration: Teams work together across departments to achieve goals.
 Skill Development: Regular workshops, R&D projects, and technical upskilling
 Inclusivity: Equal opportunity for all employees in a supportive environment.

8
 Chapter 2
Project Description

9
 CHAPTER-2

Project Description
2.1 Introduction:-
This project presents SHOPPIO, a modern e-commerce web application that enables customers
to browse products, manage carts, and place orders with multiple payment options. The system
focuses on a responsive UI, fast search/filter, secure authentication/authorization, and a smooth
checkout experience. It also integrates a Seller Account Panel, which empowers vendors to
manage their products, orders, and sales performance. The solution is designed for easy
maintenance and scalability using a component-based frontend, RESTful APIs, and cloud-
friendly deployment.

2.2 Project Overview

SHOPPIO delivers an end-to-end shopping experience:
 Product discovery: category/sub-category navigation, filters, and quick view.
 Customer account: registration/login, profile management (including profile image),
and order history.
 Cart & checkout: size selection, quantity management, delivery address capture, and
shipping fee calculation.
 Payments: Cash on Delivery (COD), Razorpay, and Stripe integration with order
verification flows.
 Order management: server-side order creation, payment verification, and post-purchase
redirection to the Orders page.
 Seller account panel: dedicated dashboard for vendors to add/manage products, track
orders, view analytics, and manage their store profile.
2.3 Objectives
1. Provide a fast, mobile-first shopping interface with minimal friction.
2. Implement secure authentication and guarded flows (e.g., placing an order requires login).
3. Offer multiple payment methods and reliable order verification.
4. Ensure state persistence (cart, profile data preview, profile image in localStorage) for
better UX.
10
 5. Build a scalable and modular codebase suitable for future features.
6. Enable vendors to manage their products and business operations through a dedicated Seller
Panel.

2.4 Scopes
In Scope
 Customer-facing web app (browse, product details, cart, checkout, payments, orders).
 Profile module with image upload preview and local caching.
 Integration with payment gateways (Razorpay, Stripe) and COD flow.
 Seller Account Panel: vendors can manage products, monitor orders, view sales analytics,
and communicate with buyers.
 Basic admin-side assumptions: products are available via backend APIs.

Out of Scope
 Inventory/warehouse automation, advanced promotions, and full CMS/PIM features.
 Native mobile apps (web is responsive).

2.5 Major Features / Modules

 Home & Collection: product listing, filters, search.
 Product Details: images, ratings UI, size selection, description.
 Cart: add/update/remove items, dynamic totals, delivery fee.
 Checkout: delivery information form, method selection (Stripe/Razorpay/COD).

2.6 Authentication (Clerk for Users):

 Customer registration and login is managed using Clerk, which provides pre-built

authentication components.
 Supports email/OTP verification and secure session management.
 After successful login, users are redirected to their Customer Dashboard/Profile.
 Sellers and Admins use a separate internal login system.

 Orders: order history view.

 Profile: name/email/phone/location/nationality saved in localStorage.

 Payments:
 Razorpay order creation and client-side checkout, then server-side
verifyRazorpay.
 Stripe checkout session and redirection.
 Authentication: login/register; token-based access for protected actions.

11
  Orders: order history and status view.
 Profile: name/email/phone/location/nationality; profile picture preview saved in
localStorage.

2.6 Seller Account Panel:

 Product Management – add/edit products, update inventory, manage pricing.
 Order Tracking & Fulfillment – track new orders, print shipping labels, update status.
 Sales & Analytics Dashboard – monitor sales trends, revenue, and customer behavior.
 Communication Tools – built-in chat/messaging with buyers.
2.7 Profile Management – store logo, description, and branding.
2.8 Technology Stack:-
 Frontend: React (hooks, context), Tailwind CSS / utility classes, React Router, react-
toastify, axios.
 State & Utilities: Context API for cart, products, auth; localStorage for lightweight
persistence.
 Backend: [Link]/Express REST APIs, JWT auth, MongoDB (or similar).
 Payments: Razorpay Checkout, Stripe Checkout.
 Build & Deployment: Vite/React build; environment variables for keys/URLs.

2.9 Assumptions & Dependencies

 Product/catalog data and order endpoints are available at backendUrl.
 Valid JWT token is required for placing orders and accessing protected endpoints.
 Payment keys are provided via environment variables.
 Stable internet connection for gateway redirects and verifications.

2.8 Constraints
 Third-party payment gateway availability and regional restrictions.
 Browser storage limits for localStorage previews (profile images are Base64).
 Rate limits and latency from external APIs.

12
2.10 Quality & Success Criteria
 Usability: user can discover a product and complete checkout in ≤ 3 minutes.
 Reliability: successful payment verification recorded on the server with consistent order
state.
 Performance: product and cart pages load quickly on typical mobile networks.
 Security: protected routes blocked when token is missing/expired; sensitive operations
require auth.

2.11 Future Enhancements

 Coupons, wishlist, product reviews/ratings persistence.
 Address book & saved payment methods.
 Admin dashboard for catalog, orders, analytics.
 Image CDN and optimized media handling.

 Advanced Seller Features:

1. Automated sales reports and predictive analytics.
2. Multi-seller collaboration and marketplace expansion.
3. Seller performance ratings and feedback system.

2.12 Edit Profile

 Edit Details : Similar to "My Profile," users can update their personal information.
 Log Out : Users can log out of their account.
 Seller Profile Customization: Sellers can update store details, upload/store logos, and edit
brand descriptions.

13
 Chapter 3
Requirement Analysis

14
 CHAPTER-3
Requirement Analysis

3.1 Functional Requirements

Requirement analysis defines the system's functional and non-functional needs. It ensures that
Shoppio meets user expectations not only for customers and administrators but also for sellers, who
manage products and sales on the platform.

3.1.1 Core Features

 Reliability & Data Integrity: Ensure atomic operations for critical flows (checkout,
stock updates) and transactional consistency to prevent overselling or data loss.
 Usability:
Provide an intuitive, mobile-first interface with clear CTAs and short checkout flow to
minimize friction and reduce cart abandonment.
 Accessibility:
Follow basic WCAG guidelines (alt text, keyboard navigation, sufficient contrast) so the
site is usable by people with disabilities.
 Maintainability:
Code should be modular, documented, linted, and covered by unit tests to make future
enhancements and bug fixes straightforward.
 Portability & Deployment: Support containerized deployment or serverless functions;
configuration via environment variables to ease deployment across providers.
 Backup & Recovery: Daily backups of the database with point-in-time restore where
possible; documented recovery plan and periodic drill tests.
 Monitoring & Logging: Implement application monitoring (errors, performance metrics)
and audit logging for security-sensitive actions; set alerts for key failures.

3.1.2 Seller Panel Functionalities

The system must support:
 Product Management: Sellers can add/edit/delete products, upload images, set categories,
and update inventory levels.
15
  Order Tracking & Fulfillment: Sellers can view incoming orders, update their status, print
invoices/shipping labels, and mark orders as shipped or delivered.
 Sales & Analytics Dashboard: Sellers can view sales trends, revenue reports, and analyze
customer preferences.
 Communication Tools: Sellers can directly message buyers to resolve queries or disputes.
 Profile Management: Sellers can customize their storefront (logo, store name, description).

3.1.3 Privacy & Compliance: It Handle both customer and seller data securely. And Protect
sensitive operations like payment processing, seller profile changes, and customer communication.
& Follow payment-provider rules and applicable data protection laws.
3.2 Non-Functional Requirements
 Performance
Pages (home, product list, product detail) should render quickly — target perceived load< 2–3s
on typical mobile (4G). Use lazy-loading for images, client-side caching for repeated
requests, and optimized API responses to keep interactions snappy.
 Scalability
Design the backend to scale horizontally (stateless API servers, load balancer, database
scaling/indexing). Use a CDN for static assets so the system can support increased users
and larger catalogs without major rework.
 Security
Protect user data and transactions using HTTPS, secure token-based authentication (JWT
or HttpOnly cookies), hashed passwords (bcrypt/argon2), server-side input validation and
sanitize all user inputs to mitigate OWASP risks. Do not store raw payment data; rely on
Razorpay for sensitive payment handling.
 Usability
Provide a clean, mobile-first UI with clear CTAs and short checkout steps. Keep
navigation intuitive, forms simple, and error messages actionable to reduce friction and
cart abandonment.
 Reliability & Availability Aim for high availability of the storefront (target SLA
~99.5%). Implement graceful error handling and retry strategies for transient failures;
ensure critical flows (checkout, payment verification) are resilient and idempotent.

16
  Compatibility
Ensure consistent behavior across modern browsers (Chrome, Firefox, Edge, Safari) and
devices (phones, tablets, desktops). Use responsive CSS (Tailwind) and test key flows on
different screen sizes.
 Maintainability
Keep the code modular and well-documented with clear folder structure, consistent
linting, and meaningful commits. This makes future feature additions, bug fixes, and
onboarding easier.
 Backup & Recovery Schedule regular backups of the database (daily or more frequently
depending on traffic) with a tested restore procedure. Maintain exported snapshots of
critical data (orders, users) and document the recovery steps.
 Monitoring & Logging Instrument the app with basic monitoring (uptime, response
times, error rates) and centralized logs for server errors and payment/webhook events.
Configure alerts for critical failures (payment errors, high error rates).
 Privacy & Compliance Collect only necessary user data and provide opt-in for
marketing. Implement a way for users to request data deletion or export and document
how PII is protected and used (privacy policy entry).
 Accessibility
Follow basic accessibility practices (semantic HTML, alt text for images, keyboard
navigation, adequate color contrast) so the site is usable by people with disabilities and
meets minimum WCAG considerations.
Testing & Quality Assurance Adopt a testing strategy with unit tests for core logic, integration tests
for APIs, and manual tests for key flows (signup, add-to-cart, checkout). Run regression checks
before major releases. And Unit tests for seller product management APIs. Integration tests for
order workflows (customer → seller → admin).

3.3 Requirment Diagram

The Requirement Diagram captures the functional and non-functional needs of the
Shoppio system and shows how stakeholders and system components satisfy those needs.
It clarifies scope, priorities, and traceability from requirements to implementation.

17
Fig:3.3 Requirement Diagram

18
3.4 Goals Of The Project
 Provide an Online Shopping Platform: Develop a user-friendly platform where customers can
browse, search, and purchase products seamlessly.
 Simplify Product Management for Sellers: Enable vendors to add, update, and manage
product details, categories, inventory, and pricing via a secure Seller Panel.
 Streamline Cart and Checkout Process: Implement smooth cart and checkout features for
buyers.
 Ensure Secure Payments: Integrate Razorpay/Stripe payment gateways for safe transactions.
 Enhance User & Seller Experience: Build responsive UI for customers and seller dashboards.
 Support Order Tracking: Allow customers to view past orders and sellers to manage
fulfillment.
 Maintain Data Security & Reliability: Ensure secure authentication, role-based access, and
reliable backend services.

19
 Chapter 4
Technology Stack

20
 CHAPTER-4

Technology
Stack
Stack Summary: The Shoppio project leverages a modern full-stack JavaScript ecosystem to
deliver a scalable, responsive, and secure e-commerce platform. Each component was chosen to
optimize development efficiency, maintainability, and performance:
 Frontend Framework–[Link] [Link] is used to build an interactive, componentized
user interface with client-side routing. Its component model, extensive ecosystem, and
easy state management allow reusability and faster development of complex UI elements.
 Styling–Tailwind CSS Tailwind CSS provides a utility-first approach for consistent and
responsive styling. It allows rapid prototyping with minimal custom CSS and a small
runtime bundle, ensuring fast page loads.
 Backend Runtime–[Link] [Link] serves as the server-side runtime for handling API
requests. Its single-language (JavaScript) stack and non-blocking I/O make it ideal for
web APIs and concurrent user requests.
 Backend Framework – [Link] [Link] is a lightweight framework for REST APIs
and server routing. It is chosen for its simplicity, minimal boilerplate, and ability to quickly
create robust backend endpoints and middleware.
 Database - MongoDB MongoDB is a NoSQL document store for managing users,
products, carts, and orders. Its flexible schema supports varying product attributes and
allows horizontal scaling for cloud deployments.

21
 Fig 4.1: Database Management

Payments-Razorpay,Stripe handles secure online payments via UPI, cards, and wallets. It is
preferred for India-focused e-commerce, offering easy integration, webhooks, and
reliable transaction handling.
 Frontend Hosting - Vercel hosts the React frontend as a static site with serverless functions. It
provides fast CDN delivery, CI/CD integration, and React optimization, ensuring smooth
deployment and accessibility.
 Backend Hosting – Render The backend API and webhooks are hosted on platforms like
Render or Heroku, or on a VPS, depending on server needs. These platforms support [Link]
applications, background workers, and webhook processing.
 Storage/CDN – Cloudinary Product and profile images are hosted on Cloudinary with a
CDN, allowing fast global delivery, image optimization, and responsive thumbnails.
 Version Control – Git & GitHub Git and GitHub manage source code versioning,
collaboration, and CI/CD workflows. Integration with deployment platforms ensures
smooth updates and rollbacks.
 Monitoring & Logging - Monitoring tools track runtime errors, performance issues, and
payment/webhook problems, enabling timely debugging and maintenance.

22
Development & Supporting Tools
 Package manager: npm / yarn — dependency management and scripts.
 Bundler: Vite / Create React App (your current setup) — dev server and optimized build.
 Linting & Formatting: Prettier — code quality and consistent style.
 Env management: .env files (kept out of repo) and secrets in host provider (Vercel).
 Authentication: JWT (or HttpOnly cookies) and bcrypt for password hashing.
 Image handling: Client-side preview + server upload with Cloudinary/S3 integration and
lazy loading.

Deployment & CI/CD

 Repo → GitHub → Vercel (frontend): Automatic builds on push to main branch.
 Backend CI/CD: Render / GitHub Actions to build/test/deploy API and run migrations
or background jobs.
 Environment separation: development, staging, production with separate env variables
and databases.

Security & Operational Notes

 Do not store payment card data — rely on Razorpay tokenization and webhooks.
 Store secrets in platform-provided secret manager (Vercel/Render).
 Use HTTPS for all endpoints, enable CORS only for allowed origins, and
validate/sanitize inputs server-side.
 Use DB indexes on commonly queried fields (product name, category) for performance.

Recommended Versions & Next Steps

 [Link] LTS (current stable LTS), React latest stable (or one major below if using CRA).
 Use MongoDB Atlas for managed hosting (free tier for development).
 Add Cloudinary for image CDN and transforms to improve page speed.
 Add basic CI tests (lint + unit) before automated deploys.

Key Features of Shoppio:-

1. User Authentication (Clerk for Customers)
o Secure login and registration system implemented with Clerk.
o Supports email/OTP verification, session management, and profile handling.
o Ensures customers can only access their accounts and orders after successful
authentication.
o Sellers and Admins use an internal authentication system with JWT and bcrypt.

2. Product Browsing & Categories

o Users can view all products with images, descriptions, and prices.
o Filter and search options make finding products fast and easy.

23
3. Cart Management
o Add, remove, or update products in the shopping cart.
o Real-time cart total calculation for better user experience.

4. Seamless Payment Integration

o Razorpay integration for secure and instant online payments.
o Stripe checkout support for international transactions.
o Handles successful, failed, or pending transactions.

5. Order Management
o Customers can view their order history and current order status.
o Sellers can track and update their incoming orders.
o Admin can oversee, approve, and manage all user orders.

6. Seller Panel
o Vendors can add, edit, and manage their product listings.
o Dedicated dashboard to track orders, sales, and performance.
o Built-in tools for communication with buyers and profile management.

7. Admin Panel
o Admin can add, update, or delete products.
o Full control over users, sellers, and product visibility.
o Analytics and reports for business monitoring.

8. Responsive UI/UX
o Built with [Link] and Tailwind CSS for a modern, responsive design.
o Works smoothly on desktops, tablets, and mobile devices.

9. API Integration with Axios

o Efficient communication between frontend and backend.
o Ensures smooth data fetching, posting, and updating.

10. Secure Backend

24
 o [Link] and [Link] server with MongoDB database for reliable data storage.
o Handles all CRUD operations securely with JWT-based authorization.

11. Performance & User Experience Enhancements

o Shimmer/skeleton loading effects for faster perceived performance.
o Optimized image loading and smooth navigation for better engagement.

25
 Chapter 5
System Design

26
 Section-5
System Design (UML)

5.1 Data Flow Diagram (DFD): Illustrate the flow of data between users, the website, and the
database.

Fig 5.1 DFD DIAGRAM

27
5.2 Entity-Relationship Diagram (ERD): Represent entities (products, users, orders) and their
relationships.

Fig 5.2:ERD Diagram

28
5.3 Class Diagram: It provides a blueprint of the object-oriented design, helping to visualize
how customers, sellers, admins, and core entities like products, orders, carts, and payments
interact within the platform.

Fig:5.3 Class Diagram

29
5.4 State Diagram: A State Diagram is a visual representation of the various states a system or
object can be in, and the transitions between those states. It's particularly useful for modeling
systems with dynamic behavior, such as software applications, hardware components, or even
business processes.

Fig 5.4: State Diagram

30
 Chapter 6
System Design

31
 CHAPTER-6

Design and Development

6.1 Information Architecture

The design and development phase of Shoppio focused on creating a responsive, modular, and
role-based e-commerce platform. The system is divided into three roles: Customer, Seller, and
Admin, each with a dedicated interface and set of functionalities.

 Client-Side (Frontend):
 Built with [Link] and styled with Tailwind CSS for responsive UI.
 Provides customer features such as product browsing, cart, checkout, and order tracking.
 Seller dashboard for product management, order tracking, and sales analytics.
 Admin dashboard for site monitoring and user management.

 Server-Side (Backend):
 Developed using [Link] + [Link].
 Handles API requests, authentication/authorization, order processing, and seller operations.

 Database (MongoDB):
 Stores users, sellers, products, carts, and orders.
 Ensures fast querying and scalability for a growing product catalog and multiple sellers.

 External Integrations:
 Razorpay / Stripe for secure payments.
 Axios for frontend-backend communication.

32
 Fig 6.1 Information Architecture

6.2 Content Management System (CMS) Selection

Shoppio is a custom-built web application, providing full control over content and functionality,
unlike traditional CMS platforms. Using the MERN stack, it allows:
 Dynamic product management and order tracking for customers and sellers.
 Easy updates to product details and inventory through the Admin and Seller Panels.
 Secure user account management and authentication using Clerk for customer
login/registration, ensuring OTP/email verification and session handling.
 Admin Panel serves as the central CMS where the administrator manages the complete e-
commerce workflow, including products, users, and orders.
 Seller Panel acts as a micro-CMS for vendors, enabling them to manage their own catalogue,
fulfil. orders, and view analytics.

33
This approach ensures flexibility, scalability, and security, delivering a tailored experience for
customers, sellers, and admins.

6.3 Library Selection

Shoppio leverages [Link] components and third-party libraries to enhance functionality and
design:
 UI Libraries & Styling: Tailwind CSS and prebuilt React components for responsive
and modern design.
 Form Handling: React forms and validation for user registration, login, and checkout.
 Payment Integration: Razorpay ensures secure payments with multiple options.
 Routing & State Management: React Router for navigation and Context API for
managing cart, user authentication, and order state.
 Notifications & Alerts: Libraries for feedback like order confirmations and error
messages.
These libraries reduce development complexity, improve performance, and ensure a smooth user
experience.

6.4 Development Process

The development was carried out using MERN stack best practices, ensuring modularity,
scalability, and security:
1. Theme Customization:
o React components styled with Tailwind CSS to create a clean, modern layout.
o Mobile-first approach ensured usability across all devices.
2. Authentication Integration:
o Customers: Authentication was implemented using Clerk, which provides pre-built
UI components for login, signup, and profile management. Clerk handles OTP/email
verification, secure session management, and automatic redirection to the customer
dashboard.
o Sellers and Admins: Authentication was implemented internally using JWT tokens
and bcrypt password hashing, ensuring role-based access to Seller and Admin
Panels.
3. Seller Panel Development:
 Built as a separate module with dashboards for product management, order
tracking, and sales analytics.
 Integrated APIs allow sellers to add/update products and fulfill orders securely.
34
4. Admin Panel Development:

o Provides complete control over users, sellers, products, and orders.

o Includes analytics and reporting for business insights.

5. Library Integration:

o Axios for API communication.

o React Router for navigation.

o React Toastify for real-time notifications (e.g., order placed, payment success).

6. Content Creation:

o Dynamic product listings and details rendered from MongoDB.

o Seller-uploaded content (images, descriptions, pricing) stored in the database and

optimized via Cloudinary.

35
Fig 6.4.1 Content Creatio

36
 Chapter 7
Testing and Quality
Assurance

37
 CHAPTER-7

Testing and Quality Assurance

Testing and Quality Assurance (QA) were performed to ensure that Shoppio functions reliably
across all modules: Customer, Seller, and Admin. The goal was to verify that the system meets its
requirements, provides a smooth user experience, and works consistently across devices and
browsers.

1. Functional Testing
Customer Features Tested
 User registration, login, and profile update.
 Product browsing, filtering, and search.
 Cart management: add, update, remove items.
 Checkout process with COD, Razorpay, and Stripe.
 Order tracking and order history.

Seller Features Tested

 Seller registration/login.
 Product management: add, edit, update stock, delete.
 Order dashboard: view new orders, update status (pending → shipped → delivered).
 Sales analytics view.
 Store profile customization.

Admin Features Tested

 Add/update/delete products.
 Approve/reject sellers.
 View/manage users.
 Monitor orders and payments.

38
Fig:7.1.1.-User payment Integration Testing

Fig:7.1.2- Seller Board Function Testing

39
 Fig:7.1.3-Seller Board Admin Panel

2. Integration Testing
 Checked communication between the frontend ([Link]) and backend ([Link] +
[Link]) using Axios.
 Verified that data flows correctly between components, including cart updates and
order processing.

40
 Fig 7.2.1Content Rendering & Customization

3. Cross-Device and Browser Testing

 Tested on Chrome, Firefox, Microsoft Edge, and Safari.
 Verified responsiveness on Android, iOS, Windows, and macOS devices.
 Ensured consistent behavior of cart, checkout, and seller dashboard.

41
Fig 7.2.2: Desktop view

42
 Fig 7.2.3 :Mobile View

4. Quality Assurance Practices

 Maintained manual testing records for all critical features.
 Reviewed backend operations like order placement and payment confirmation to ensure
data consistency.
 Recommended future improvements include unit testing, performance testing, and

security testing.

5. Testing Summary Table

Feature Method Status

Customer Registration/Login (Clerk) Manual Passed

Clerk OTP/Email Verification Manual Passed

Customer Profile & Orders (Protected Routes) Manual Verified

Product Browsing & Filters Manual Passed

Cart Management Manual Passed

Checkout & Payment (COD/Razorpay/Stripe) Manual Passed

Order Tracking (Customer) Manual Passed

Seller Product Management Manual Passed

Seller Order Fulfillment Manual Passed

Seller Analytics Dashboard Manual Passed

Admin Product/User Management Manual Passed

43
 Feature Method Status

Responsive Design (Mobile/Desktop) Manual Verified

API Integration (Frontend–Backend) Manual Verified

Purpose:
 Ensures a stable and reliable e-commerce experience for users.
 Enhances user confidence and satisfaction.
 Provides a foundation for future improvements, including automated testing and
performance optimization.

44
 Chapter 8
Deployment and Maintenance

45
 CHAPTER –8
Deployment and Maintenance

Deployment and maintenance are essential to ensure that Shoppio is live, functional, and user-
friendly while remaining secure and easy to manage.

1. Deployment

 The frontend of Shoppio, built with [Link] and styled using Tailwind CSS, is
deployed on Vercel, providing fast loading and responsiveness across devices.

 The backend, built with [Link] and [Link], interacts with MongoDB for storing
product details, user information, cart data, and orders.

 The Razorpay payment gateway is integrated for secure online payments.

 The deployment process included setting up environment variables, connecting the

frontend to backend APIs using Axios, and verifying that all modules (product listing,
cart, checkout, payment) work as intended.

 The live site is fully accessible to users, allowing smooth browsing, ordering, and payment.

Fig 8.1.1Deployment

46
2. Maintenance
Maintenance in Shoppio focuses on keeping the platform stable, functional, and secure.
Key activities include:
 Bug Fixes and Issue Resolution: Monitoring user interactions and fixing any UI or
functional issues in the frontend or backend.

 Content Updates: Adding new products, updating product details, and modifying
descriptions and prices to keep the store relevant.

 Database Management: Managing MongoDB collections for smooth access to user,

cart, and order data.

 Payment Monitoring: Ensuring Razorpay transactions are processed correctly and

securely.

 Performance Monitoring: Checking responsiveness, page load, and cart/checkout

operations to maintain user satisfaction.

Purpose:
 Ensures Shoppio remains reliable, secure, and user-friendly.
 Maintains a positive user experience, with functional ordering and payment systems.
 Supports scalability for adding new products, users, and features in the future.

47
 Chapter 9
Snapshot's / Forms

48
 CHAPTER- 9
Snapshot's / Forms

9.1 Project Working Through Screenshots

This section demonstrates the functionality and workflow of Shoppio using screenshots of key
pages and features.

Home page-

49
 Fig: Users Login Profile

Fig 9.1.1 Home Page

 The homepage provides navigation to all pages and product categories.

 To purchase products, users must first register or log in.

 Registered users are automatically logged in, while new users can register via the

50
Registration Form.

 The homepage also highlights solutions offered by the website, including AI & ML
Solutions, Cloud Solutions, etc.

 Users can contact the business through the footer, which includes email, phone.

51
Register / Log In Forms-

Fig 9.1.2 Registration Form

 New users can register by providing basic details.

 Registration automatically logs users into the site.

Fig 9.1.3 Login Form

52
 Existing users can log in using their credentials to access the full features of the website.

53
 Contact Page

Fig 9.1.4 Contact Page

 Provides a contact form to reach out via email.
 Displays contact information including phone number.
 Users can directly contact the business using the contact button.
Shop Page/Product Catalog

54
 Fig 9.1.5 Product Catalog

Shoppio is a modern e-commerce platform dedicated to fashion and lifestyle, providing a

seamless shopping experience for clothing, accessories, and apparel. With a focus on style,
quality, and convenience, Shoppio makes it easy for customers to discover the latest trends, shop
effortlessly, and enjoy reliable delivery right to their doorstep.

Steps to Purchase a Product:

1. Select the product.

2. Add it to the cart.

3. Open the cart.

4. Proceed to checkout.

5. Fill in your personal and address details.

6. Select a payment method (Cash on Delivery / Razorpay/Stripe).

7. Place the order.

Product and Checkout Workflow

 Displays product details including description, price, and the “Add to Cart” button.

55
Fig 9.1.6 Product Information

56
 Fig 9.1.7 Proceed to Checkout

 Opens the checkout page after adding products to the cart.

 Users can select Cash on Delivery or Pay via Razorpay and via Stripe to complete the
order and Users enter their personal and shipping information.

9.1.2 Seller Account Working

The Seller Account serves as a dedicated portal for vendors to manage their business operations on
the platform. It provides a suite of tools that empower sellers to handle their products, orders, and
sales performance efficiently. The account is structured to be user-friendly, offering a clear and
intuitive dashboard to oversee all aspects of their online store.

Key Features:
 Product Management:
Sellers can add new products, edit existing listings, update inventory levels, and manage
pricing. This includes uploading product images and writing descriptions.

Fig [Link]: Seller Panel

57
 Fig [Link]:Seller Panel Dashboard

 Order Tracking and Fulfillment:

The dashboard provides real-time updates on new orders. Sellers can view order details, print
shipping labels, and track the status of shipments to ensure timely delivery.
 Sales and Analytics Dashboard:
This section gives sellers a clear overview of their business performance. They can monitor
sales trends, view revenue reports, and analyze customer behavior to make informed
decisions.

58
 Fig [Link]:Sellar Management Panel

 Communication:
A built-in messaging system allows sellers to communicate directly with buyers to answer
questions, resolve issues, and provide customer support.
 Profile Management:
Sellers can manage their public-facing profile, including their store name, logo, and a brief
description of their brand to build credibility with buyers.

9.2 Admin-Panel Working

ADMIN PANEL-
The Admin Panel is the site’s control center, allowing the admin to:

1. Manage Products: Add, edit, delete products, set categories, sizes, and mark bestsellers.
2. Manage Orders: Track all orders, update order status, and view payment status.
3. Manage Users/Sellers: View users, approve/reject sellers.
4. Access Control: Admin has full access; sellers can only manage their own products/orders.

Summary: The admin panel oversees the entire site, ensuring smooth product, order, and seller
management.

59
Fig 9.2.1:Admin Panel Login Page

Fig 9.2.2:Admin Panel Dashboard

60
Fig 9.2.3:Admin Panel For Seller Management

61
 Chapter 10
CONCLUSION

62
 CHAPTER-10

CONCLUSION

Shoppio is a modern e-commerce platform dedicated to fashion and lifestyle, providing a seamless
shopping experience for clothing, accessories, and apparel. With a focus on style, quality, and
convenience, it enables customers to discover the latest trends, shop effortlessly, and enjoy reliable
delivery right to their doorstep.

The project successfully demonstrates the following:

 Full-stack development using the MERN stack: [Link] for the frontend, [Link] and
[Link] for the backend, and MongoDB for the database.

 Secure and seamless payment integration via Razorpay and Stripe.

 Responsive and user-friendly design using Tailwind CSS, ensuring accessibility across
devices.

 Modern authentication with Clerk for customer login and registration, including
OTP/email verification and secure session handling.

 Dynamic content management and navigation, allowing users to browse products, manage
their cart, and complete orders.

 Robust development and testing practices, ensuring functional reliability, cross-device

compatibility, and a smooth checkout experience.

 Deployment and maintenance strategies to keep the platform live, secure, and up-to-date.

Seller Account Integration

Alongside customer features, Shoppio also provides a dedicated Seller Account module,
empowering vendors to manage their business operations efficiently.

Key highlights include:

63
  Product Management – Adding, editing, and maintaining inventory and pricing.
 Order Tracking & Fulfillment – Real-time order updates, shipping label generation, and
delivery tracking.
 Sales & Analytics Dashboard – Insights into sales trends, revenue, and customer behavior.
 Communication Tools – Direct messaging between sellers and buyers for support and
queries.
 Profile Management – Customizable store name, logo, and brand description to build
credibility.

This feature ensures that the platform caters not only to buyers but also to sellers, creating a
complete two-sided marketplace ecosystem.

Overall Outcome
 The project delivers a functional, efficient, and scalable e-commerce solution.

 It offers a seamless experience for customers (via Clerk authentication), sellers, and
administrators, demonstrating key aspects of modern web application development.

 Shoppio stands as a practical example of combining frontend, backend, authentication,

payment systems, and seller management tools into a coherent, professional web platform.

Future Enhancements
 Implement automated testing for improved quality assurance.
 Add advanced analytics and reporting features for deeper business insights.
 Introduce more services and product categories to expand the platform’s scope.
 Enhance security and performance optimizations to support large-scale deployment.
 Extend Clerk authentication for sellers and admins for a unified authentication experience.

64
i