From Idea to 'Vibe Code': Building a Kids' Math App in a Few Hours

It was one of those evenings. An idea sparked, and I just had to run with it. The concept was simple: a clean, fun, and straightforward web app for kids to practice basic addition and subtraction. No frills, no complicated sign-ups, just pure, simple math. I wanted to see if I could go from a thought to a functional product in just a few hours. This is the story of that little coding sprint.

The website is already online at MathWhiz. In the beginning I used Gemini Pro 2.5 in AI studio to make it happen. However, when things gets more and more complicated, I went ahead to integrate with VS Code to work on more complicated structures.

The concept of “vibe coding” is about getting a prototype running quickly, not engineering a flawless, enterprise-ready system. I experienced this firsthand when I spun up a working demo with just a few prompts. However, I hit a frustrating roadblock with a seemingly simple task: swapping a generated SVG giraffe with a PNG image. The AI assistant I used for debugging got stuck in a loop, fruitlessly altering the image path over and over. It never diagnosed the real problem, which I eventually found through careful manual inspection: the PNG file was broken.

Let me know if you have any thoughts!