MERN Stack Project – Blog Website

Introduction

In this tutorial, you'll learn how to build a full-stack blog website using the MERN stack (MongoDB, Express.js, React, Node.js). The project covers user authentication, CRUD operations, and connecting frontend with backend APIs.

Step 1: Setting Up Backend (Node.js & Express)

Initialize a new Node.js project:

mkdir mern-blog-backend
cd mern-blog-backend
npm init -y
npm install express mongoose dotenv cors bcryptjs jsonwebtoken

Create a basic server in index.js:

const express = require('express');
const app = express();
require('dotenv').config();
const PORT = process.env.PORT || 5000;

app.use(express.json());

app.get('/', (req, res) => {
  res.send('API Running...');
});

app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

Step 2: Connect to MongoDB

Use Mongoose to connect:

const mongoose = require('mongoose');

mongoose.connect(process.env.MONGO_URI, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
})
.then(() => console.log('MongoDB connected'))
.catch(err => console.error(err));

Step 3: Create Models

User model (models/User.js):

const mongoose = require('mongoose');

const userSchema = new mongoose.Schema({
  name: { type: String, required: true },
  email: { type: String, required: true, unique: true },
  password: { type: String, required: true },
}, { timestamps: true });

module.exports = mongoose.model('User', userSchema);

Post model (models/Post.js):

const mongoose = require('mongoose');

const postSchema = new mongoose.Schema({
  title: { type: String, required: true },
  content: { type: String, required: true },
  author: { type: mongoose.Schema.Types.ObjectId, ref: 'User' },
}, { timestamps: true });

module.exports = mongoose.model('Post', postSchema);

Step 4: Authentication Routes

const express = require('express');
const router = express.Router();
const User = require('../models/User');
const bcrypt = require('bcryptjs');
const jwt = require('jsonwebtoken');

// Register
router.post('/register', async (req, res) => {
  const { name, email, password } = req.body;
  const hashedPassword = await bcrypt.hash(password, 10);
  const user = new User({ name, email, password: hashedPassword });
  await user.save();
  res.json({ message: 'User registered successfully' });
});

// Login
router.post('/login', async (req, res) => {
  const { email, password } = req.body;
  const user = await User.findOne({ email });
  if (!user) return res.status(400).json({ message: 'Invalid credentials' });
  const isMatch = await bcrypt.compare(password, user.password);
  if (!isMatch) return res.status(400).json({ message: 'Invalid credentials' });
  const token = jwt.sign({ id: user._id }, process.env.JWT_SECRET, { expiresIn: '1d' });
  res.json({ token, user: { id: user._id, name: user.name, email: user.email } });
});

module.exports = router;

Step 5: Frontend Setup (React)

Create frontend project:

npx create-react-app mern-blog-frontend
cd mern-blog-frontend
npm install axios react-router-dom

Basic structure:

src/components – Navbar, PostList, PostForm, AuthForm
src/pages – Home, Login, Register, CreatePost
src/services/api.js – Axios instance

Step 6: Connect Frontend with Backend

Use Axios to call API endpoints:

import axios from 'axios';

const api = axios.create({
  baseURL: 'http://localhost:5000/api',
});

export default api;

Example: Fetch posts

const fetchPosts = async () => {
  const res = await api.get('/posts');
  setPosts(res.data);
};

Step 7: Create Components

Navbar – Navigation & Logout
PostList – Display posts
PostForm – Create/Edit posts
AuthForm – Login & Registration forms

Step 8: Deploy

Backend: Heroku / Vercel
Frontend: Netlify / Vercel
Ensure environment variables like MONGO_URI and JWT_SECRET are set in production.

Step 9: Mini Project Features

User authentication (JWT)
CRUD operations for posts
Responsive design
Optional: Comments, likes, search

Conclusion

By following this tutorial, you’ll have a fully functional MERN stack blog website with authentication, CRUD operations, and API integration. This project is a great stepping stone for more advanced full-stack applications.

SEO Suggestions:

Main keywords: MERN stack tutorial, fullstack blog project, React Node MongoDB tutorial, Node.js blog project, create blog website
Meta description: Learn to build a complete MERN stack blog website with authentication, CRUD operations, and responsive frontend. Step-by-step guide for beginners and intermediates.
Catchy title suggestions: "MERN Stack Blog Project – Step-by-Step Tutorial 2026", "Build a Fullstack Blog Website with MERN Stack"