A

PROJECT REPORT
ON

“E-COMMERCE WEBSITE USING MERN STACK”

Submitted in partial fulfillment of the requirement for the award of Degree

Bachelor of Technology in Computer Science & Engineering

Submitted To GAYA COLLEGE OF ENGINEERING ,GAYA (B.R.)

Under The Guidance of: Prof.

RITESH KUMAR (HOD)
Department of Computer Science
& Engineering.

CANDIDATE NAME ENROLLMENT NO.

VIKASH KUMAR 21-CSE-26
RICHA RANI 21-CSE-51
SURAJ KUMAR 21-CSE-32
SAURAV KUMAR 21-CSE-21

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING,

GAYA COLLEGE OF ENGINEERING , GAYA
BIHAR-823003

GAYA COLLEGE OF ENGINEERING ,GAYA -823003 1

 BONAFIDE CERTIFICATE

This is to certify that the project titled E-Commerce Website:Forever

is a Bonafide record of the work done by Vikash Kumar
(21105110012) in partial fulfilment of the requirements for the award
of the degree of Bachelor of Technology in Specialization of the Gaya
College of Engineering, Gaya – 823003, during the year 2025.

GAYA COLLEGE OF ENGINEERING ,GAYA -823003 2

ii
 BONAFIDE CERTIFICATE

This is to certify that the project titled E-Commerce Website:Forever

is a Bonafide record of the work done by Richa Rani (21105110014) in
partial fulfilment of the requirements for the award of the degree of
Bachelor of Technology in Specialization of the Gaya College of
Engineering, Gaya – 823003, during the year 2025.

GAYA COLLEGE OF ENGINEERING ,GAYA -823003 3

ii
 BONAFIDE CERTIFICATE

This is to certify that the project titled E-Commerce Website:Forever

is a Bonafide record of the work done by Suraj Kumar (21105110021)
in partial fulfilment of the requirements for the award of the degree
of Bachelor of Technology in Specialization of the Gaya College of
Engineering, Gaya – 823003, during the year 2025.

GAYA COLLEGE OF ENGINEERING ,GAYA -823003 4

ii
 BONAFIDE CERTIFICATE

This is to certify that the project titled E-Commerce Website:Forever

is a Bonafide record of the work done by Saurav Kumar
(21105110018) in partial fulfilment of the requirements for the award
of the degree of Bachelor of Technology in Specialization of the Gaya
College of Engineering, Gaya – 823003, during the year 2025.

GAYA COLLEGE OF ENGINEERING ,GAYA -823003 5

ii
 CONTENTS
Table of Content
Certificate (i)
Declaration (ii)
Acknowledgement ( iii )
Abstract (iv)
List of Figures (v)
INTRODUCTION 1-11
1.1 Problem Definition 2
1.2 Project Overview 3
1.3 Theoretical Backgroung 3-10
1.4 Hardware & Software Specification 11
LITERATURE SURVEY 12 - 17
2.1 Exiting System 14
2.2 Proposed System 15-16
2.3 Feasibility Study 16-17
SYSTEM ANALYSIS & DESIGN 18 - 28
3.1 Project Specification 3.2 System 19-20
Architecture 3.3 Design/Diagrams 21
and FlowCharts 22 - 27
OUTPUTS & RESULT CONCLUSION REFERENCES 28 - 32
33 – 34

APPENDICES
35
36
RESEARCH PAPER & CERTIFICATE

37
ABBREVIATIONS
38 - 48

6
 GAYA COLLEGE OF ENGINEERING ,GAYA (B.R.)
Department of Computer Science & Engineering

CERTIFICATE
This is certified that the project titled “E-COMMERCE WEBSITE USING MERN STACK” is the
bonafide work carried out by 1. “VIKASH KUMAR” Registration No.21105110012, 2. “RICHA
RANI” Registration No.21105110014, 3. “SURAJ KUMAR Registration No.21105110009
4.”Saurav Kumar ” Registration No 21105110018 a student of Bachelor ofTechnology(Computer
Science & Engineering GAYA COLLEGE OF ENGINEERING, GAYA during the academic year
2021 – 2025, This technical project is hereby approved for submission towards partial
fulfilment of the completion for 7th semester degree of Bachelor of Engineering in Computer
Science & Engineering.

Approved & Supervised By

Prof. GARIMA Prof. KANCHANBALA

DEPUTY HOD, Department of CSE Department Of CSE
GCE,GAYA GCE,GAYA

Prof. RITESH KUMAR Dr. RAJAN SARKAR

HOD CSE Principal
GCE,GAYA GCE,GAYA

GAYA COLLEGE OF ENGINEERING ,GAYA -823003 7

i
 GAYA COLLEGE OF ENGINEERING, GAYA
Department of Computer Science & Engineering

STUDENT DECLARATION

We hereby declare that the Project Synopsis entitled “E-COMMERCE

WEBSITE USING MERN STACK” being submitted partial fulfilment of the
requirement for the award of 7th semester of BACHELOR OF TECHNOLOGY
in Department of COMPUTER SCIENCE & ENGINEERING to GAYA COLLEGE
OF ENGINEERING, GAYA(B.R.) is affiliated to BIHAR ENGINEERING
UNIVERSITY PATNA an authentic record of our own work carried out in the
guidance of PROF. RITESH KUMAR, DEPARTMENT OF COMPUTER SCIENCE
& ENGINEERING.

NAME ENROLLMENT NO. SIGNATURE

1. VIKASH KUMAR 21105110012
2. RICHA RANI 21105110014
3. SURAJ KUMAR 21105110021
4.SAURAV KUMAR 21105110018

GAYA COLLEGE OF ENGINEERING ,GAYA -823003

8
 GAYA COLLEGE OF ENGINEERING ,GAYA -823003
GCE GAYA
Department of Computer Science & Engineering

ACKNOWNLEDGEMENT

We express our deepest gratitude to our Principal Dr. Rajan Sarkar for
providing us with an environment to complete our project successfully.

We are deeply indebted to our Head of Department Prof. Ritesh Kumar, who
modelled us both technically and morally for achieving greater success in
life. He showed us different ways to approach a research problem and the
need to be persistent to accomplish any goal. We thank him heartily.

We are very grateful to our Project guide Prof. Garima & Project for being
Coordinator Prof. Ritesh Kumar instrumental in the completion of our
project with his complete guidance.

We also thank all the staff members of our college and technicians for their help
in making this project a successful one.

Finally, we take this opportunity to extend our deep appreciation to our

family and friends, for all that they mean to us during the crucial times of
the completion of our project.
1.VIKASH KUMAR 21105110012

2.Richa Rani 21105110014

3.Suraj Kumar 21105110021

4. Saurav Kumar 21105110018

GAYA COLLEGE OF ENGINEERING ,GAYA -823003 9

iii
 ABSTRACT

The web development industry has grown significantly with the evolution of technology.
Software technology is improving at the same rate as hardware. Increasingly, electronic
devices with the Internet and real-time capabilities have made performance essential.
Unfortunately, despite their general use and long history of developing and maintaining
traditional technology,some fail to meet today's customer performance expectations.The
MERN stack was recently built to overcome this performance issue.

E-commerce has exponentially risen over the last decade, offering more benefits and
conveniences than traditional businesses. Furthermore, the COVID-19 era has
irreversibly changed how businesses interact with customers, allowing merchants to
approach clients more promptly. By recognizing this need, an E-commerce web
application is created as an online bookshop.

This project will demonstrate and comprehend each MERN stack technology's essential
concept before building a functional E-commerce web application to help small
companies formulate their business strategy. The functionality and browser capabilities
tests were all conducted on various platforms. The outcome was satisfactory since the
web application fulfilled all of the objectives.

Finally, an
operational and production-ready web store application was successfully constructed
and deployed. Additionally, the application's results and potential enhancements were
discussed. The thesis can be utilized as a reference on the MERN stack, aimed at novices
and anyone enthusiastic about exploring the technology stack.

GAYA COLLEGE OF ENGINEERING ,GAYA -823003 10

iv
 LIST OF FIGURES

FIGURE NO FIGURE NAME PAGE NO

1. The architecture of the MERN stack 4

2. The architecture design of MongoDB 4

3. An example of tree-structure of Document Object Model 7

4 The difference between VirtualDOM and real DOM 8

update process
.
NodeJSeventloop
5 9

6 The relationship between Mongoose,NodeJs and 10

MongoDB
.
7. Architecture design 21
8. 3-Layer Architectural Pattern 21
9. UseCase Diagram 22
10. Block Diagram 22
11. Sequence Diagram 23
12. Client Side Activity Diagram 24
13. Admin Side Activity Diagram 25
14. Data Flow Diagram 26
15. FlowChart
27

GAYA COLLEGE OF ENGINEERING ,GAYA -823003

11
v
 [CHAPTER – 1: - INTRODUCTION]

GAYA COLLEGE OF ENGINEERING ,GAYA -823003 12

1
 INTRODUCTION
1.1 PROBLEM DEFINITION:-
Nowadays, technology is growing incredibly fast. The rapid innovation of hardware
devices makes software technologies advance as well, automatically taking the place of
old technologies. Because of the significant expansion in the number of electronic
devices that use the Internet and real-time feature, performance is key. By tradition, web
development has been carried out by technologies such as JAVA servlets, ASP.NET or
PHP. While those technologies are quite widespread and have good features with many
years of development and are supported by a large community, they still have some
limitations concerning today’s need which is performance. The MERN stack (MongoDB,
Express, React and Node) with their simplicity and uniformity, has been recently
developed to become a better solution for this performance issue.

The objectives of this thesis were to illustrate and understand the fundamental concepts
and usage of each technology in the MERN stack, as well as their compatibilities and
advantages as a complete stack in web application development. The thesis achieved that
goal by utilizing these modern technologies and implementing a web application. The idea
of this web application was for a startup run by the author’s parents as they decided to
open a book retail store. By researching, the author realized how e-commerce – an
enormous platform is emerging at an extraordinary speed over the last decades all over
the world and providing more advantages and conveniences as compared to physical
stores. E-commerce has changed permanently the way businesses and consumers
interact, which allows users to connect with their favourite shops and brands whenever
and wherever they want and also helps stores to more actively approach consumers. It is
believed that the growth of e-commerce for the next incoming years is increasing beyond
measure rate with the release of modern technologies. Understanding this need, the
author’s solution was to create an e-commerce web application as an online bookstore in
order for the startup to develop its business strategy.

This document structure was organized as follows. The first section brought in the goal
of the thesis and the technologies used. Next, essential concepts and theoretical
background of each technology in the stack were introduced along with the example,
followed by the third section which demonstrated carefully and thoroughly the
application development process, from back-end to front-end. In the end, this paper
provided a discussion of the project with further improvements and gave a conclusion
about the final product.

GAYA COLLEGE OF ENGINEERING ,GAYA -823003

13
2
 1.2 PROJECTOVERVIEW:-
The ‘Online E-commerce Web application’ Services department strives to provide solutions
to develop and transfer easy and efficient ways in the digital age and to help reduces human
pressure and time. To help support shop collections, digital initiatives, and external partner
projects, It provides services that include the digitization of analogue
objects, metadata management, digital preservation, and discovery and access of digital
collections. “KameStore” is a web application written for all operating systems, designed to
help users maintain and organize shop virtually. This software is easy to use for both
beginners and advanced users. It features a familiar and well-thought-out, attractive user
interface, combined with strong searching Insertion and reporting capabilities. The report
generation facility of the shop system helps to get a good idea of which are the various items
brought by the members, making it users possible to get the product easily. The ‘Online
E-commerce Web application’ Services department strives to provide solutions to develop
and transfer easy and efficient way in the digital age and to help reduces human pressure and
time. To help support shop collections, digital initiatives, and external partner institution
digital projects, It provides services that include the digitization of analogue objects, metadata
of digital collections.
“KameStore” is a web application written for all operating systems, designed to help users
maintain and organize shop virtually. This software is easy to use for both beginners and
advanced users. It features a familiar and well-thought-out, attractive user interface,
combined with strong searching Insertion and reporting capabilities. The report generation
facility of the shop system helps to get a good idea of which are the various items brought by
the members, making it users possible to get the product easily.
The system aims to achieve the following objectives:
• To design an online e-commerce system.
• To provide a solution to reduce and optimize the expenses of customer order management.
• To create an avenue where people can shop for products online.
• To develop a database to store information on products.

1.3 THEORETICALBACKGROUND:-
The e-commerce application is constructed based on the MERN stack as the primary full-
stack technology. This chapter will briefly discuss each technology in the MERN stack as
well as its third-party support library Mongoose to develop the project

1.3.1 THE MERN STACK:-

MERN is one of the notable variants based on the MEAN stack. Basically, the MEAN stack
was initially established in 2013 by a MongoDB engineering team as a JavaScript-based
stack in order to aid in the development. MEAN comprises four open-source components:
MongoDB acts as the database, Express serves as the server framework, Angular as the
client framework, and Node works as the environment for running JavaScript. By
substituting the popular framework Angular with React – a client-side library – and
combining them as the
14
GAYA COLLEGE OF ENGINEERING ,GAYA -823003
3
 MERN stack, React can become a companion to the other technologies for developing
JavaScript and JSON-oriented applications. Figure 1 below illustrates the architecture of
the MERN stack technology:

Figure 1. The architecture of the MERN stack

As illustrated, the MERN stack is constructed based on the well-known 3-tier architecture,
which confirms that the MERN stack is full-stack application development. The MERN stack
consists of three components: display layer powered by React, application layer with NodeJS
and Express, and database tier provided by MongoDB.
1.3.1.1 THE MERN STACK :-
MongoDB is a cross-platform, open-source, NoSQL database that is mainly used for scalable
large-volume data applications and tasks that do not function well in a relational database. It
utilizes a document storage format known as BSON (Binary encoded JavaScript Object
Notation). It is a non-relational database management system created by Dwight Merriman,
Eliot Horowitz, and Kevin Ryan and became popular in the mid-2000s. MongoDB’s design is
based on collections and documents, as illustrated in Figure 2 below, which replace the usage
of tables and rows in conventional relational databases.

Figure 2. The architecture design of MongoDB

GAYA COLLEGE OF ENGINEERING ,GAYA -823003 15

4
 MongoDB also supports a variety of document operations, including adding, querying,
updating, and deleting. MongoDB is suitable for various use cases due to the diversity of
field values and powerful query languages. In addition, its ability to scale out to
accommodate larger data volumes horizontally has contributed to its increasing success
as the world’s most popular NoSQL database.

There are some crucial features of MongoDB:

• Scheme-less Database: This feature allows a single collection to store numerous

documents, each of which contains a varied amount of fields, content, and size.
Therefore, MongoDB offers tremendous flexibility to databases thanks to this fantastic
feature.
• Document Oriented: All the data is kept in fields containing a clear structure with key-value
pairs rather than rows and columns, which provides more flexibility than RDBMS.

• Indexing: Each field in MongoDB documents is indexed using primary and secondary
indices, making retrieving and searching for data more straightforward and faster.
Without accurate indices, the database must manually search each document for the
matching query, which is time-consuming and inefficient.

• Scalability: The horizontal scalability from MongoDB was offered through sharding,
which refers to the process of distributing data across numerous servers. By utilizing the
shard key, a significant quantity of data is divided into data chunks, and these data
chunks are equally spread among shards that involve multiple physical servers.
Moreover, it will add new machines to an existing database.

• Replication: With the benefit of replication, MongoDB enables high availability and
redundancy by producing several copies of data and storing them on a separate server to
protect the database against hardware failure, ensuring that the data can be recovered
from another if one server fails.

• Aggregation: procedures on the dataset are enabled to provide a single or calculated

output with three distinct aggregating methods, including pipeline aggregation, map-
reduce function, and single-purpose aggregation.

1.3.1.2 EXPRESS:-
Representing the letter “E” in the MERN stack, Express is a lightweight and versatile web
application framework built on top of NodeJS. Thanks to the large community of support,
it includes a rich collection of functionality for developing web and mobile applications.
Even though a large number of support packages along with the functionality for better
software creation, Express does not affect the performance of NodeJS.

GAYA COLLEGE OF ENGINEERING ,GAYA -823003 16

5
 Based on the GitHub repository, Express was established on May 22, 2010, by T.J.
Holowaychuk. After that, StrongLoop acquired the project management rights in June
2014 until IBM owned the company in September 2015. Then, in January 2016, the
NodeJS Foundation took over the management of Express, and Express is now the
primary function of the NodeJS platform.

Express.js is a routing and middleware framework for managing the many routing
options for a website. It operates between the request and response cycles. Middleware is
invoked after the server receives the request and before the controller actions transmit
the response. One or more pieces of middleware are executed to perform particular
tasks, such as authorizing requests or parsing request content. Express applications are
composed of a sequence of middleware function calls. Typically, the first middleware
executed to process the request initiates the task pipeline. The initial middleware can
either complete the request and provide it to the users or call the subsequent middleware
to continue the request. The same approach will be continued until the pipeline's last
middleware takes the result of the preceding middleware as input.

1.3.1.3 REACT:-
React, representing the letter ‘R’ in the MERN stack, focuses on creating the View Layer,
which is well-known for all visible parts of the page of an application. React is a multi-
purposed, open-source JavaScript library used for building user interfaces based on UI
components.

Since React was established to cope with sophisticated, large-scale user interfaces
combined with real-time dynamic data and data binding, it has been steadily improving
its single-page application development and frontend utilities for programmers of all
levels.
Compared to other popular libraries and frameworks such as jQuery, Angular, and
VueJS, React is considered the most popular framework for web development. Along with
offering reusable component code, which reduces development time and the likelihood of
bugs and errors, Reacts introduced many essential characteristics that contribute to its
developer appeal, which are discussed below.

JSX:-
JSX (JavaScript XML) is a syntactic extension to JavaScript that is similar to HTML.
Because JSX optimizes the translation to standard JavaScript and leverages its full
power, it is much faster than the regular one. Even though React does not need the usage
of JSX to construct React-based applications, it is suggested as it simplifies the
development for developers whenever markup components and binding events are
required. Rather than dividing markup and logic into different files, JSX enables
developers to generate cleaner and more manageable codebases for their websites by
combining rendering logic and user interface logic in the same components.

GAYA COLLEGE OF ENGINEERING ,GAYA -823003 17

6
 VIRTUAL DOM:-
Virtual DOM (or VDOM) is an abstract representation of DOM (Document Object Model),
and its solutions are constructed on top of the regular DOM. DOM represents the UI of
the program, and its model portrays the document as a collection of different nodes and
objects to interact with the structure, layout, and content of the website through
programming languages. Figure 3 below indicates an example of the DOM structure.

While regular DOM manipulation is slow due to the re-rendering of both the updated
element and its children after getting new data, the Virtual DOM rerenders only the
components that need updating, which fastens the rendering process and increases the
performance. In order to further understand why Virtual DOM is fast and practical, the
functionality of Virtual DOM must be discussed. The state of the DOM tree hierarchy is
stored when Virtual DOM is utilized to render a page. Instead of constructing a new tree,
a diffing approach is employed when UI modifications are necessary. At that point, the
React library employs the Virtual DOM, which allows it to do the calculations inside this
domain without involving the actual DOM. Therefore, whenever a component's state
changes, React keeps track of it and updates

Figure 3. An example of tree-structure of Document Object Model

The Virtual DOM tree by comparing the current version to the prior one. This comparison
employs a diffing algorithm to reduce the number of DOM operations/refreshes, leading
to considerable boosting speed. The whole procedure is titled Reconciliation.

GAYA COLLEGE OF ENGINEERING ,GAYA -823003

18
7
 Figure 4. The difference between Virtual DOM and real DOM update process

COMPONENTS:-
Components are the primary concept of React, which encourages developers to separate
complicated user interfaces into reusable and independent parts. React components are
classified into two types: class-based components and functional components. The
functional component is considered the most straightforward method to construct as it
can be implemented as a JavaScript function to return JSX. The class-based component
is constructed using the ECMAScript6 class syntax combined with the built-in React
library class “Component”.

Components can refer to one another, which means one component can be a parent
component containing several child components with no restriction on the amount of
complexity. Moreover, both functional and class-based components adhere to one strict
rule assigned by React: all React components must be pure functions in which their props
are immutable. Props, which stands for Properties, are a collection of inputs passed as
parameters to a component, while pure function depicts the state in which the function
performs the logic without affecting the arguments. As a result, a React component
behaves like a pure function while respecting its inputs and rendering the same result for
the same props.
HOOKS:-
Prior to version 16.8, the majority of React components were class-based as class-based
components offer life-cycle methods for component state management. Since version
16.8, however, React has introduced a new notion called Hooks, which provides a new
method to leverage state and other React capabilities inside a functional component. By
using Hooks, a component's stateful logic can be isolated, tested separately, and reused
without affecting the component hierarchy. In addition, Hooks enables the developer to
break down a component into separate functions based on the relationship instead of
life-cycle methods.
There are two built-in React hooks that should be discussed. First, the State hook,
commonly known as the use State hook, enables component-level state management. It
hooks into

GAYA COLLEGE OF ENGINEERING ,GAYA -823003

19
8
 React's state by creating a state variable that React maintains. useState hook accepts
and returns two results: the current state and a function to alter it. The component state
can be efficiently initialized, utilized, and modified using the useState hook. The second
hook is the Effect hook, also known as the use effect hook. useEffect hook assists
programmers in managing component life cycles. The difficulty of separating related
functionality and data into several class life cycles, such as componentDidUpdate,
componentDidMount, and componentWillUnmount, has been thoroughly addressed by
Effect Hook. A React component can support multiple effects to isolate data
manipulation issues.
1.3.1.4 NODE :-
NodeJS is an open-source, cross-platform JavaScript runtime environment designed for
constructing scalable applications. NodeJS is independently built on top of Google
Chrome’s V8 runtime engine, which is well-known for working effectively outside of a
browser. By utilizing an event-driven design and operating on a single-thread event loop,
NodeJS allows asynchronous and non-blocking I/O optimization to enhance web
application performance and scalability, as shown in Figure 5 below. Therefore, it
provides an alternative approach for developers to wait and fulfill requests for
developing lightweight and real-time applications.

Figure 5. NodeJS event loop

Node package manager (NPM):-

Node package manager (NPM) is the NodeJS default package manager for applications,
and it is utilized to maintain all of the NodeJS packages and modules along with the
command line client npm. Therefore, it facilitates time-consuming manual tasks by
automating managing third-party packages, allowing developers to spend more time on
the development process.

NPM was first published on January 12, 2010, by Isaac Z. Schlueter. It is installed
alongside NodeJS and is utilized to install the required packages and modules in the
NodeJS project. It is currently the world's largest software registry, with approximately
two million packages at the end of March 2022.

MONGOOSE :-
Mongoose is an object document mapping (ODM) library that is utilized for facilitating Node

GAYA COLLEGE OF ENGINEERING ,GAYA -823003 20

9
 and MongoDB development. It is responsible for managing data relationships,
performing schema validation, and serving as a middleman between objects in code and
object representations in MongoDB. In addition, Mongoose offers multiple methods and
functions that effectively facilitate the communication between NodeJS and MongoDB.
Figure 6 below illustrates the relationship between Mongoose, NodeJS, and MongoDB.

As shown in Figure 6, Mongoose is utilized to create the interaction between Node and
MongoDB through object mapping. After that, Mongoose forms the connection with
MongoDB using a Mongo Driver. Therefore, the relationship between Mongoose, NodeJS,
and MongoDB ensures data capabilities.

The first step in getting started with Mongoose, like with other ODM libraries, is to create
a schema. As Mongoose's documentation page described, a schema specifies the data
structure and property casting, along with the following techniques: instance methods,
compound indexes, static Model methods, and middlewares. Once the first stage is
finished, the developed schemas will be utilized to map to MongoDB collections and
shape the data documents included inside each collection. The second stage required by
programmers is to construct a Mongoose model. Models are composed of builders of
schemas, with the primary responsibility of producing and scanning documents in the
Mongo database. Querying, deleting, and updating documents in the database are
additional capabilities of models worth mentioning.

Figure 6. The relationship between Mongoose, NodeJS and MongoDB

GAYA COLLEGE OF ENGINEERING ,GAYA -823003

21
10
 1.4 HARDWARE&SOFTWAREREQUIREMENTS:-

1.4.1 Hardware Specification :- (Minimum requirement)

Processor : Any processor above 500 MHz

RAM :1GB
Hard Disk : 80GB
System :PentiumIV2.4GHz
Internet Connection : Active

1.4.2 Software Specification :-

Operating System : Any operating system
WebBrowser :Anywebbrowser

Any system with above or higher configuration is compatible for this project.

GAYA COLLEGE OF ENGINEERING ,GAYA -823003

22
11
 [CHAPTER – 2 : - LITERATURE SURVEY]

GAYA COLLEGE OF ENGINEERING ,GAYA -823003

23
12
 LITERATURE SURVEY
MERN stack is a commonly used combination of technologies for building modern web
applications, comprising MongoDB, Express.js, React, and Node.js. E-commerce websites
are increasingly important due to the rise of online shopping. This literature review
discusses the use of the MERN stack for e-commerce website development, covering its
advantages, future
technical aspects, security considerations, case studies, best practices, and
developments.

Scalability is a key advantage of using the MERN stack for e-commerce website
development. The modular architecture allows easy scaling of the application, while the
use of MongoDB as a NoSQL database enables flexible data modelling for complex and
dynamic data structures. Another advantage is the stack's performance, which is boosted
by its ability to handle both client-side and server-side components. Furthermore, React
allows for the efficient rendering of components, thus reducing load times.

Developing an e-commerce website using the MERN stack involves creating an API with
Express.js for server-side communication. MongoDB stores and retrieves data while
React builds dynamic and responsive user interfaces. Node.js is used for server-side
scripting to enable real-time communication between client-side and server-side
components.
Security is a critical aspect of e-commerce website development, and the MERN stack
provides several features to ensure the security of the application. MongoDB provides
authentication and access control, and SSL/TLS encryption for secure communication.
Express.js handles authentication and authorization and can be used to prevent common
security vulnerabilities. React and Node.js support SSL/TLS encryption and XSS
protection.
Several successful e-commerce websites have been built using the MERN stack, such as
Grofers in India and Ubuy in the Middle East.

Best practices for e-commerce website development using the MERN stack include
optimizing performance, testing thoroughly for reliability and security, deploying to a
reliable and scalable infrastructure, and maintaining the application through regular
updates and bug fixes. Additionally, it is important to adhere to industry standards and
regulations such as PCI DSS compliance for payment processing.

One of the potential drawbacks of using the MERN stack for e-commerce website
development is its learning curve. The technology stack requires expertise in multiple
technologies, which can be challenging for novice developers. Additionally, the
modularity of the MERN stack can result in a large number of dependencies, which can
increase the complexity of the application and make maintenance more difficult. Finally,
the MERN stack may not be the most appropriate choice for all e-commerce websites,
particularly those with simpler requirements.

The future of e-commerce website development using the MERN stack will see the

24
GAYA COLLEGE OF ENGINEERING ,GAYA -823003
13
 integration of emerging technologies like machine learning, blockchain, and augmented
reality. Machine learning can provide personalized product recommendations, blockchain
can facilitate secure payment processing, and augmented reality can provide a more
immersive shopping experience.

MERN stack offers a flexible and powerful solution for e-commerce website development,
with advantages in scalability and performance. Its security features and successful case
studies make it a reliable and popular choice for e-commerce developers. Best practices
and future developments provide guidance and opportunities for continued innovation

2.1 EXISTING SYSTEM:-

The present scenario for shopping is to visit the shops and market manually and then
from the available product list one needs to choose the item he or she wants and then pay
for the same item mainly in cash mode is done, as not every society is well educated and
aware to use net banking or card modes or wallets etc.

This system is not much user-friendly as one needs to go to the market physically and then
select items only from the available list. So mostly it is difficult to get the product as per our
desire. Description About the products is less available and are mostly verbal only. For this
type of shopping, one needs to have an ample amount of free time.

Also, not really good markets exist everywhere, so many times good markets become out of
reach for certain people. In the proposed system customers need not go to the shops for
purchasing the products. He/she can order the product he/she wishes to buy through the use
of this system. The shop owner can be the admin of the system.

The shop owner can appoint officials particularly to handle this, who will help the owner in
managing the customers and product orders. The system also endorses a home delivery
system for delivering the purchased products.

The current system for shopping is to visit the shop manually and from the available product
choose the item customer wants and buy the item by payment of the price of the item.

● Itislessuser-friendly.
● Usermustgototheshopandselectproducts.
● Itisdifficulttoidentifytherequiredproduct.
● Descriptionoftheproductlimited.
● Itisatime-consumingprocess.
● Notinreachofdistantusers.

GAYA COLLEGE OF ENGINEERING ,GAYA -823003

25
14
 2.2 PROPOSED SYSTEM:-
The proposed system for an e-commerce website using the MERN stack will leverage the
latest technologies to provide a user-friendly, secure, and scalable e-commerce platform.
The MERN stack, comprising MongoDB, Express.js, React, and Node.js, will be used to
develop a robust and dynamic e-commerce website that will enable businesses to sell
products online.
The proposed system will have a client-server architecture, with the server-side component
built using the MERN stack. MongoDB will be used as the database to store and retrieve
data, and Express.js will handle the server-side communication and routing. Node.js will be
used for server-side scripting, allowing real-time communication between the client-side and
server-side components.

The client-side component will be developed using React, which will enable the creation of
dynamic and responsive user interfaces. React will also provide an efficient rendering of
components, resulting in reduced load times and enhanced user experience. Additionally, the
proposed system will be developed using a modular approach, allowing for easy scaling of
the application.

The proposed system will have a range of features to provide a seamless e-commerce
experience for users. These features will include

● ProductCatalog:Theproductcataloguewillallowuserstobrowsethroughawide
range of products and filter them based on their preferences.

● ShoppingCart:Theshoppingcartwillenableuserstoaddproductstotheircart,review
their orders, and checkout.

● PaymentGatewayIntegration:Thepaymentgatewayintegrationwillallowusersto
make secure payments using a variety of payment methods, such as credit cards, debit
cards, and digital wallets.

● OrderManagement:Theordermanagementsystemwillenablebusinessestomanage
orders, track shipments, and generate invoices.

● User Management: The user management system will enable businesses to manage
user accounts, including registration, login, and authentication.

● Search Engine Optimization: The proposed system will be optimized for search
engines to improve the visibility of the e-commerce website and increase traffic.

The proposed system will incorporate several security features to ensure the safety and
security of user data and transactions. These features will include

● SSL/TLS Encryption: The system will use SSL/TLS encryption to secure all

26
GAYA COLLEGE OF ENGINEERING ,GAYA -823003
15
 communication between the client-side and server-side components.

● AccessControl:Accesscontrolwillbeimplementedusingrole-basedauthenticationto
ensure that only authorized users have access to sensitive data.

● PCI DSS Compliance: The system will be compliant with the Payment Card Industry
Data Security Standard (PCI DSS) to ensure the secure processing of credit card
payments.

● RegularSecurityAudits:Theproposedsystemwillundergoregularsecurityauditsto
identify and address any vulnerabilities or security issues.

The proposed system for e-commerce websites using the MERN stack will provide
businesses with a powerful and flexible platform for selling products online. The system will
be developed using the latest technologies and security features to ensure a seamless and
secure e-commerce experience for users. The modular architecture of the MERN stack will
enable easy scaling of the application, allowing businesses to expand their e-commerce
operations as they grow.

2.3 FEASIBILITY STUDY:-

The feasibility study for an e-commerce website using the MERN stack is essential to
evaluate the practicality and viability of the proposed system. This study will assess the
technical, operational, economic, and legal aspects of the project and provide insights
into the feasibility of developing an e-commerce website using the MERN stack.

Economic Feasibility:

The economic feasibility of the proposed system is determined by assessing the cost of
development, deployment, and maintenance of the e-commerce website. The MERN stack
is an open-source technology, and the initial cost of development is relatively low.
However, ongoing maintenance and updates will require a dedicated team, which may
result in recurring expenses. The project's profitability will depend on the volume of sales
generated, and the e-commerce website's scalability and flexibility will enable businesses
to expand their operations and generate more significant profits.

Technical Feasibility:

The technical feasibility of the proposed system is determined by evaluating the

availability of resources and the compatibility of the MERN stack components with the
project requirements. The MERN stack has a vast developer community, and there are
numerous resources available for learning and development. Moreover, MongoDB,
Express.js, React, and Node.js are compatible with each other and can be integrated
seamlessly to create a robust e-commerce website.

GAYA COLLEGE OF ENGINEERING ,GAYA -823003

27
16
 Operational Feasibility:

The operational feasibility of the proposed system is evaluated based on the availability
of resources, skills, and expertise required for development, deployment, and
maintenance. The development team must possess the necessary skills and expertise in
the MERN stack to ensure the successful development and deployment of the e-
commerce website. Additionally, the team must have experience in managing e-
commerce websites, including order management, user management, and inventory
management.
Legal Feasibility:

The legal feasibility of the proposed system is evaluated by assessing compliance with
data protection laws, intellectual property laws, and other relevant regulations. The e-
commerce website must comply with the General Data Protection Regulation (GDPR) and
other data protection laws to ensure the security and confidentiality of user data.
Additionally, the website must comply with intellectual property laws, such as trademark
and copyright laws, to avoid legal disputes.

The feasibility study demonstrates that developing an e-commerce website using the
MERN stack is technically and operationally feasible. However, the project's profitability
will depend on the volume of sales generated, and businesses must be prepared for
recurring expenses associated with maintenance and updates. The legal feasibility of the
project will depend on compliance with data protection and intellectual property laws,
and businesses must ensure compliance to avoid legal disputes. Overall, the proposed
system for an e-commerce website using the MERN stack is a viable and practical
solution for businesses looking to sell products online.

GAYA COLLEGE OF ENGINEERING ,GAYA -823003 28

17
 [CHAPTER – 3 : - SYSTEM ANALYSIS DESIGN]

GAYA COLLEGE OF ENGINEERING ,GAYA -823003 29

18
 SYSTEM ANALYSIS DESIGN
3.1 PROJECT SPECIFICATION:-
The project specification for an e-commerce website using the MERN stack is a
comprehensive document that outlines the requirements, functionality, and features of
the proposed system. This specification will provide a detailed description of the e-
commerce website, including its design, user interface, functionality, security, and
performance.
General Requirements:

The e-commerce website must be developed using the MERN stack, which includes
MongoDB, Express.js, React, and Node.js. The website should be responsive, intuitive, and
easy to navigate. It should be designed with a clean and modern interface, consistent with the
branding and image of the business. The website must support multiple languages and
currencies to facilitate global sales.

Functional Requirements:

The e-commerce website must have the following features and functionalities:

● UserAccountManagement:Thewebsiteshouldallowuserstocreateandmanagetheir
accounts, including personal information, shipping addresses, and payment options.

● ProductCatalog:Thewebsiteshouldprovideacomprehensivecatalogueofproducts,
including product descriptions, images, prices, and reviews. Users should be able to
search and filter products based on different criteria, such as price, category, and brand.

● ShoppingCart:Thewebsiteshouldallowuserstoaddproductstotheirshoppingcart,
view the contents of their cart, and proceed to checkout.

● PaymentGatewayIntegration:Thewebsiteshouldintegratewithasecureandreliable
payment gateway to facilitate secure online transactions.

● OrderManagement:Thewebsiteshouldallowbusinessestomanageorders,including
order tracking, order processing, and order fulfillment.

● CustomerService:Thewebsiteshouldprovidecustomerserviceoptions,suchaslive
chat, email support, and FAQ section.

Security Requirements:

● Thee-commercewebsitemusthavethefollowingsecurityfeatures:

● SSL Encryption: The website should use SSL encryption to secure user data and
prevent unauthorized access.
30
GAYA COLLEGE OF ENGINEERING ,GAYA -823003
19
 ● User Authentication: The website should require users to create and use strong
passwords to protect their accounts.

● PaymentSecurity:Thewebsiteshoulduseasecurepaymentgatewaytoensuresecure
and safe online transactions.

Performance Requirements:

The e-commerce website must have the following performance features:

● Fast Load Time: The website should load quickly to provide a seamless user
experience.

● Scalability:Thewebsiteshouldbescalabletoaccommodategrowingusertrafficand
transactions.

● Reliability:Thewebsiteshouldbereliableandavailable24/7tofacilitatesalesand
transactions.

The project specification for an e-commerce website using the MERN stack provides a
detailed overview of the proposed system's requirements, functionalities, and features. The
specification highlights the importance of a responsive design, intuitive user interface, secure
payment gateway, and fast load time to provide a seamless and satisfactory user experience.
By following this specification, businesses can develop a robust e-commerce website using
the MERN stack and expand their operations to reach a global audience.

GAYA COLLEGE OF ENGINEERING ,GAYA -823003 31

20
 3.2 SystemArchitecture:-

Figure 7. Architecture design

Figure 8. 3-Layer Architectural Pattern

GAYA COLLEGE OF ENGINEERING ,GAYA -823003 32

21
 3.3 Design/DiagramsandFlowCharts:-

USE CASE DIAGRAM:

Figure 8. Use Case Diagram

BLOCK DIAGRAM:

Figure 9. Block Diagram

GAYA COLLEGE OF ENGINEERING ,GAYA -823003 33

22
 SEQUENCE DIAGRAM:

Figure 10. Sequence Diagram

GAYA COLLEGE OF ENGINEERING ,GAYA -823003 34

23
 ACTIVITY DIAGRAM:

Figure 11. Client Side Activity Diagram

GAYA COLLEGE OF ENGINEERING ,GAYA -823003 35

24
 Figure 11. Admin Side Activity Diagram

GAYA COLLEGE OF ENGINEERING ,GAYA -823003

36
25
 DATAFLOW DIAGRAM :

Figure 11. DataFlow Diagram

GAYA COLLEGE OF ENGINEERING ,GAYA -823003

37
26
 FLOWCHART :

Figure 11. FlowChart

GAYA COLLEGE OF ENGINEERING ,GAYA -823003 38

27
 [CHAPTER – 4 : - OUTPUTS & RESULT]

GAYA COLLEGE OF ENGINEERING ,GAYA -823003

39
28
 OUTPUTS & RESULT
The initial version of an electronic commerce application that reproduces an online store
was successfully built by leveraging all four key technologies that comprise the MERN
stack and making use of numerous Node modules. This particular programme is made to
be effective, simple to use, and run smoothly.

HOME PAGE:-
The home page of an e-commerce site is the main landing page that customers first see
when they visit the website. It serves as the storefront or the main entrance to the online
store. The home page provides a snapshot of the website's products, services, and overall
brand identity. The home page typically includes several key elements, including a
Navigation menu, Featured products, Promotional banners, Search bar, and About Us
section.

Figure 12. Home Page

SIGNUP PAGE:-
A signup page is a webpage that allows users to create an account with a website or
online service. It is typically the first step in the onboarding process for new users. The
signup page collects important information from the user, such as their name, email
address, and password, and may also ask for additional details such as their date of birth
or location. Here are some common elements you might find on a signup page:
Registration form, Fillup forms (Name, Password requirements, Mobile number, Address,
etc), Terms and conditions, Social login options.

Overall, the signup page is an important part of the user onboarding process, and it's
essential that it's designed to be user-friendly, easy to navigate, and secure. A well-
designed signup
40
GAYA COLLEGE OF ENGINEERING ,GAYA -823003 29
 page can help to build trust with users and encourage them to continue using the website.

Figure 13. SignUp Page

SIGN-IN OPTION:-
The sign-in option on a website or application allows users who have already created an
account to log back into their account. This allows users to access their personal
information, settings, and account features. Typically, the sign-in option is located on
the website or application's homepage and can be accessed by clicking on a "sign in" or
"log in" button. Once clicked, the user is directed to a sign-in page, where they are
prompted to enter their username or email address and password.

Figure 14. Sign-In Option

GAYA COLLEGE OF ENGINEERING ,GAYA -823003

41
30
 PRODUCT PAGE:-
The product page is a webpage on an e-commerce site that provides information about a
specific product. It typically includes the product name, image, price, and a brief
description of its features and benefits. The goal of the product page is to provide
customers with enough information to make an informed purchasing decision. Other
common elements on a product page may include customer reviews and ratings, related
products, and an option to add the product to a shopping cart or wishlist. Overall, a well-
designed product page is crucial for driving conversions and boosting sales on an e-
commerce site.

Figure 15. Product Page

CART PAGE:-
The cart page (also known as a shopping cart or basket) is a webpage on our e-commerce
site that displays a customer's current order. The cart page typically shows a list of the
products the customer has added to their cart, along with the quantities and prices.
Customers can typically edit the quantities of each item or remove items from their cart
altogether. The cart page may also display the subtotal, taxes, shipping costs, and total
order costs. From the cart page, customers can proceed to checkout to complete their
orders or continue shopping to add more items to their cart. A well-designed cart page is
important for providing customers with a clear overview of their order, and for
encouraging them to complete their purchase.

GAYA COLLEGE OF ENGINEERING ,GAYA -823003 42

31
 Figure 16. Cart Page

Figure 17. Cart Page

GAYA COLLEGE OF ENGINEERING ,GAYA -823003 43

32
 Figure 18. Cart Page

Figure 19. Cart Page 44

GAYA COLLEGE OF ENGINEERING ,GAYA -823003
 [CHAPTER – 6 : - CONCLUSION]

GAYA COLLEGE OF ENGINEERING ,GAYA -823003

45
33
 CONCLUSION
E-Commerce is a flexible answer for consumers and businesses. In this competitive and
convenience prominent period, only some people have the time and patience to spend
time in markets to buy their products and services. An online store is open all hours a
day, every day, which means all your consumers can visit your store whenever they want,
regardless of their schedule. E-Commerce is the requirement of the current period, which
is being well-served. This project is based on a technology known as MERN stack, which
makes it possible to buy and sell products on this online store. This project has features
for searching and sorting products based on price and popularity. And it also can store
and save user data like profile information, orders, and past searches. The online store is
simple to use for sellers, they can easily add products and establish new categories.
Consumers will find it quite attractive to look at the products while sitting at home or at
the office.
An e-commerce website built using the MERN stack (MongoDB, Express.js, React, and
Node.js) is a powerful solution for businesses looking to sell products online. The MERN
stack provides a robust and scalable architecture, making it an excellent choice for
building complex web applications like e-commerce websites. With MongoDB as the
database, Express.js as the web application framework, React for building the user
interface, and Node.js for server-side scripting, the MERN stack offers a comprehensive
and cohesive development environment. This full-stack JavaScript approach allows
developers to build efficient and responsive e-commerce websites that can handle high
volumes of traffic and provide a seamless user experience. An e-commerce website built
using the MERN stack can offer a range of features and functionalities, such as product
listings, search and filtering options, shopping carts, payment gateways, and order
tracking. These features can be tailored to the specific needs of the business, ensuring
that the website meets the unique requirements of the e-commerce industry. Overall, an
e-commerce website built using the MERN stack is a powerful tool for businesses looking
to expand their online presence and sell products to a wider audience. By leveraging the
capabilities of the MERN stack, developers can create robust and reliable e-commerce
websites that provide a seamless and enjoyable shopping experience for customers.

GAYA COLLEGE OF ENGINEERING ,GAYA -823003 46

34
 APPENDICES :-

Following abbreviations have been used in this document:

ASP : ActiveServerPages

JSON : JavaScriptObjectNotation

BSON: BinaryJavaScriptObjectNotation

PHP : HypertextPreprocessor

MERN: MongoDB,Express,React.js,Node.js

JSX : JavaScriptSyntaxExtension

HTTP : HypertextTransferProtocol

HTML: HypertextMarkupLanguage

:
CSS CascadingStyleSheets

:
REST RepresentationalStateTransfer

:
API Applicationprogramminginterface

URL : UniformResourceLocator

NPM : NodePackageManager

NoSQL: Non-StructuredQueryLanguage

:MVC ModelViewController

:UI UserInterface

:ODM ObjectDataModelingDOMDocumentObjectModel

JWT : JSONWebToken

B2C : BusinesstoCustomer

GAYA COLLEGE OF ENGINEERING ,GAYA -823003

47
37
 [RESEARCH PAPER & CERTIFICATE ]

48
GAYA COLLEGE OF ENGINEERING ,GAYA -823003
38
 E-Commerce Website Using MERN Stack
Vikash Kumar, Richa Rani, Suraj Kumar,Saurav Kumar Prof.Ritesh Kumar

Department of Computer Science Engineering,

GAYA COLLEGE OF ENGINEERING , GAYA
Abstract:
In our present generation, e-commerce has taken over and become a new normal in our lives. These
days most people choose to buy products online instead of paying a visit to the market. As nearly
everyone in the world now has access to the internet, the number of people making purchases online is
increasing exponentially. Online shopping is far more convenient as customers don't have to leave their
homes and they can make any purchases at any time of day from anywhere. The market for digitalized
shopping will grow in this decade of digitization. This project is created using the MERN Stack, which
includes MongoDB, the Express.js framework, the ReactJS library, and the NodeJS environment. MERN
is one of the most powerful stacks for developing full-stack web applications. This application is fully
functional and has many different features. We can easily purchase many different types of products by
using this web application with some clicks.
IndexTerms:E-commerce,MernStack,Framework,Library,React.js,Node.js,Express.js,MongoDB.

I.I NTRODUCTION
E-commerce, or simply electronic commerce, is the term used to describe the buying and selling of
products and services via the Internet. E-commerce is a massive industry that has grown
dramatically in recent years, providing more benefits and conveniences than offline businesses. The
fashion of interaction between businesses and customers has also changed drastically because of
the internet boom and rapid innovations and development of the logistics industry, and E-commerce
has even made it possible for small businesses to commerce with customers globally. Recognizing
this need, we made the decision to create an E- commerce web application as our project. This project
is implemented using the MERN Stack. MERN Stack is an open-source JavaScript-based stack that is
used for building dynamic web applications more quickly and easily. It is a combination of modern
technologies for building high-end online apps. MERN Stack is a package of MongoDB, Express,
React, and Node.

II.L ITERATURESURVEY
E-commerce is the buying and selling of products, raw materials, and services via the Internet. It is a
rapidly growing industry expected to continue expanding in the coming years. To create an e-commerce
website, various technologies can be used. The MERN stack is one such technology that we put to use.
This research explores the use of the MERN stack in developing e-commerce websites.
The MERN stack is a package of four technologies: MongoDB, Express, React, and Node.js. MongoDB
is a NoSQL database that allows for scalable and flexible data storage. Express is a framework for
Node.js that facilitates the development of web-based applications. React is a JavaScript library that
makes it possible to create interactive user interfaces. Node.js is a JavaScript runtime environment that
enables server-side programming.
MERN stack provides various advantages for building e-commerce websites such as the potential to build
dynamic single-page applications utilizing React, the scalability and adaptability of MongoDB for storing
massive amounts of data, and the server-side programming ability of Node.js. However, there are some
potential drawbacks to employing the MERN stack such as the complicated learning curve for developers
GAYA COLLEGE OF ENGINEERING ,GAYA -823003 49 39
unfamiliar with JavaScript, possible inconsistencies in data management with NoSQL databases such
as MongoDB, and limited scalability of Node.js.,
Nevertheless, the MERN stack is widely regarded as a useful technology for building e-commerce
websites.
The use of React allows for the development of dynamic and responsive user interfaces, while
MongoDB
provides scalability and flexibility for storing significant amounts of data. Despite some limitations,
the
benefits of the MERN stack make it a suitable option for developing e-commerce websites.
II.E- COMMERCE
E-commerce, also known as E-comm, EC for short, is a concept concerning transactions, buying and
selling of goods and services via the internet. E-commerce first surfaced in the 1960s. E-commerce
gained popularity after the introduction of devices like laptops and mobile phones, and social media
progressively ensured the strength and expansion of web-based apps. Launchers encourage the quick
growth of commerce (especially online commerce). The internet is what drives e-commerce. Customers
use their own devices to access a website or mobile app to browse the products and place orders for
products or services.
Types of E-commerce:
1) B2B (Business to Business):Business-to-business electronic commerce, or B2B, refers to the online
buying and selling of goods and services between corporations. B2B commerce is different from B2C
commerce, which is business-to-consumer online sales of products or services to consumers.
2) B2C (Business to Consumer): Business-to-consumer (B2C) e-commerce also known as retail
e-commerce, refers to the business model that involves the act of selling products and services directly to
the consumers. Most of the enterprises that conduct business directly with consumers are referred to as B2C
companies.
3) C2C (Consumer-to-Consumer): This is a reference to an interpersonal commercial transaction. Without
any use of middlemen, individuals can sell goods, supplies, and services through the marketplaces that are
specifically built for that purpose.
4) C2B (Consumer-to-Business): An exact polar opposite of a C2B model is a B2C model. In contrast to
the B2C model, which is handled by a business on behalf of the customer, the C2B model allows end users
to offer their products and services to businesses. The approach is regularly employed in crowdsourcing-
based projects, the kinds of which frequently entail the production of logos, the sale of royalty-free
photos, media, design elements, etc.

