Capstone Architecture, Planning and Feature Scope

The capstone is where every concept from the previous 27 chapters comes together into a single, deployable application. Rather than introducing new technology, the capstone exercises your ability to make architectural decisions, reason about data relationships, plan an API surface, and structure a full-stack project before writing a single line of code. In this lesson you will define the complete feature scope for the MERN Blog/CMS, design the MongoDB schema for every collection, map every API endpoint, and set up the monorepo project structure — producing a blueprint that the next four lessons will build from.

Capstone Feature Scope #

MongoDB Schema Design #

// ── User ──────────────────────────────────────────────────────────────────────
{
  _id, name, email, password (hashed), role ('user'|'editor'|'admin'),
  avatar (Cloudinary URL), bio, isEmailVerified,
  emailVerifyToken (select:false), emailVerifyExpires (select:false),
  passwordResetToken (select:false), passwordResetExpires (select:false),
  passwordChangedAt (select:false),
  createdAt, updatedAt
}

// ── Post ──────────────────────────────────────────────────────────────────────
{
  _id, title, slug (unique, auto-generated from title),
  body (HTML string), excerpt, coverImage (Cloudinary URL),
  author (ref: User), tags ([String]),
  published (Boolean, default:false), featured (Boolean, default:false),
  viewCount (Number, default:0), likedBy ([ref: User]),
  createdAt, updatedAt
}

// ── Comment ───────────────────────────────────────────────────────────────────
{
  _id, body, post (ref: Post), author (ref: User),
  createdAt, updatedAt
}

// ── Tag (optional — derived from posts, or a separate collection) ──────────────
// Option A: tags stored as string arrays on Post — simpler, no separate collection
// Option B: Tag collection for tag descriptions and post count caching
// Recommendation: start with Option A (strings on Post), add Tag collection if needed

API Endpoint Map #

── Auth ──────────────────────────────────────────────────────────────────
POST   /api/auth/register           Register + send verification email
POST   /api/auth/login              Login → access token + refresh cookie
POST   /api/auth/logout             Clear refresh token cookie
POST   /api/auth/refresh            Issue new access token from refresh cookie
GET    /api/auth/me                 Get current user (protected)
GET    /api/auth/verify-email       Verify email with token
POST   /api/auth/forgot-password    Send password reset email
POST   /api/auth/reset-password/:t  Reset password with token

── Posts ────────────────────────────────────────────────────────────────
GET    /api/posts                   List (published, paginated, filterable by tag/search)
POST   /api/posts                   Create (protected)
GET    /api/posts/:id               Get single post + increment viewCount
PATCH  /api/posts/:id               Update (owner or admin)
DELETE /api/posts/:id               Delete (owner or admin)
PATCH  /api/posts/:id/publish       Toggle published (owner or editor/admin)
POST   /api/posts/:id/like          Like / unlike toggle (protected)
GET    /api/posts/featured          Get featured posts (public)
GET    /api/posts/search?q=         Full-text search (public)

── Comments ─────────────────────────────────────────────────────────────
GET    /api/posts/:postId/comments  List comments for a post
POST   /api/posts/:postId/comments  Create comment (protected) → Socket.io emit
DELETE /api/comments/:id            Delete comment (owner or admin)

── Users ────────────────────────────────────────────────────────────────
GET    /api/users/:id               Public profile
PATCH  /api/users/:id               Update profile (own account)
POST   /api/users/avatar            Upload avatar (protected, Multer+Cloudinary)
GET    /api/users/:id/posts         Posts by user (public)

── Admin ────────────────────────────────────────────────────────────────
GET    /api/admin/users             List all users (admin only)
PATCH  /api/admin/users/:id/role    Change role (admin only)
DELETE /api/admin/users/:id         Delete user (admin only)
GET    /api/admin/stats             Site stats — post/user/comment counts

── Upload ───────────────────────────────────────────────────────────────
POST   /api/posts/:id/cover         Upload cover image (owner, Cloudinary)

── Health ───────────────────────────────────────────────────────────────
GET    /api/health                  Health check

Monorepo Project Structure #

mern-blog/
├── server/                     Express API
│   ├── src/
│   │   ├── config/             db.js, cloudinary.js, multer.js, socket.js
│   │   ├── controllers/        authController.js, postController.js, ...
│   │   ├── middleware/         auth.js, authorize.js, errorHandler.js, rateLimiter.js
│   │   ├── models/             User.js, Post.js, Comment.js
│   │   ├── routes/             auth.js, posts.js, comments.js, users.js, admin.js
│   │   └── utils/              asyncHandler.js, AppError.js, jwt.js, sendEmail.js, ...
│   ├── index.js
│   ├── package.json
│   └── .env                    (gitignored)
│
├── client/                     React + Vite SPA
│   ├── src/
│   │   ├── components/         layout/, posts/, ui/, auth/
│   │   ├── context/            AuthContext.jsx, NotificationContext.jsx
│   │   ├── hooks/              useSocket.js, useFetch.js, useDebounce.js
│   │   ├── pages/              HomePage, PostDetailPage, LoginPage, ...
│   │   ├── services/           api.js, postService.js, authService.js
│   │   └── utils/              validators.js, formatters.js
│   ├── public/_redirects       /* /index.html 200
│   ├── package.json
│   └── vite.config.js
│
├── e2e/                        Playwright E2E tests
│   └── auth.spec.js, posts.spec.js
├── .github/workflows/ci.yml    GitHub Actions
├── playwright.config.js
└── README.md

Development Setup #

# Clone or initialise the monorepo
mkdir mern-blog && cd mern-blog

# Server
mkdir server && cd server
npm init -y
npm install express mongoose dotenv bcryptjs jsonwebtoken cors helmet \
  compression multer cloudinary multer-storage-cloudinary \
  nodemailer express-rate-limit socket.io express-validator
npm install --save-dev nodemon jest supertest mongodb-memory-server
cd ..

# Client
npm create vite@latest client -- --template react
cd client
npm install axios react-router-dom socket.io-client dompurify
npm install --save-dev vitest @testing-library/react @testing-library/jest-dom \
  @testing-library/user-event jsdom msw
cd ..

# E2E
npm install --save-dev @playwright/test
npx playwright install chromium

Common Mistakes #

Mistake 1 — Starting to code without a schema design #

❌ Wrong — adding fields to models as you discover you need them:

// Adding likedBy to Post three weeks after building the Post model
// → requires a database migration, breaks existing data, wastes time

✅ Correct — design the complete schema upfront. It is much easier to add a field you planned than to retrofit one you forgot.

Mistake 2 — Building all API routes before starting React #

❌ Wrong — horizontal build: all Express, then all React, then integration.

✅ Correct — vertical build: register endpoint + register form + test end-to-end. Then login. Then post creation. Each vertical slice is testable and gives immediate feedback on API design flaws.

Mistake 3 — Not planning the auth flow before writing a single line #

❌ Wrong — building posts before auth is complete:

// Post routes require req.user — but auth middleware is not yet built
// All post tests fail until auth is finished — wasted work

✅ Correct — always build auth first. Every protected route depends on it. A working auth system with register, login, and protect middleware is the bedrock everything else stands on.

Quick Reference — Build Order #