e-ISSN :

INTERNATIONAL JOURNAL OF PROGRESSIVE

2583-1062
RESEARCH IN ENGINEERING MANAGEMENT
AND SCIENCE (IJPREMS) Impact
www.ijprems.com Factor :
Vol. 02, Issue 08, August 2022, pp : 121-132 2.265
[email protected]

FULL STACK WEB APPLICATION USING MERN

Nandan kishor1, Prof. Manoj Tyagi2
1
Master in Technology, Department of Computer Science and Engineering, Technocrats Institute of
Technology, RGPV, Bhopal, India.
2
Assistant Professor, Department of Computer Science and Engineering, Technocrats Institute of Technology,
RGPV, Bhopal, India.
ABSTRACT
Website is collection of webpages and all link together in Homepage tagged with each other. It is composed of text,
audio, video, animation etc. are components of website which we search through browser by connected to Internet. The
web development goes through web content development, client-side/server-side scripting and network security
configuration. We used MERN stack technology to build our project. MERN stands for MongoDB, ExpressJs, ReactJs
and NodeJs. ReactJs is used for making interactive dynamic client side application in html. React help us to create
interfaces single page web application through which we connect to data and backend server , and render them as html.
Express is server side JavaScript framework run inside NodeJs. NodeJs is neither programming language nor framework
it's API backend server, API stands for Application program Interface. MongoDB used for database storage. MongoDB
is non-structure database query language uses for database administration in MERN it's uses JSON file and talk to
React.js front end through server. We use MERN stack to build our Online restaurant web application using MERN. In
this project we used both frontend and backend technology and MERN 3-tier architecture to build our project.
Keywords : MERN, MongoDB, Express JS, React JS, Node JS, API, Bootstrap, CSS, JS, HTML5
1. INTRODUCTION
Websites used for one who searching different kind of information and one who sharing uploading related information.
Full Stack Development which comes real-life project experience back-end and front-end web technologies. We used
MERN stack ReactJS, NodeJS, ExpressJS, and MongoDB.
Web development means creating website using HTML, CSS and JavaScript. The web development process involves
web design, web content development, client-side/server-side scripting and network security configuration. Website is
collection of publicly accessible Interline webpages that share a single domain name. HTML is client side scripting
language used to design static web pages. CSS is used to style web pages like color, background, size etc. JavaScript is
light weight and dynamic web programming scripting language . It is used to make client side dynamic pages. It is open
source cross platform language. Web server is computer that store web pages , sites, app when client want to access these
web pages its serve them. A web application is software application that run on a remote server . In most case web , web
browser are used to assess web application. In MERN stack development ReactJS used as frontend for html, CSS ,
JavaScript and bootstrap. ExpressJS as Web API framework under NodeJs as Web server backend and MongoDB as
Database Management. We used MERN stack to build our Web application Online restaurant application. Where their
you can choose different food items from cruisine. Choose location by nearby restaurant and menu available their.
Clients can Make payment online by various payment option.
MERN technology used to make single page Application . This is a Single Page Website where there are no multiple
html pages instead of it , we have several components which gets active when they are called or used. MERN uses only
JavaScript. Here for payment we have use the RazorPay Payment Gateway to accept the payments from the user and
access their order.
Homepage divided into many section for better Application interface and clients have wonderful experience by visiting
to our website.
2. MAIN COMPONENTS OF BASIC WEBSITE
Collection of linked web pages on web server on single domain is called website it's is called when URL access in
browser through internet. Web pages can categories into two types dynamic web page and static web page. Static web
page only contain static information means user can read only but can't do any modifications. In Dynamic web page it is
possible to change a portion of web page or write into it without changing or loading entire web pages.

@International Journal of Progressive Research In Engineering Management And Science Page |- 121
 e-ISSN :
INTERNATIONAL JOURNAL OF PROGRESSIVE
2583-1062
RESEARCH IN ENGINEERING MANAGEMENT
AND SCIENCE (IJPREMS) Impact
www.ijprems.com Factor :
Vol. 02, Issue 08, August 2022, pp : 121-132 2.265
[email protected]

2.1 HTML - It's stands for hyper text markup language, created by Tim Berners lee in 1991 and published in 1995.
HTML 5 introduced in 2014. HTML is client side scripting language used to design a webpage. HTML can be script in
note pad or any text editor with extension .html or .htm or can also use IDE like visual Studio for best experience.
HTML is use to create a website and become web designer. HTML use to structure web page.
2.2 CSS - It's stands for cascading style sheet it is used to style web page color, size, background etc. It can be define in
three level of style sheet. Inline CSS, Internal or Embedded CSS, External CSS.
Inline CSS - CSS property in the body section attached with the element is known as Inline CSS.
Internal or embedded CSS - CSS rule set should be within HTML file in the head sectionsection or after the </HTML>
tag.
External CSS - When you wanted to change in multiple pages using <link> tag on every page it is in head section and
save that file in CSS extension external in CSS file.

2.3 JavaScript – JavaScript is object oriented scripting language it is light weight program language used in web
development. It create by Brendan Eich in 1995 emplemented by Netscape. It is functional logical part of web
development.
JavaScript is scripting language if the web . JavaScript used millions of webpages to add functionality, validate form,
detect browser and much more.
JavaScript act as both backend and frontend.
JS makes webpage dynamic and functional.

@International Journal of Progressive Research In Engineering Management And Science Page |- 122
 e-ISSN :
INTERNATIONAL JOURNAL OF PROGRESSIVE
2583-1062
RESEARCH IN ENGINEERING MANAGEMENT
AND SCIENCE (IJPREMS) Impact
www.ijprems.com Factor :
Vol. 02, Issue 08, August 2022, pp : 121-132 2.265
[email protected]
3. FRONTEND AND BACKEND TECHNOLOGY
In full stack web development we need both frontend end backend. Frontend is clients side scripting language and
backend is server side scripting language. ReactJS is frontend and ExpressJS , NodeJS backend server side language
MongoDB is backend database administration.
3.1 Frontend
Frontend development is client side development browser or application through which user can interact directly. It is use
creating web user interface frontend mostly deals with HTML, CSS and JavaScript.
Responsive design - Bootstrap is free and frontend development (html and CSS) framework for faster and easier web
development. Bootstrap is being famous for developing with the components that have the ability to follow the property
of responsive design. Responsive design is about to use CSS and HTML resize, hide, shrink, enlarge or to move the
content to look good on any screen. Responsive design is used to allow your page to work for computer, mobile or tablet.
Webpage creation - The web page is document commonly written with HTML that is accessible through internet or other
network using internet browser. The web page accessible by entering URL address.
User friendly web design - Beside the basic elements of web design that makes site beautiful and visual compelling , the
website must always consider to end user . User friendly can be archived by paying attention to the following factors.
Navigation - Site architecture, menus and other navigation tools in web design filter, search and option available.
Multimedia - Relevant video, audio, text, animation and graphics this make web page attractive and allow user to
encourage visitor's to spend more and more time.
Compatibility - Design a website that equally well perform and supported different browser, operating system or machine.
Technology - Advancement of technology give designer freedom to add movement and innovation , allowing for web
design which is always fresh dynamic and professional.
Frontend framework - Frontend framework like Angular, React , JQuery, backbone, Vue use to develop web application
using framework and library.
Frontend is for UI user Interface client side wheareas Backend for logic, database server side.

3.2 Backend
Backend is server side language backend is data access layer , the backend of application is responsible for things like
calculation, business logic, database interaction, and performance. Backend code run on server this means backend
developer not only understand program languages and database but also having knowledge of server architecture as well .
If application is slow, crash often, or constantly through error at user it's likely because of backend problems. There's lot
of tools and framework used in backend development. Example - NodeJs, MongoDB, ExpressJS all comes under
backend development. Backend deals with server as well as database.
All popular program language java, c/cpp, php, python, perl, c# comes under backend functional functional service of
program.

@International Journal of Progressive Research In Engineering Management And Science Page |- 123
 e-ISSN :
INTERNATIONAL JOURNAL OF PROGRESSIVE
2583-1062
RESEARCH IN ENGINEERING MANAGEMENT
AND SCIENCE (IJPREMS) Impact
www.ijprems.com Factor :
Vol. 02, Issue 08, August 2022, pp : 121-132 2.265
[email protected]
API - API stands for Application Programming Interface It is an agreement or a protocol between two or more pieces of
software and they can communicate and consume services and passing data between both of them. Most of backend
programming language support API. Through framework you can build your custom API for others. API is underlying
infrastructure of the web.

3.3 Data and Database

The most important part of backend is to store data . So database is critical part of backend development . Example -
Oracle, MongoDB, MySql, Sql server, postgreSql.
The database is collection of organized data , information and records. The database is information that a person needs in
his personal, business and social . The power and purpose of information is not only in collecting and finding them but
more importantly using them.
DBMS is used to manage a database whereas , SQl is query language used by DBMS . It use to create, delete, shorting,
update, modify, selectselect operations.
MongoDB - It is scalable high performance open source , document oriented database. MongoDB is non-relational
database management system , schema less and contain document. It's architecture build on collection and database. This
database use a document storage format called BSON which is binary style of JSON document.
We use MongoDB as data administration in our project.

@International Journal of Progressive Research In Engineering Management And Science Page |- 124
 e-ISSN :
INTERNATIONAL JOURNAL OF PROGRESSIVE
2583-1062
RESEARCH IN ENGINEERING MANAGEMENT
AND SCIENCE (IJPREMS) Impact
www.ijprems.com Factor :
Vol. 02, Issue 08, August 2022, pp : 121-132 2.265
[email protected]
4. ARCHITECTURE OF MERN STACK
We choose loosely couple Architecture

The MERN architecture allow us to easily construct 3-tier architecture ( frontend , backend and database) entirely using
JavaScript and JSON. Web part as ReactJS, Server part as ExpressJS and NodeJs and database as MongoDB.
MongoDB is NoSql database use high volume of data storage. Open source document oriented database . It store data in
JSON format. MongoDB use BSON to query database.
NodeJs is JavaScript run-time environment built on chrome's V8. Nodejs allow to run JavaScript on server. NodeJs runs
single thread non-blocking , asynchronous programming which is very memory efficient . NodeJs use backend services
such as API.
ExpressJS is flexible NodeJs framework that provide robust set of features for web and mobile application. Its provide
easy routing of request based on HTTP method and URLs. Its allow to set middlewares to response to HTTP request.
Allows dynamic render of html based passing argument to templates.
ReactJS is JavaScript library for building user interface for web and mobile application. React is used to build single
page web application. React allow to create reusable UI components. React-router to handle front end routing.
5. REQUIREMENTS OF PROJECT
Following Requirements -
- Visual Studio code editor
- NodeJS
- ReactJs
- postman
- MongoDB
- ExpressJS
- npm installation
6. DESIGN AND METHODOLOGY
You can easily create and share website designs with Adobe XD. MS paint can also used to design on paper before start
coding. As you see in figure left corner their is logo. Right side button at head section division. Body Section Headline
and left side filter division and right side card division and bottom their is pagination division. Whole homepage divided
into many section division.

@International Journal of Progressive Research In Engineering Management And Science Page |- 125
 e-ISSN :
INTERNATIONAL JOURNAL OF PROGRESSIVE
2583-1062
RESEARCH IN ENGINEERING MANAGEMENT
AND SCIENCE (IJPREMS) Impact
www.ijprems.com Factor :
Vol. 02, Issue 08, August 2022, pp : 121-132 2.265
[email protected]

6.1 Responsive Web design

RWD is about creating web page than can response according to user's screen size.
RWD uses HTML and CSS.
It
RWD automatically adjusted different screen size and view port.
View port is user visual area of webpages varies as per device.
View port for smaller will be smaller (mobile) than the view port of large screen (computer)
We use Bootstrap for making website responsive in nature.
Bootstrap makes development faster and easier.
Includes Html and CSS design templates for form, table, typography, button etc.
Bootstrap is powerfull CSS framework for developing responsive design of website and web app.
6.2 Advantage of JavaScript
It's very fast because any code can run immediately instead of contact the server.
JavaScript having no compilation steps. Instead Interpreter on browser reads JavaScript code.
It's provide dynamic functionality without having server to react shows another page.
JavaScript allows flexibility to place code any where in HTML Document.
7. MERN STACK PART AND THEIR EXECUTION
7.1 NodeJs
Node.js is backend. Backend runs on the server and has no direct interaction with user.
Creates a connection between web and database. Main purpose of backend to listen request send by the front end
application process request and response back with appropriate content.

@International Journal of Progressive Research In Engineering Management And Science Page |- 126
 e-ISSN :
INTERNATIONAL JOURNAL OF PROGRESSIVE
2583-1062
RESEARCH IN ENGINEERING MANAGEMENT
AND SCIENCE (IJPREMS) Impact
www.ijprems.com Factor :
Vol. 02, Issue 08, August 2022, pp : 121-132 2.265
[email protected]
NodeJs is powerful JavaScript runtime environment developed on chrome's VS engine
NodeJs is run time environment contain everything that needed to execute JavaScript code.
Its compile JavaScript code code directly into native machine code.
It enable the developer to run JavaScript code directly into computer instead in a browser.
Module - It's functionality which organise in a single or multiple JavaScript file, and can be reused throughout NodeJS
application.
Types of Modules
Care modules - These are inbuilt and can be used without any installation
Node Package Manager - These include group of modules or packages developed by other developer can be used in
your application by installation.
User Define Modules - These are modules created by you, which you want to reuse in rest of your application.
7.2 MongoDB
It is open source database management system (DBMS) that uses document oriented database modelmodel which support
various forms of data.
It's hold the set of collection and store the data as document.
MongoDB support BSON data (Binary JSON) data structure and complex query language.
Bason Document storage is Binary representation of JSON like document. It gives high speed to store mesh data.
MongoDB contain powerful tool called MongoDB shell, which provides built in support for administering MongoDB
instance and manipulate data using MongoDB query language.
On installation MongoDB you get two parameters MongoDB shell and server.
CRUD operation in MongoDB
Create , Read , Update and Delete operation used to manage data/document within database.

MongoDB compass is IDE for MongoDB provides GUI and easily analysis and perform queries.
7.3 ReactJS
React.js is JavaScript library for building user interface.
React is used in building of single page web application or mobile application , as it is optimal to fetching rapidly
changing data needed to be recorded.
Features of react

@International Journal of Progressive Research In Engineering Management And Science Page |- 127
 e-ISSN :
INTERNATIONAL JOURNAL OF PROGRESSIVE
2583-1062
RESEARCH IN ENGINEERING MANAGEMENT
AND SCIENCE (IJPREMS) Impact
www.ijprems.com Factor :
Vol. 02, Issue 08, August 2022, pp : 121-132 2.265
[email protected]
React components provide many inbuilt component liberary for faster execution
Element like JSX, Components, Props, State and virtual DOM, let react create application faster with small code size ,
easy development and rich user interface.
Top cooperation such as Facebook, New York Times, Yahoo! Mail, Netflix, Instagram and much more use it to solve
their user interface related issues.
It provide efficient DOM manipulation functionality, which improve speed and faster execution.

7.4 ExpressJS
Express is minimal and flexible NodeJS web application framework that provide a robust set of features for web and
mobile application. Express is used to create server side of web application.
Express uses middlewares function, The function of middlewares function that have to the request object (req) and
response object (res) to the following function of the intermediate processing in the cycle "request-response" Application.
Feature of Express
- Fast server side development
- Middlewares
- Routing
- Template
- Debugging
- Time efficient

@International Journal of Progressive Research In Engineering Management And Science Page |- 128
 e-ISSN :
INTERNATIONAL JOURNAL OF PROGRESSIVE
2583-1062
RESEARCH IN ENGINEERING MANAGEMENT
AND SCIENCE (IJPREMS) Impact
www.ijprems.com Factor :
Vol. 02, Issue 08, August 2022, pp : 121-132 2.265
[email protected]

8. WEBSITE BUILDING USING MERN TECHNOLOGY

We have made Online Restaurant for food delivering from various best restaurant from different cities and state. User can
find restaurant and cuisine and place a order. The section also provide quick search and online payment through Razor
pay choosing banking option available. User can create their account and log in through ID provided.

HTML, CSS, JavaScript is used for making website. Bootstrap framework is used to make website responsive.
This is single page web application that's why we used ReactJS. NodeJS is used as sever API using ExpressJS framework
and database connectivity through MongoDB.

@International Journal of Progressive Research In Engineering Management And Science Page |- 129
 e-ISSN :
INTERNATIONAL JOURNAL OF PROGRESSIVE
2583-1062
RESEARCH IN ENGINEERING MANAGEMENT
AND SCIENCE (IJPREMS) Impact
www.ijprems.com Factor :
Vol. 02, Issue 08, August 2022, pp : 121-132 2.265
[email protected]
We have also used Filter for finding nearby location and cuisine types of food available and cost efficiency range. We
divided whole page into division section for various options and categories. With Great GUI desktop view we built our
website.
9. DISCUSSION
This project build using MERN stack where we started build app with HTML, CSS, JavaScript, Bootstrap for web app
development. We use backend Express.js, Node.js and MongoDB. Express for Node.js web framework. Node.js as
JavaScript web server and MongoDB as document database. Build frontend using ReactJS client side JavaScript
framework. Using these technology we made single page web application using ReactJS. We style the web page by great
visual background wallpaper and font style. Add border around element and position them properly. A user generally
looks user nearby for reason fastest delivery that's why we given option to select restaurant nearby and place order. A
option should provided to choose desired location that allow user to search for restaurant in particular area. We provided
user with quick search option like breakfast, lunch etc. Moreover, user who visit website will fully satisfied with outlook
and option available for customer service and re-visit and share our app with others.
10. CONCLUSION
A paper show details analysis to how to make MERN full stack web products. We have discussed different technology,
framework, library using to MERN stack application. Web application online restaurant design using these technologies.
MERN stack development used 3-tier architecture Frontend development ReactJS using HTML, JavaScript, CSS and
Bootstrap. Backend development using ExpressJS web framework and NodeJs web server. Database management used
using MongoDB. Three layers of MERN stack as Web or Frontend level, second center or server level and Database as
Backend level. MERN stack is very famous over other stack technology used for designing and creating website. The
website contains online restaurant order food items from available restaurant nearby by cuisine items customer looking
for delicious dinner or breakfast. Our web application contains all necessary section help customer to choose from such
location, Cuisine, Price range. Customer can Sign up for LogIn to our website. Our website simplified by provide images,
graphics and font style to beautifying website and customer overall experience and enhanced web page speed and content
provided.
Appendices
Appendix I. Homepage Website HTML, CSS, JavaScript code

@International Journal of Progressive Research In Engineering Management And Science Page |- 130
 e-ISSN :
INTERNATIONAL JOURNAL OF PROGRESSIVE
2583-1062
RESEARCH IN ENGINEERING MANAGEMENT
AND SCIENCE (IJPREMS) Impact
www.ijprems.com Factor :
Vol. 02, Issue 08, August 2022, pp : 121-132 2.265
[email protected]
Application js Website code

Homepage Websites View

@International Journal of Progressive Research In Engineering Management And Science Page |- 131
 e-ISSN :
INTERNATIONAL JOURNAL OF PROGRESSIVE
2583-1062
RESEARCH IN ENGINEERING MANAGEMENT
AND SCIENCE (IJPREMS) Impact
www.ijprems.com Factor :
Vol. 02, Issue 08, August 2022, pp : 121-132 2.265
[email protected]

11. REFERENCES
[1] Pro MERN Stack, Vasan Subramanian Bangalore, Karnataka, India. ISBN-13 (pbk): 978-1-4842-4390-9.
[2] Hausman, A. V., &Siekpe, J. S. . The effect of web interface features on consumer online purchase intentions.
Journal of Business Research, 62, 5-13.
[3] Ethier, J., Hadaya, P., Talbot, J., &Cadieux, J. . Interface design and emotions experienced on B2C Web sites:
Empirical testing of a research model. Computers in Human Behavior, 24, p.2771-p.2791.
[4] Darley, W. K., Blankson, C., &Luethge, D. J. Toward an Integrated framework for online consumer behavior
and decision-making process: A review. Psychology & Marketing, 27, 94-116
[5] https://docs.mongodb.com
[6] http://expressjs.com/en/api.html
[7] https://reactjs.org/docs/getting-started.html
[8] https://nodejs.org/en/docs/
[9] https://web.dev/progressive-webapps/#i18n.paths.progressive_web_apps.topics.introd

@International Journal of Progressive Research In Engineering Management And Science Page |- 132