MERN Stack (original) (raw)

Last Updated : 3 Jun, 2026

MERN Stack is a popular full-stack JavaScript framework used to build modern and scalable web applications using a single programming language across both frontend and backend.

Working of MERN Stack

The MERN Stack works by connecting the frontend, backend, and database to create a complete web application. Each technology plays a specific role in handling user interactions, processing data, and storing information.

client_browser_

Roadmap to become a MERN Stack Developer

**Step 1: Learn basics of HTML, CSS and JavaScript

**Step 2: Learn React which is a frontend library for building User Interfaces

**Step 3: Learn NodeJS which is JavaScript runtime environment

**Step 4: Learn ExpressJS, a framework built upon NodeJS to simplify the process of creating web application and API building

**Step 5: Learn MongoDB, a NoSQL database to store and retrieve data from database.

Getting Started with MERN Stack

There are two requirements to start a MERN stack project:

**Step 1: Install node on your system depending on your Operating System:

**Step 2: Install a Code Editor (Visual Studio Code is recommended).

Setting Up a MERN Stack Project

To setup MERN stack we need to create a folder structure for both frontend and backend. Then we have to define database schema to store and retrieve data from the database.

Follow the below steps to create a basic structure:

**Step 1: Create Project Structure

mkdir frontend
mkdir backend

**Step 2: Navigate to Frontend

cd frontend

**Step 3: Create React Application

npx create-react-app

**Step 4: Navigate to Backend

cd..
cd backend

**Step 5: Initialize Backend Project

npm init -y

**Step 6: Install Dependencies

npm i mongodb express cors dotenv

The basic MERN project structure is now ready.

Understanding MERN Components

The MERN Stack consists of four core technologies that work together to develop full-stack web applications, with each component handling a specific part of the application.

1. NodeJS: JS Runtime Environment

NodeJS is an open-source JavaScript runtime environment that allows developers to run JavaScript code on the server side. It also includes npm (Node Package Manager), which provides access to thousands of reusable packages.

**Create a NodeJS Project

npm init

let rectangle= { perimeter: (x, y)=> (2*(x+y)), area: (x, y)=> (x*y) };

function Rectangle(l, b) { console.log("A rectangle with l = " + l + " and b = " + b);

if (l <=0 || b <=0) {
    console.log("Error! Rectangle's length & "
    + "breadth should be greater than 0: l = " 
    + l + ", and b = " + b);
}

else {
    console.log("Area of the rectangle: " 
        + rectangle.area(l, b));
    console.log("Perimeter of the rectangle: " 
        + rectangle.perimeter(l, b));
}

}

Rectangle(1, 8); Rectangle(3, 12); Rectangle(-6, 3);

`

npm start

2. ExpressJS (Backend Framework)

ExpressJS is a lightweight web framework built on NodeJS that simplifies backend development and API creation. It provides powerful features such as routing and middleware support, making web application development faster and more efficient.

**Create an Express Project

npm init

npm install express --save

index.js

JavaScript ``

const express=require('express'), http=require('http'); const hostname='localhost'; const port=8080; const app=express();

app.use((req, res)=> { console.log(req.headers); res.statusCode=200; res.setHeader('Content-Type', 'text/html'); res.end('

This is a test server

'); }); const sample_server=http.createServer(app);

sample_server.listen(port, hostname, ()=> { console.log(Server running at http: //${hostname}:${port}/);});

``

npm start

Screenshot-4510

3. MongoDB (Database)

MongoDB is a NoSQL, document-oriented database that stores data in flexible JSON-like documents. It allows developers to efficiently store, manage, and retrieve large amounts of data without requiring a fixed schema.

**Basic Database Operations in MongoDB

use database_name;

db.createCollection("collection_name");

db.collection_name.insert({
"id": 1,
"Name": "Klaus",
"Department": "Technical",
"Organization": "Geeks For Geeks"
});

db.collection_name.find({Name : "Klaus"}).forEach(printjson);

4. React (Front-End Library)

ReactJS is a JavaScript library used for building interactive and dynamic user interfaces. It is widely used for developing single-page applications (SPAs) and mobile applications due to its efficient handling of changing data.

**Creating and Running a React App

npm install create-react-app --global

OR

yarn global add create-react-app

create-react-app app_name

ReactDOM.render(

Hello DEVELOPERS!!

, document.getElementById('root') );

`

npm start

or

yarn start

Screenshot-5010

Benefits of Using the MERN Stack

Here are some benefits of using MERN Stack: