When I first started learning the MERN stack, I already had some experience with backend development using Python and Django. Because of that, many backend concepts in MERN felt familiar—the syntax was different, but the underlying ideas were surprisingly similar.
So, instead of treating MERN as four completely different technologies, I started thinking about it as different pieces working together to build a web application.
Let's understand what each part does and, more importantly, how they communicate with each other.
And with the upcoming Posts, we will stepwise Create the full MERN application with Code snippets and logic.
What is MERN?
MERN stands for:
M → MongoDB
E → Express.js
R → React
N → Node.js
A simple way to visualize it is:
USER
↓
React
(Frontend)
↓
API
↓
Express.js
(Backend)
↓
Node.js
(Runs JavaScript)
↓
MongoDB
(Database)
Each technology has a different responsibility.
M — MongoDB
MongoDB is the database in the MERN stack.
Unlike traditional relational databases such as MySQL, MongoDB is a NoSQL database. It stores data in a document-oriented structure.
If you have used something like Firebase/Firestore before, the idea of collections and documents may feel familiar.
For example, a users collection could contain documents like:
{
"name": "Divya",
"age": 21,
"city": "Ghaziabad"
}
Another user might have:
{
"name": "Rahul",
"age": 22,
"skills": ["React", "Node.js"]
}
The important thing to understand is that MongoDB stores data as documents, which are grouped into collections.
A simple comparison is:
MongoDB
↓
Database
↓
Collections
↓
Documents
↓
Fields
N — Node.js
One thing that confused me initially was:
"If JavaScript runs in the browser, how is it running on the backend?"
That's where Node.js comes in.
Node.js allows us to run JavaScript outside the browser.
Normally, JavaScript is associated with the browser:
JavaScript → Browser → UI interactions
With Node.js:
JavaScript → Node.js → Server-side code
So instead of writing backend code in Python, Java, PHP, etc., we can use JavaScript for the backend.
However, Node.js itself isn't the framework that gives us all the routing and API structure we'll use.
That's where Express comes in.
E — Express.js
Express.js is a backend framework that runs on Node.js.
It makes it much easier to build our server and APIs.
For example, we can create a route:
app.get("/users", (req, res) => {
res.json({
message: "Users fetched successfully"
});
});
Here we have:
GET /users
This is an endpoint
An endpoint is a specific URL/path through which a client can communicate with the backend.
For example:
GET /users
POST /users
PUT /users/:id
DELETE /users/:id
Each endpoint can perform a different operation.
Request and Response
This is one of the most important concepts when working with APIs.
The request (req) is what the client sends to the server.
The response (res) is what the server sends back.
Think of it like a conversation:
Client:
"Give me all the users."
↓ Request
Server:
"Sure, here are the users."
↓ Response
In Express:
app.get("/users", (req, res) => {
// Get data from database
res.json(users);
});
The client sends a request, the backend processes it, possibly communicates with the database, and then sends a response.
What is an API?
API stands for Application Programming Interface.
In a web application, an API provides a way for the frontend and backend to communicate.
For example:
React
↓
GET /api/users
↓
Express Backend
↓
MongoDB
↓
Express Backend
↓
JSON Response
↓
React
So,you can think of an API as a communication interface between different parts of an application.
The API exposes endpoints that the frontend can call.
For example:
/api/users
/api/campaigns
/api/ngos
/api/login
These endpoints define where requests can be sent.
JSON — How Data Travels
Now we have another important question:
How does the frontend actually send data to the backend?
One of the most common formats is JSON.
JSON stands for:
JavaScript Object Notation
It represents data using key-value pairs:
{
"name": "Divya",
"age": 21,
"city": "Ghaziabad"
}
It looks very similar to a JavaScript object:
const user = {
name: "Divya",
age: 21,
city: "Ghaziabad"
};
Because JSON is lightweight and easy for different programming languages to understand, it is commonly used for exchanging data between the client and server.
For example, React might send:
{
"email": "user@example.com",
"password": "123456"
}
The backend receives that data, processes it, and sends a response such as:
{
"message": "Login successful"
}
What about Queries?
There is a small distinction worth understanding here.
A request is the overall communication sent to the server.
A query can refer to specific information included in that request, depending on the context.
For example:
GET /users?city=Delhi
Here:
/users
is the endpoint.
And:
?city=Delhi
is a query parameter.
The backend can use it to filter the data.
For example:
req.query.city
could give us:
Delhi
So it is better to think of a query as part of a request, rather than calling the entire request a query.
R — React
Finally, we have React.
React is used to build the frontend/UI of our application.
One of the main ideas behind React is building the UI using components.
Instead of creating one huge frontend page, we can break it into smaller reusable components:
App
├── Navbar
├── Sidebar
├── UserCard
├── CampaignCard
└── Footer
For example:
function UserCard({ name }) {
return (
<div>
<h2>{name}</h2>
</div>
);
}
We can then reuse this component wherever we need it.
React handles what the user sees and how the UI responds to user interactions.
Putting Everything Together
Now let's connect all four parts.
Suppose we have a website where users can view NGO campaigns.
The flow could look like this:
USER
↓
React
↓
GET /api/campaigns
↓
Express
↓
Node.js
↓
MongoDB
↓
Campaign documents
↓
Express
↓
JSON response
↓
React
↓
Display campaigns
The user doesn't directly communicate with MongoDB.
Instead:
React talks to the backend.
The backend talks to the database.
This separation is one of the fundamental ideas behind a full-stack application.
Coming From Django
Since I had previously worked with Django, I noticed that many backend concepts were already familiar.
The syntax and tools changed, but concepts such as:
routing
requests and responses
APIs
database operations
authentication
CRUD operations
middleware
were not completely new.
For example, Django has its URL routing system, while Express allows us to define routes like:
app.get("/users", handler);
The implementation is different, but the underlying idea is similar:
A request comes in → the backend processes it → something happens → a response goes back.
This was probably one of the biggest things that made learning MERN easier for me.
The Bigger Picture
The MERN stack can initially look like four technologies that you need to learn separately.
But I found it easier to understand them by focusing on their responsibilities:
Technology Main Responsibility
MongoDB Stores application data
Express.js Builds backend routes and APIs
Node.js Runs JavaScript on the server
React Builds the frontend/UI
And the communication looks roughly like:
React
↓
HTTP Request
↓
Express + Node.js
↓
MongoDB
↓
Express + Node.js
↓
HTTP Response (usually JSON)
↓
React
Once this flow becomes clear, the MERN stack starts feeling much less complicated.
You don't have to memorize everything at once.
Start by understanding who is responsible for what and how data moves between them.
The rest can be learned one piece at a time.
Top comments (0)