Vibe Coding: From Zero to Hero

1. About the Project

Inspiration

The term "vibe coding" has exploded in popularity — the idea that you can describe what you want and let AI generate the code. But most people who try it hit a wall: they jump straight from a vague idea to prompting an AI code generator, and the results are unfocused, inconsistent, or miss the mark entirely.

We realized the gap isn't in code generation — it's in thinking before generating. The best software engineers don't start writing code immediately; they brainstorm, research, define purpose, and plan architecture first. What if we could guide vibe coders through that same structured thinking process, powered by AI at every step?

That's how Vibe Coding: Zero to Hero was born: a tool that transforms abstract vibes into precise, actionable spec documents — bridging the gap between "I have an idea" and "here's exactly what to build."

How We Built It

The app is a React 19 + TypeScript single-page application built with Vite 8, styled with Tailwind CSS 4 and shadcn/ui components.

The core AI engine uses the Gemini API (gemini-2.5-flash) exclusively. We built a custom streaming pipeline that handles:

• 4-way parallel divergent brainstorming — the AI generates 4 distinct angles simultaneously via Promise.allSettled, each streaming in real-time
• Context compression — when exploration trees grow deep ($depth > 3$), ancestor context is compressed to ~200 words to stay within token limits:

$$C_{compressed} = f(C_{ancestors}) \quad \text{where} \quad |C_{compressed}| \leq 200 \text{ words}$$

• Purpose-aware conversation — 6 different system prompts tailored to project types (commercial, hackathon, open source, learning, internal tool, research), each guiding the AI to ask relevant questions and provide domain-specific advice

Data persistence is 100% local-first using Dexie.js (IndexedDB wrapper) with reactive queries via useLiveQuery. No account needed, no server database — your data stays in your browser.

The exploration tree is visualized using @xyflow/react with dagre for automatic graph layout, giving users an intuitive map of their brainstorming journey.

A Vercel Edge Function serves as an API proxy, keeping the Gemini API key secure on the server side while streaming SSE responses directly to the client.

What We Learned

• Structured thinking amplifies AI output quality. When users go through brainstorm → search → purpose → implementation before generating a spec, the final output is dramatically more focused than jumping straight to generation.
• Streaming UX matters. Showing AI responses character-by-character (like ChatGPT) instead of waiting for the full response makes the app feel 3-4x faster subjectively, even though the actual latency is the same.
• Race conditions in reactive databases are subtle. Dexie's useLiveQuery is powerful, but when you write to the DB and immediately navigate, the query may not have refreshed yet — leading to stale state and false redirects. We solved this by checking both the full completion history and the immediately preceding stage.
• Gamification drives engagement. Adding XP, levels, and achievements transformed the app from a utility into something users actually want to keep using.

Challenges

• Rate limit management — Gemini's free tier has strict RPM/RPD limits. Our 4-way parallel diverge consumes 5 API calls instantly (4 streams + 1 angle generation). We had to implement careful throttling, user-friendly error messages, and distinguish between per-minute rate limits and daily quota exhaustion.
• Parallel streaming synchronization — Streaming 4 AI responses simultaneously while keeping the UI responsive required careful state management. We use Promise.allSettled so partial failures don't break the entire diverge operation.
• Context window optimization — Deep exploration trees can easily exceed Gemini's context window. Our compression algorithm preserves the key insights from each ancestor node while staying within token budgets.
• State consistency across stages — Each stage depends on data from previous stages. Ensuring that completing one stage and navigating to the next doesn't trigger false "access denied" redirects due to async DB writes was one of our trickiest bugs.

Built With

• vite