E-Commerce Website Using MERN Stack

1
Akarsh Shrivas, 2Aniket Pawar, 3Pratham Mishra, 4Prof. Satish Chadokar
Department of Computer Science Engineering,
1-4

SHRI BALAJI INSTITUTE OF TECHNOLOGY AND MANAGEMENT, BETUL, INDIA

1
[email protected]
2
[email protected]
3
[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. 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] 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.

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