5) B2A (Business-to-Administration): This model facilitates online transactions between companies and
public administration, i.e., sharing of information through central websites, empowering both governmen
and businesses to transact online. Using these platforms, businesses can submit bids for government
opportunities such as auctions, tenders, application submissions, etc. The scope of this system has grown
a result of the resources dedicated to e-governance.
6) C2A (Consumer-to-Administration): The C2A model describes the online transactions between
individual citizens and governmental authorities. With the help of the C2A e-commerce model,
consumers can communicate and interact with the local governmental authorities to ask questions and
exchange information on the public sector.
III. M ETHODOLOGY U SED

A. MERN STACK:
The MERN stack is a collection of four different technologies that work together to create dynamic web
applications and websites. We have used MERN Stack as our main full-stack technology in the
development of the project application.

50
GAYA COLLEGE OF ENGINEERING ,GAYA -823003
40
 Fig. 1. Three layers of the MERN stack
The following are the components of the MERN stack:
1) MONGOBD: TheMERNstackutilizesthedatabaseknownasMongoDB.ItisaNoSQL
document-oriented database with a flexible schema and a query language based on JSON.
There is no prescribed schema that must be complied with when storing an object in a MongoDB
database.
It's not necessary for every document in a collection to have the same set of fields. As a result, you
don't
need to add or rename columns in the schema, particularly for the early phases of development.
MongoDB is a document-oriented database. A document or object is a unit of storage (which is
comparable to a row), while many documents are stored in collections (which is comparable to a table).
Each document in a collection has a special identification that can be used to access it. The identifier is
automatically indexed. In addition to the fact that many contemporary businesses—including
Facebook and Google—use MongoDB in their operations.

Fig. 2. The architecture design of MongoDB

2) EXPRESS.JS:
Express.js is a framework that's built in conjunction with Nodejs. Express is an
open-source server format that is created altogether in JavaScript. It has great features for building
web-based applications and mobile applications. Additionally, Express.js supports HTTP and middleware
methods, giving the API an incredible amount of power and making it simple to use.
A framework based on Node.js is Express.js. Instead of slowing down NodeJS, Express implements extra
features that developers can use and have a better development environment. Importantly, the well-known
frameworks of NodeJS like Sails.js and MEAN include Express.js as a core component.
It is used to create web-based applications that are single-page, multipage, and hybrid. Express.js is a quick,
assertive, essential, and moderate web framework of Node.js. You can think about express as a layer built on
top of the Node.js that aids in managing a server and routes. It offers an extensive set of features to create
online and mobile applications. Because of its simple architecture and standard adjustments, Express is the
foundation for several JavaScript components, including feathers, KeystoneJS, Kraken, and Sails.
3) REACT.JS: ReactJSisanopen-sourceclient-sideJavaScriptlibrarythatisdeclarativeandflexiblein
nature and is used for creating reusable UI components. It is a component-based front-end library that

GAYA COLLEGE OF ENGINEERING ,GAYA -823003 51 41

mainly handles the application's view layer. Facebook created it and now maintains it with a group of
developers and companies. Each React web application is made up of reusable components that make
up various user interface elements. For example, we can have discrete components for our navigation
bar, the footer, the main content, and so on. Development became easier because of the elimination of
the need to repeat repetitive code, all thanks to these reusable components. The only task left is to
develop its logic and import the component into the proper section of the code.
4) NODE.JS:
Node.jsopen-sourcecross-platformserverenvironment.ItisaJavaScriptruntime
environment that is used for carrying out and implementing scalable JavaScript applications that are being
used for building networking and server-side JavaScript applications. It is one of the most powerful
cross-platform runtime environment that helps developers to build scalable web servers and web clients.
NodeJS is a runtime environment developed on Google Chrome’s V8 engine for creating fast and scalable
network web-based applications, and because of it, its execution time is very quick, and it runs very swiftly.
It is employed for developing I/O-intensive web apps such as video streaming websites, single-page web
applications, and other web applications. Node.js is lightweight and efficient, making it perfect for highly
data-intensive real-time web applications that run across numerous distributed devices. It uses an
event-based, non-blocking I/O architecture.
NodeJS does not require standing by and waiting for an API to return the data, so for building high
data-intensive and real-time web applications, it is very helpful. Nodejs is asynchronous in nature which
implies it is non-blocking. Because of better code synchronization between the client and server due to
having the exact same code base, NodeJS speeds up the loading time for audio and video files.
B. ARCHITECTURE DESIGN:

