A

REPORT ON
INDUSTRIAL TRAINING ON
“MEARN Stack Development”
Taken at

REGEX SOFTWARE SERVICES

In partial fulfillment of the requirement for the award of degree of
Bachelor of Technology
In
Information Technology

(Session 2022-23)

Duration: From 24th June, 2022 to 29th August, 2022

Submitted to: Submitted by:

Dr. Smita Agarwal MEGHA SHARMA
Ms. Kusum Yadav 20EJCIT095
V Semester B-2

Department of Information Technology

Jaipur Engineering College & Research Centre, Jaipur
Rajasthan Technical, University
DECEMBER-2022
 Chapter Index

S. No. TITLE PAGE NO.

Declaration i.

Acknowledgement ii.

Preface iii.

Company Profile iv.

1. Introduction 1

1.1 Purpose 5

1.2 Future Scope 7

1.3 Features of MEARN 9

2. History of MEARN 11

2.1 History 11

3. What is MEARN? 12

3.1 Architectural Structure of MERN Stack and its working? 14

3.2 Characteristics of MEARN 17

4. Key Technologies 19

4.1 Advantage and Disadvantages of MEARN 21

5. Other Projects On MEARN 24

5.1 Travel Log App 24

 5.2 Public Blog App 25

5.3 E-Commerce Website 26

5.4 Bookstore Library 27

5.5 Workout Tracker App 28

5.6 Hospital Management App 29

6. Project Description 30

6.1 Overview of Tools Used 31

6.2 Screenshots 32

Conclusion 38

Future Scope 39

References 40

Vision and Mission of Institute 41

Vision and Mission of Department 42

Program Outcomes 43

CO and PO Mapping 45
 Figure Index

S. No. Title Page No.

Fig 1.1 Future Of MEARN 7
Fig 2.1 Compatibility on Different Sources 11
Fig 3.1 MEARN Connectivity 14
Fig 3.2 Server Layer 16
Fig 4.1 Advantages of MEARN 23
 DECLARATION

I hereby declare that the report entitled “MEARN Stack Development” has been carried out and
submitted by the undersigned to the JECRC UNIVERSITY in an original work, conducted under the
guidance and supervision of Mr. Surender sir.

The empirical findings in this report are based on the data, which has been collected by me. I have not
reproduced from any report of the University neither of this year nor of any previous year.

I understand that any such reproducing from an original work by another is liable to be punished in a
way the University authorities’ deed fit.

Place: Jaipur APURAV CHANGAL

Date: 25-05-2024 22MCON0005

i
 Acknowledgements
Many people have supported me, in different ways, during the work with the thesis. I’d like to thank Mr
Surender Yadav & HOD Mr. Naveen Hemrajani for their kind and active support and valuable guidance
during the work process. My family has as always offered me their unconditional support, thank you! I
have taken efforts in the Project presentation. However, it would not have been possible without the kind
support and many individuals and organizations. I would like to extend my sincere thanks to each
and every members related to JECRC University.

Student Name Apurav Changal

Registration No. 23MCON0005

ii
 PREFACE

Masters of Technology in Information Technology is the JECRC UNIVERSITY course having duration
of 2 years. As a prerequisite of the syllabus every student on this course has to take professional training
from any Industry related to the stream for 60 days in order to complete his/her studies successfully. And
it is required to submit the project report on the completion of it.

The main objective of this training is to create awareness regarding the application of theories in the
practical world of Information Technology and to give a practical exposure of the real world to the
student.

I, therefore, submit this project report of this training, which was undertaken at Data Flair Web Services.
It was a good experience to have training in a Reputed Organization in the Big data Technology in which
company stands at international.

I feel great pleasure to present this project report. The report was prepared on the basis of the study
carried out regarding the existing File Tracking System.

iii
iv
 CHAPTER - 1 INTRODUCTION

MERN Stack

A stack is the mixture of

technologies used to create Web
applications. Any web application
will
be made utilizing various
technologies like (frameworks,
libraries, databases).
The MERN stack is a JavaScript
stack that is intended to make
Application Development process
smoother.
1
A stack is the mixture of
technologies used to create Web
applications. Any web application
will
be made utilizing various
technologies like (frameworks,
libraries, databases).
The MERN stack is a JavaScript
stack that is intended to make
Application Development process
smoother.
A stack is the mixture of technologies used to create Web applications. Any web application will be
made utilizing various technologies like (frameworks, libraries, databases).
The MERN stack is a JavaScript stack that is intended to make Application Development process
smoother.

HTML :
HTML stands for Hyper Text Markup Language. It is used to design web pages using a markup
language. HTML is the combination of Hypertext and Markup language. Hypertext defines the link
between the web pages. A markup language is used to define the text document within tag which defines
the structure of web pages.
2
CSS :
CSS (Cascading Style Sheets) is a stylesheet language used to design the webpage to make it attractive.
The reason for using this is to simplify the process of making web pages presentable.
It allows you to apply styles to web pages. More importantly, it enables you to do this independent of the
HTML that makes up each web page.
There are three types of CSS which are given below:
 Inline
 Internal or Embedded

 External

JavaScript:

JavaScript is the world most popular lightweight, interpreted compiled programming language. It is also
known as scripting language for web pages. It is well-known for the development of web pages, many
non-browser environments also use it. JavaScript can be used for Client-side developments as well as
Server-side developments.
JavaScript can be added to your HTML file in two ways:

 Internal JS: We can add JavaScript directly to our HTML file by writing the code inside the
<script> tag. The <script> tag can either be placed inside the <head> or the <body> tag according
to the requirement.
 External JS: We can write JavaScript code in other file having an extension .js and then link this
file inside the <head> tag of the HTML file in which we want to add this code.

ReactJS:

3
React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It’s ‘V’ in
MVC. ReactJS is an open-source, component-based front-end library responsible only for the view layer
of the application.
React uses a declarative paradigm that makes it easier to reason about your application and aims to be
both efficient and flexible. It designs simple views for each state in your application, and React will
efficiently update and render just the right component when your data changes. The declarative view
makes your code more predictable and easier to debug.

Features of React.js:
 Use JSX: It is faster than normal JavaScript as it performs optimizations while translating to
regular JavaScript. It makes it easier for us to create templates.
 Virtual DOM: Virtual DOM exists which is like a lightweight copy of the actual DOM. So for
every object that exists in the original DOM, there is an object for that in React Virtual DOM. It
is exactly the same, but it does not have the power to directly change the layout of the document.

Manipulating DOM is slow, but manipulating Virtual DOM is fast as nothing gets drawn on the
screen.
 One-way Data Binding: This feature gives you better control over your application.
 Component: A Component is one of the core building blocks of React. In other words, we can
say that every application you will develop in React will be made up of pieces called
components. Components make the task of building UIs much easier. You can see a UI broken
down into multiple individual pieces called components and work on them independently and
merge them all in a parent component which will be your final UI.
 Performance: React.js use JSX, which is faster compared to normal JavaScript and HTML.
Virtual DOM is a less time taking procedure to update webpages content.

MongoDB:

MongoDB is an open-source, document-oriented, and one of the most popular NoSQL database. NoSQL
simply means a non-relational database i.e. there is no table-like relational database structure instead
4
there is a totally different mechanism for storing and retrieving data. This format of storage is called
BSON and is very much similar to JSON.

NodeJS:

Node.js is an open-source and cross-platform runtime environment for executing JavaScript code outside
a browser. NodeJS is not a framework and it’s not a programming language. Node.js is an open source,
cross-platform runtime environment for developing server-side and networking applications. Node.js
applications are written in JavaScript, and can be run within the Node.js runtime on OS X, Microsoft
Windows, and Linux.

Node.js = Runtime Environment + JavaScript Library

Node.js also provides a rich library of various JavaScript modules which simplifies the development of
web applications using Node.js to a great extent.

 Node.js can generate dynamic page content.

 Node.js can create, open, read, write, delete, and close files on the server.
 Node.js can collect form data.
 Node.js can add, delete, modify data in your database.

Following are the areas where Node.js is proving itself as a perfect technology partner.
▪ I/O bound Applications
▪ Data Streaming Applications
▪ Data Intensive Real-time Applications (DIRT)
▪ JSON APIs based Applications

5
 ▪ Single Page Applications

Why MEARN?

Although web development technologies are going through exemplary changes with time, it is also inevitable
that expectations of users are aloft. Consequently, developers work hard day and night with their full efficacy
to provide a website having better user experience, lesser loading time, and mobile-friendliness.
HTML, CSS, and JavaScript are the cornerstone of Web development but are no longer enough to fulfill all
the above demands. So now we have two technology stacks MERN and MEAN which are developer’s
favorite nowadays.

▪ Efficiency: -Highly efficient code with less time can be developed with MERN Stack.

▪ Testing: -It is crucial and the first string for the software development process. There are lots of work

already done for testing React.js applications, you can use many common tools such as Jest, Mocha,

etc.

▪ Implementation: - There is a common HTML-like, hybrid code formatting in React.js called as JSX.

It allows you to implement your idea more quickly. The HTML like content in the below code looks

like HTML but it is JSX.

