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