Getting Started with MERN Stack in 2026

The MERN stack — MongoDB, Express.js, React.js, and Node.js — remains one of the most popular choices for full‑stack JavaScript development in 2026. It allows you to build everything from simple blogs to complex enterprise applications using a single language across the entire stack. Here’s how to get started.

1. What is MERN?

• MongoDB: A NoSQL database that stores data in flexible, JSON‑like documents.
• Express.js: A minimal Node.js framework for building APIs and handling server logic.
• React.js: A library for building fast, interactive user interfaces.
• Node.js: A JavaScript runtime that lets you run JavaScript on the server.

2. Setting Up Your Environment

Before you write code, make sure you have:

• Node.js (v20 or later) installed
• A code editor like VS Code
• MongoDB Atlas (free cloud tier) or a local MongoDB instance
• Postman (for API testing)

3. Building the Backend (Node + Express + MongoDB)

Step 1: Create a new folder and initialise a Node project:

mkdir mern-app
cd mern-app
npm init -y

Step 2: Install dependencies:

npm install express mongoose cors dotenv

Step 3: Create a simple server (server.js):

const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
require('dotenv').config();

const app = express();
app.use(cors());
app.use(express.json());
mongoose.connect(process.env.MONGO_URI)
  .then(() => console.log('MongoDB connected'))
  .catch(err => console.log(err));
app.get('/', (req, res) => res.send('API running'));
const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Server on port ${PORT}`));

Get Sajid Ahmed’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Step 4: Define a Mongoose model and create CRUD routes. For example, a simple Task model:

const taskSchema = new mongoose.Schema({
  title: String,
  completed: Boolean,
});
module.exports = mongoose.model('Task', taskSchema);

Then build Express routes to handle GET, POST, PUT, DELETE.

4. Frontend with React

Step 1: In the same project folder, create a React app:

npx create-react-app client

Step 2: Inside client, install Axios:

npm install axios

Step 3: Build components to fetch and display data from your API. Use useState and useEffect to manage state. Example:

import { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
  const [tasks, setTasks] = useState([]);
  useEffect(() => {
    axios.get('http://localhost:5000/api/tasks')
      .then(res => setTasks(res.data))
      .catch(err => console.error(err));
  }, []);
  return (
    <div>
      {tasks.map(task => (
        <div key={task._id}>{task.title}</div>
      ))}
    </div>
  );
}

5. Connecting Frontend and Backend

Use a proxy in client/package.json:

"proxy": "http://localhost:5000"

Or configure CORS properly in Express. For production, you can serve the React build from Express.

6. What’s New in 2026?

• React Server Components are now stable, allowing you to render parts of your UI on the server.
• MongoDB 8.0 brings improved aggregation and Atlas vector search for AI applications.
• Node.js 22 LTS includes native WebSocket support and better performance.
• Consider using Vite instead of Create React App for faster development.

Final Thoughts

The MERN stack is here to stay. Start small — build a to‑do app, then expand it. Once you grasp the basics, the possibilities are endless. Need help building your first full‑stack project? I’d love to collaborate.