A Project Report

on
MERN Stack Web Development

Submitted in partial fulfillment of the

requirement for the award of the degree of

Master of Computer Applications

Under The Supervision of

Dr. Raju Ranjan
Professor

Submitted By
Nikunj Mani Gupta 21SCSE2030033
Rinkul Singh 21SCSE2030039
Suman Shekhar Das 21SCSE2030013

SCHOOL OF COMPUTING SCIENCE AND ENGINEERING

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
GALGOTIAS UNIVERSITY, GREATER NOIDA
INDIA
DECEMBER, 2022
 SCHOOL OF COMPUTING SCIENCE AND
ENGINEERING
GALGOTIAS UNIVERSITY, GREATER NOIDA

CANDIDATE’S DECLARATION

I/We hereby certify that the work which is being presented in the thesis/project/dissertation,
entitled “MERN Stack Web Development” in partial fulfillment of the requirements for the
award of the MCA submitted in the School of Computing Science and Engineering of Galgotias
University, Greater Noida, is an original work carried out during the period of month, Year to
Month and Year, under the supervision of Dr. Raju Ranjan, Professor, Department of Computer
Science and Engineering/Computer Application and Information and Science, of School of
Computing Science and Engineering , Galgotias University, Greater Noida
The matter presented in the thesis/project/dissertation has not been submitted by us for the

award of any other degree of this or any other places.

Nikunj Mani Gupta(21SCSE2030033)

Rinkul Singh(21SCSE2030039)

Suman Shekhar Das(21SCSE2030013)

This is to certify that the above statement made by the candidates is correct to the best of my

knowledge.

Dr. Raju Ranjan

Professor
 CERTIFICATE

The Final Thesis/Project/ Dissertation Viva-Voce examination of Nikunj Mani Gupta

21SCSE2030033 has been held on 20-Dec-2022 and his work is recommended for the award of

MCA

Signature of Examiner(s) Signature of Supervisor(s)

 CERTIFICATE

The Final Thesis/Project/ Dissertation Viva-Voce examination of Rinkul Singh 21SCSE2030039

has been held on 20-Dec-2022 and his work is recommended for the award of MCA

Signature of Examiner(s) Signature of Supervisor(s)

 CERTIFICATE

The Final Thesis/Project/ Dissertation Viva-Voce examination of Suman Shekhar Das

21SCSE2030013 has been held on 20-Dec-2022 and his work is recommended for the award of

MCA

Signature of Examiner(s) Signature of Supervisor(s)

 Abstract
Electronic Commerce is process of doing business through computer networks via
internet. A person sitting on his chair in front of a computer can access all the
facilities of the Internet to buy or sell the products in one go without having to visit
physically[10]. The traditional method of shopping is to go out physically and
making physical effort to search and get the product. The aim of this project is to
create and design an e-commerce platform using new technology called MERN
Stack technology such as: MongoDB, Express JS framework, ReactJS library, and
NodeJS platform[3,7]. The basic e-commerce platform consists of several tools and
methodology to provide home delivery services of products including online
payment, selection and choice of product[2]. Sign In/Login methods are used to
differentiate one user from other, creating dashboard for the list of products using
MERN Stack. Since then this is the matter of project to create online web application
assessable across globe and available to even small scale sellers and For customers,
they can quickly search for urgent products from their nearby stores[6]. For a
developing country advancement in the field of e-commerce is essential.
 List of Tables
Table
Table Name
No.
1. Table for User Data

2. Table for Seller Data

3. Table for Order Data

4. Table for Payment Data

5. Table for Product Data

 List of Figures
Figure
Table Name
No.
1. Class Diagram

2. Flow Chart Diagram

3. ER Diagram

4. Module Description Diagram

 Topic Page
No
Chapter Abstract 2
1 Introduction 6
1.1 Existing Problem 6
1.2 Proposed Solution 6
1.3 Tools and Technology 6,7
1.4 Result and Output 7
2 Literature Survey 8,9
3 Design 10
3.1 Module Description 10
3.2 Flow Chart 11
3.3 Class Diagram 12
3.4 ER Diagram 12
3.5 Use Cases 13
4 Module description 14
5 Conclusion and Future Scope 15
6 References
 CHAPTER-1
1. Introduction

We all know that technology has become an essential tool for online marketing these
days. If we see all over the world most of the people are showing interest to buy
things in online[4,9]. However, we can see that there are many small shops and
grocery stores are selling their things offline. With this type of selling most of us
will face bad experience. for instance, in some shops seller has the product to sell in
the offer but the buyer may not know about it, or the customer may need the product
urgently then he will go to the shop, but the product is out of stock, in that case, he
will face bad experience. Moreover, in online shopping customers can select a wide
range of products based upon their interests and their price also, one can compare
prices also from one store to another by using online shopping[1,5,7]. By
encountering the all problems and weaknesses of the offline shopping system,
creating an E-commerce web-application is necessary for searching and shopping in
each shop[4,8]. These days we have seen so many e-commerce websites are created
like Flipkart, Amazon, Myntra one can easily buy their necessary products by using
these websites[3]. By using these types of websites one can buy their products by
staying in their home.

1.1 Existing Problem

 The only way for a customer to purchase goods is to physically visit a store.
 Prices vary widely between retailers.
 Traditionally, the targeted market has been quite small in the business world.
 Customers have no idea where to look for specific products.
 On other websites, we are unable to negotiate with retailers.
 In some other web apps, we are unable to have live conversations with stores.

1.2 Proposed Solution

The work proposed in this paper is a work on e-commerce platform for online
commercial business that uses technology stack called MERN stack[1]. M for
mongoDB , E for express , R for reactJS , N for nodeJS.The project include
different item arranged sequentially in order to get easily accessible.Online
payment facilitator such as Paytm is included so as to avoid payment
insecurities[7].
1.3 Tools and Technology

 HTML - The HyperText Markup Language or HTML is the standard

markup language for documents designed to be displayed in a web browser.
It can be assisted by technologies such as Cascading Style Sheets and
scripting languages such as JavaScript.

 CSS - Cascading Style Sheets is a style sheet language used for describing
the presentation of a document written in a markup language such as HTML
or XML. CSS is a cornerstone technology of the World Wide Web,
alongside HTML and JavaScript

 JavaScript - JavaScript (JS) is a lightweight, interpreted, or just-in-time

compiled programming language with first-class functions. While it is most
well-known as the scripting language for Web pages, many non-browser
environments also use it, such as Node.js, Apache CouchDB and Adobe
Acrobat

 React - React (also known as React. js or ReactJS) is a free and open-source

front-end JavaScript library for building user interfaces based on UI
components. It is maintained by Meta (formerly Facebook) and a community
of individual developers and companies.

 Node - Node.js is an open-source server environment. Node.js is cross-

platform and runs on Windows, Linux, Unix, and macOS. Node.js is a back-
end JavaScript runtime environment. Node.js runs on the V8 JavaScript
Engine and executes JavaScript code outside a web browser.

 Express - Express.js, or simply Express, is a back end web application

framework for building RESTful APIs with Node.js, released as free and
open-source software under the MIT License. It is designed for building web
applications and APIs. It has been called the de facto standard server
framework for Node.js

 MongoDB - MongoDB is a source-available cross-platform document-

oriented database program. Classified as a NoSQL database program,
MongoDB uses JSON-like documents with optional schemas. MongoDB is
developed by MongoDB Inc. and licensed under the Server Side Public
License which is deemed non-free by several distributions.
  AWS - Amazon Web Services, Inc. is a subsidiary of Amazon that provides
on-demand cloud computing platforms and APIs to individuals, companies,
and governments, on a metered pay-as-you-go basis. These cloud computing
web services provide distributed computing processing capacity and
software tools via AWS server farms

 Paytm payments gateway - Payment Gateway is a service which processes

payments via Debit/Credit Card, Wallets, NetBanking, EMI and UPI for
merchants from their customers. A payment gateway can be integrated in
any website or mobile application that sells a product or service as well as a
point of sale in a retail store.

1.4 Result and Output-

This project's end result will be a MERN Stack-based e-commerce web app with
payment gateway that allows users to shop products and bargain with retailer
through the comfort of their own homes[6].
 CHAPTER-2
2. Literature Survey

The goal of the research is to learn about the basic parts of MERN Stack technology,
like MongoDB, ExpressJS, ReactJS, and the NodeJS platform[5]. Using the basic
features of an e-commerce web application, such as sign-up, sign-in, showing
dashboards, and showing store categories and products[8,10]. Using MERN Stack
technology, we built a web app that lets people shop at online stores and pay for
things. Set up admin functions for the website, like managing users and stores,
keeping track of statistics, and making reports[4]. Since then, this topic has been set
to study and make an online product search website so that small grocery stores and
groceries can post and manage their products right on the website[6]. website system
and branding. For customers, they can quickly find what they need from stores close
by. Customers can contact the store owner directly to talk more about the products
they're looking for based on the search results[2].
React.JS-
It is a JavaScript toolkit used to create modular user interface (UI) elements.
Following is the definition from React.JS official documentation: A library for
creating modular user interfaces is called React[7]. React essentially makes it
possible to create massive, complicated online applications that can alter their data
without requiring further page refreshes.
NODE JS-
Node.js is a free, open-source system application and server environment. NodeJS
is an independent development platform built on Chrome's JavaScript that lets us
quickly and easily build web applications[5,8].
EXPRESS JS-
Express.js is a framework that is made on top of Node.js. It has many advanced
features for building websites and apps for mobile devices. Express.js works with
HTTP, which makes the API very reliable, powerful, and easy to use[6]. Express
adds extra features for developers that make their programming environment better
without slowing down NodeJS[2].
MONGO DB-
MongoDB is an open source database that is also the most popular NoSQL database
in use today[2]. It is written in a programming language that is one of the most
widely used ones today[6].
JAVASCRIPT-
JavaScript is a scripting, object-oriented and cross-platform programming language.
Objects of host environment can be connected to JavaScript and arranged in such a
way so that it can be operated[10].
[1] Hoque, S. (2020). Full-Stack React Projects: Learn MERN Stack
Development by Building Modern Web Apps Using MongoDB, Express,
React, and Node.js, 2nd Edition. United Kingdom: Packt Publishing.
[2] Wilson, E. (2018). MERN Quick Start Guide: Build Web Applications with
MongoDB, Express.js, React, and Node. United Kingdom: Packet Publishing.
[3] L., R. (2016). Express.js: Guide Book on Web FrameworkforNode.jss. (n.p.):
CreateSpace Independent Publishing Platform.
[4] Naimul Islam Naim, ReactJS: An Open-Source JavaScript library for front-
end development, Metropolia University of Applied Sciences, accessed on 1
Jan 2022
[5] Wikipedia.org,’AngularJS’ [Online]. Available:
https://en.wikipedia.org/wiki/AngularJS .
[6] Cloudboost.io,’MEAN and MERN’ [Online]. Available:
https://blog.cloudboost.io/mean-and-mern-stacks-eb4cee991390. [Accessed:
Feb- 2018]
[7] Angular.io,’AngularJS Documentation’ [Online]. Available:
https://angular.io .
[8] MongoDB.com,’MongoDB Official’ [Online]. Available:
https://www.mongodb.com/ . W3schools.com,’AngularJS’ [Online].
Available: https://www.w3schools.com/angular/angular_intro.asp
[9] Velliangiri, S., Karthikeyan, P., Xavier, V. A., & Baswaraj, D. (2021).
Hybrid electro search with genetic algorithm for task scheduling in cloud
computing. Ain Shams Engineering Journal, 12(1), 631-639.

[10] Velliangiri, S., & Karunya, P. K. (2020, January). Blockchain

Technology: Challenges and Security issues in Consensus algorithm. In
2020 International Conference on Computer Communication and
Informatics (ICCCI) (pp. 1-8).
 Chapter -3
3. Design-

3.1 Module Description

The following Module of the project will be implemented: Customer module, Seller Module,
Bidding Module, Product module, Order management module.
3.2 Flow Chart
3.3 Class Diagram
3.4 ER Diagram

3.5 Use Cases

 Customers can look at a list of products and buy them.
 The client has the option to accept or counteroffer the product price.
 Seller and customer can haggle over price.
 Customers can put them in their shopping basket and continue their shopping.
 The customer can use the Paytm Payments Gateway to send the seller the
decided amount.
 Both the buyer and the seller will receive an invoice after the payment has
been processed.
 Chapter -4

4. Module Description

There are following modules in project-

 Customer
 Admin
 Product
 Order
 Payment
