Designing a Personal Blog Platform with MERN Stack

mkdir mern-blog && cd mern-blog
mkdir server && cd server
npm init -y
npm install express mongoose bcryptjs jsonwebtoken cookie-parser helmet express-rate-limit
cd ..
npm create vite@latest client -- --template react
cd client && npm install react-markdown

// server/models/Post.js
const mongoose = require('mongoose');

const postSchema = new mongoose.Schema(
  {
    title: { type: String, required: true, trim: true, maxlength: 200 },
    slug: { type: String, required: true, unique: true, lowercase: true },
    body: { type: String, required: true, maxlength: 100000 },
    tags: [{ type: String, trim: true, lowercase: true, maxlength: 40 }],
    status: { type: String, enum: ['draft', 'published'], default: 'draft' },
    author: { type: mongoose.Schema.Types.ObjectId, ref: 'User', required: true, index: true },
  },
  { timestamps: true }
);

postSchema.index({ status: 1, createdAt: -1 });
module.exports = mongoose.model('Post', postSchema);

// server/routes/posts.js
const express = require('express');
const Post = require('../models/Post');
const requireAuth = require('../middleware/requireAuth');

const router = express.Router();
const slugify = (s) =>
  String(s).toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '').slice(0, 80);

// Public: list published posts, 10 per page
router.get('/', async (req, res) => {
  const page = Math.max(1, Number.parseInt(req.query.page, 10) || 1);
  const posts = await Post.find({ status: 'published' })
    .sort({ createdAt: -1 })
    .skip((page - 1) * 10)
    .limit(10)
    .select('title slug tags createdAt author')
    .populate('author', 'name');
  res.json(posts);
});

// Public: one published post
router.get('/:slug', async (req, res) => {
  const post = await Post.findOne({ slug: String(req.params.slug), status: 'published' })
    .populate('author', 'name');
  if (!post) return res.status(404).json({ error: 'Not found' });
  res.json(post);
});

// Author: create. The author comes from the session, never from the body.
router.post('/', requireAuth, async (req, res) => {
  const { title, body, tags, status } = req.body;
  const slug = `${slugify(title)}-${Date.now().toString(36)}`;
  const post = await Post.create({ title, body, tags, status, slug, author: req.user._id });
  res.status(201).json(post);
});

// Author: update own post only
router.patch('/:id', requireAuth, async (req, res) => {
  const post = await Post.findOne({ _id: req.params.id, author: req.user._id });
  if (!post) return res.status(404).json({ error: 'Not found' });
  for (const field of ['title', 'body', 'tags', 'status']) {
    if (req.body[field] !== undefined) post[field] = req.body[field];
  }
  await post.save();
  res.json(post);
});

// Author: delete own post only
router.delete('/:id', requireAuth, async (req, res) => {
  const result = await Post.deleteOne({ _id: req.params.id, author: req.user._id });
  if (result.deletedCount === 0) return res.status(404).json({ error: 'Not found' });
  res.status(204).end();
});

module.exports = router;

// server/server.js
const express = require('express');
const mongoose = require('mongoose');
const cookieParser = require('cookie-parser');
const helmet = require('helmet');
const authRoutes = require('./routes/auth');
const postRoutes = require('./routes/posts');

mongoose.set('sanitizeFilter', true); // blocks query-operator injection such as {"$gt": ""}

const app = express();
app.use(helmet());
app.use(express.json({ limit: '200kb' }));
app.use(cookieParser());
app.use('/api/auth', authRoutes);
app.use('/api/posts', postRoutes);

app.use((err, req, res, next) => {
  if (err.name === 'CastError' || err.name === 'ValidationError') {
    return res.status(400).json({ error: 'Invalid input' });
  }
  console.error(err);
  res.status(500).json({ error: 'Something went wrong' });
});

mongoose.connect(process.env.MONGODB_URI).then(() => {
  app.listen(process.env.PORT || 3000);
});

import Markdown from 'react-markdown';

export function PostBody({ body }) {
  return <Markdown>{body}</Markdown>;
}