ECOMMERCE WEB APP

A MINI PROJECT

Submitted by

PADARIYA DARSHAN BHARATBHAI

221213107003

In partial fulfillment for the award of the degree of

BACHELOR OF ENGINEERING

In
Computer Engineering
Apollo Institute Of Engineering And Technology
Ahmedabad

Gujarat Technological University, Ahmedabad

January, 2025
 Apollo Institute Of Engineering And Technology
Ahmedabad

CERTIFICATE

This is to certify that the project entitled “ Ecommerce Web App ” has been carried out by “

PADARIYA DARSHAN BHARATBHAI (221213107003) ” under my guidance in partial

fulfillment for the Project Report (3180701) Subject of Bachelor of Engineering in

Computer Engineering, 8th Semester of Gujrat Technological University, Ahmedabad

during the academic year 2024 – 25.

Name of Internal Guide Head of the Department

Prof. Janam Jain Prof. Richa Bhadauria

 Apollo Institute Of Engineering And Technology
Ahmedabad

DECLARATION

We hereby declare that the Internship report submitted along with the Project Entitled

Ecommerce Web App submitted in partial fulfillment for the degree of Bachelor of

Engineering in Computer Engineering to Gujrat Technological University, Ahmedabad, is a

bonafide record of original project work carried out by me at Apollo Institute And

Technology Under the supervision of Janam Jain and that no part of this report has been

directly copied from any student’s reports or taken from any other source, without providing

due reference.

Candidate’s Name Student’s Signature

DARSHAN PADARIYA

4
 ACKNOWLEDGMENT

First of all, I sincerely thank to my Internal guide Janam Jain for continuously guiding me at

the company and answering all my doubts with patience. I am grateful for his prolonged

interest in my work and excellent guidance. He has been a constant source of motivation to

me. I also thank my parents, friends and all the members of the family for their precious

support and encouragement which they had provided in completion of our work. In addition

to that, I would also like to mention the company personals who gave me the permission to

use and experience the valuable resources required for the internship.

Thus, conclusion to the above said, I once again thank the staff members of Apollo Institute

And Technology For their valuable support in completion of the project.

DARSHAN PADARIYA

221213107003

5
 ABSTRACT

This project is a fully functional eCommerce web application developed using the MERN

stack, which includes MongoDB, [Link], [Link], and [Link]. The application allows

users to browse products, view detailed information, add items to a cart, and manage their

cart items. It features secure user authentication and authorization, an admin dashboard for

product and user management, and a responsive, user-friendly interface. While the

application does not include a payment gateway, it provides all essential eCommerce

functionalities up to the order placement stage. This project demonstrates the effective use of

modern web technologies to build scalable and interactive eCommerce platforms.

6
 LIST OF FIGURES

Fig. 3.1.1 System

Architecture……………………………………………………………...7
Fig. 3.1.2 Home Page...………….………………………………………...
………………..8
Fig. 3.1.3 Products Page.. ……………………………………………………………….
….9
Fig. 3.1.4 Product Details Page………………….………………………………….………
9
Fig. 3.1.5 Register/login Page…………………………………………..…………………
10
Fig. 3.1.6 Profile Management Page………………………………………………………
10
Fig. 3.1.7 Admin Dashboard……………………………………………………...
……….11
Fig. 3.1.8 Admin Sales and Stock Overview …………………………..………...
………..11
Fig. 3.1.9 Admin Create New Product…………………………………………..…………
12
Fig. 3.1.10 Admin Edit Product………………………………………….…...……………
12
Fig 3.1.11 Admin Orders Management………………...…………………………....……
13
Fig. 3.1.12 Admin Users Management…………………………………………...
………..13
Fig. 3.1.13 Admin Reviews Management………………….
……………………………...14
Fig. 3.1.14 Cart Page ………………….……………………...
…………………………...14
Fig. 3.1.15 Shipping Details…………………………….….
……………………………...15
Fig. 3.1.16 Confirm Order Page…………………………….
…………………………......15

7
 LIST OF FIGURES

Fig. 3.1.27 Role Based Access

