TL;DR β what I want you to take away
- I started with a voice-note dump of pain points. No brief, no wireframe, no spec.
- Claude Chat turned it into a working React prototype β in the same conversation.
- Claude Code turned it into a real deployed app with 72 passing tests.
- The whole thing β from "I have this problem" to live URL β happened inside AI chat sessions.
- The hardest parts were not the code. They were being clear about what I actually wanted.
The problem I was actually trying to solve
We are a family of four in Melbourne. My husband and I both work full-time. We have Mia (11, competitive swimmer) and Marcus (6, obsessed with football). Every weeknight, after a full day of work, we face the same exhausting question: what are we making for dinner?
That question sounds trivial. It is not. By 6pm, neither of us has the cognitive bandwidth to inventorise the fridge, plan a meal around what we have, figure out what to buy tomorrow, and satisfy two children with completely different taste preferences β all at once.
The pain points, as I eventually articulated them:
Decision fatigue, daily
The "what's for dinner" question hit us when we had the least mental capacity. We needed an answer library, not a blank canvas.
Fridge blindness
We didn't know what was in the freezer. We'd buy more chicken when we already had lamb. We'd run out of rice without noticing.
Shopping chaos
We buy from three places β Costco for bulk, Woolworths for daily, the Asian grocer for specific ingredients. No system. Constant forgetting.
Two phones, no shared brain
My husband and I would each buy things independently. We'd both come home with milk. We'd both forget eggs.
And there was the kids' dimension. Mia loves Chinese food β dumplings with chive filling, scallion noodles, pan-fried potstickers. Marcus wants meat, spaghetti, pizza, Japanese rice balls, teriyaki chicken. He won't eat eggs. Neither of them will happily eat a stir-fry. So "just make dinner" isn't simple β it's a matrix.
I have a fitness habit on top of this. High protein, convenient, 30 minutes max. The intersection of "what the kids will eat" and "what supports my training" is not enormous.
How I turned chaos into a brief β without writing a brief
I didn't open a Google Doc. I didn't sketch wireframes. I opened Claude Chat and I talked at it.
My input was genuinely messy β the kind of thing you'd say to a friend over coffee. Incomplete sentences. Stream of consciousness. Half-formed ideas mixed with specific details.
"We're a family of four, both working, two kids, one loves dumplings, one loves pizza but won't eat eggs, I'm trying to eat high protein, we have a small fridge and a chest freezer, I have no idea what's in either of them on any given day, and every night we end up either ordering in or arguing about what to makeβ¦"
Claude didn't just nod along. It asked clarifying questions. It reflected back what it heard. It helped me articulate things I hadn't fully formed yet β like the fact that the shopping list problem wasn't just about forgetting items, it was about not knowing which store to get each thing from.
By the end of that first exchange, I had something I didn't expect: a structured set of requirements. Not because I wrote them β because Claude helped me surface them from the mess in my head.
What Claude Chat actually produced β step by step
This is the part people find hard to believe. The prototype didn't come at the end of the conversation. It came during it.
A working React app β in the Artifact panel
After I described the problem, Claude generated a full React component that ran live in the Claude Chat interface. Four tabs: pantry inventory, photo scan, restock suggestions, and a recipe library. Real UI, real interactions, real data. I didn't write a line of code β I just described what I wanted and it appeared.
Iterating on details in plain language
I noticed the app had placeholder names for my kids β "ε·ε·" and "δΈδΈ" (the Chinese nicknames I'd used loosely in my description). I said: "Change those to Mia and Marcus." Claude ran a find-and-replace across every component, every label, every filter tag. Done.
Connecting to real AI β Vision API and text generation
I asked: "Can the photo scan actually work? Like, I take a photo of groceries and it tells me what's there?" Claude rewired the scan tab to call the real Claude Vision API. Photo β base64 β API β parsed ingredient list. The restock suggestions tab got connected to Claude's text generation too, with our family's taste profile baked into the system prompt.
Deciding on the real infrastructure
The Artifact was a prototype β data lived in memory, vanishing on refresh. I asked how to turn this into something real that my husband and I could both use. Claude walked me through the options: Vercel for hosting (I already had an account), Neon Postgres for the database (native Vercel integration, free tier sufficient), Anthropic API for the AI features. We decided on Next.js with TypeScript and Tailwind CSS.
Engineering discipline before touching code
Before opening Claude Code, I asked Claude Chat to help me write two documents: a PRD.md with every feature, user story, and priority β and a CLAUDE.md that would tell Claude Code exactly how to work: TypeScript strict mode, TDD flow, mobile-first, API response format, git commit conventions. I also asked Claude to generate a "launch prompt" β a complete brief I could paste into Claude Code to start the build.
What Claude Code built β the real app
The app is called Milo β short for "Meal Intelligence for Loved Ones" (the kids named it, sort of). It's live at milov1.vercel.app.
Pantry inventory
Freezer / fridge / shelf sections. Tap +/- to update. Low stock warnings at qty β€ 1.
Photo scan
Take a photo of groceries. Claude Vision identifies the ingredients and adds them to your inventory β stacking, not overwriting.
Recipe library
8 family-tested recipes pre-loaded. Add new ones manually or paste any text and let AI extract the ingredients.
Shopping lists
Add manually, or let AI generate a list from your current inventory + the week's recipe plan.
Master shopping list
Everything you've ever bought, sorted by category. Tag each item: Costco, Woolworths, or Asian grocer.
Two-phone sync
My husband and I share one Neon Postgres database. Either of us can update the pantry in real time.
The build was TDD β tests before implementation
This is something I insisted on in CLAUDE.md, and it changed the quality of the output significantly. Claude Code wrote the tests first β all failing β then wrote the implementation to make them pass. 72 tests across all API routes. When I deployed, nothing broke. That's not a coincidence.
The bugs and the honest mistakes
I want to be specific about what went wrong, because the polished version of "AI built my app" hides the real learning.
| What went wrong | What actually happened | How it got fixed |
|---|---|---|
| Environment variables not set | All data lived in memory, vanished on refresh β for hours before I noticed | Added .env.local with DATABASE_URL and ANTHROPIC_API_KEY |
| Vercel Secret reference syntax | Vercel treated DATABASE_URL as a secret reference, not a plaintext string β repeated deploy failures | Used vercel env add CLI in plaintext mode |
| Neon DECIMAL returned as string | Qty field came back as "2" not 2 β arithmetic produced NaN throughout the UI |
Wrapped all DB reads with Number() conversion in db.ts |
| Seed data not persisting | Empty DB fell back to static data β felt like it was working, but refreshing reset everything | Added auto-seed: detect empty DB β POST seed β re-fetch |
| CLAUDE.md content lost in iteration | I sent an engineering philosophy doc to add to CLAUDE.md. Claude summarised it instead of preserving it verbatim β I lost 5 key principles | Caught it, called it out, Claude replaced with original text in full |
| First Notion article wasn't factual | Asked Claude to write the project journey. It wrote a plausible-sounding version that wasn't what actually happened | Pointed it out, Claude rewrote based solely on what actually occurred in our conversation |
What I actually learned about building with AI
Voice-to-requirements is a real method
I didn't write a PRD. I talked at Claude until my requirements emerged. This is viable β and for non-technical founders, it might be the best starting point. The output was more detailed than most briefs I've written the "proper" way.
CLAUDE.md is the most important file in your project
It's not documentation. It's the AI's operating manual. Every constraint, convention, and engineering principle I cared about went in there. Claude Code read it before every action. The quality difference between "chat with no context" and "Claude Code with a detailed CLAUDE.md" is enormous.
Tests first isn't just a coding principle β it's an AI discipline
Requiring Claude Code to write tests before implementation changed what it built. Tests became the specification. When something broke, the test told me exactly what broke. 72 tests, zero post-deploy bugs.
You have to review what AI produces
Claude simplified my engineering philosophy doc without telling me. Claude wrote a "factual" journey article that wasn't factual. Not malicious β just filling gaps. The skill isn't prompting perfectly. It's catching drift quickly and correcting it.
Iteration is the product
The PRD was updated twice. CLAUDE.md was rewritten once. The Notion article was replaced once. This is normal and healthy. AI gives you fast first drafts. You give it precise corrections. That loop is the actual workflow.
Where Milo is now
| Feature | Status | Notes |
|---|---|---|
| Pantry inventory (fridge / freezer / shelf) | Live | Real-time +/-, low stock alerts |
| Photo scan β inventory update | Live | Claude Vision, stacks not overwrites |
| Recipe library with editable ingredients | Live | 8 family recipes pre-loaded + add new |
| AI text-to-recipe extraction | Live | Paste any text, AI extracts ingredients |
| Shopping list (manual + AI-generated) | Live | Tick off β auto-adds to Master list |
| Master shopping list with store tags | Live | Costco / Woolworths / Asian grocer labels |
| Two-phone sync (husband + me) | Live | Neon Postgres shared database |
| 72 automated tests | Passing | All API routes covered |
| Weekly meal planner | Phase 2 | Planned next sprint |
| Nutrition labels (protein / carbs) | Phase 2 | For my fitness tracking |
Want to build something real with AI?
I run workshops for working professionals and parents who want to go from idea to working tool β without waiting for a developer. Come see what's possible.
See upcoming workshops β