Why Build Your Own Blog Platform?

In the age of AI-generated content and massive platforms, building your own custom blog system teaches you core concepts in full stack development:

• Routing
• Dynamic rendering
• CRUD operations
• User authentication
• API development
• MongoDB integration
• SEO optimization

And the best part? You can host it live and use it for your personal or freelance brand.

Tech Stack Overview

Key Features You’ll Build

• Blog creation/edit UI
• Image + HTML + markdown support
• Server-side search
• Category tags
• Pagination and lazy loading
• Admin login (optional)
• Contact/Comment form
• SEO-friendly blog meta tags
• Dynamic [slug]-based routing

Folder Structure (Basic)

/blog-platform
├── app
│   ├── page.jsx (home)
│   ├── blog
│   │   └── [slug]/page.jsx
│   └── admin/create-blog.jsx
├── components/BlogCard.jsx, Navbar.jsx
├── lib/connectDB.js
├── models/Blog.js
├── api/blogs/route.js
├── styles/globals.css

    

Blog Schema (MongoDB/Mongoose)

import mongoose from 'mongoose';

const BlogSchema = new mongoose.Schema({
  title: String,
  content: String,
  slug: { type: String, unique: true },
  tags: [String],
  author: String,
  image: String,
  createdAt: { type: Date, default: Date.now },
});

export default mongoose.models.Blog || mongoose.model("Blog", BlogSchema);

    

Blog Page Route – app/blog/[slug]/page.jsx

import BlogCard from '@/components/BlogCard';
import connectDB from '@/lib/connectDB';
import Blog from '@/models/Blog';

export async function generateMetadata({ params }) {
  await connectDB();
  const blog = await Blog.findOne({ slug: params.slug });
  return {
    title: blog?.title || 'Blog',
    description: blog?.content.slice(0, 150),
  };
}

export default async function BlogPage({ params }) {
  await connectDB();
  const blog = await Blog.findOne({ slug: params.slug });

  return (
    <div className="p-4">
      <h1 className="text-3xl font-bold">{blog.title}</h1>
      <img src={blog.image} className="my-4 w-full rounded" />
      <div dangerouslySetInnerHTML={{ __html: blog.content }} />
    </div>
  );
}

    

Create Blog UI – app/admin/create-blog.jsx

'use client';
import { useState } from 'react';

export default function CreateBlog() {
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');
  const [slug, setSlug] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    await fetch('/api/blogs', {
      method: 'POST',
      body: JSON.stringify({ title, content, slug }),
      headers: { 'Content-Type': 'application/json' },
    });
    alert('Blog created!');
  };

  return (
    <form onSubmit={handleSubmit} className="p-4 max-w-2xl mx-auto">
      <input onChange={(e) => setTitle(e.target.value)} placeholder="Title" />
      <input onChange={(e) => setSlug(e.target.value)} placeholder="Slug" />
      <textarea onChange={(e) => setContent(e.target.value)} rows={10} />
      <button type="submit">Create</button>
    </form>
  );
}

    

API Route – app/api/blogs/route.js

import connectDB from '@/lib/connectDB';
import Blog from '@/models/Blog';

export async function POST(req) {
  await connectDB();
  const data = await req.json();
  const blog = new Blog(data);
  await blog.save();
  return Response.json({ success: true });
}

export async function GET() {
  await connectDB();
  const blogs = await Blog.find().sort({ createdAt: -1 });
  return Response.json(blogs);
}

    

Deployment Instructions

• Push your project to GitHub
• Deploy frontend with Vercel
• Use MongoDB Atlas as remote DB
• Set environment variable in Vercel:

MONGO_URI=mongodb+srv://<username>:<password>@cluster.mongodb.net/blog