E-Commerce Website Using MERN Stack

1
Mohd Shoeb, 2Mohd Danish, 3Mohd Razi, 4Salman khan
Department of Computer Science Engineering,
Kamla Nehru Institute of Physical and Social Sciences,

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.

II.LITERATURE SURVEY
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
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.
III. 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.
IV. 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.
 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
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.

V. 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
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
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] Youtube
[2] Google