Fig. 3. Architecture Design of E-commerce Website.

IV. ADVANTAGES
1) Market at the global scale with a huge customer base.
2 Saves customer time.
) Easy to maintain and scale up.
3
A wide variety of products.
)
Accessible anywhere at any time.
4
)
Precise and targeted marketing.
5 VI.R ESULTS
)
The initial version of an electronic commerce application that reproduces an online store was successfully
6
) GAYA COLLEGE OF ENGINEERING ,GAYA -823003 52 42
built by leveraging all four key technologies that comprise the MERN stack and making use of numerous
Node modules. This particular programme is made to be effective, simple to use, and run smoothly.
A. HOME PAGE:
The project's home page mostly includes a list of the products that have been saved in the database.
And there is a search bar and some options that are displayed on the navigation bar, such as "Sign in"
and "Sign up" options. Sign-In and Sign-Up Option: Sign-in and Sign up are two-option on the
navigation bar of the page where the user clicks on the sign-in option then the user can fill out a form
to sign in with an account. And on clicking the sign-up option user will redirect to the sign-up page.

Fig. 4. Home Page

B. SIGNUP PAGE:
The project's Sign Up page is a page where users can sign up and acquire access to your system on their
own using the signup page.

Fig. 5. Sign-up Page

C. CART PAGE:
On the project's cart page, users can simply add everything to their cart and check out by making an
online payment on this page. After adding any product to the cart user gets their product on this page
and can pay for the product and then carry out the shipment details procedure to place the order.
Payment can be done
GAYA COLLEGE OF ENGINEERING ,GAYA -823003 53 43
with the help of credit/debit card and UPI.