▪ Cost-Effective: - As MERN Stack uses one language throughout that is JavaScript so it will be

beneficial for a company to hire JavaScript experts only rather than hiring different specialists for

different technology. This move will save a lot of time and money.

▪ Open Source: - All technologies that are involved in MERN are open-source. This feature allows a

developer to get solutions to queries that may evolve during development, from the available open

portals. As a result, it will be beneficial for a developer.

1.1 PURPOSE OF MEARN

6
 The main purpose of using MERN stack is to develop apps using JavaScript only. This is because the
four technologies that make up the technology stack are all JS-based. Thus, if one knows JavaScript
(and JSON), the backend, frontend, and database can be operated easily.

MERN stands for MongoDB, Express, React, Node, after the four key technologies that make up the
stack. MongoDB — document database. Express(.JS) — Node.js web framework. React(.JS) — a
client-side JavaScript framework. Node(.JS) — the premier JavaScript web server.

It is a backend web application framework for NodeJS. The third component is ReactJS, a JavaScript
library for developing UIs based on UI components. The final component of the MERN stack is
NodeJS.

▪ Great community: MERN has built a great community behind it. The reason behind its great
community is JavaScript. As a Startup owner, you can always access tons of resources related to

MERN or its components. Each one of the components is well-documented and provides scalable
solutions. With this, Startups are free-to-play with their ideas.

▪ Full Stack: MERN offers a full-stack development environment which leads to end-to-end
development. With this, Startups do not have to worry about other technologies or tools as they get
everything in the stack itself.

▪ MVC Architecture Support: MERN supports Model View Controller architecture, which makes it
easy for developers to develop workflow.

▪ Low learning curve: MERN is easy to learn and implement. The learning curve becomes easier if
the developer is already familiar with JavaScript. The availability of proper tutorials,
documentation, and community support also helps new learners in pursuit of expertise.

7
▪ Pool of Talent available: A Startup needs good talent to bring its ideas to real life. MERN is
popular among developers due to its JavaScript affiliation. In short, Startups will find no problem
finding the talent for their projects.

▪ Open Source: All four components are open source, which means that a Startup does not have to
worry about licensing problems with MERN.

▪ Testing tools: MERN comes with its own set of testing tools suite. So,it’s easy for new developers
to test the software with the testing tools provided within the framework.

1.2 FUTURE SCOPE OF MEARN

8
 Fig 1.1 Future Of MEARN

Using MERN delivers powerful results as it is a highly efficient and reliable tool. When you
complete your training and learn your way around this technology, you can better your career
prospects. MERN stack apps are gaining popularity and the future looks bright too. Due to
JavaScript, MERN is already used in plenty of web development processes, and for building
interactive features and its importance is only going to increase.

As a MERN stack developer, you can work as a freelancer by taking up projects online. When you learn
to work with MERN components, you can create a compelling portfolio to showcase your skills.

9
Working in the MERN stack delivers powerful results simply and efficiently. Knowing your way around
the stack is an important skill set since building and deploying solid MERN apps is likely to gain
importance in the future.
These days, MERN Stack is used extensively since everything is done in JavaScript. As you know,
JavaScript is everywhere. It is used both on the front-end and back-end side. Because of this, there’s no
need for context switching.

Tech stack that utilize multiple coding languages, force developers to figure out how to mix them
together. Since MERN is JavaScript-based, developers only need to master a single coding language,
which makes things a million times easier.
Node.js was built on Chrome’s JavaScript runtime to make it more conducive to building fast-operating
network applications with easy scalability. The platform operates using a no blocking, event-driven I/O
model that is incredibly efficient.
Node.js’s efficiency and simplicity make it an ideal platform for real-time applications running across
distributed devices, especially those with intense data requirements. But Node.js has far more potential
in conjunction with the MERN stack.
So, we can say that MERN Stack has bright future ahead. In order to get started with MERN Stack
development, all you really need is a good understanding of JavaScript and ES6 Fundamentals, but also
at least some familiarity with the basic concepts of React and Node.js.
There are many MERN Stack online training that will have you building your own dynamic web
applications in no time.

1.3 FEATURES OF MEARN

10
▪ The holistic and smooth development process:
MEARN Stack uses a single language, JavaScript throughout the coding phase. With the same
language being used in the client and server-side development, there are few or almost no hiccups
during the development process. It makes the process smooth.

▪ Active community for long-term support:

JavaScript is one of the most common and highly-preferred programming languages in the market.
Hence, it boasts an active developer community. If a JavaScript developer faces any problem, the
community provides quick and easy support and solution.

