Vibe Code to codebykarun.com: Choosing the Right Tools (Part 2)

Part 2 of 5 • Previously: What is Vibe Coding?

In Part 1, I introduced vibe coding and my journey as an iOS developer building a web blog. Now let's dive into the first critical phase: choosing the tech stack.

The First Conversation

As an iOS developer, I didn't know the web ecosystem well. Should I use Next.js or Gatsby? React or Vue? The options were overwhelming.

Here's the actual prompt I used:

My First Prompt:

I want to build a personal blog site with two main sections: coding articles 
and personal reflections. I'm primarily an iOS developer but comfortable with 
TypeScript. What modern tech stack would you recommend for a fast, 
SEO-friendly blog that's easy to maintain?

The Response: A detailed breakdown of options, ultimately recommending Next.js 15 with the App Router, TypeScript, Tailwind CSS, and MDX for content.

Going Deeper: Understanding the "Why"

Getting a recommendation is one thing. Understanding it is another. I followed up:

Follow-up Prompt:

Why Next.js 15 specifically? What advantages does the App Router have over 
the Pages Router for a blog? I want to understand the tradeoffs.

The Response: "App Router gives you React Server Components by default, which means your blog content renders on the server with zero JavaScript shipped to the client for static content. The file-system routing is more intuitive for content-based sites, and you get better performance out of the box."

This wasn't just a technical recommendation—it came with reasoning, examples, and considerations about my specific use case as someone new to web development.

Content Management Strategy

Next question: How do I manage content?

My Prompt:

I want to write my blog posts in Markdown for simplicity, but I also want the 
flexibility to add interactive React components when needed. I don't want to 
deal with a complex CMS—just files I can edit. What's the best approach?

The Response: A recommendation for MDX with a file-based content structure.

Follow-up Prompt:

Show me how to structure the content directory and define TypeScript types 
for articles. I want type safety throughout the app. Each article should have 
a title, excerpt, publish date, tags, and the content itself.

Within minutes, we had:

export interface Article {
  slug: string;
  title: string;
  excerpt: string;
  date: string;
  tags: string[];
  content: string;
}

No deliberating over schemas for hours. Just a conversation that led to a clean, extensible solution.

The Design Decision

As a developer without design expertise, this was my biggest worry. But the right prompt made all the difference:

My Design Prompt:

I want a clean, minimalist design for my blog. Think Hacker News meets 
Medium—lots of whitespace, excellent typography, and subtle use of color. 
I need dark mode support from day one. The design should feel professional 
but not corporate, modern but not trendy. Can you create a cohesive design 
system using CSS variables so I can easily adjust the theme later?

The Response: A complete design system with HSL-based CSS variables, typography scales, and spacing tokens.

Refinement Prompt:

The color palette looks good, but I want the dark mode to be less harsh—
more of a deep gray rather than pure black. Also, can you ensure all the 
colors have proper contrast ratios for accessibility?

The AI generated a cohesive design system: