ProjectReport Website Development
ProjectReport Website Development
on
MERN Stack Web Development
Submitted By
Nikunj Mani Gupta 21SCSE2030033
Rinkul Singh 21SCSE2030039
Suman Shekhar Das 21SCSE2030013
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
Rinkul Singh(21SCSE2030039)
This is to certify that the above statement made by the candidates is correct to the best of my
knowledge.
Professor
CERTIFICATE
21SCSE2030033 has been held on 20-Dec-2022 and his work is recommended for the award of
MCA
has been held on 20-Dec-2022 and his work is recommended for the award of MCA
21SCSE2030013 has been held on 20-Dec-2022 and his work is recommended for the award of
MCA
3. ER Diagram
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.
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
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.
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
4. Module Description
Customer
Admin
Product
Order
Payment
User 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-