▪ Development is cost-effective:
MERN stack developers know their way through the frontend, backend and even database. They
provide comprehensive web development services. They can complete the web app project all by
themselves. The company need not hire developers for frontend and backend, separately. It saves
their development costs by reducing the headcounts involved in the process. The combination so
technologies involved with the MERN stack also helps in keeping the development costs to a
minimum.

▪ Ease of isomorphic coding:

One of the biggest advantages of using the MERN stack for the development process is the ease of
isomorphic coding that it offers. It means the code written in one framework can easily be
transferred to another, without any hassle. It increases the productivity and speed of the project and
also helps in ensuring better performance as the data transfer takes place in the JSON format. The
isomorphic coding ability is also one of the most sought-after features you will come across in any
mean stack job description.

▪ High flexibility:
The MERN Stack developers have the access to build, test and introduce the app without any hassle.
The flexible platform also allows the developers to test the application on a cloud platform. It is also
easy for the developers to add any extra piece of information once they are done adding a field in the

11
 form. The MongoDB framework provides comprehensive cluster support and automatic replication
feature, which further eases the process.

▪ The quick and easy testing process:

MERN stack and its various components allow the developers to test an application on the cloud
platform easily. MongoDB is specifically designed to make it easier for the developers to add an
extra bit of information. It provides cluster support and automatic replication in the cloud, which
fuels the development and testing process.

▪ Cloud compatibility:
MongoDB allows the developers to integrate cloud functionalities into the website. The
development process under this stack makes the best use of libraries and public repositories that
reduces the overall cost. Its various features and integrated characteristics make the MERN stack
compatible with the cloud.

▪ JavaScript Object Notation (JSON):

JSON is present in MERN stack development throughout the process. Angular and Node both offer
JSON, MongoDB stores the data in JSON format, and it is also used by Express. The use of JSON
in MERN stack development facilitates the smooth data flow. There is no need for rewriting or
reformatting in the different layers.

CHAPTER- 2
12
 HISTORY OF MERN

2.1 History

The MERN Stack is a collection of technologies used to develop web applications. It was developed by
Facebook back in 2013. MERN is an acronym for the four technologies used: MongoDB, Express.JS,
React, and Node. This collection of techs aims to make the development process easier and smoother.
MERN stack scalability is higher than that of a full-stack. Another significant difference between the two
is Full stack development Framework is for large-scale apps and projects. For niche projects, the MERN
stack has the capacity to enable developers to create and deploy programs from scratch.
The main purpose of using MERN stack is to develop apps using JavaScript only. This is because the
four technologies that make up the technology stack are all JS-based.

Fig 2.1 Compatibility on Different sources

13
 CHAPTER -3
WHAT IS MEARN

List of Abbreviations:

DOM: Document Object Model

W3C: World Wide Web Consortium
ISO: International Organization for Standardization
NPM: Node Package Manager
API: Application Program Interface
HTML: Hypertext Markup Language
HTTP: Hypertext Transfer Protocol
URL: Uniform Resource Locator
JSON: JavaScript Object Notation
JS: JavaScript
JSX: JavaScript XML
XML: Extensive Markup Language

MERN Stack is a collection of powerful technologies and robust, used to develop scalable master web
applications comprising backend, front-end, and database components. It is JavaScript that is used for
the faster and easier development of full-stack web applications. MERN Stack is a technology that is a
user-friendly full-stack JavaScript framework for building applications and dynamic websites.
MERN Stack consists of four main components or can say four main technologies:
M stands for MongoDB (Database), mainly used for preparing document database and is a NoSQL
(Non-Structured Query Language) Database System
E stands for Express, mainly used for developing Node.js web framework
R stands for React, mainly used for developing a client-side JavaScript framework
N stands for js, mainly used for developing the premier JavaScript web server

14
Each of these four technologies plays an important role in providing an end-to-end framework for the
developers. Even these four technologies play an important role in the development process of web
applications.
Before MERN stack, it was earlier named as MEAN stack, MERN Stack is one of the variations of
MEAN, here MEAN is also comprises of four components or say four different 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.

 Cost-effective: All the four technologies that are mentioned above, MERN (MongoDB, Express.js,
React.js, and Node.js) are used in MERN Stack is built on JavaScript that makes it cost-effective and
within less cost investment user will able to get the better results or output.
 SEO friendly: Here, SEO (Search Engine Optimization) friendly means that Google, Yahoo and
other search engines can search each page on the website efficiently and easily, interpret and
correlate the content effectively with the searched text and easily index it in their database. As
whenever websites are created using MERN technologies, then it is always SEO friendly.
 Better performance: Better performance refers to the faster response between backend and front-
end and database, which ultimately improves the website speed and yields better performance, thus
providing a smooth user experience.
 Improves Security: It mainly concerns the security of applications generated using MERN; her web
application security refers to various processes, methods or technologies used for protecting web
servers and various web applications, such as APIs (Application user interface) from the attack by
internet-based threats. Generally, secured 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.
 Provide the fastest delivery: Any Web applications and mobile applications created by using
MERN Stack are built much faster, which also helps to provide faster delivery to our clients.
 Provides faster Modifications: MERN stack technologies supports quick modifications as per the
client's request in the mobile and web applications.

15
 Open Source: All the four technologies that are involved in MERN are open-source. This feature
allows developers to get solutions to queries that may evolve from the open portals during
development. As a result, it will be ultimately beneficial for a developer.
 Easy to switch between client and server: MERN is very simple and fast because it is written in
only one language. And also, it is very easy to switch between client and server.

3.1 Architectural Structure of MERN Stack and its working?

MERN has a 3-tier Architecture system mainly consisting of 3 layers -

These layers are as follows:
 Web as front-end tier
 Server as the middle tier
 Database as backend tier

16
 Fig 3.1 MEARN Connectivity

i. Web or front-end tier - The top tier of the MERN stack is mainly handled by React.js. It is one of the
most prominent used open-source front-end JavaScript libraries used for building Web applications.
It is famous for creating dynamic client-side applications. React will help you construct complex
interfaces by using single components. It also connects those complex interfaces to data available on
the backend server. React is used to create mobile applications (React Native) and web applications.
React allows the reusability of code and can easily support it, which has many benefits and is much
time saver. It permits users to create large web applications that can easily change the data of the
page even without reloading the page.

ii. Server or middle-tier - It is just next level from the top layer and is mainly handled by two
components of the MERN stack, i.e., Express.js and Node.js. These two's components handle it
simultaneously because Express.js maintained the Server-side framework, running inside the
Node.js server. Express.js is one of the widely used backend development JavaScript Frameworks. It

17
allows developers to spin up robust APIs (Application Programming Interface) and web servers
much easier and simpler. It also adds helpful functionalities to Node.js HTTP (Hyper Text Transfer
Protocol) objects. Whereas on the other hand, Node.js plays a very important role in itself. It is an
open-source server environment, and it is a cross-platform runtime environment for executing
JavaScript code outside a browser. Node.js continuously uses JavaScript; thus, it's ultimately helpful
for a computer user to quickly create any net service or any net or mobile application.

Fig 3.2 Server Layer

18
iii. Database as backend tier - It is one of the most important levels of the MERN Stack and is mainly
handled by MongoDB; the main role of a database is to store all the data related to your
application, for example - content, statistics, information, user profiles, comments and so on. It
mainly stores all the data for safety purposes. It maintains a proper record, which usually returns
the data to the user
whenever required. It mainly stores the data in the database. It generates two or more replica files
of the data so that whenever the system fails, it can retrieve the exact information or data that the
user wanted earlier. It implies that MongoDB is not based on the table-like relational database
structure. On the other hand, it provides an altogether different mechanism for the retrieval and
storage of data. Mongo DB is the most popular NoSQL (NoSQL or Non-Structured Query
Language) database, an open-source document-oriented database. The term 'NoSQL' typically
means a non-relational database that does not require a fixed schema or proper relational tables to
store the necessary data in it. MongoDB stores the data in a different format other than the
relational tables, consisting of rows and columns.

3.2 Characteristics of MEARN

It gives easy code maintenance and problem correction, making it a cost-effective alternative. It also has
sophisticated testing tools.

 Extensive Network: With apps such as Uber, Instagram, Spotify, and Snapchat, the technology
stack has a large community that assures you can always find answers.

19
 Adaptability: Another of the MERN stack advantages is that it allows the tech stack’s elements to
be free software, which eliminates licensing conflicts. Because of the ubiquity of the tech stack,
you have several possibilities for getting the web application produced. The speed with which
React renders on your screen is one of its primary determining factors. Whether you’re building an
essential website or a complex piece of software, speed will assist your users to feel like they’re
not waiting for your information to load. While there are various JavaScript frameworks to select
from,

React has developed as one of the most (if not the most) adaptable. Its code is simple,
uncomplicated, and to the point. It may take some time to comprehend its principles fully, but it’s
one of the more approachable JavaScript frameworks for web application developers to begin

with. By standard, two-way data binding spares you from the majority of your features. The
underlying technology gets so well documented that you can deploy it with ease. It’s simple to
understand and use, making it an ideal choice for beginners learning web development. With so
many tools available to developers, it can be challenging to decide which ones are worth learning
about. The minimalist nature of these tools makes them easier to learn since there are fewer moving
parts you need to understand to use them effectively.

 Allows You to Build Fast: The MERN stacks rely on open-source technologies that developers