User Module:-

 Customer can view/search products without login.

 Customer can also add/remove product to cart without login.
 When customer try to purchase product, then he/she must login to
system.
 After creating account and login to system, he/she can place order.
 If customer click on pay button, then their payment will be successful
and their order will be placed.
 Customer can check their ordered details by clicking on orders button.
 Customer can see the order status (Pending, Confirmed, Delivered)
for each order
 Customer can send feedback to admin .
Admin Module-

 Admin can provide username, email, password and your admin account will
be created.
 After login, there is a dashboard where admin can see how many customers
is registered, how many products are there for sale, how many orders placed.
 Admin can add/delete/view/edit the products
 Admin can view/edit/delete customer details.
 Admin can view/delete orders.
 Admin can change status of order (order is pending, confirmed, out for
delivery, delivered)
 Admin can view the feedbacks sent by customers.
DataBase-
Features of the project-

 Login/Signup User Account

 Update Profile/Password User Account
 Reset Password Mail using Sendgrid
 Cart Add/Remove Items | Update Quantities
 Save For Later Add/Remove Items
 Wishlist Add/Remove Items
 Products Pagination
 Product Search
 Product Filters Based on Category/Ratings | Price Range
 Shipping Info in Session Storage
 My Orders (With All Filters)
 Order Details of All Ordered Item
 Users will receive mail when order placed with all details
 Review Products User Account
 Admin: Dashboard access to only admin roles
 Admin: Update Order Status | Delete Order
 Admin: Add/Update Products
 Admin: Update User Data | Delete User
 Admin: List Review of Product | Delete Review
 Stock Management: Decrease stock of product when shipped
 Chapter -5

5. Conclusion and Future Scope

E-commerce is almost everywhere from selling/buying products, services and

keeping digital cart e-commerce is everywhere. Not only it is popular but also the
requirement of today’s era when people are digitally connected everywhere and
everything is just a click away. This project is build on a technology stack called
MERN stack[10] which facilitates thedigital payment gateway interface , sorting of
products based on lowest or highest price, searching the product by its name. It also
has an functionality of storing user information like profile and history of searched
items and all this happening over MongoDB[7,9] a database server that store,
retrieve and facilitates data. In Current computing based e commerce , B2B
commerce B2C commerce is very popular and growing at pace. As compared to the
previous models, the proposed model exhibits far better results as far as the
consumer and retailer are concerned.
Stretch goals- bidding system, chat bot, delivery section.
 Chapter-6
6. References

[11] Hoque, S. (2020). Full-Stack React Projects: Learn MERN Stack

Development by Building Modern Web Apps Using MongoDB, Express,
React, and Node.js, 2nd Edition. United Kingdom: Packt Publishing.
[12] Wilson, E. (2018). MERN Quick Start Guide: Build Web Applications
with MongoDB, Express.js, React, and Node. United Kingdom: Packet
Publishing.
[13] L., R. (2016). Express.js: Guide Book on Web FrameworkforNode.jss.
(n.p.): CreateSpace Independent Publishing Platform.
[14] Naimul Islam Naim, ReactJS: An Open-Source JavaScript library for
front-end development, Metropolia University of Applied Sciences, accessed
on 1 Jan 2022
[15] Wikipedia.org,’AngularJS’ [Online]. Available:
https://en.wikipedia.org/wiki/AngularJS .
[16] Cloudboost.io,’MEAN and MERN’ [Online]. Available:
https://blog.cloudboost.io/mean-and-mern-stacks-eb4cee991390. [Accessed:
Feb- 2018]
[17] Angular.io,’AngularJS Documentation’ [Online]. Available:
https://angular.io .
[18] MongoDB.com,’MongoDB Official’ [Online]. Available:
https://www.mongodb.com/ . W3schools.com,’AngularJS’ [Online].
Available: https://www.w3schools.com/angular/angular_intro.asp
[19] Velliangiri, S., Karthikeyan, P., Xavier, V. A., & Baswaraj, D. (2021).
Hybrid electro search with genetic algorithm for task scheduling in cloud
computing. Ain Shams Engineering Journal, 12(1), 631-639.

[20] Velliangiri, S., & Karunya, P. K. (2020, January). Blockchain

Technology: Challenges and Security issues in Consensus algorithm. In
2020 International Conference on Computer Communication and
Informatics (ICCCI) (pp. 1-8).