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

RAJIV GANDHI PRODYOGIKI VISHWAVIDYALAYA, BHOPAL (M.P.)

Under The Guidance of:

Prof. Satish Chadokar
Department of Computer Science & Engineering.

CANDIDATE NAME ENROLLMENT NO.

AKARSH SHRIVAS 0545CS191004

ANIKET PAWAR 0545CS191007
PRATHAM MISHRA 0545CS191038

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

SHRI BALAJI INSTITUTE OF TECHNOLOGY AND
MANAGEMENT, BETUL (M.P.)
2022-23
 SHRI BALAJI INSTITUTE OF TECHNOLOGY & MANAGEMENT,
BETUL (M.P.)
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. “Akarsh Shrivas” Enrollment No.:
0545CS191004, 2. “Aniket Pawar” Enrollment No.: 0545CS191007, 3. “Pratham
Mishra” Enrollment No.: 0545CS191038 a student of Bachelor of Technology (Computer
Science & Engineering) of Shri Balaji Institute of Technology & Management, Betul
(M.P.) affiliated to Rajiv Gandhi Proudyogiki Vishwavidyalaya, Bhopal (M.P.) during the
academic year 2022 – 2023, This technical project is hereby approved for submission towards
partial fulfilment of the completion for 8th semester degree of Bachelor of Engineering in
Computer Science & Engineering.

Approved & Supervised By

Prof. SATISH CHADOKAR Prof. HEMANT DAWANDE

Co-Ordinator, Department of CSE Department of CSE
SBITM.Betul SBITM.Betul

Prof. PRAVIN MALVIYA Dr. PARESH J. SHAH

HOD CSE Principal
SBITM.Betul SBITM Betul

i
 SHRI BALAJI INSTITUTE OF TECHNOLOGY & MANAGEMENT,
BETUL (M.P.)
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 8th semester of BACHELOR OF
TECHNOLOGY in Department of COMPUTER SCIENCE &
ENGINEERING to SHRI BALAJI INSTITUTE OF TECHNOLOGY &
MANAGEMENT, BETUL (M.P.) is affiliated to RAJIV GANDHI
PROUDYOGIKI VISHWAVIDYALAYA, BHOPAL (M.P.) an authentic
record of our own work carried out in the guidance of PROF. SATISH
CHADOKAR, DEPARTMENT OF COMPUTER SCIENCE &
ENGINEERING.

NAME ENROLLMENT NO. SIGNATURE

1. AKARSH SHRIVAS 0545CS191004

2. ANIKET PAWAR 0545CS191007

3. PRATHAM MISHRA 0545CS191038

ii
 SHRI BALAJI INSTITUTE OF TECHNOLOGY & MANAGEMENT,
BETUL (M.P.)
Department of Computer Science & Engineering

ACKNOWNLEDGEMENT

We express our deepest gratitude to our Principal Dr. Paresh J. Shah for
providing us with an environment to complete our project successfully.

We are deeply indebted to our Head of Department Prof. Pravin Malviya,

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. Satish Chadokar & Project
Coordinator Prof. Vinay Sahu for being 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. Akarsh Shrivas 0545CS191004

2. Aniket Pawar 0545CS191007

3. Pratham Mishra 0545CS191038

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.

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 Virtual DOM and real DOM 8

update process

5. NodeJS event loop 9

6. The relationship between Mongoose, NodeJS and 10

MongoDB

7. Architecture design 21

8. 3-Layer Architectural Pattern 21

9. Use Case Diagram 22

10. Block Diagram 22

11. Sequence Diagram 23

12. Client Side Activity Diagram 24

13. Admin Side Activity Diagram 25

14. DataFlow Diagram 26

15. FlowChart 27

v
 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 19-20
3.2 System Architecture 21
3.3 Design/Diagrams and FlowCharts 22 - 27
OUTPUTS & RESULT 28 - 32
CONCLUSION 33 – 34
REFERENCES 35
PROJECT GROUP MEMBERS PHOTOGRAPHS 36
APPENDICES 37
RESEARCH PAPER & CERTIFICATE 38 - 48
[CHAPTER – 1: - INTRODUCTION]

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.

2
1.2 PROJECT OVERVIEW :-
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
institution digital 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
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 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 THEORETICAL BACKGROUND :-

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

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

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.

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.

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.

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

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

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

10
1.4 HARDWARE & SOFTWARE REQUIREMENTS :-

1.4.1 Hardware Specification :- (Minimum requirement)

Processor : Any processor above 500 MHz

RAM : 1GB
Hard Disk : 80GB
System : Pentium IV 2.4 GHz
Internet Connection : Active

1.4.2 Software Specification :-

Operating System : Any operating system

Web Browser : Any web browser

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

11
[CHAPTER – 2 : - LITERATURE SURVEY]

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,
technical aspects, security considerations, case studies, best practices, and future
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

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.

● It is less user-friendly.
● User must go to the shop and select products.
● It is difficult to identify the required product.
● Description of the product limited.
● It is a time-consuming process.
● Not in reach of distant users.

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

● Product Catalog: The product catalogue will allow users to browse through a wide
range of products and filter them based on their preferences.

● Shopping Cart: The shopping cart will enable users to add products to their cart, review
their orders, and checkout.

● Payment Gateway Integration: The payment gateway integration will allow users to
make secure payments using a variety of payment methods, such as credit cards, debit
cards, and digital wallets.

● Order Management: The order management system will enable businesses to manage
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

15
 communication between the client-side and server-side components.

● Access Control: Access control will be implemented using role-based authentication to

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.

● Regular Security Audits: The proposed system will undergo regular security audits to
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.

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.

17
[CHAPTER – 3 : - SYSTEM ANALYSIS DESIGN]

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:

● User Account Management: The website should allow users to create and manage their
accounts, including personal information, shipping addresses, and payment options.

● Product Catalog: The website should provide a comprehensive catalogue of products,

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.

● Shopping Cart: The website should allow users to add products to their shopping cart,
view the contents of their cart, and proceed to checkout.

● Payment Gateway Integration: The website should integrate with a secure and reliable
payment gateway to facilitate secure online transactions.

● Order Management: The website should allow businesses to manage orders, including
order tracking, order processing, and order fulfillment.

● Customer Service: The website should provide customer service options, such as live
chat, email support, and FAQ section.

Security Requirements:

● The e-commerce website must have the following security features:

● SSL Encryption: The website should use SSL encryption to secure user data and
prevent unauthorized access.

19
 ● User Authentication: The website should require users to create and use strong
passwords to protect their accounts.

● Payment Security: The website should use a secure payment gateway to ensure secure
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: The website should be scalable to accommodate growing user traffic and
transactions.

● Reliability: The website should be reliable and available 24/7 to facilitate sales and
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.

20
3.2 System Architecture :-

Figure 7. Architecture design

Figure 8. 3-Layer Architectural Pattern

21
 3.3 Design/Diagrams and FlowCharts :-

USE CASE DIAGRAM:

Figure 8. Use Case Diagram

BLOCK DIAGRAM:

Figure 9. Block Diagram

22
SEQUENCE DIAGRAM:

Figure 10. Sequence Diagram

23
ACTIVITY DIAGRAM:

Figure 11. Client Side Activity Diagram

24
Figure 11. Admin Side Activity Diagram

25
DATAFLOW DIAGRAM :

Figure 11. DataFlow Diagram

26
FLOWCHART :

Figure 11. FlowChart

27
[CHAPTER – 4 : - OUTPUTS & RESULT]

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

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

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.

31
Figure 16. Cart Page

32
[CHAPTER – 6 : - CONCLUSION]

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.

34
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 Cell Biology, 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-commerce Application using MERN stack.

[1] Subramanian, V. (2019). MongoDB. In: Pro MERN Stack. Apress, Berkeley, CA.

[5] Hirenkumar Pravinbhai Vacchani. (2018). A Critical Study of E-Commerce Market of India. Vidhyayana - An
International n Multidisciplinary Peer-Reviewed E-Journal - ISSN 2454-8596, 4(2).

[6] Ullah, S. E., Alauddin, T., & Zaman, H. U. (2016, January). Developing an E-commerce website. In 2016
International Conference on Microelectronics, Computing and Communications (MicroCom) (pp. 1-4). IEEE.

