10 II February 2022

https://doi.org/10.22214/ijraset.2022.40209
 International Journal for Research in Applied Science & Engineering Technology (IJRASET)
ISSN: 2321-9653; IC Value: 45.98; SJ Impact Factor: 7.538
Volume 10 Issue II Feb 2022- Available at www.ijraset.com

Review on Study and Usage of MERN Stack for

Web Development
Sumangala A. Bafna1, Pratiksha D. Dutonde2, Shivani S. Mamidwar3, Monali S. Korvate4, Prof. Dhiraj Shirbhare5
1, 2, 3, 4, 5
Department of Computer Engineering, Government College of Engineering Yavatmal, Maharashtra, India,
5
Assistant Professor, Government College of Engineering Yavatmal, Maharashtra, India Dr. Babasaheb Ambedkar Technological
University Lonere, India

Abstract: Building, creating, and maintaining websites is known as web development. Abandoning the traditional method of
web development (HTML, CSS, JavaScript), MERN stack includes four key technologies namely: MongoDB, Express.JS,
React.JS and Node.JS. Clearly, it is a JavaScript Stack and it allows smooth development and faster deployment. The main
contribution of this work lies in the deep understanding of each technology component on the stack.
Keywords: ReactJS, NodeJS, MongoDB, ExpressJS, MERN

I. INTRODUCTION
MERN is a web development stack that helps you to create both Web and Mobile applications. React Native is one of the popular
hybrid (supports both android and iOS) mobile development framework which is based on JavaScript and React JS. So once we
master MERN stack, learning React Native is just easy. You can build the mobile app UI using React Native and back-end with
Node JS.As JavaScript is used throughout and across the stack, developers don’t need to learn and change gears to work with a
different technology, enabling a fast learning curve. The entire stack is very easy to learn and good fit for beginners. It is widely
adopted in the web industry. Developer community around MERN stack is very huge and growing exponentially. MERN Stack is
one of the variations of MEAN, here MEAN is also comprises of four technologies, i.e., M is for MongoDB, ' E ' is for Express, ' A '
is for Angular.js, and ' N ' is for Node, here if you will observe, then you can identify that in MEAN, ' A ', i.e., Angular.js is replaced
by ' R ', i.e., React.js in MERN, the main reason behind is - MERN Stack is mainly used for faster development of smaller
applications as compared with MEAN, MEAN stack is a mainly better option for large-scale applications.

II. TECHNOLOGY
A. Overview of Technologies
Diagram 1: Overview of Technology

© IJRASET: All Rights are Reserved | SJ Impact Factor 7.538 | ISRA Journal Impact Factor 7.894 | 178
 International Journal for Research in Applied Science & Engineering Technology (IJRASET)
ISSN: 2321-9653; IC Value: 45.98; SJ Impact Factor: 7.538
Volume 10 Issue II Feb 2022- Available at www.ijraset.com

1) MongoDB: MongoDB is a NOSQL, open-source-available cross-platform document-oriented database program. It uses JSON-
like documents with optional schemas. Licensed under the Server-Side Public License (SSPL), MongoDB Inc. is the father of
MongoDB.
2) React.js: React (also known as React.js or ReactJS) is a free and open front end JavaScript library to create user interface or UI
components. Saved by Facebook and the community of individual developers and companies. React can be used as a basis for
the development of single page or mobile applications. However, the React is like that only concerned with state administration
and delegating that status to the DOM, so to create Responsive applications often require the use of additional libraries to route,
as well as the performance of a specific client side. Node. js: episode.
3) Node.js: Node.js is an open source, cross platform, JavaScript background environment that uses V8 engine and uses JavaScript
code offline browser. Node.js allows developers to use JavaScript to write command line tools and with server-side scripting -
uses scripts on the server side to generate dynamic web page content before the page is sent to the user's web browser. As a
result, Node.js stands for "JavaScript Everywhere" paradigm, which includes web application development next to one
programming language, there are different server-side languages and client-side notes. Although .js is an extension of the
standard JavaScript code file extension, the word "Node.js" does not refer to a specific file in this context and is simply a name
of the product. Node.js has an event-driven project that can create asynchronous I / O. These design decisions aim to improve
performance and balance in web applications with many input / download functions, as well as real-time web applications (e.g.,
real-time communication systems and browser games).
4) Express.js: Express.js: Express.js, or just Express, is the backbone of Node.js, released as free and open-source software under
MIT license. Built building web applications and APIs. It is called a standard de facto server Node.js frame. The original
author, TJ Holowaychuk, described it as Sinatra-inspired server which means it is small compared to most available features as
plugins. Express is the back part of popular development stacks like MEAN, MERN or MEVN stack, and MongoDB
information software and Previous JavaScript framework or library
III. MONGODB
MongoDB is a documentary site designed to facilitate application development and measurement. If your app stores any data (user
profiles, content, comments, uploads, events, etc.), you will need an easy-to-use site such as React, Express, and Node. This is
where MongoDB comes from. to: the JSON documents created at the end of your React.js can be sent to the Express.js server,
where they can be processed and (possibly allowed) stored directly in MongoDB for later retrieval.MongoDB stores data in
documents like JSON and these documents also support arrays and objects placed in the nest. Example:

{ “id”: objectid=(“e4asd452a2789asdfw”), “title”: “MONGODB”, “content”: “MongoDB is a non-relational database”, “comments: [

{“name” : “abc”, “email”: “abc@gmail.com”},
{“name” : “xyz”, “email”: “xyz@gmail.com”}
]
}
Diagram 2
MongoDB Tools

© IJRASET: All Rights are Reserved | SJ Impact Factor 7.538 | ISRA Journal Impact Factor 7.894 | 179
 International Journal for Research in Applied Science & Engineering Technology (IJRASET)
ISSN: 2321-9653; IC Value: 45.98; SJ Impact Factor: 7.538
Volume 10 Issue II Feb 2022- Available at www.ijraset.com

A. MongoDB Compass
1) Connect to the data using our multi-tasking GUI. Apply updates, retrieve data, and complete other important tasks - all from a
single user interface.
2) Get the data you need - quickly. Search your documents and collections directly in the Compass query bar.
3) Drag and drop the connecting pipe maker. Create pipelines from 200+ operators - and send them in your preferred language for
use within your application.
4) Access MongoDB Shell directly from Compass. Control your usage by using the commands in the embedded MongoDB Shell.
5) Import and export data as required. Compass allows you to easily import and export JSON and CSV files to or from your
collections.
6) Visualize, verify, and analyze the schema. Understand the structure of your documents. Create, update, and apply schema in all
collections.
7) Check the functionality of the question with granular details. Explore each question - and then divide it into several sections -
with the Visual Explain Program.
8) Prepare questions for reference analysis. View index usage and add or remove references to improve query performance.

a) MongoDB Shell: Use the MongoDB Shell to connect, configure and work with your database. The new MongoDB Shell lets
you connect to MongoDB to work with your data and configure your database. With its enhanced usability features (intelligent
autocomplete and syntax highlighting, easy to understand error messages and contextual help), it’s the quickest way to work
with MongoDB and Atlas.
Four distinguished features of MongoDB Shell are:
 Syntax Highlighting: Input and output are easy to read with color reading.
 Clear Error Messages: When something goes wrong, error messages are clear and to the point.
 Intelligent Autocomplete: Gives you autocomplete options based on the version of the server you are connected to.
 Extensible with Snippets: Add functionality to the MongoDB Shell with the built-in Snippets functionality.

b) MongoDB for VS Code: Easily work with MongoDB databases directly from Visual Studio Code. The best way to prototype
your CRUD operations and MongoDB commands:
 Edit and run your playgrounds to see the results immediately
 MongoDB Syntax Highlighting
 Intelligent autocomplete for commands, operators and database, collection and field names
 Stage snippets to create aggregations quickly

B. What We Can Do

Diagram 3
Features of MongoDB

© IJRASET: All Rights are Reserved | SJ Impact Factor 7.538 | ISRA Journal Impact Factor 7.894 | 180
 International Journal for Research in Applied Science & Engineering Technology (IJRASET)
ISSN: 2321-9653; IC Value: 45.98; SJ Impact Factor: 7.538
Volume 10 Issue II Feb 2022- Available at www.ijraset.com

1) Store and query your data

2) Transform data with Aggregations
3) Secure access to your data
4) Deploy and scale your database

Important features of MongoDB are:

a) MongoDB has very high performance and data persistence compared to other information sites due to the presence of its
positive features such as identification, rating, duplication, etc. Very good.
b) The second feature is Indexing. In MongoDB, every data item has a specific index, divided into primary and secondary indexes.
With this identification, retrieving data is easy for the user; save a lot of time.
c) Third Feature Non-Schema Website: MongoDB has one of the best features, which means that a single set can hold different
types of documents in it. Due to this unusual feature, MongoDB provides great flexibility in information. On the MongoDB
website, a single collection includes multiple texts, and these documents may include different numerical values, fields, and
more. One document does not have to be required to be associated with other documents, as is the case with a relationship site.
d) Fourth aspect is document retention. Here MongoDB data is not stored in a table but in documents, provided with a unique id,
which allows for more flexibility and easier retrieval. Plus, it makes it faster.
e) Lastly, MongoDB has easy-to-set environment.

IV. EXPRESS
The next level down is the Express.js server-side template, which runs inside the Node.js server. Fast and Minimal. Express.js has
powerful URL router models (matching incoming URL and server function), and handling HTTP requests and responses. By
making XML HTTP Applications (XHRs) or GETs or POSTs from the beginning of your React.js, you can connect to Express.js
services that enable your application. Those services use MongoDB's Node.js drivers, or by calling back to use Promises, to access
and update data on your MongoDB website.

Diagram 4
Express Architecture

A. Other important Features of Express

1) If you want to perform additional tasks and tasks in any request and response, you can easily use the various intermediate
modules available in Express. A request is a message that comes to the server to request something, and the Response is a
message sent by the server to the client in the form of the result of whatever the client requested. In the event that you make a
mistake and want to fix it, you can easily fix it using the middleware of debugging.

© IJRASET: All Rights are Reserved | SJ Impact Factor 7.538 | ISRA Journal Impact Factor 7.894 | 181
 International Journal for Research in Applied Science & Engineering Technology (IJRASET)
ISSN: 2321-9653; IC Value: 45.98; SJ Impact Factor: 7.538
Volume 10 Issue II Feb 2022- Available at www.ijraset.com

2) Middleware is used somewhere during the life cycle of a request or response in the form of a code. It is widely used to enhance
performance or improve webserver behavior. Express also helps you create a REST API (Representational State Transfer
Application Programming Interface). REST APIs also known as the RESTful API, is highly compatible with REST architecture
style constraints, and also allows interaction with RESTful web services. The great advantage of the REST API is that it offers
great flexibility; uses HTTP requests to access and process data.
3) Express is very easy to connect to Databases like MongoDB. Based on HTTP methods and URLs, Express lets you define
routes for your application.
4) Route aims primarily to define the code that needs to be done in response to any request received by the server. Route is usually
done based on the sequence of URL patterns and the HTTP method, which is associated with the application.
5) The flow of data into a website design can be easily implemented using two template engines, EJS and Jade, provided by
Express. Express has a large third-party add-on suite so engineers can use it to provide better performance, help increase safety
level, and improve speed. It works very well and is measurable; one can easily find it anywhere and use it simultaneously in
different programs, and very quickly.
6) Express makes the Node.js web and mobile app development easier and faster. Express has a very simple natural setting. One
can easily set up Express on his system and configure it without much effort.

Diagram 5
Working Architecture of Express

Role of Express on MERN

© IJRASET: All Rights are Reserved | SJ Impact Factor 7.538 | ISRA Journal Impact Factor 7.894 | 182
 International Journal for Research in Applied Science & Engineering Technology (IJRASET)
ISSN: 2321-9653; IC Value: 45.98; SJ Impact Factor: 7.538
Volume 10 Issue II Feb 2022- Available at www.ijraset.com

The Express web application framework works with NodeJS. Together, they build a web app backend, making sure the interaction
between the app and the user goes smoothly. Each time a user performs a task within a web interface, the request is sent to the
backend. Here, the request is verified and processed, following the request for action. For example, when a user clicks the
"checkout" button on an e-commerce platform, the backend ensures that the user is, in fact, redirected to the exit page.
Express has structured HTTP application management structures, routes, times, required to build a fully functional web application.
What this means is that based on browser requests, the Express application can use any code to restore a static web page or perform
complete tasks that include verification testing or a read / write website. Middleware is a function that can access all incoming and
outgoing applications and applications in applications. It can be used to modify or test requests (such as user authentication) before
applications are processed by the application.

V. REACTJS
The main component of the MERN stack is React.js, a declaring JavaScript framework for creating powerful client side applications
in HTML. React lets you build complex workspaces using Simple Components, connect to data on your back server, and render
them as HTML.React Solid Suit has a strong, data-driven interface with minimal code and minimal pain, and has all the tools and
whistles you can expect in a modern web framework: great form support, error management, events, lists, and more.

A. Other Important React Features

1) Easy to Learn: One of the great benefits of using the react as it is very easy for a beginner to learn and create web and mobile
applications using this advanced framework. Anyone with a basic background knowledge in the system can easily understand
React compared to Angular. Angular is called 'Explicit Domain Language', so it is suggested that it is very difficult to
understand. To get a Learning React, you need a basic knowledge of CSS and HTML.

Diagram 6
Features of React

2) Simple: React is one of the leading JavaScript frameworks for open source web and mobile applications. It uses a phase-based
approach, uses clear and simple JavaScript, as well as a well-defined life cycle, making the response simple and easy. For easy
reading and building professional mobile and web applications. It uses a simple syntax called JSX, which allows readers or
developers to combine HTML and JavaScript to make it easier for them to use and use it to make effective web and mobile
applications. However, it is not necessary to use JSX, you can use plain JavaScript, but compared to JSX, JSX is a much better
way over it because of its simplicity and simple syntax.
3) Data Binding: React uses an application architecture known as Flux to control the flow of data into segments with a single
control point called a dispatcher. It uses a single data binding method, which is easy to remove the self-contained components
of large React applications.

© IJRASET: All Rights are Reserved | SJ Impact Factor 7.538 | ISRA Journal Impact Factor 7.894 | 183
 International Journal for Research in Applied Science & Engineering Technology (IJRASET)
ISSN: 2321-9653; IC Value: 45.98; SJ Impact Factor: 7.538
Volume 10 Issue II Feb 2022- Available at www.ijraset.com

4) Traditional Way: React is used to create mobile applications (React Native) and web applications. React allows for reuse of
code and can easily support it, which has many benefits and saves a lot of time. So at the same time, at the same time, we can
make iOS, web applications and Android.
5) Performance - React works very fast due to data fluctuations. As the name suggests, we can predict that fixed data structures do
not change and allow you to compare direct object indicators instead of making deep tree comparisons. The above reason
ultimately affects the effectiveness of the reaction and makes it faster.
6) Testability - React is very easy to test; any apps we produce in response, whether mobile or web applications, are much easier
for us to test when we share. There are certain world functions in the react, where different reaction ideas are considered to be
these regional functions, and we can easily be deceived by the situation we transmit in the reaction view. Also, we can look at
output and activated actions, tasks, events, etc.

VI. NODEJS
Node.js is a JavaScript workspace - the one that makes up all of your server-side code. Express is a framework that provides the
basic features for developing a web application at Node.js. Although Node.js is already able to listen to requests in the port, Express
makes it easy to set up a web server by removing the boilerplate and providing a simple API for creating storage space.
1) Large Number of Libraries
2) npm with its simple structure has helped the Node.js ecosystem expand, and now the npm registry handles over 1,000,000 open-
source packages that you can use freely.
3) The Node.js application works in a single process, without creating a new series for every application. Node.js provides a set of
asynchronous I / O primitives in its standard library that prevents JavaScript code from being blocked and, in most cases,
libraries in Node.js are written using non-blocking paradigms, making blocking behavior different than usual.

Diagram 7
Benefits of Node.JS

4) When Node.js performs an I / O function, such as network readings, access to a website or file system, instead of blocking the
cable and wasting CPU waiting cycles, Node.js will restart operations when feedback returns.
5) This allows Node.js to host thousands of simultaneous connections with a single server without delegating the burden of
managing cable compatibility, which can be an important source of distractions.
6) Node.js has a unique advantage because millions of advanced developers writing JavaScript on the browser are now able to
write server-side code in addition to the client-side code without the need to learn a completely different language.
7) At Node.js new ECMAScript standards can be used without problems, as you do not have to wait for all your users to update
their browsers - you are in charge of deciding which ECMAScript version to use by changing the Node.js version, and you can
also provide enable certain test features using Node.js and flags.
8) There are thousands of open-source libraries of Node.js, most of which are hosted on the npm website. There are many
developer conferences and events that support the Node.js community, including NodeConf, Node Interactive, and Node
Summit as well as a number of regional events.

© IJRASET: All Rights are Reserved | SJ Impact Factor 7.538 | ISRA Journal Impact Factor 7.894 | 184
 International Journal for Research in Applied Science & Engineering Technology (IJRASET)
ISSN: 2321-9653; IC Value: 45.98; SJ Impact Factor: 7.538
Volume 10 Issue II Feb 2022- Available at www.ijraset.com

VII. DIFFICULTY LEVEL IN MERN

Diagram 8
MERN in Web Development, React Js Users stats from 2016

One can complete the MERN Stack learning process within 30 days. It's very easy because when you start learning and doing new
things, you will love it. Of course, learning new things is always interesting and fun for coding. One will love the MERN Stack
reading section. Difficulty level, hmm. In fact, MERN was not as difficult for me as math. Mathematics, a boring lesson, why do I
get his ‘x’? To determine the level of difficulty, let's split MERN into web development into Mongo DB, Express Js, React Js, and
Node Js. You will probably spend more time on React Js compared to others. As well as interesting, React Js is great and will take
more time to read and understand. Easy to read them, the only thing one needs to be “IMMEDIATELY”.

VIII. DISTINGUISHED FEATURES

A. Fast response between backend and front-end and website, ultimately improves website speed and results in better performance,
thus providing smoother user information.
B. Highly concerned with the security of applications manufactured using MERN; The security of his web application refers to the
various processes, methods or technologies used to protect various web servers and web applications, such as API (App User
Interface) from cyber-threat threats. Generally, secure hosting providers can easily integrate applications created using the
MERN stack. For more or better security Mongo DB and Node.js security tools are also used.
C. All four technologies mentioned above, MERN (MongoDB, Express.js, React.js, and Node.js) are used in MERN Stack built on
JavaScript which makes it affordable and within low cost the user will be able to for better results or output.
D. It is SEO friendly. SEO (Search Engine Optimization) explains that Google, Yahoo and other search engines can search each
page of the website efficiently and easily, translate and link content effectively to the search text and easily index it on their
website.
E. MERN-built web applications built quickly. Engineer and client, both are satisfied.
F. Also, the client requested changes can be done immediately.
G. All four technologies involved in MERN are open source. This feature ultimately allows engineers to access technical support,
easily.

IX. LIMITATION
Since React is simply a library it uses a number of third-party libraries that offer low-grade developer productivity. And because of
these improvements, React code requires extra effort. Ideal for a small project, as it is not uncommon for a large project where third-
party libraries need to be connected. Productivity is low. Features are high. Security is in the middle. If you are looking for a
technical stack that prevents common typing errors with its design, then the MEAN stack is the best option. As Angular uses
Typescript, so it prevents common typing errors in the coding section itself. However, React lags behind here.

© IJRASET: All Rights are Reserved | SJ Impact Factor 7.538 | ISRA Journal Impact Factor 7.894 | 185
 International Journal for Research in Applied Science & Engineering Technology (IJRASET)
ISSN: 2321-9653; IC Value: 45.98; SJ Impact Factor: 7.538
Volume 10 Issue II Feb 2022- Available at www.ijraset.com

X. CONCLUSION
From now on, the MERN stack is suitable for small to medium-sized websites. Further learning and understanding of new
technologies, new third-party libraries and testing tools will help the web app grow and perform better. Therefore, we can say that
the MERN stack has a bright future as the foundation we need is a good follow-up of JavaScript and ES6.

XI. ACKNOWLEDGMENT
Many thanks to our mentors, family and friends for their support. Without everyone's contribution, this project would not have been
possible.

REFERENCES
[1] Markus Keinänen - Creation of a web service using the MERN stack
[2] Markus Monnikendam ― An Introduction to MERN: ExpressJS Lizard Global
[3] MongoDB.com, Documentation https://docs.mongodb.com/manual/
[4] Expressjs.com (2019) Using template engines with Express https://expressjs.com/en/guide/using-template-engines.html
[5] Mongodb.com (2019), BSON Types https://docs.mongodb.com/manual/reference/bson-types/
[6] Sourabh Mahadev Malewade - Performance Optimization using MERN stack on Web Application

© IJRASET: All Rights are Reserved | SJ Impact Factor 7.538 | ISRA Journal Impact Factor 7.894 | 186