E-Commerce Website Using MERN Stack

1Akarsh Shrivas, 2Aniket Pawar, 3Pratham Mishra, 4Prof. Satish Chadokar

[email protected]

[email protected]

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. The number of people making purchases
online is increasing exponentially as internet access is available to almost every person in the world. 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.
Keywords— E-commerce, Mern Stack, Framework, Library, React.js, Node.js, Express.js, MongoDB

I. INTRODUCTION

E-commerce, often known as electronic commerce, refers to the buying and selling of products and services via the Internet. E-
commerce is an enormous sector that has expanded tremendously in recent years, offering more advantages and conveniences
than offline businesses. The fashion of interaction between businesses and customers has also changed drastically because of the
internet boom and rapidly innovations and development of the logistics industry, and E-commerce has even made it possible for
small businesses to approach 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. 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. THEORETICAL DESCRIPTION

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 MERN stack

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 is built in addition to Nodejs. Express.js is an open-source server format that is
completely written in JavaScript. It offers excellent features for developing web-based and mobile applications. Express.js also
supports the HTTP and middleware methods, which gives the API a ton of power and is easy 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 view layer of the application.
Facebook created it and now maintains it together with a group of individual 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 simpler because we don't have to repeat recurrent code thanks to these reusable components. All we
would have to do is develop its logic and import the component into the appropriate area 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.

NodeJS 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 high 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 to stand by and wait 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 among 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 Ecommerce Website

IV. RESULTS

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 clicked 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.

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

V. 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 business 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 of 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.

VI. ACKNOWLEDGEMENT
 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.

REFERENCE

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

[2] Mai, N. (2020). E-commerce Application using MERN stack.

[3] Thi Thu Hien Tran. (2022). THE DEVELOPMENT OF AN ECOMMERCE WEB APPLICATION USING MERN STACK.

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

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

[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] Subramanian, V. (2019). MongoDB. In: Pro MERN Stack. Apress, Berkeley, CA.

[8] Monika Mehra, Manish Kumar, Anjali Maurya, Charu Sharma, Shanu. MERN Stack Web Development. Annals of RSCB 2021, 25, 11756-11761.