Creating Your First MERN Project Structure

With Node.js, MongoDB, and VS Code installed, you are ready to scaffold the actual MERN project. A clean, well-organised project structure is not a luxury — it determines how easily you can add features, debug problems, and hand the project to another developer. In this lesson you will create the complete monorepo folder structure with separate client and server directories, initialise both npm projects, install the core dependencies for each layer, write the first working Express server, scaffold the React frontend with Vite, and run both together for the first time.

MERN Project Architecture Decision #

Complete Scaffold — Step by Step #

# ── Step 1: Create the project root ──────────────────────────────────────────
mkdir mern-blog
cd mern-blog
git init
echo "node_modules/\n.env\ndist/" > .gitignore

# ── Step 2: Scaffold the React client with Vite ───────────────────────────────
npm create vite@latest client -- --template react
cd client
npm install
npm install axios react-router-dom

# ── Step 3: Scaffold the Express server ──────────────────────────────────────
cd ..
mkdir server
cd server
npm init -y

# Core production dependencies
npm install express mongoose dotenv cors helmet bcryptjs jsonwebtoken nodemailer multer

# Development dependencies
npm install -D nodemon

# ── Step 4: Back to root — add concurrently for running both together ─────────
cd ..
npm init -y
npm install -D concurrently

Full Project Structure #

mern-blog/
├── .gitignore                ← covers both client and server
├── package.json              ← root scripts (start both servers)
│
├── client/                   ← React + Vite (port 5173)
│   ├── public/
│   ├── src/
│   │   ├── components/       ← reusable UI components
│   │   ├── pages/            ← page-level components (routes)
│   │   ├── services/         ← Axios API call functions
│   │   ├── context/          ← React Context providers
│   │   ├── hooks/            ← custom hooks
│   │   ├── App.jsx
│   │   └── main.jsx
│   ├── vite.config.js        ← proxy config: /api → localhost:5000
│   └── package.json
│
└── server/                   ← Express + Node.js (port 5000)
    ├── index.js              ← entry point
    ├── .env                  ← secrets (never commit)
    ├── src/
    │   ├── config/
    │   │   └── db.js         ← Mongoose connection
    │   ├── models/
    │   │   ├── Post.js
    │   │   └── User.js
    │   ├── routes/
    │   │   ├── posts.js
    │   │   ├── users.js
    │   │   └── auth.js
    │   ├── controllers/
    │   │   ├── postController.js
    │   │   └── authController.js
    │   └── middleware/
    │       ├── auth.js
    │       └── errorHandler.js
    └── package.json

Express Server Entry Point #

// server/index.js
require('dotenv').config();
const express    = require('express');
const cors       = require('cors');
const helmet     = require('helmet');
const connectDB  = require('./src/config/db');

const app  = express();
const PORT = process.env.PORT || 5000;

// ── Connect to MongoDB ────────────────────────────────────────────────────────
connectDB();

// ── Middleware ────────────────────────────────────────────────────────────────
app.use(helmet());
app.use(cors({ origin: process.env.CLIENT_URL || 'http://localhost:5173' }));
app.use(express.json());

// ── Routes ────────────────────────────────────────────────────────────────────
app.use('/api/posts', require('./src/routes/posts'));
app.use('/api/auth',  require('./src/routes/auth'));

// ── Health check ──────────────────────────────────────────────────────────────
app.get('/api/health', (req, res) => {
  res.json({ status: 'ok', environment: process.env.NODE_ENV });
});

// ── Global error handler ──────────────────────────────────────────────────────
app.use((err, req, res, next) => {
  console.error(err.stack);
  res.status(err.status || 500).json({ success: false, message: err.message });
});

app.listen(PORT, () => console.log(`Server running on http://localhost:${PORT}`));

Mongoose Connection Module #

// server/src/config/db.js
const mongoose = require('mongoose');

const connectDB = async () => {
  try {
    const conn = await mongoose.connect(process.env.MONGODB_URI);
    console.log(`MongoDB connected: ${conn.connection.host}`);
  } catch (err) {
    console.error(`MongoDB connection error: ${err.message}`);
    process.exit(1); // exit with failure — cannot run without a database
  }
};

module.exports = connectDB;

Vite Proxy Configuration #

// client/vite.config.js — proxy /api requests to Express in development
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    port: 5173,
    proxy: {
      '/api': {
        target: 'http://localhost:5000',
        changeOrigin: true,
      },
    },
  },
});

Root package.json — Run Both Servers at Once #

{
  "name": "mern-blog",
  "scripts": {
    "dev":    "concurrently \"npm run server\" \"npm run client\"",
    "server": "cd server && npm run dev",
    "client": "cd client && npm run dev",
    "install-all": "npm install && cd server && npm install && cd ../client && npm install"
  },
  "devDependencies": {
    "concurrently": "^8.2.2"
  }
}

Environment Variables #

# server/.env — copy this template, fill in your values
PORT=5000
NODE_ENV=development
MONGODB_URI=mongodb://localhost:27017/blogdb
JWT_SECRET=change_this_to_a_long_random_string_in_production
JWT_EXPIRES_IN=7d
CLIENT_URL=http://localhost:5173
EMAIL_USER=your_email@gmail.com
EMAIL_PASS=your_gmail_app_password

Common Mistakes #

Mistake 1 — Running npm install in the wrong directory #

❌ Wrong — installing server packages from the project root or client directory:

cd mern-blog
npm install express   # installs express in root node_modules — not in server/

✅ Correct — always cd into the correct sub-project first:

cd mern-blog/server
npm install express   # correctly installed in server/node_modules/

Mistake 2 — Forgetting the .env file after cloning #

❌ Wrong — cloning the repo and running the server without creating .env:

node index.js
# process.env.MONGODB_URI is undefined — mongoose.connect(undefined) → error

✅ Correct — always include a .env.example file in the repo with placeholder values, so new developers know exactly what variables to set:

# server/.env.example — this file IS committed to Git
PORT=5000
MONGODB_URI=mongodb://localhost:27017/your_db_name
JWT_SECRET=replace_with_random_string

Mistake 3 — CORS error when React calls Express #

❌ Wrong — Express running without the cors middleware:

Access to fetch at 'http://localhost:5000/api/posts' from origin 'http://localhost:5173'
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header

✅ Correct — add cors middleware before routes in Express, or use the Vite proxy to avoid CORS entirely in development:

app.use(cors({ origin: 'http://localhost:5173' })); // before app.use('/api/...')

Quick Reference #