Vibe Code to codebykarun.com: The 5-Year Dream Realized (Part 1)
For five years, I carried a vision: a clean, modern personal blog where I could share my thoughts on coding and life. As an iOS developer, I had the ideas but not the web development expertise—or the time to learn Next.js, React, TypeScript, and all the modern web tooling from scratch.
Then came the advent of generative AI and vibe coding. What seemed like a distant someday project became reality in just three weeks. Today, that site is live, and I built it entirely through "vibe coding"—collaborating with AI to turn ideas into production code.
This is part 1 of a 5-part series documenting how I built the foundation of my blog. Let me show you how this approach fast-tracked my vision into reality and transformed what's possible for developers stepping outside their primary expertise.
What is Vibe Coding?
Vibe coding isn't just about asking AI to write code for you. It's about having a conversation with your development environment. Instead of:
- Googling documentation
- Copy-pasting Stack Overflow
- Fighting with boilerplate
- Manually creating file after file
I describe what I want, refine the vision through dialogue, and watch as the AI helps bring it to life. It's like pair programming with someone who has infinite patience and knows every framework.
The Starting Point: Just an Idea
I started with nothing but a concept:
- A personal blog with coding and personal sections
- Clean, minimalist design
- Built with modern tech (Next.js 15)
- Content written in MDX
- Fast, accessible, SEO-friendly
No boilerplate. No starter template. Just a conversation that began with: "I want to build a personal blog site using Next.js 15."
Why This Matters for iOS Developers (and Everyone Else)
As an iOS developer, web development felt like a different world:
- Different frameworks
- Different patterns
- Different deployment models
- Different everything
But with vibe coding, I didn't need to become a web expert first. I could leverage my software engineering knowledge while learning web-specific patterns through conversation.
This isn't just for iOS developers crossing over—it's for anyone who wants to:
- Build outside their comfort zone
- Learn while building
- Ship faster without sacrificing quality
- Understand the code they're creating
The Key Insight
Vibe coding isn't about AI replacing developers. It's about collaboration:
- You provide: Vision, context, requirements, and decisions
- AI provides: Implementation details, best practices, and code
- Together: You build better software faster
Think of it as having a senior developer available 24/7 who:
- Never gets tired
- Knows every framework
- Explains their reasoning
- Adapts to your preferences
What You Can Build with Vibe Coding
Through this series, you'll see how I built:
- Complete Next.js 15 application architecture
- MDX-based content management system
- Beautiful, responsive design with dark mode
- SEO-optimized dynamic routes
- Type-safe TypeScript throughout
- Production-ready codebase
All in three weeks, as someone new to modern web development.
Coming Up Next
In the next article, I'll walk you through the actual prompts I used to choose the tech stack and make architectural decisions. You'll see how to have productive conversations with AI about technology choices.
Next in the Series
👉 Continue to Part 2: Choosing the Tech Stack
Learn the exact prompts I used to:
- Choose between Pages Router and App Router
- Decide on content management strategy
- Set up the project structure
- Make informed architectural decisions
More in this series: Part 2: Choosing the Tech Stack • Part 3: First Hour • Part 4: MDX Pipeline • Part 5: Design System • Part 6: Lessons Learned • Part 7: Best Practices