Getting Started with the MERN Stack: A Beginner’s Guide

The MERN stack is one of the most popular JavaScript tech stacks used to build powerful full-stack web applications. In this post, we’ll break it down simply and walk through the basics of setting up your first MERN project.

💡 What is MERN?
MERN stands for:

MongoDB – NoSQL database

Express.js – Web framework for Node.js

React.js – Frontend library

Node.js – JavaScript runtime environment

Together, they allow you to build full-stack apps using only JavaScript — from frontend to backend to database.

🛠 Project Setup: MERN Boilerplate
Here’s how you can set up a basic MERN project:

1. Backend Setup (Express + MongoDB) Initialize the project:

mkdir mern-app
cd mern-app
npm init -y
npm install express mongoose cors dotenv

Create 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.error(err));

app.get("/", (req, res) => res.send("API Running"));

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(Server running on port ${PORT}));

Add .env:

MONGO_URI=your_mongo_connection_string

1. Frontend Setup (React) In the root folder

npx create-react-app client
cd client
npm start

You now have React running on localhost:3000 and Express on localhost:5000.

🔗 Connecting Frontend and Backend
You can use Axios or Fetch API in React to make API calls to your Express backend.

Example with Axios:

npm install axios

import axios from 'axios';
useEffect(() => {
axios.get('http://localhost:5000/')
.then(res => console.log(res.data));
}, []);

📦 What’s Next?
Once you’ve set up your MERN boilerplate:

Add routes and models in Express

Connect to MongoDB Atlas for production

Deploy backend on Render or Vercel, frontend on Vercel

🧠 Final Thoughts
The MERN stack is powerful and scalable — and learning it opens the door to full-stack development with just one language: JavaScript.

📌 Follow me for more MERN, AI, and software development content every other day!