Fig. 6. Cart Page

VII. C ONCLUSION
E-Commerce is a flexible answer for consumers and businesses. In this competitive and convenience-
prominent period, only some people have the time and patience to spend time in markets to buy their
products and services. An online store is open all hours a day, every day, which means all your
consumers can visit your store whenever they want, regardless of their schedule. E-Commerce is the
requirement of the current period, which is being well-served. This project is based on a technology
known as MERN stack, which makes it possible to buy and sell products on this online store. This
project has features for searching and sorting products based on price and popularity. And it also can
store and save user data like profile information, orders, and past searches. The online store is simple
to use for sellers, they can easily add products and establish new categories. Consumers will find it
quite attractive to look at the products while sitting at home or at the office..

VIII. A CKNOWLEDGMENT
We would like to thank our Project Guide Prof. Satish Chadokar for their guidance and for helping us
with our project and for many other useful discussions. We thank our HOD Prof. Pravin Malviya and
Project Coordinator Prof. Vinay Sahu for their valuable pieces of advice and guidance throughout this
work. Lastly, we express our sincere gratitude to our Principal Dr. Paresh J. Shah for providing us with
the means to complete our project successfully.

REFERENCES

[1] Thi Thu Hien Tran. (2022). THE DEVELOPMENT OF AN ECOMMERCE WEB APPLICATION
USING MERN STACK
[2] Monika Mehra, Manish Kumar, Anjali Maurya, Charu Sharma, Shanu. (2021). MERN Stack Web
Development. Annals of the Romanian Society for CellBiology, 25(6), 11756–11761
[3] Naidu, N. D., Adarsh, P., Reddy, S., Raju, G., Kiran, U. S., Sharma, V., ... & Sharma, V. (2021).
E-Commerce web Application by using MERN Technology. International Journal for Modern Trends in
Science and Technology, 7, 1-5.
[4] Mai,N.(2020).E-commerceApplicationusingMERNstack.
[5] Subramanian,V.(2019).MongoDB.In:ProMERNStack.Apress,Berkeley,CA.
54 44
 APPENDICES :-

