Complete Guide to
Mern Stack
(Most Famous Tech Stack)
‘MERN’ is a word that gets thrown around a lot in web
development circles. But what exactly does it stand for?
It is a set of four technologies that are used for faster building
and deployment of full stack web applications or CRUD
(create, read, update and delete) apps.
They are:
MongoDB:
Express.js:
React:
Node.js:
01
Web
React.JS
Express.JS
Server
Node.JS
Database
Mongo.DB
02
MongoDB:
It is the database used for the full stack web application. It
is used to store and update any data that is used by the
application
MongoDB stores data in binary JSON format, and it is
document based. Thus it is very easy to access the indexed
files.
It is open-source, highly scalable and is used to store
readily available large volumes of data.
03
ExpressJS Framework:
ExpressJS is simply a framework built on top of Node.js.
We use it to simplify the process of writing backend logic
and developing many Node modules
As an open-source framework, it utilizes JavaScript on the
server side. Express.js also supports various middlewares,
which make writing code much easier
Express.js aids in tasks such as URL routing and handling
HTTP requests and responses.
04
React JS:
React.js is a front-end JavaScript library developed by
Facebook, primarily used for building user interfaces
React is declarative, flexible, and supports the creation of
small, isolated, and reusable pieces of code called
components
Additionally, React Native enables the development of
Android or iOS-based mobile apps using JavaScript
It is specifically useful in building stateful, data-driven
interfaces with minimal code and minimal pain.
05
Node JS:
Node.js is the back-end layer that allows for the execution
of JavaScript outside the browser, providing an
environment for users to run their code on the server
It is cross-platform, open-source and is built on Google
Chrome’s JavaScript Engine
Node.js hosts thousands of public/private packages via
NPM (Node Package Manager) to facilitate application
development across multiple domains.
06
Layers of MERN Stack
Client Layer Business Logic Layer
Http Request
Browser
Express
HTML/CSS Application
Java Script (React App)
Http Response
Node Server
Desktop Mobile
Application Server
Data Request
Data Response
Business Logic
Database Layer
Layer
MongoDB
Database
Database Server
07
Most MERN Stack applications follow a 3 layer
architecture pattern
Client Layer
The client layer consists of the web pages which are visible
to the client or end user
It is developed using React framework along with
Javascript, HTML & CSS.
Application layer
Acts as the communication layer between client &
database layer
It contains business logic in the form of an Express
application built on the Node.js platfor
Services client requests by fetching appropriate data from
the database layer.
Database Layer
The MongoDB database operates within this laye
All the application data required by the client is fetched
from this database layer.
08
Basic Working of any MERN Application
involves the following steps:
1. User Interaction:
User interacts with frontend of the application. React
components are used to create a dynamic and responsive user
interface.
2. Client-Server Communication:
When a user performs an action (e.g., submits a form or clicks
a button), the frontend sends an HTTP request to the backend
via API endpoints created using Express.js.
3. Backend Processing:
The Express.js application, running on the Node.js platform,
receives the request and processes it. This may involve
applying business logic, input validation, and/or
authentication and authorization checks.
09
4. Database Interaction:
If the request requires data storage or retrieval, the backend
communicates with the MongoDB database. MongoDB stores
data in a flexible, JSON-like format called BSON, making it
suitable for handling various data types and structures.
5. Response Formation:
Once the backend processing is complete and any required
data has been fetched or stored, the server forms an
appropriate response, usually in JSON format, and sends it
back to the client.
6. Frontend Update:
The React frontend receives the response and updates the
user interface accordingly, providing feedback to the user or
displaying the requested data.
This process continues as users interact with the MERN
application, with the different layers working together to
provide a seamless and efficient user experience.
10
Advantages of using MERN stack when
developing applications
1. Single Language Stack:
MERN enables developers to use JavaScript throughout the
entire stack, frontend to backend, simplifying the
development process and reducing the need to learn multiple
languages.
2. Reusable Components:
React uses a component-based architecture, allowing
developers to create reusable components that can be easily
integrated into different parts of the application. This
promotes consistency and speeds up development.
3. High Performance:
React's virtual DOM enhances application performance by
minimising DOM manipulations and reducing the need for full-
page refreshes. Node.js provides non-blocking, event-driven I/
O operations, which improves server-side performance.
11
4. Scalability:
The MERN stack is designed to build scalable applications.
Node.js is lightweight and efficient, while MongoDB is a highly
scalable, document-based database that can handle large
volumes of data.
5. Active Community & Ecosystem:
All components of the MERN stack have active and supportive
communities, which contribute to ongoing improvements,
extensive documentation, and a wide range of third-party
libraries and tools.
6. Flexibility & Modularity:
MERN provides a modular and flexible architecture, making it
easy to add, remove, or modify components as needed. This
facilitates easier maintenance and enhances adaptability to
changing requirements.
7. Open Source:
All technologies in the MERN stack are open-source. This
helps reduce development costs and ensures that developers
have access to a wealth of resources and support.
12
ABOUT BOSSCODER
Bosscoder is an online upskilling platform for techies. We help learners
upskill in tech roles to get them placed at top tech companies.
We do so through our structured & mentored program designed by
industry experts.
USP of our program include:
Structured Curriculum:
Covers everything you need to get placed at top tech companies:
Problem solving in DS & Algo, CS Fundamentals, System Design (HLD +
LLD), Full stack Projects
Live Classes:
An active learning classroom program taught by engineers working at
companies like Microsoft, PayPal, Amazon
1:1 Mentorship & Mock Interviews:
Personal mentors from top tech companies help you provide the right
guidance, feedback, and support.
24/7 Doubt Support:
Through our army of Teaching Assistants
Industry-relevant projects:
Full stack specialization with Industry-relevant projects
Placement Support:
Providing opportunities to tech engineers in eminent startups & top
tech companies.
13
BUILD YOUR CAREER
WITH US
750+ Alumni placed at Top Product-based companies.
Highest package of 86 LPA
Average package of 24 LPA.
Resume reviewed and interview scheduled for 1000+
students
Lakshmi susmitha Dheeraj Barik
Service Based to JP Morgan in 4 System Engineer at Service Based to
months SDE 2 at Amazon
Before After Before After
IBM
JP Morgan
Infosys
Amazon
Application Engineer Software Egineer II Systems Engineer SDE 2
14
Vishal Srivastava Ujesh Nada
Service Based to London Based Business Development Associate to
Bank SDE at Google
Before After
Before After
Cognizant
Barclays
Programmer Analyst
Byju’s
Google
Software Developer
Trainee BDA SDE
Rakesh Kumar Satapathy Harshith Ravinoothala
Bsc. Graduate stuck in service Tier 3 College Student to Product
based to Hashedin Based Company
After Before
After
Before
Hashedin
G Pulla Reddy
Synopsys
Wipro
Senior Python
Engineering College
R&D Engineer
Software Engineer Developer Sudent
15
Sarveshwar Neogi Aarushi Jain
Clueless college student to No interest in coding to SDE at
Consultant at Sprinkler Atlassian
Before After Before After
KIIT
Sprinkler
NIT Delhi
Atlassian
B.Tech in CS Consultant B.Tech in EEE SDE
Sumedha Khandelwal Irshad K
Scared of Technical Interviews to NIT Delhi to SDE in Singapore
Technical Lead
Before After Before After
IHS Markit
Jubilant Foodworks
NIT Delhi
ByteDance
Software Engineer Technical Lead Application Engineer SDE
16
Want to Upskill?
Go through our website, or email us at
ask@bosscoderacademy.com
VISIT WEBSITE
www.bosscoderacademy.com