[7] Niranjanamurthy, M., Kavyashree, N., Jagannath, S., & Chahar, D. (2013). Analysis of e-commerce
and m-commerce: advantages, limitations and security issues. International Journal of Advanced
Research in Computer and Communication Engineering, 2(6), 2360-2370.

[8] Chanana, N., & Goele, S. (2012). Future of e-commerce in India. International Journal of Computing &
Business Research, 8

[10] King, D. N., & King, D. N. (2004). Introduction to e-commerce. Prentice-Hall.

35
PROJECT GROUP MEMBERS' PHOTOGRAPHS

36
APPENDICES :-

Following abbreviations have been used in this document:

ASP : Active Server Pages

JSON : JavaScript Object Notation

BSON : Binary JavaScript Object Notation

PHP : Hypertext Preprocessor

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

JSX : JavaScript Syntax Extension

HTTP : Hypertext Transfer Protocol

HTML : Hypertext Markup Language

CSS : Cascading Style Sheets

REST : Representational State Transfer

API : Application programming interface

URL : Uniform Resource Locator

NPM : Node Package Manager

NoSQL : Non-Structured Query Language

MVC : Model View Controller

UI : User Interface

ODM : Object Data Modeling DOM Document Object Model

JWT : JSON Web Token

B2C : Business to Customer

37
[RESEARCH PAPER & CERTIFICATE]

38
 E-Commerce Website Using MERN Stack
1
Akarsh Shrivas, 2Aniket Pawar, 3Pratham Mishra, 4Prof. Satish Chadokar
1-4
Department of Computer Science Engineering,
Shri Balaji Institute of Technology and
Management

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.

Index Terms: E-commerce, Mern Stack, Framework, Library, React.js, Node.js, Express.js, MongoDB.

I. INTRODUCTION
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.

Published in IJIRMPS (E-ISSN: 2349-7300), Volume 11, Issue 3, May-June 2023

License: Creative Commons Attribution-ShareAlike 4.0 International License

LITERATURE SURVEY
II.
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
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 governments
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 as
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. METHODOLOGY USED

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.

40
 Fig. 1. Three layers of the MERN stack
The following are the components of the MERN stack:
1) MONGOBD: The MERN stack utilizes the database known as MongoDB. It is a NoSQL
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: ReactJS is an open-source client-side JavaScript library that is declarative and flexible in
nature and is used for creating reusable UI components. It is a component-based front-end library that

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.js open-source cross-platform server environment. It is a JavaScript runtime
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.
3) Easy to maintain and scale up.
4) A wide variety of products.
5) Accessible anywhere at any time.
6) Precise and targeted marketing.
VI. RESULTS
The initial version of an electronic commerce application that reproduces an online store was successfully

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

43
with the help of credit/debit card and UPI.

Fig. 6. Cart Page

VII. 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..
VIII. ACKNOWLEDGMENT
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 Cell Biology, 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-commerce Application using MERN stack.
[5] Subramanian, V. (2019). MongoDB. In: Pro MERN Stack. Apress, Berkeley, CA.
44
[6] Hirenkumar Pravinbhai Vacchani. (2018). A Critical Study of E-Commerce Market of India. Vidhyayana
- An International n Multidisciplinary Peer-Reviewed E-Journal - ISSN 2454-8596, 4(2).
[7] Ullah, S. E., Alauddin, T., & Zaman, H. U. (2016, January). Developing an E-commerce website. In
2016 International Conference on Microelectronics, Computing and Communications (MicroCom) (pp.
1-4). IEEE.
[8] Niranjanamurthy, M., Kavyashree, N., Jagannath, S., & Chahar, D. (2013). Analysis of e-commerce and
m-commerce: advantages, limitations and security issues. International Journal of Advanced Research
in Computer and Communication Engineering, 2(6), 2360-2370.
[9] Chanana, N., & Goele, S. (2012). Future of e-commerce in India. International Journal of Computing &
Business Research, 8
[10] King, D. N., & King, D. N. (2004). Introduction to e-commerce. Prentice-Hall.

45
46
47
48