Control…………………………………………………...27
Fig. 3.1.28 Protection Layer………………………………………………………….
…...28
Fig. 3.1.29 Product Details……………………………………………………………….29
Fig. 3.1.30 Cart……………………..…………………………………………………….30
Fig. 3.1.31 Express
Routes………………………………………………………………..31
Fig. 3.1.32 Postman Product Routes Testing……...………………………………………
32
Fig. 3.1.33 Postman Authentication Routes Testing………………..
…………………….32
Fig. 3.1.34 Postman User Routes Testing…………………………….
…………………..33
Fig. 3.1.35 Postman Order Routes Testing………..………………………………………
33
Fig. 3.1.36 Integration Flow………………………………………………………………
34
Fig. 3.1.37 Error Control……………………………………………………………….…
36
Fig. 1.1.38 Pagination………………………………………….…………………………36

8
 LIST OF TABLES

Table. 2.2 Main API Endpoints Table……………………………………………………...7

9
 TABLE OF CONTENT

ACKNOWLEDGMENT………………………………………………………………...II

ABSTRACT……………………………………………………………………………..III

LIST OF FIGURES……………………………………………………………….
…….IV

LIST OF TABLES……………………………………………………………….
……...VI

LIST OF CONTENT…………………………………………………………………..VII

1. INTRODUCTION TO PROJECT…………………………………...……………….1
1.1 Background……………..…………………………………………..
………………….1
1.3 Objectives……………………………………………………………………………...1
1.3 Scope of the
Project…………………………………………………………………….2
2. TECHNOLOGY
STACK……………………………………………………………...3
2.1 MongoDB…………………………………………………………………………...…3
2.2 [Link]……………………………………………………….…………………...…3
2.3 [Link]…………………………………………….………………………………..…3
2.4 [Link]…………………………………………………………………………………4
2.5 Other Tools and Libraries………………………………………………………………
5
3. SYSTEM ARCHITECTURE………………………………………………………....6
3.1 Overview……………………………………………………………………………....6
3.2 Client-Server Communication………………………………………………………....6
3.3 REST API Structure……………………………………………………………………
7
4. FEATURES OF THE APPLICATION…………………………………………….…
8

VII
 TABLE OF CONTENT

5. DATABASE DESIGN………………………………………………………………..17
5.1 Schema Overview…………………………………………………………………….17
5.2 Entity Relationship Diagram (ERD)
………………………………………………….18
5.3 Collections and
Fields………………………………………………………………...20
6. USER INTERFACE
DESIGN……………………………………………………….22
6.1 UI/UX Principles……………………………………………………………………..22
6.2 Responsive Design……………………………………………………………………
22
6.3 Page Layouts and
Navigation………………………………………………………....24
7. AUTHENTICATION AND
SECURITY…………………………………………....25
7.1 User Authentication (JWT, Bcrypt)
…………………………………………………..25
7.2 Role-based Access
Control…………………………………………………………...26
7.3 Data Protection Measures…………………………………………………………….28
8. IMPLEMENTATION DETAILS……………………………………………………
29
8.1 Frontend Development……………………………………………………………..…
29
8.2 Backend Development……………………………………………………………..…
30
8.3 API Endpoints……………………………………………………………………...…
31
8.4 Integration and Testing……………………………………………………………….34
9. CHALLENGES AND
SOLUTIONS………………………………………………...35
9.1 Development Challenges…………………………………………………………..…35

VIII
 TABLE OF CONTENT

12. REFERENCES……………………………………………………………………...40
13.
APPENDICES……………………………………………………………………….41
13.1 UI Design
Walkthrough……………………………………………………………..41
13.2 Additional Notes & Developer
Insights……………………………………………..41

IX
Project ID : [Link] To Project

1. INTRODUCTION TO PROJECT

1.1 Background
In the era of digital transformation, eCommerce has become a cornerstone of modern
business. With the increasing demand for online shopping experiences, businesses are
shifting toward building efficient and scalable online platforms. Full-stack development using
modern JavaScript technologies has enabled developers to create high-performing web
applications with seamless user experiences. This project aims to develop a complete
eCommerce web application using the MERN stack (MongoDB, [Link], [Link], and
[Link]), which are widely adopted technologies in the web development ecosystem.

1.2 Objectives
The primary objective of this project is to design and implement a fully functional
eCommerce platform that allows users to:
 Browse products across different categories
 View detailed product information
 Register and log in securely
 Add products to a shopping cart
 Place an order (without payment integration)
 Manage user profiles Additionally, the admin panel is developed to facilitate product,
order, and user management by the administrator.

Gujrat Technological University 1 AIET

Project ID : [Link] To Project

`1.3 Scope of the Project

This project covers the end-to-end development of an eCommerce platform focusing on core

functionalities like product listing, cart management, and order placement (without payment

gateway integration). While the system provides a strong foundation for a production-ready

application, some advanced features such as online payments, notifications, and wishlists are

planned for future enhancements.

The scope includes:

 User registration and login system

 Role-based access for users and admins

 Product and order management modules

 RESTful API for frontend-backend communication

 Mobile-responsive UI for improved usability

Gujrat Technological University 2 AIET

Project ID : 2 Technology Stack

2. TECHNOLOGY STACK

The development of this eCommerce application leverages the MERN stack, a popular
combination of JavaScript-based technologies used for building full-stack web applications.
This stack enables efficient development, fast performance, and seamless integration between
the frontend and backend.

2.1 MongoDB
MongoDB is a NoSQL database used as the primary data store for this application. It
stores data in flexible, JSON-like documents, which makes it ideal for managing various
types of data such as users, products, orders, and carts. MongoDB’s schema-less structure
provides scalability and adaptability during development.
Key Features Used:
 Collections for Users, Products, Orders, and Carts
 Mongoose ODM for schema definitions and validations
 Flexible querying and indexing

2.2 [Link]
[Link] is a lightweight and fast web application framework for [Link]. It is used to
build the RESTful API that connects the frontend with the backend and manages routing,
middleware, and HTTP request handling.
Key Features Used:
 API route handling for CRUD operations
 Middleware for authentication, error handling, and data validation
 Integration with Mongoose for database communication

2.3 [Link]
[Link] is a powerful frontend JavaScript library for building user interfaces. It enables
the creation of dynamic and responsive UI components using a component-based
architecture.
Key Features Used:
 Functional components and hooks (useState, useEffect)
 React Router for navigation and routing
 Conditional rendering and state-driven UI updates

Gujrat Technological University 3 AIET

Project ID : 2 Technology Stack

2.4 [Link]
[Link] is a JavaScript runtime used to run the backend server. It enables asynchronous,
event-driven architecture, making it suitable for handling multiple concurrent requests
efficiently.
Key Features Used:
 Backend server environment
 Integration with [Link]
 Environment configuration using doten

2.5 Other Tools and Libraries

In addition to the core MERN technologies, several other tools and libraries were used to
enhance functionality, improve performance, and streamline development.
Redux
Redux is used for centralized state management in the frontend. It helps in managing
complex application state across different components, especially for the cart, user
authentication status, and product data.
 @reduxjs/toolkit for simplified Redux setup
 react-redux for connecting components to the store
 Middleware for async actions using Redux Thunk
Axios
Axios is used for making HTTP requests from the frontend to the backend API. It
supports request/response interceptors and handles asynchronous calls efficiently.
 API requests to fetch products, user data, cart details, etc.
 Error handling and token authorization
Mongoose
Mongoose is an ODM (Object Data Modeling) library for MongoDB and [Link]. It
helps define models and schemas while simplifying data validation and querying.
 Schema definitions with data types and validation rules
 Relationship mapping between collections

Gujrat Technological University 4 AIET

Project ID : 2 Technology Stack

Other Tools:
 JWT (jsonwebtoken): Used for user authentication and authorization
 Bcrypt: Used for password hashing
 Postman: Used for testing and validating APIs during development
 React Icons / Tailwind CSS: For UI components and styling
 Nodemon: For auto-restarting the backend server during development.

Gujrat Technological University 5 AIET

Project ID : [Link] Architecture

3. SYSTEM ARCHITECTURE

3.1 Overview
The architecture of this eCommerce application follows the standard client-server model,
where the frontend (client) and backend (server) are decoupled and communicate via
RESTful APIs. The project utilizes the MERN stack, which includes MongoDB for database
management, [Link] and [Link] for backend development, and [Link] for frontend
development. This modular approach allows scalability, code maintainability, and separation
of concerns across different layers of the application.
System Layers:
 Frontend ([Link]): Handles user interface and client-side logic.
 Backend ([Link] + [Link]): Manages API endpoints, business logic,
authentication, and communicates with the database.
 Database (MongoDB): Stores user data, product listings, orders, and cart details.

3.2 Client-Server Communication

The frontend and backend communicate via HTTP using RESTful APIs. When a user
interacts with the frontend—for example, by adding a product to the cart or logging in—a
request is sent to the server. The server processes the request, interacts with the database if
necessary, and sends back a response.
Example Flow:
 A user logs in → React sends a POST request with credentials.
 The backend verifies the credentials and returns a JWT token.
 The frontend stores the token and includes it in future requests for authentication.
Key Concepts Used:
 JSON format for request and response payloads
 JWT tokens in headers for secure communication
 Axios for making requests from the frontend
 Middleware in Express for handling authentication and errors

Gujrat Technological University 6 AIET

Project ID : [Link] Architecture

3.3 REST API Structure

The backend is structured around RESTful APIs that follow standard HTTP methods: GET,
POST, PUT, and DELETE. Each resource (user, product, order, cart) has dedicated routes for
clean and organized code.
Main API Endpoints:
Resource Method Endpoint Description
Users POST /api/users/register Register a new user
Users POST /api/users/login Authenticate user
and return token
Products GET /api/products Get list of all
products
Products POST /api/products (Admin) Add a new
product
Cart POST /api/cart Add product to cart
Cart GET /api/cart/:userId Get cart items for a
user
Orders POST /api/orders Place an order

Table 3.2 Main API Endpoints Table

Figure 3.1.1 System Architecture

Gujrat Technological University 7 AIET

Project ID : [Link] Architecture

4. FEATURES OF THE APPLICATION

4.1 User Features

 User Registration and Login: Users can create an account and securely log in using
their email and password.
 Profile Management: Users can update personal information such as name, email,
and password.
 Product Browsing: Users can view a list of all products, filter by categories, and
search for specific items.
 Product Details Page: Detailed view of product information including images,
description, price, and reviews.
 Add to Cart: Logged-in users can add products to their cart for later purchase.
 View Orders: Users can view a list of all their placed orders and the status of each.

Figure 3.1.2 Home Page

Gujrat Technological University 8 AIET

Project ID : [Link] Architecture

Figure 3.1.3 Products Page

Figure 3.1.4 Product Details Page

Gujrat Technological University 9 AIET

Project ID : [Link] Of The Application

Figure 3.1.5 Register/Login Page

Figure 3.1.6 Profile Management Page

Gujrat Technological University 10 AIET

Project ID : [Link] Of The Application

4.2 Admin Features

 Admin Authentication: Separate login access for admin users to manage the
application.
 Dashboard Overview: Admin can view statistics such as total users, products, and
orders.
 User Management: Admin can view and delete user accounts if necessary.
 Product Management: Add, update, or delete products from the store.
 Order Management: View all orders placed by users and update their statuses (e.g.,
Processing, Shipped, Delivered).

Figure 3.1.7 Admin Dashboard

Figure 3.1.8 Admin Sales and Stock Overview

Gujrat Technological University 11 AIET

Project ID : [Link] Of The Application

4.3 Product Management

 CRUD Operations: Admin can perform Create, Read, Update, and Delete operations
on products.
 Product Images: Upload and manage multiple product images using Cloudinary.
 Category & Stock Management: Admin can assign categories and manage stock
quantities for each product.
 Product Reviews: Admin can monitor and remove inappropriate reviews.

Figure 3.1.9 Admin Create New Product

Figure 3.1.10 Admin Edit Product

Gujrat Technological University 12 AIET

Project ID : [Link] Of The Application

Figure 3.1.11 Admin Orders Management

Figure 3.1.12 Admin Users Management

Gujrat Technological University 13 AIET

Project ID : [Link] Of The Application

Figure 3.1.13 Admin Reviews Management

4.4 Cart Management

 Add to Cart: Users can add multiple products to their cart.
 Update Quantity: Users can increase or decrease product quantity in their cart.
 Remove Items: Users can remove items from the cart before placing an order.
 Cart Persistence: Cart state is saved across sessions for logged-in users.

Figure 3.1.14 Cart Page

Gujrat Technological University 14 AIET

Project ID : [Link] Of The Application

4.5 Order Placement

 Place Order: Users can place an order directly without any online payment
integration.
 Shipping Information: Users must provide shipping address and contact details.
 Order Summary: Displays product details, total cost, and shipping info before
confirming the order.
 Order Tracking: Users can view the status of their orders (e.g., Pending, Confirmed,
Shipped).
 Admin Order Handling: Admin can manually update the order status.

Figure 3.1.15 Shipping Details

Figure 3.1.16 Confirm Order Page

Gujrat Technological University 15 AIET

Project ID : [Link] Of The Application

Figure 3.1.17 Payment Page

Figure 3.1.18 Orders Page

Gujrat Technological University 16 AIET

Project ID : [Link] Of The Application

5. DATABASE DESIGN

5.1 Schema Overview

The database design is built using MongoDB, which is a NoSQL database that stores data in
a flexible, JSON-like format. The application primarily uses collections to represent entities
such as Users, Products, Orders, and Reviews. The schema is designed to ensure:
 Efficient querying
 Clear relationships between data
 Scalability for growing product catalogs and user activity
The overall schema follows a modular and normalized structure where embedded
documents are used when necessary (e.g., cart items inside an order).

Figure 3.1.19 Schema Diagram

Gujrat Technological University 17 AIET

Project ID : [Link] Of The Application

5.2 Entity Relationship Diagram (ERD)

Although MongoDB is schema-less and does not follow strict relational models, an Entity
Relationship Diagram (ERD) helps visualize the logical relationships between collections.
Main Entities and Relationships:
 User
o Can place multiple orders
o Can write multiple reviews
 Product
o Can have multiple reviews
 Order
o Belongs to one user
o Contains multiple products
 Review
o Linked to both User and Product

Gujrat Technological University 18 AIET

Project ID : [Link] Of The Application

Figure 3.1.20 ER Diagram

Gujrat Technological University 19 AIET

Project ID : [Link] Of The Application

5.3 Collections and Fields

Here’s a breakdown of the main MongoDB collections used in the application:

Figure 3.1.21 Users

Figure 3.1.22 Products

Gujrat Technological University 20 AIET

Project ID : [Link] Of The Application

Figure 3.1.23 Orders

Gujrat Technological University 21 AIET

Project ID : [Link] Of The Application

6. USER INTERFACE DESIGN

6.1 UI/UX Principles

The application follows core UI/UX principles to deliver a smooth, intuitive, and visually
consistent shopping experience:
 Consistency: Consistent use of colors, fonts, and buttons across all pages to improve
user familiarity.
 Feedback: Visual cues such as loaders, toast messages, and modals help inform users
about ongoing processes (e.g., item added to cart).
 Accessibility: Semantic HTML and accessible labels are used where possible to
improve usability for all users.
 Minimal Design: Clean layout with sufficient white space and simplified actions (e.g.,
one-click add-to-cart).
 Error Handling: Friendly error messages and validation tips guide users through form
inputs and other interactions.

6.2 Responsive Design

The UI is fully responsive to work seamlessly on all screen sizes, including desktops, tablets,
and mobile phones. This is achieved using:
 Flexbox/Grid: Layouts built with responsive grid systems and media queries.
 Mobile-first Approach: The design adapts naturally from small screens upwards.
 Collapsible Navigation: Sidebar or navbar switches to a hamburger menu on mobile.
 Adaptive Components: Cards, buttons, and images adjust size and placement based
on screen width.

Gujrat Technological University 22 AIET

Project ID : [Link] Of The Application

Figure 3.1.24 Desktop Responsive

Figure 3.1.25 Fully Mobile Responsive

Gujrat Technological University 23 AIET

Project ID : [Link] Of The Application

6.3 Page Layouts and Navigation

The application includes multiple pages with structured layouts and easy navigation:
 Header/Navbar: Contains logo, search bar, cart icon, and user/admin links.
 Sidebar (Admin Panel): Accessible only to admin users; includes links to dashboard,
product management, and order lists.
 Footer: Includes copyright info.
 Main Pages:
o Home Page
o Product List & Details Page
o Cart Page
o Checkout Page
o User Profile & Orders Page
o Admin Dashboard, Products, Orders, and Users Management

Gujrat Technological University 24 AIET

Project ID : [Link] Of The Application

7. AUTHENTICATION AND SECURITY

7.1 User Authentication (JWT, Bcrypt)

The application implements secure user authentication using a combination of:
 Bcrypt: Used to hash and securely store user passwords in the database. During
login, the password is verified by comparing the hash.
 JWT (JSON Web Tokens): After a successful login, a signed JWT token is generated
and sent to the client. The token is stored in localStorage or cookies and used to
authorize requests.
Authentication Workflow:
1. User signs up or logs in.
2. Password is hashed with Bcrypt before saving/checking.
3. On login, a JWT is issued containing user ID and role (admin/user).
4. Protected routes (e.g., order placement, admin panel) verify the token before
granting access.

Figure 3.1.26 User Authentication

Gujrat Technological University 25 AIET

Project ID : [Link] Of The Application

7.2 Role-based Access Control

The system enforces role-based access control (RBAC) to separate regular users from
administrators:
 User Role:
o Can view products, manage their cart, and place orders.
o Can access their profile and view personal order history.
 Admin Role:
o Has access to special admin routes.
o Can manage products, view all orders, and control users.
Middleware checks the JWT payload and determines whether the user is authorized to
access a specific route or page.

Gujrat Technological University 26 AIET

Project ID : [Link] Of The Application

Figure 3.1.27 Role Based Access Control

Gujrat Technological University 27 AIET

Project ID : [Link] Of The Application

7.3 Data Protection Measures

To ensure data integrity and security, the following best practices are implemented:
 Password Hashing: All user passwords are hashed using Bcrypt before storing in the
database.
 JWT Expiration: Tokens include expiry to prevent indefinite access if stolen.
 Helmet: A middleware used to set secure HTTP headers in Express.
 CORS Policies: Configured to restrict which domains can access backend APIs.
 Input Validation & Sanitization: User inputs are validated both on frontend and
backend to prevent injection attacks.
 HTTPS Deployment (recommended in production): Encrypts all communication
between client and server.

Figure 3.1.28 Protection Layer

Gujrat Technological University 28 AIET

Project ID : [Link] Of The Application

8. IMPLEMENTATION DETAILS

8.1 Frontend Development

The frontend is developed using [Link] with Vite for fast development and bundling. It
offers a responsive and dynamic user interface for both customers and admins.
Key Features:
 React Router for client-side routing.
 Redux Toolkit for global state management (cart, user auth, etc.).
 Tailwind CSS for utility-first, responsive styling.
 Axios for HTTP requests.
 Conditional Rendering for role-based UI (user/admin).

Figure 3.1.29 Product Details

Gujrat Technological University 29 AIET

Project ID : [Link] Of The Application

Figure 3.1.30 Cart

8.2 Backend Development

The backend is built using [Link] and [Link]. It handles all business logic, route
protection, and communication with the MongoDB database.
Main Modules:
 Express Routers: For modular handling of user, product, order, and admin routes.
 Middleware: For JWT authentication and admin-only access control.
 Mongoose: For schema definitions and interaction with MongoDB.
 Cloudinary Integration: For storing and accessing product images.

Gujrat Technological University 30 AIET

Project ID : [Link] Of The Application

Figure 3.1.31 Express Routes

8.3 API Endpoints

The backend exposes a RESTful set of API endpoints to be consumed by the frontend.
Examples:
 POST /api/auth/login – Authenticate a user and return a JWT token.
 GET /api/products – Fetch all products.
 POST /api/orders – Place a new order.
 PUT /api/admin/products/:id – Update a product (admin only).
 GET /api/user/orders – Get logged-in user’s order history.
Each endpoint is protected where necessary using JWT and role checks.

Gujrat Technological University 31 AIET

Project ID : [Link] Of The Application

Figure 3.1.32 Postman Product Routes Testing

Figure 3.1.33 Postman Authentication Routes Testing

Gujrat Technological University 32 AIET

Project ID : [Link] Of The Application

Figure 3.1.34 Postman User Routes Testing

Figure 3.1.35 Postman Order Routes Testing

Gujrat Technological University 33 AIET

Project ID : [Link] Of The Application

8.4 Integration and Testing

The application integrates the frontend, backend, and MongoDB database seamlessly using
RESTful APIs.
Integration Flow:
1. Frontend calls backend via Axios.
2. Backend verifies JWT, performs DB operation using Mongoose.
3. Response is sent back and rendered on the frontend.
Testing Methods:
 Manual Testing using browser and Postman.
 Validation for forms and API payloads.
 Unit Testing (optional) for utility functions or components.
 Error Handling for failed API calls and invalid inputs.

Figure 3.1.36 Integration Flow

Gujrat Technological University 34 AIET

Project ID : [Link] Of The Application

9. CHALLENGES AND SOLUTIONS

9.1 Development Challenges

During the development of the project, several technical and design-related challenges were
encountered:
 State Management Complexity: Managing global state across user login, cart
updates, and admin controls became difficult with plain React.
✅ Solution: Introduced Redux to centralize and simplify state logic.
 Image Upload & Hosting: Handling product image uploads was tricky with file size,
storage, and security concerns.
✅ Solution: Integrated Cloudinary to upload images securely and retrieve optimized
URLs.
 Route Protection: Implementing secure access for admin-only pages and user-
specific routes required a clear authentication system.
✅ Solution: Used JWT with middleware in Express and role-based rendering in React.

9.2 Bugs and Debugging

Common bugs encountered and how they were resolved:
 Cart not updating on page refresh
🔍 Issue: Redux state was resetting after refresh.
✅ Fix: Synced cart state with localStorage.
 JWT Token Expiry Issues
🔍 Issue: Expired tokens weren't being handled on the client side.
✅ Fix: Added token expiry checks and logout triggers in React.
 Product page crashing on missing data
🔍 Issue: Backend didn’t validate input properly.
✅ Fix: Added validation checks using Mongoose validators and frontend fallbacks.

Gujrat Technological University 35 AIET

Project ID : [Link] Of The Application

Figure 3.1.37 Error Control

9.3 Optimization Techniques

To improve performance and maintainability:
 Code Splitting: Implemented lazy loading for non-essential routes (like user profile,
admin dashboard) to reduce initial load time.
 Backend Optimization: Used pagination on product lists and indexing in MongoDB
for faster queries.
 Minified Assets: Used Vite’s production build for minified JavaScript/CSS.
 Memoization: Applied useMemo and [Link] to prevent unnecessary re-
renders.

Figure 4.1.38 Pagination

Gujrat Technological University 36 AIET

Project ID : [Link] Of The Application

10. LIMITATIONS

10.1 Current Limitations

Despite successfully implementing core features like user authentication, cart management,
and admin control, the application currently has a few limitations:
 No Payment Integration: Orders are placed without actual online payment. Payment
gateways like Razorpay, Stripe, or Cashfree are not integrated.
 No Wishlist or Save for Later: Users cannot bookmark products for future interest or
save items without adding them to the cart.
 No Push Notifications: Users do not receive order confirmations, delivery updates.
 Basic Admin Dashboard: The admin panel includes only fundamental management
features without advanced analytics or filtering.
 Limited Testing: Automated unit and integration testing is minimal, making the app
more reliant on manual testing.

Gujrat Technological University 37 AIET

Project ID : [Link] Of The Application

11. CONCLUSION

11.1 Summary of Work Done

This project involved the end-to-end development of a full-stack MERN-based E-commerce
Web Application. The application successfully implements essential functionalities for both
users and administrators, including:
 User Features: Registration, login (JWT-based), browsing products, cart
management, and order placement (without payment).
 Admin Features: Product CRUD operations, order management, and user
monitoring.
 Tech Stack: Built with [Link] for the frontend, [Link] and [Link] for the
backend, and MongoDB for the database. Redux was used for state management,
and Cloudinary for image uploads.
 Security: JWT authentication, role-based access control, and basic data protection
techniques were implemented.
 Responsive UI: The frontend design is fully responsive, providing a seamless
experience across devices.
The project emphasizes clean code structure, modular API design, and integration between
all components using RESTful practices.

Gujrat Technological University 38 AIET

Project ID : [Link] Of The Application

11.2 Learning Outcomes

Working on this project provided valuable experience and insights into real-world full-stack
application development. Key takeaways include:
 ✅ Hands-on Experience with MERN Stack: Gained confidence in building scalable
web apps using MongoDB, Express, React, and Node.
 ✅ State Management with Redux Toolkit: Learned how to efficiently manage global
app state using Redux slices and asynchronous logic.
 ✅ API Development & Integration: Understood how to design, protect, and consume
RESTful APIs.
 ✅ Authentication & Security: Learned the importance of secure authentication
methods (JWT, Bcrypt) and how to implement them.
 ✅ UI/UX Design Principles: Applied responsive design principles to ensure usability
on mobile and desktop devices.
 ✅ Debugging & Optimization: Strengthened problem-solving skills through real-time
bug fixing and performance tuning.
This project not only solidified technical skills but also encouraged structured problem-
solving, modular thinking, and deployment-readiness — all essential qualities for
professional full-stack development.

Gujrat Technological University 39 AIET

Project ID : [Link] Of The Application

12. REFERENCES

1. [Link] Documentation
[Link]
Official documentation for building UI components and managing state with React.
2. Redux Toolkit
[Link]
Simplified approach to Redux for global state management.
3. Vite
[Link]
Fast frontend tooling for React development.
4. [Link] Documentation
[Link]
Official guide for server-side JavaScript development.
5. [Link] Guide
[Link]
Backend framework used for handling API requests and routing.
6. MongoDB Documentation
[Link]
For schema design, queries, and database management.
7. Mongoose ODM
[Link]
Used to define models and interact with MongoDB.
8. Cloudinary API Docs
[Link]
For image upload, transformation, and CDN delivery.
9. JWT (JSON Web Token)
[Link]
Authentication method used for secure login and authorization.
10. [Link]
[Link]
Password hashing and verification library.
11. Postman
[Link]
Used for testing and debugging API endpoints.
12. Tailwind CSS
[Link]
Utility-first CSS framework for responsive and modern UI design
13.
14.

Gujrat Technological University 40 AIET

Project ID : [Link] Of The Application

15. 13. APPENDICES

16.
17.13.1 UI Design Walkthrough
18. This section walks through the structure and flow of the application’s user interface
(UI), focusing on the user journey and layout strategy:
 Homepage: Displays featured products in a grid layout with a responsive navbar and
search bar.
 Product Browsing Flow: Users can filter and view product details with dynamic
routing using React Router.
 Cart Flow: Seamless cart experience with real-time updates using Redux state and
localStorage sync.
 Authentication Flow: Clear transitions between login, register, and profile pages.
 Admin Interface: Accessible only by verified admin users; includes tables and form
components to manage orders/products.
 Responsive Design: Mobile-first layout tested across devices with Tailwind’s
responsive utility classes.
19.

20.13.2 Additional Notes & Developer Insights

 Scalability: The architecture was designed to easily plug in future modules like
payment gateways or real-time order tracking.
 Reusable Logic: Custom hooks and reusable services helped avoid code duplication.
 Accessibility: Semantic HTML tags and alt attributes were prioritized to support
accessible design.
 Version Control: Used Git & GitHub with branching strategy (main, dev, feature/*)
for structured development.
 Challenges: Major challenge was syncing cart state across sessions, which was solved
with Redux + localStorage combo.
 Future-ready: APIs are modular and RESTful, ready for integration with mobile apps
or microservices.
21.
22.

Gujrat Technological University 41 AIET