I’ve built this site from the ground up. Over the years, I’ve used nearly every blogging platform: WordPress, Ghost, Substack, and more. But with the rise of generative AI, I wanted to roll my own. No templates, no prebuilt themes. Just me, rolling up my sleeves and vibe coding every page and design element into existence.
Part of this project is about learning firsthand how GenAI changes the way we build. I wanted to experience how natural language could become a true programming interface, shifting my focus from writing syntax to designing ideas.
Three months in, I’ve been publishing daily, seventy-five posts and counting. What started as a clean, minimal blog revealed an obvious limitation: my archive page was sub-optimal. It simply listed every post in one long scroll with no way to filter by topic or type. As the number of posts grew, this design would not scale.
I needed a better structure that was organized, navigable, and future-proof. So I turned to my trusted collaborator, Claude Code, to help reimagine the archive experience and make it scale.
The Problem: Archives at Scale
The challenge was clear. The archive needed to support hundreds, eventually thousands, of posts while allowing readers to filter by article type and category. It also had to be SEO-friendly, fast, and simple to maintain.
I outlined what I wanted:
- Server-side pagination with 40 posts per page
- Routes for filtering by type and category
- Clean URL structure (
/archives/1,/archives/articles/1, etc.) - Category-based navigation for my main topics
Implementing all that by hand would have meant a long session of pagination logic, route handling, and performance tuning. Instead, I described the problem to Claude.
The Vibe Coding Session
I opened Claude Code and wrote a short prompt describing the issue:
“The archive page currently lists all posts in one long scroll. I need it to scale, with pagination and filters for easy discovery.”
What followed felt like a product design conversation, not a coding marathon. Claude asked clarifying questions, compared approaches, and outlined options.
Claude: “Should we use server-side pagination or client-side infinite scroll?”
Me: “Server-side. This needs to scale to thousands of posts.”
Claude proposed a complete solution with paginated routes, category filters, and SEO-optimized metadata. I reviewed, refined, and validated each step in real time.
This wasn’t about delegating work to an AI. It was about learning how to think in GenAI constructs — expressing intent clearly, evaluating tradeoffs, and shaping a solution through constant dialogue.
It wasn’t a one-and-done prompt. There was genuine back-and-forth, trial and error, and continuous refinement. We went through multiple iterations, troubleshooting together and reasoning through edge cases until the system behaved exactly as intended.
Think of it as pair programming with a twist. Only one of us was typing, but both of us were thinking — analyzing, debugging, and improving continuously.
What Made It Work
1. Strategic Thinking, Not Just Code
Claude reasoned through tradeoffs before generating anything.
- Server-side pagination: scalable, SEO-friendly, efficient
- Client-side rendering: flexible but heavier and slower
That context-first dialogue made me a better builder. It felt like pair programming with an engineer who explained every decision as we went.
Pro tip: Use Plan Mode strategically. Don’t rush straight into code generation. Spend a few turns refining the architecture and approach first. It’s not only smarter but also far more efficient in both time and tokens.
2. Fast, Iterative Problem Solving
When bugs appeared, we debugged collaboratively.
We checked file paths, cleared caches, and scoped variables correctly in Astro’s getStaticPaths.
Each iteration moved forward without detours or frustration.
3. Production-Quality Output
The final implementation included:
- TypeScript types and clean separation of concerns
- SEO-optimized meta tags
- Mobile-responsive layout
- Accessible navigation with ARIA labels
From the beginning, I also instructed Claude that we would follow test-driven development (TDD). Before adding any new feature, we wrote a test, watched it fail, then built the functionality to make it pass. Over time, that discipline paid off. I now have more than 200 automated tests that run for regressions with every major change.
This approach made the codebase not just functional but resilient. Claude even wrote a professional commit message summarizing each change, keeping the history clean and traceable.
My Role: Directing the Build
I made every key product call:
- Chose server-side pagination for scalability
- Defined page size for user experience and performance
- Validated every step in the browser
- Deferred advanced grouping features to a later phase
Claude wrote the code. I directed the outcome.
That shift is the essence of product thinking in the GenAI era: knowing what to build and why, not just how to code it.
The Results
Time invested: about 90 minutes
Lines of code written by me: 0
Lines reviewed and validated: around 1,500
What shipped:
✅ Fully paginated archive (/archives/1, /archives/2, etc.)
✅ Filtering by post type and category
✅ Featured posts section at the top of the archive for curated highlights
✅ Clean URLs with SEO metadata
✅ Scalable structure for thousands of posts
Why It Matters
I’m not a front-end or Next.js expert. My background is in the middle and backend layers of systems — integrations, APIs, and data flows. I used to write a lot of code, but most of it lived behind the UI.
That’s what makes this project so remarkable to me. With Claude Code, I was able to build and deploy a complete site architecture in a space that wasn’t my comfort zone. Setting up Cloudflare Pages for deployment was just as seamless. Claude generated the configuration, explained each step, and within minutes, I had a working pipeline. Now, with a single command, I can commit code and automatically trigger a build and deploy to Cloudflare.
For product managers, designers, or founders who have avoided technical work because “I don’t code,” this new workflow changes the equation.
You don’t need to be a software engineer to build. You need to:
- Understand the user problem
- Define what good looks like
- Validate that it works
Vibe coding is not about skipping the hard parts. It is about focusing on the right ones.
The Bigger Shift
The future of building is not about who types code faster. It is about who ships value faster.
AI tools make building more accessible while amplifying expert developers’ impact. They let everyone experiment, iterate, and learn by doing.
This does not replace engineers. It expands what it means to build. Great developers still architect systems and solve deep problems, while product thinkers gain a new level of creative control.
Try It Yourself
Pick one feature you have been putting off. Describe it to Claude Code, Cursor, or Copilot.
Be specific, iterate, and validate the results. You might be surprised how far you can go by framing the problem clearly and letting AI handle the mechanics.
As for me, I am already thinking about what to build next. I have a big short list of ideas to get to ASAP, including several new projects outside of this site.
The difference now is that I am no longer blocked by my coding speed.
And maybe neither are you.