Building a Modern Blog Platform with Vibe Coding

I Built My Blog by Following the Vibes (And It Actually Works)

You know that feeling when you sit down to code and everything just flows? That's vibe coding. No rigid specs, no upfront architecture diagrams, just you, your editor, and the gentle hum of intuition guiding your fingers across the keyboard.

It was 11 PM on a Thursday. I opened VS Code with zero plan, zero wireframes, and zero architecture diagrams. Just a wild idea: What if I stopped overthinking and just... coded?

Two days later, I had a fully functional blog platform running in production. No burnout. No decision paralysis. Just pure flow.

This is the story of how I built my blog platform—not through meticulous planning, but by vibing my way to a production-ready Next.js application.

The Vision (Sort Of)

I didn't start with a detailed spec. I just knew I wanted:

• A blog where I could write
• An admin panel to manage posts
• Something that felt modern and fast
• Dark mode, because obviously

That's it. No user stories. No wireframes. Just vibes.

The Journey Begins

I fired up a new Next.js 16 project. The App Router felt right—Server Components, streaming, all that good stuff. TypeScript? Of course. The red squiggles are part of the vibe; they keep you honest.

npx create-next-app@latest blog-site --typescript --app --tailwind

Wait, TailwindCSS? Nah. The vibe told me to go with vanilla CSS this time. Sometimes you just need to write your own styles and feel the cascade. I removed Tailwind and created a globals.css with CSS variables for theming:

:root {
  --background: #ffffff;
  --foreground: #0a0a0a;
  --accent: #0070f3;
}
 
@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

Pure vibes. Let the browser do the theme switching automatically.
Vibe check: 10/10. Already felt more connected to the code.

Database decisions

I needed to store posts somewhere. The vibe whispered "Prisma + PostgreSQL." Simple, elegant, type-safe.

No over-engineering. Just the essentials. The index? I added that later when I felt the queries getting slow. That's vibe coding—optimize when the pain is real, not when you imagine it might be.

The Content Experience

For writing, I needed something better than plain HTML. MDX came calling. With next-mdx-remote, I could write in Markdown but sprinkle in React components when needed:

import { MDXRemote } from 'next-mdx-remote/rsc'
import rehypeHighlight from 'rehype-highlight'
import remarkGfm from 'remark-gfm'
 
const content = await MDXRemote({
  source: post.content,
  options: {
    mdxOptions: {
      rehypePlugins: [rehypeHighlight],
      remarkPlugins: [remarkGfm],
    },
  },
})

Syntax highlighting? Handled. GitHub-flavoured markdown? Done. The vibe was strong.

Authentication without the Pain

This is when things got weird (in a good way).

I started building the admin panel and realized I didn't need API routes. Server Actions just... made sense. Delete a post? It's just a function. No REST architecture, no GraphQL schemas, no overthinking.

async function deletePost(id: string) {
  // Just... delete it
}

By now, the vibe had its own momentum. The blog was telling me what it wanted to become. Every decision was instant. No analysis paralysis. Just "does this feel right? Yes? Ship it."

The Aesthetic Vibe

Dark mode wasn't just a feature—it was a vibe. I built a theme toggle that felt right:

const toggleTheme = () => {
  const html = document.documentElement
  const newTheme = html.getAttribute('data-theme') === 'dark' ? 'light' : 'dark'
  html.setAttribute('data-theme', newTheme)
  localStorage.setItem('theme', newTheme)
}

Smooth transitions, CSS variables, system preference detection. It just felt good.

The Results

After vibing my way through development, I ended up with:

• 🔐 Secure admin dashboard with rate limiting and middleware protection
• 📝 Rich MDX content with syntax highlighting
• 🎨 Beautiful dark mode that respects system preferences
• 📱 Mobile-responsive with smooth animations

Lesson Learned

• Flow state is a superpower
  When you're vibing, you write better code than when you're following a rigid plan. Because you're present with the code.

• Done is better than perfect
  My blog isn't perfect. But it's real, it's live, and I actually finished it instead of abandoning it in planning hell.

Trust me. The vibe knows what it's doing.

And if you feel stuck, remember: every line of code is a vibe check. If it feels wrong, it probably is. If it feels right, it probably is.

Now if you'll excuse me, I have more vibes to code. ✌️

Built with: Next.js, React, TypeScript, Prisma, PostgreSQL, NextAuth.js, MDX, and pure vibes ✨

P.S. - This entire blog post? Written in the same blog platform I vibe-coded.