can use freely, which means you don’t have to build everything from scratch. For example, if you
want a blogging platform, chances are someone has already developed a popular framework like

WordPress. All you need to do is pay detailed attention to any setup instructions and customize as
needed. This kind of plug-and-play approach gives you an edge against more prominent
companies that might not understand (or care about) such emerging platforms. The bigger they
are, after all, the more likely they stick with proven solutions.

20
 Note: With rapid project development, the savings are massive, especially when hiring MERN
developers on an hourly model.

 Great Community Support: This set of technologies is backed by a solid community, making it
easier to find answers to all sorts of technical questions that may come up. Thus when you’re
unsure how something works or why there’s usually someone else who has already encountered
(and fixed) similar problems.

CHAPTER -4 KEY TECHNOLOGIES

Create Basic Server

 use http's create Server to create a basic server
 handle request and response object

21
  Request methods
 Response status codes
 parse requested URL
 Handle data from request

Capture data on the server side

 Handle FORM data from requests
 Handle JSON data from clients

MongoDB Structure
Database at the top
 Collections
 Documents
 JSON Objects

CRUD Operations in MongoDB : -

 Insert/Insert Many for adding documents

 Find to retrieve the documents
 Update/Update Many for updating existing records
 Remove/Delete for deleting documents

Indexes and aggregations in MongoDB

 Single Field Index

 Multikey Indexes
 text based Indexes
22
  Aggregation Pipeline Operators like
A. $group
B. $match
C. $distinct
D. $project
E. $sum, $avg

Express Fundamentals

1. Create a basic server in express

2. Understanding Middle wares

 Built-in Middle wares like express.json(), express.static() etc..

 Third Party Middle wares like session.
 Error Handler Middle wares

3. Routing in Express applications

Authentication & authorization : -

 Implement User registration

 Hash passwords being saved into database
 Implement simple email/password login

4.1 ADVANTAGES AND DISADVANTAGES

23
❖ Advantages
After thoroughly understanding the components of the MERN stack, we now list the
advantages of MERN stack in web application development.

 No context switching:
As for the whole application, JavaScript alone is used to build both client-side and
server-side; the web application will not require context switching and provides
efficient web apps.

 MVC:
The significant benefit of the MERN stack is providing a Model-view-Controller
architecture and makes it convenient for the developers to develop the web
application.

 Full-stack:
With no context switching, the added advantage is that you get highly compatible
and robust technologies working tangibly together and efficiently handling client and
server-side development faster.

 Easy Learning Curve:

The developers only need to have excellent knowledge of JS and JSON to reap
MERN stack advantages while developing web apps.

 Code Maintenance:
With MERN stack development for your web apps, you get easy code maintenance
and bug fixing, making it a cost-effective option. It also comes with powerful testing
tools.

24
 Strong Community:
With apps like Airbnb, Facebook, Netflix, and Instagram, the technology stack has
influential community support that ensures you can always find solutions.

 Flexibility:
One of the MERN stack benefits is that it allows the tech stack’s components to be
open source and hence no licensing disputes. With the popularity of the tech stack,
you get multiple options to get the web application developed.

 Extensive Network:
With apps such as Uber, Instagram, Spotify, and Snapchat, the technology stack has
a large community that assures you can always find answers.

 Adaptability:
Another of the MERN stack advantages is that it allows the tech stack’s elements to
be free software, which eliminates licensing conflicts. Because of the ubiquity of the
tech stack, you have several possibilities for getting the web application produced.

The speed with which React renders on your screen is one of its primary determining
factors. Whether you’re building an essential website or a complex piece of
software, speed will assist your users to feel like they’re not waiting for your
information to load.

While there are various JavaScript frameworks to select from, REACT has
developed as one of the most (if not the most) adaptable.

25
 Fig 4.1 Advantages Of MEARN

❖ Disadvantages

 Not recommended for large-scale applications.

 No specific general JS coding guidelines.
 Once you have developed the first site using Mean stack technology, it’s really hard to go
back to the old approach.
 It offers poor isolation of server from business logic.
 You could lose records gradually.

26
 CHAPTER 5

OTHER PROJECTS ON MEARN

1. Travel Log App

This Full stack web application will allow people to share their travel experience to a community of
other travelers using this application.

This app will allow people to:-

 Browse travel experience of other people
 Add their own experience
 Travelers can add multiple factors about an experience
 location
 images for locations
 cost of travel
 heritages of the location
 places to visit
 access of community, ease of transportation, safety etc...

27
 Fig 5.1

2. Public Blog App

Create a blog application where users can:

 Login/Signup to the application

 Create articles
 View list of all the articles
 Edit/Delete his/her own articles
 Add categories, tags and filters to list blog page
 Follow other article authors
 Favorite/like articles
 Add comment to the articles

28
 Fig 5.2

3. E-Commerce Website

This application will have 2 separate interfaces.

A. A user facing application
An admin dashboard for managing products
B. Users can do following things on this application:
 Login/Register for visiting application
 Browse through different products
 Filter products based on category, price etc…
 Like/review products
 Add them to cart / wishlist
 Edit/Delete his/her account
C. Admin can do following tasks on admin dashboard
 Add/list products
 Update product details, quantity etc..
 View list of all the users
29
  Block/unblock a particular user

Fig 5.3

4. Bookstore Library

This is an online library management app where users can rent books for a specific time, like them and
can also review books. This will have 2 interfaces.

 User Interface
 Admin Interface
Users registered for this application can
i. browse books from the library
ii. filter them based on category, author, publications etc…
iii. Pay & Rent them for a specific duration
iv. Like/Review them

Admin of this application can

i. List/manage books
ii. Track rented books and their availability
iii. Send notifications via email to users once lease expires

30
 Fig 5.4

5. Workout Tracker App

For the gym freaks, this application will allow interface to:

 Access wide range of exercise options

 Add your own set of exercises
 Add your weekly/daily schedule
 View workout routine of others
 Ask workout related queries through a forum

31
 Fig 5.5

6. Hospital Management App

This application will help patients:

 View list of doctors from different speciality

 View available surgeries/therapies options
 Schedule an appointment at a particular time
 View application progress status
 Get medical reports
 This will help doctors
 View their appointments

32
  Show their availability for the hospital
 Track patients application status

Fig 5.6

CHAPTER 6
PROJECT DESCRIPTION

Creating a Chat Application

The first step is to create a react-app using node . After it, install the dependencies required for it . I have
created chat application by style components. It consists of register and login page. Whenever creating a
new user the password to be entered according to some rules and if he/she violates it , he will get custom

33
notification to enter the password again . Then a loader is appeared ,then select an avatar . Then we will
be getting welcome and contact page and from the contact list ,we can send messages. page . Then we
will move ahead on the backend. Then adding routing and messaging functionality to it. Then comes the
database , i.e. MongoDB. We will install MongoDB Compass which is a GUI requires ID in our case it
is localhost.
Create a real time chat application using socket.io where users can

 Login/Signup to access the application

 Invite people using emails
 create chat rooms
 Add one-o-one chat with other users

6.1 OVERVIEW OF TOOLS USED

 Visual Studio Code: - Working with Python in Visual Studio Code, using the Microsoft Python
extension, is simple, fun, and productive. The extension makes VS Code an excellent Python
editor, and works on any operating system with a variety of Python interpreters.

34
 MongoDB Compass: - MongoDB Compass is a GUI for MongoDB. It is also known as
MongoDB GUI. MongoDB allows users to analyze the content of their stored data without any
prior knowledge of MongoDB query syntax. When we explore exploring our data in the visual
environment, we can use Compass GUI to optimize performance, manage indexes, and
implement document-validation. All the versions of MongoDB Compass are opensource (i.e., we
can freely deploy and view the repositories of all MongoDB GUI versions).

 Socket.IO : - Socket.IO is an event-driven library for real-time web applications. It enables real-
time, bi-directional communication between web clients and servers. It consists of two parts:
a client-side library that runs in the browser, and a server-side library for Node.js. Both
components have a nearly identical API.
Socket.IO primarily uses the WebSocket protocol with polling as a fallback option, while
providing the same interface. Although it can be used simply as a wrapper for Web Sockets, it
provides many more features, including broadcasting to multiple sockets, storing data associated
with each client, and asynchronous I/O.
It can be installed with the Node Package Manager (NPM)

6.2 SCREENSHOTS OF PROJECT

35
 Fig 6.1 Sign-up Page

Fig 6.2 Signing a new User

36
Fig 6.3 Opening Interface

Fig 6.4 Selecting an Avatar

37
 Fig 6.5 Welcome Page

Fig 6.6 Sending Message

38
Fig 6.7 Code of JS and CSS

Fig 6.8 Database of a chat

39
Fig 6.9 Database of users

40
 Fig 6.10 Database of messages

Fig 6.11 Database of messages send by user

41
 CONCLUSION

