Building a Minimalistic Blog Writer with AI: Part 2 - From Spec to Reality

Here’s the full video:

In my previous post, I shared how I started this journey to build a clean, minimalistic blog writer using only AI coding tools. Today, I'm diving into the actual implementation, sharing both the successes and the stumbling blocks along the way.

The Tech Stack Decision

Before jumping into code, I spent time creating a solid specification. Here's what I settled on:

• Frontend: React + Vite (not Next.js)

• UI Library: ShadCN

• Backend: Supabase

• AI Integration: Custom API (HyperLeap AI)

Why These Choices?

React + Vite over Next.js: For a simple blog writer, we don't need server-side rendering. React with Vite keeps everything lightweight and running in the browser. Next.js makes sense when you need SEO optimization, server-side logic, or complex business rules - none of which apply here.

ShadCN: It's become the go-to UI library for modern SaaS applications. Look at any contemporary web app - those clean dashboards, elegant forms, and command palettes? Most likely ShadCN. The alternatives like Ant Design felt too heavy for our minimalistic goals.

Supabase: Instead of setting up Postgres directly, Supabase wraps it with a beautiful API layer. The killer feature? Row-level security means we can connect our React app directly to the database without needing a separate backend server.

The Bolt.new Experiment

Armed with my specification, I decided to test Bolt.new. I pasted the entire spec and... the results were underwhelming:

• The editor page looked broken

• Color schemes were inconsistent

• The "new post" button wasn't even styled properly

• Despite specific instructions for full-width layouts, it defaulted to constrained widths

The fundamental issue? These AI coding platforms like Bolt and Lovable are great for quick prototypes, but you quickly hit their limitations. Every small change requires wrestling with their UI, and you know that's not how real developers work to get stuff done.

Enter Claude Code + Cursor

Time for a different approach. I created an empty directory called "no-nonsense-writer" and fired up Claude Code through Cursor. Starting from scratch:

claude

Then simply: copy-pasted a screen that I already designed with Claude (see video).

The magic began immediately. We faced some issues, but soon Claude Code created a beautiful editor screen within the React app with a command palette (accessed with /) that included:

• AI assistant integration

• Theme toggling

• Sharing options

• Settings and more.

The Debugging Dance

Of course, it wasn't all smooth sailing. The first render showed a completely broken UI with overlapping elements. Here's where AI coding truly shines - instead of panicking, I simply:

1. Took a screenshot of the broken UI

2. Pasted it back to Claude

3. Let it diagnose and fix the issues

Claude identified missing Tailwind CSS configuration and went through multiple approaches:

• Tried NPX installation (failed)

• Attempted PNPM approach (also failed)

• Finally created proper Tailwind config files

This iterative problem-solving is exactly what makes AI coding powerful. It doesn't need to work on the first try - it just needs to be persistent and intelligent about trying different solutions.

Key Learnings

1. Stack Matters for AI Success

Modern AI models are best trained on React/Next.js codebases. Using these popular stacks means better AI assistance and fewer ambiguities.

2. Start Simple, Iterate Fast

Don't over-engineer. For a blog writer, we don't need complex server architecture. Supabase + React is plenty.

3. AI Coding Platforms Have Limits

Tools like Bolt and Lovable are great for prototypes but frustrating for real development. Better to use AI as a coding assistant within traditional development environments.

4. Debugging is Part of the Process

When things break (and they will), treat it as an opportunity. Feed errors back to the AI and watch it problem-solve.

Next Steps

The editor is taking shape nicely with:

• Clean, minimalistic design

• Light/dark theme toggle

• Command palette for quick actions

• Notion-style markdown support (coming soon)

In the next part, I'll focus on:

• Perfecting the editor experience

• Adding Notion-style heading shortcuts

• Connecting to Supabase for data persistence

• Implementing the AI writing assistant

The future of coding isn't about AI replacing developers (maybe it does, but that is not the point) - it's about AI amplifying and helping us in what we can build. And based on today's progress, that future is looking pretty exciting.

---

Have questions about the build process? Drop them in the comments below.