Following abbreviations have been used in this document:

ASP : ActiveServerPages

JSON : JavaScriptObjectNotation

BSON: BinaryJavaScriptObjectNotation

PHP : HypertextPreprocessor

MERN: MongoDB,Express,React.js,Node.js

JSX : JavaScriptSyntaxExtension

HTTP : HypertextTransferProtocol

HTML: HypertextMarkupLanguage

:
CSS CascadingStyleSheets

:
REST RepresentationalStateTransfer

:
API Applicationprogramminginterface

URL : UniformResourceLocator

NPM : NodePackageManager

NoSQL: Non-StructuredQueryLanguage

:MVC ModelViewController

:UI UserInterface

:ODM ObjectDataModelingDOMDocumentObjectModel

JWT : JSONWebToken

B2C : BusinesstoCustomer

GAYA COLLEGE OF ENGINEERING ,GAYA -823003

55
37
 CODTECH IT SOLUTIONS
8-7-7/2, Plot No: 51,Opp:Naveena +91 9848925128
School, Hasthinapuram Central, [email protected]
Hyderabad , 500 079, Telangana www.codtechitsolutions.com

ID:CT12DS3010

CERTIFICATE
OF INTERNSHIP EXPERIENCE
This certificate is proudly presented to

VIKASH KUMAR
successfully completed the Internship with Program at CODTECH IT
SOLUTIONS in “Mern Stack Web Development” from DECEMBER 5th,
2024 to FEBRUARY 5th, 2025. with unwavering dedication.

NEELA SANTHOSH KUMAR

VERIFIED BY
HUMAN RESOURCES& CODTECH IT SOLUTIONS PVT.LTD
ACADEMIC HEAD

56
 CODTECH IT SOLUTIONS
8-7-7/2, Plot No: 51,Opp:Naveena +91 9848925128
School, Hasthinapuram Central, [email protected]
Hyderabad , 500 079, Telangana www.codtechitsolutions.com

ID:CT12DS3012

CERTIFICATE
OF INTERNSHIP EXPERIENCE
This certificate is proudly presented to

RICHA RANI
successfully completed the Internship with Program at CODTECH IT
SOLUTIONS in “Mern Stack Web Development” from DECEMBER 5th,
2024 to FEBRUARY 5th, 2025. with unwavering dedication.

NEELA SANTHOSH KUMAR

VERIFIED BY
HUMAN RESOURCES& CODTECH IT SOLUTIONS PVT.LTD
ACADEMIC HEAD

57
 CODTECH IT SOLUTIONS
8-7-7/2, Plot No: 51,Opp:Naveena +91 9848925128
School, Hasthinapuram Central, [email protected]
Hyderabad , 500 079, Telangana www.codtechitsolutions.com

ID:CT12DS3012

CERTIFICATE
OF INTERNSHIP EXPERIENCE
This certificate is proudly presented to

SURAJ
YoSur
KUMAR
pSaragraSph S
successfully completed the Internship with Program at CODTECH IT
SOLUTIONS in “Mern Stack Web Development” from DECEMBER 5th,
2024 to FEBRUARY 5th, 2025. with unwavering dedication.

NEELA SANTHOSH KUMAR

VERIFIED BY
HUMAN RESOURCES& CODTECH IT SOLUTIONS PVT.LTD
ACADEMIC HEAD

58
 CODTECH IT SOLUTIONS
8-7-7/2, Plot No: 51,Opp:Naveena +91 9848925128
School, Hasthinapuram Central, [email protected]
Hyderabad , 500 079, Telangana www.codtechitsolutions.com

ID:CT12DS3011

CERTIFICATE
OF INTERNSHIP EXPERIENCE
This certificate is proudly presented to

SAURAV KUMAR
successfully completed the Internship with Program at CODTECH IT
SOLUTIONS in “Mern Stack Web Development”. DECEMBER 5th, 2024
to FEBRUARY 5th, 2025. with unwavering dedication.

NEELA SANTHOSH KUMAR

VERIFIED BY
HUMAN RESOURCES& CODTECH IT SOLUTIONS PVT.LTD
ACADEMIC HEAD

59
THANKU .

60