As a conclusion, I can say that this undergoing project is giving great experience. Through this , I
have acquiring deeper knowledge concerning my technical skills but I also personally benefited.
Currently MERN stack is a common technologies of web applications and chat applications, and
one of the most popular technology for development used by developers worldwide . I am learning
to live in a different environment from the one I am used to.

Using JS and React as frontend and Express as backend and connecting it with database
MongoDB , I have made it.

With the MERN stack you can ideally build any web application you want by learning just one
language, JavaScript. With increased popularity of NoSQL databases, MongoDB is a go to database
because of its scalability.

In conclusion, a successful project was built in which songs will play one after the other automatically
and the entire playlist will play all over again once concluded.

42
 FUTURE SCOPE

In future I would like to develop this project by working on:

By adding more functionalities like we can also contact them via video call, send money to the persons
who are in our contact list . Extending this application by providing Authorization service.

• Maintaining users.

• Increasing the effectiveness of the application by providing Voice Chat.

• Extending it to Web Support.

43
 REFERENCES

REGEX Software Services

MEARN ESSENTIAL REFERENCE

https://www.mongodb.com/mern-stack

https://developer.mozilla.org/en-US/

44
 Vision of the Department

To be recognized as Centre for providing outcome-based education and prepare students

to take challenges as per present technological scenario.

Mission of the Department

M1: Practice OBE for professional accomplishment of graduate attributes.

M2: Provide platform to gain knowledge and solutions as per social needs and
requirement.

M3: Provide platform to enhance knowledge for inter-disciplinary challenges and

motivation towards achieving excellence.

45
 Program Outcome

1. Engineering knowledge: Apply the knowledge of mathematics, science, engineering fundamentals,

and an engineering specialization to the solution of complex engineering problems in IT.
2. Problem analysis: Identify, formulate, research literature, and analyze complex engineering problems
reaching substantiated conclusions using first principles of mathematics, natural sciences, and
engineering sciences in IT.
3. Design/development of solutions: Design solutions for complex engineering problems and design
system components or processes that meet the specified needs with appropriate consideration for the
public health and safety, and the cultural, societal, and environmental considerations using IT.
4. Conduct investigations of complex problems: Use research-based knowledge and research methods
including design of experiments, analysis and interpretation of data, and synthesis of the information to
provide valid conclusions using IT.
5. Modern tool usage: Create, select, and apply appropriate techniques, resources, and modern
engineering and IT tools including prediction and modeling to complex engineering activities with an
understanding of the limitations using IT.
6. The engineer and society: Apply reasoning informed by the contextual knowledge to assess societal,
health, safety, legal and cultural issues and the consequent responsibilities relevant to the professional
engineering practice using IT.
7. Environment and sustainability: Understand the impact of the professional engineering solutions in
societal and environmental contexts, and demonstrate the knowledge of, and need for sustainable
development.
8. Ethics: Apply ethical principles and commit to professional ethics and responsibilities and norms of
the engineering practice using IT.

46
9. Individual and team work: Function effectively as an individual, and as a member or leader in
diverse teams, and in multidisciplinary settings in IT.
10. Communication: Communicate effectively on complex engineering activities with the engineering
community and with society at large, such as, being able to comprehend

and write effective reports and design documentation, make effective presentations, and give and receive
clear instructions.
11. Project management and finance: Demonstrate knowledge and understanding of the engineering
and management principles and apply these to one’s own work, as a member and leader in a team, to
manage IT projects and in multidisciplinary environments.
12. Life-long learning: Recognize the need for, and have the preparation and ability to engage in
independent and life-long learning in the broadest context of technological change in IT.

PSO1: Graduates of the program would be able to develop mobile and web-based IT solutions for real
time problems.
PSO2: Graduates of the program would be able to apply the concepts of artificial intelligence, machine
learning and deep learning.

47
 CO and PO Mapping

To extend the boundaries of knowledge through research and development and

CO-1
integrate classroom theory with workplace practice.
To develop new or advanced skills and Gain understanding of administrative
CO-2
5IT7-30 functions and company culture.
Industrial Ability to obtain and apply important principles of science and engineering and
Training CO-3 for self-improvement through constant professional development and life-long
learning.
Ability to recognize, express and model problems and find engineering solution
CO-4
based on a systems tactic.

P P P
P P P P P P P P P
P O O O
O O O O O O O O PS S
COs O - - -
- - - - - - - - O-1 O
-5 1 1 1
1 2 3 4 6 7 8 9 -
0 1 2
2

CO-1 H H M H H M L L M L L M H H

CO-2 H M H H M L L M H L H H H H

48
CO-3 H H M H H L M M H M M H H H

CO-4 H H L H H H H H H H M H H H

APURAV CHANGAL
23MCON0005

49