✦ Blog

Building My Own Blog CMS (Vibe-Coded with Claude + MCP)

FMFrank Mendez·

I built a modern blog CMS using Next.js, Supabase, and TailwindCSS with role-based access, a WYSIWYG editor, and AI-assisted development powered by Claude Code and MCP servers.

Most developers love doing blogs.
I wanted to build the system behind the blog.
Not another markdown site. Not another static generator.
A real CMS — with users, roles, workflows, and a proper editor.

So I built one.

🚀 The Idea

I wanted a blog that:

  • I fully control (no vendor lock-in)

  • Feels like a real product (not a side project)

  • Showcases actual engineering skills

  • Can evolve into something bigger (maybe even SaaS)

And honestly… I also wanted to test how far I can push AI-assisted development.

🧱 The Stack

I kept it simple but powerful:

  • Next.js — frontend + backend

  • Supabase — database + auth

  • TailwindCSS — UI

  • TipTap — WYSIWYG editor

  • Vercel — deployment

  • Claude Code + MCP servers — development engine

This combo hits a sweet spot: fast to build, production-ready, and flexible.

🤖 Vibe Coding with Claude + MCP

This project is heavily vibe-coded.

Instead of manually wiring everything, I used:

  • github-mcp → manage repo, commits, structure

  • supabase-mcp → design schema, policies, queries

  • vercel-mcp → deploy and manage environments

  • filesystem-mcp → refactor and generate code

  • browser-mcp → debug UI issues

Think of it like having a junior dev that never sleeps, but you still need to be the tech lead.

AI doesn’t replace thinking — it amplifies it.

🔐 Real Features (Not Just a Demo)

I didn’t want a toy project. So I built actual CMS features:

Role-Based Access Control

  • Admin → full access

  • Author → create and manage own posts

Handled via Supabase RLS, not just frontend checks.

✍️ WYSIWYG Editor

No markdown friction.

  • Rich text editing

  • Formatting, images, structure

  • Clean JSON storage

This alone makes it feel like a real product.

📝 Draft → Publish Workflow

  • Write drafts

  • Edit anytime

  • Publish when ready

Simple, but essential.

🧠 Clean Architecture

Instead of dumping everything in /lib, I used:

features/
  posts/
  users/
  auth/

Each feature contains:

  • queries

  • actions

  • validation

  • types

This made the project AI-friendly and scalable.

⚠️ Lesson Learned: Security Is Real

At one point, I accidentally exposed a database password.

That was a good reminder:

  • Always use .env.local

  • Never commit secrets

  • Rotate credentials immediately

  • Treat tokens like passwords

Building real apps means dealing with real risks.

🌐 Deployment

The blog runs on:

blog.frankmendez.site

Deployed via Vercel with:

  • automatic builds

  • environment variables

  • domain routing

Clean and painless.

💡 Why This Project Matters

This isn’t just a blog.

It demonstrates:

  • full-stack architecture

  • authentication & RBAC

  • database design with RLS

  • rich text editor integration

  • AI-assisted development workflows

This is the kind of project that:

  • gets attention from recruiters

  • shows real-world thinking

  • can evolve into a product

🔮 What’s Next

A few ideas I’m exploring:

  • comments system

  • analytics dashboard

  • scheduled publishing

  • multi-author collaboration

  • AI-assisted writing

  • turning it into a headless CMS

🧠 Final Thoughts

AI didn’t build this project.

I did — with AI as a tool.

The difference is:

  • without AI → slower execution

  • with AI → faster iteration, better leverage

The real skill now is not just coding.

It’s orchestrating systems, tools, and intelligence.

If you’re a developer, my advice:

Don’t just build apps.

Build systems that show how you think.

✌️ Frank

CMSNextJS