PROJECT REPORT
ON
MERN Stack eCommerce App using React Native (Expo)
SUBMITTED IN PARTIAL FULFILLMENT OF THE
REQUIREMENT FOR THE AWARD OF THE DEGREE OF
BACHELOR OF TECHNOLOGY
(COMPUTER SCIENCE AND ENGINEERING)
(SESSION: 2025-26)
SUBMITTED BY: Roll No:
Riya Kumari 221401015059(22CS76)
DEPARTMENT OF COMPUTER SCIENCE ENGINEERING
RPS COLLEGE OF ENGINEERING AND TECHNOLOGY
MAHENDERGARH -123029
CANDIDATE'S DECLARATION CERTIFICATE
I hereby certify that the work which is being presented in the report entitled “MERN Stack
eCommerce App using React Native (Expo)” by Riya Kumari Roll number 221401015059 in
partial fulfillment of requirements for the award of degree of [Link] submitted to Department
of Computer Science Engineering of RPS COLLEGE OF ENGINEERING AND
TECHNOLOGY, MAHENDERGARH is an authentic record of my own work carried out
during a period from JUNE to July.
Signature of the Student
CONTENTS
1. Project Overview................................................................................................................ 3
2. Objective............................................................................................................................. 4
3. Technologies Used.............................................................................................................6
Frontend (Mobile Application)............................................................................................ 6
Backend (API Development).............................................................................................. 7
Deployment and Database Hosting....................................................................................7
4. API Modules Implemented................................................................................................ 7
● User Authentic API :........................................................................................................8
● Category API:..................................................................................................................8
● Product API:.................................................................................................................... 9
● WishList API:...................................................................................................................9
● Cart API:........................................................................................................................10
● Address API:................................................................................................................. 11
● Order API:..................................................................................................................... 11
5. UI Flow & Screenshots.................................................................................................... 12
1. Login / Register Screen................................................................................................13
2. Product Listing Screen................................................................................................. 14
3. Product Detail Screen.................................................................................................. 15
4. Wishlist Screen.............................................................................................................16
5. Cart Screen.................................................................................................................. 17
6. Checkout / Order Summary Screen............................................................................. 18
6. Conclusion........................................................................................................................19
1. Project Overview
This project is a comprehensive mobile eCommerce application developed using the MERN
stack, with a slight modification—React Native with Expo is used in place of the traditional
[Link] to enable seamless cross-platform mobile development. The application offers a
complete end-to-end shopping experience designed with a mobile-first approach, ensuring
optimal usability, performance, and responsiveness on Android and iOS devices.
The core features of the app include:
● User Authentication and Authorization: Users can register and log in securely. The
authentication system uses JWT (JSON Web Tokens) to maintain session
management, ensuring secure access to user-specific features.
● Product Browsing and Search: Users can browse a wide catalog of products
categorized for easy discovery. A real-time search feature with filtering and sorting
options enhances product discovery.
● Cart and Wishlist Management: Users can add products to a cart or wishlist. Cart
updates dynamically, and users can manage quantities or remove items before
checkout. Wishlist allows users to save items for future consideration.
● Order Placement and History: Users can proceed to checkout with saved or new
delivery addresses, select payment methods (COD or integrated gateways), and place
orders. They can also view past orders, their statuses, and invoice.
● Delivery Address Management: Users can add, edit, and delete multiple shipping
addresses. The app uses map integration or form input for address selection.
● Modular Backend Architecture: The backend is built with [Link] and [Link],
and it follows a modular MVC structure. This improves code maintainability and
scalability. MongoDB is used as the primary database for storing users, products,
orders, and related information.
● RESTful APIs: All client-server communication is handled via REST APIs, which
follow standard HTTP methods (GET, POST, PUT, DELETE). These APIs are
well-structured and documented for maintainability and scalability.
● Responsive Mobile UI with Expo: Using React Native with Expo, the app
leverages reusable components and navigation stacks to deliver a native-like
experience. The UI is clean, intuitive, and optimized for touch interactions.
● Scalability and Extensibility: The application structure supports future
enhancements such as product reviews, promotional discounts, push notifications,
real-time order tracking, and admin dashboards.
● Security Measures: The application employs industry best practices for secure
password storage (e.g., bcrypt hashing), form validation, input sanitization, and
role-based access control for different user permissions.
This project not only demonstrates the integration of front-end and back-end technologies
within the MERN stack but also highlights the versatility of React Native in building
high-performance, cross-platform mobile apps. The clean architecture, modular design, and
user-centric interface make it a solid foundation for a production-ready eCommerce platform.
2. Objective
The primary objective of this project is to design and develop a scalable, responsive, and
user-friendly mobile eCommerce application using the MERN stack, where the frontend is
implemented with React Native (Expo) instead of traditional web-based [Link]. The
application aims to replicate the core functionalities of real-world eCommerce platforms,
thereby delivering a seamless shopping experience to users through a mobile-first interface.
The project is centered around implementing essential eCommerce features, including:
● User Registration and Authentication
● Product Browsing and Search
● Cart and Wishlist Management
● Order Placement and Tracking
● Delivery Address Handling
In addition to offering a robust set of customer-oriented features, the system is designed with
a modular backend architecture, enabling easy scalability and future enhancements such as
admin dashboards, product reviews, promotional offers, and push notifications.
Learning Process
Throughout the development lifecycle of this project, a wide range of technical skills and
development concepts were acquired and strengthened. These include both frontend and
backend technologies, deployment practices, and full-stack integration techniques:
● React Native (Expo):
Developed cross-platform mobile applications using Expo CLI, which simplified the
development process by offering a managed workflow. Learned how to create modular
screens using file-based routing, implement custom UI components, and enhance the
user experience through responsive and optimized layouts.
● REST API Development:
Gained hands-on experience in building and structuring RESTful APIs with [Link]
and [Link]. This involved designing routes, creating controllers, applying
middleware for error handling and validation, and following REST principles to
ensure clear separation of concerns between client and server.
● MongoDB with Mongoose:
Learned to design schema-based data models using Mongoose, perform CRUD
(Create, Read, Update, Delete) operations, and implement data validation.
Understood how to manage relationships between entities such as users, products, and
orders in a NoSQL environment.
● JWT Authentication:
Implemented secure login functionality using JSON Web Tokens (JWT). Applied
token-based authentication for protecting sensitive API endpoints, ensuring that only
authenticated users could access personalized data such as order history and profile
details.
● State Management:
Used local component state and AsyncStorage for handling dynamic UI changes
and persisting user session data. This helped maintain a smooth user experience even
across app restarts and screen transitions.
● API Integration:
Practiced integrating frontend and backend by making asynchronous API calls using
the Fetch API. Learned how to handle loading states, process JSON responses,
display real-time data, and manage error states gracefully within the app.
● Deployment:
Successfully deployed the backend server using Render, a cloud hosting platform.
Integrated MongoDB Atlas as the cloud database solution, enabling real-time, secure
access to stored data across the internet. Understood deployment pipelines and the
importance of environment variables, API security, and database configurations.
3. Technologies Used
The development of this mobile eCommerce application involved a variety of modern
technologies across the frontend, backend, and deployment layers. The technology stack was
chosen for its efficiency, scalability, and popularity in industry-standard full-stack
development workflows.
Frontend (Mobile Application)
The mobile application was developed using React Native with Expo CLI, allowing for
rapid development of cross-platform applications with native performance and user
experience.
● React Native (Expo CLI):
A popular open-source framework for building mobile applications using JavaScript
and React. Expo CLI simplifies development by providing built-in tools for testing,
debugging, and deployment, which reduces configuration overhead.
● File-Based Routing:
Implemented logical screen navigation through file-based routing, enabling a scalable
and organized approach to manage the different screens of the application.
● Fetch API:
Used to perform asynchronous HTTP requests from the mobile application to the
backend server. This enabled real-time communication for functionalities such as
login, product retrieval, cart updates, and order placement.
● AsyncStorage:
A local key-value storage system used for persisting small amounts of data on the
user's device. It was used to securely store authentication tokens, user preferences,
and session data to maintain a seamless user experience.
Backend (API Development)
● The backend system was built using the [Link] runtime environment and [Link]
framework to handle server-side logic, RESTful API creation, and database
interactions.
● [Link]:
A lightweight and efficient runtime environment that allows server-side scripting
with JavaScript. It supports non-blocking I/O operations, making it ideal for handling
multiple concurrent requests.
● [Link]:
A minimal and flexible [Link] web application framework that simplifies the
development of RESTful APIs. It was used to define routes, handle middleware, and
manage application logic in a modular and scalable manner.
● MongoDB with Mongoose:
MongoDB, a NoSQL database, was used to store application data such as user
information, product details, cart data, and order history. Mongoose, an ODM (Object
Data Modeling) library for MongoDB, was used to define data schemas, apply
validations, and simplify interaction with the database.
● JWT (JSON Web Token):
JWTs were implemented for secure user authentication and authorization. Upon
successful login, a token is issued and stored on the client side (AsyncStorage), which
is used to verify user identity and grant access to protected routes and resources.
Deployment and Database Hosting
● The deployed infrastructure ensures availability, scalability, and security of backend
services and databases in the cloud environment.
● Render:
A cloud platform used to host and deploy the backend server and RESTful APIs.
Render provides continuous deployment from Git repositories, SSL support, and
automatic scaling, which makes it an ideal solution for backend hosting.
● MongoDB Atlas:
A cloud-hosted version of MongoDB that offers high availability, automated
backups, and global cluster options. It served as the primary database provider,
enabling real-time data access and centralized storage for application data.
4. API Modules Implemented
· The backend of the eCommerce application was designed using a modular API
architecture. Each module is responsible for handling a specific domain of functionality,
ensuring clean separation of concerns, easy maintainability, and scalability. All routes are
implemented using [Link] and follow RESTful standards, with appropriate HTTP
methods and route protection where required.
● User Authentic API :
AuThis module is responsible for user registration, login, email verification, and password
recovery. It ensures that access to the application is secure and that sensitive user data is
protected using JWT-based authentication.
Route Method Description
/register POST Registers a new user with credentials. Stores user data in
MongoDB. Optionally sends a verification email.
/login POST Authenticates the user and issues a JWT token upon
successful login.
/verify-email POST Verifies the user's email using a token-based validation
system.
/reset-password POST Initiates the password reset process via email or token
verification.
● Category API:
This module manages the creation and retrieval of product categories. It enables the
categorization of products for easier browsing and filtering in the frontend.
Route Method Description
/ POST Adds a new product category. Typically used by admin or
during system setup.
/ GET Retrieves all available product categories from the database.
● Product API:
The Product API provides endpoints for managing and retrieving product data. It
supports searching, filtering, and displaying products in a structured and user-friendly
manner.
Route Method Description
/ POST Adds a new product with details like name,
description, price, image, and category.
Admin-only operation.
/ GET Retrieves a complete list of all products available
in the store.
/search GET Searches for products based on user-entered
keywords. Improves discoverability.
/:productId GET Fetches full details of a single product by its ID.
Used on product detail screens.
/:categoryId/products GET Fetches products filtered by a specific category ID.
Useful for category-wise browsing.
● WishList API:
This module allows users to save products to a wishlist for future reference. It
enhances user experience by enabling product tracking and personalized shopping.
Route Method Description
/:productId POST Adds a specific product to the user’s wishlist.
Requires authentication.
/ GET Retrieves all wishlist items for the logged-in user.
/clear DELETE Clears all products from the user’s wishlist.
/:wishlistId DELETE Removes a specific product from the wishlist
using its ID.
● Cart API:
The Cart API manages all cart-related functionality, including adding, updating, and
removing items. It is integral to the order placement flow and ensures a smooth
shopping process.
Route Method Description
/ POST Adds a product to the cart. Handles quantity
updates if the product already exists. Requires
login.
/ GET Retrieves the current cart items of the
logged-in user.
/increase/:cartId PUT Increases the quantity of a cart item using its
cart ID.
/decrease/:cartId PUT Decreases the quantity of a cart item.
Automatically removes it if quantity drops to
zero.
/clear DELETE Clears all cart items for the user.
/:cartId DELETE Removes a specific product from the cart
using its unique ID.
● Address API:
The Address API allows users to manage their delivery addresses. It supports CRUD
operations and the selection of a default address during checkout.
Route Method Description
/ POST Adds a new delivery address for the user. Includes
fields like street, city, state, and zip code.
/ GET Retrieves all saved addresses of the logged-in user.
/:addressId PATCH Updates the specified address using its unique ID.
/:addressId/select PATCH Marks a particular address as the default for
delivery.
/:addressId DELETE Deletes the selected address from the user's
address list.
● Order API:
The Order module finalizes and stores user orders after the checkout process. Though
payment gateway integration is not implemented in this project, the module simulates
complete order placement functionality.
Route Method Description
/verify-payment POST Verifies the checkout step and stores the order details
including selected products, quantities, delivery address,
and total amount.
/ GET Retrieves all orders placed by the authenticated user.
Displays order history, including item details and order
status.
5. UI Flow & Screenshots
This section provides an overview of the core user interface (UI) screens within the mobile
application. It illustrates the user journey from login to checkout and demonstrates how users
interact with the app at various stages.
1. Login / Register Screen
Description:
This screen allows users to log in to their existing accounts or register as new users. The
registration form captures essential details like name, email, and password, while the login
screen supports JWT-based authentication. Validations and feedback messages guide users
during this process.
2. Product Listing Screen
Description:
Displays a scrollable list of available products fetched from the backend. Each product card
shows the product image, name, price, and an option to view details or add to the
cart/wishlist. Users can also filter products by category.
3. Product Detail Screen
Description:
Shows detailed information about a selected product including images, description, price,
and category. Users can add the item to their cart or wishlist directly from this screen.
4. Wishlist Screen
Description:
Displays all products the user has saved for later. Users can remove individual items, view
product details, or move items to the cart. The wishlist is personalized and only accessible
after login.
5. Cart Screen
Description:
Lists all products added to the cart with quantity controls for each item. Users can increase or
decrease the quantity or remove items completely. The total price is dynamically updated
based on cart contents.
6. Checkout / Order Summary Screen
Description:
This screen allows users to select a delivery address, review their cart items, and place the
order. Although payment integration is not included in this version, this screen simulates the
final checkout process and confirms the order placement.
6. Conclusion
This eCommerce mobile application project demonstrates the effective use of the MERN
stack, with a mobile-first approach powered by React Native (Expo), to deliver a robust,
scalable, and user-friendly shopping platform. It successfully implements the core
functionalities essential to a real-world eCommerce experience, including user authentication,
product browsing, cart and wishlist management, order placement, and address handling.
Throughout the development process, this project provided in-depth practical exposure to
full-stack development principles—from backend API architecture and database design to
mobile UI/UX optimization and deployment strategies. The use of modular REST APIs,
secure JWT-based authentication, and cloud-hosted databases contributes to the system’s
scalability and maintainability.
Moreover, this application lays a strong foundation for future enhancement. Upcoming
improvements can include payment gateway integration (e.g., Razorpay, Stripe), push
notifications, admin dashboards, product reviews, and analytics for business insights.
With its modular architecture and cross-platform capabilities, the application is
well-positioned for continuous growth and real-world deployment.
In summary, this project not only highlights the versatility of the MERN stack but also
reflects practical engineering skills in building modern, scalable mobile applications with real
commercial potential.
