The Dinner Tracker
A meal planner for a wheat-free, dairy-free, pescatarian household — built entirely through conversation with Claude.
We cook dinner at home most nights. My partner and I keep a pescatarian, wheat-free, dairy-free kitchen, which means restaurant fallbacks are limited and meal planning actually matters. For years I kept a running list of recipes we liked in a notes app and held a rough weekly plan in my head. That worked until it didn't.
The mental load crept up on me: tracking what was in the fridge and what needed to be used before it went bad, remembering that we'd had pasta twice this week, figuring out whether there was enough quinoa to make the thing I was thinking of — all of it added up to a low-grade friction that made dinner feel like a chore before it started.
I wanted something that would let me look at the next week of dinners at a glance, generate a grocery list automatically from whatever was planned, and suggest what to cook based on what was already in the fridge. I wanted it to live in the browser, sync between my phone and laptop, and require essentially zero maintenance. The catch: I don't write software.
This is the actual tracker, pulling live data from our household's shared meal plan. Everything here is read-only — you can browse the recipe library, explore the grocery list, and play with the pantry matcher, but scheduling and editing are behind a login.
This is a vibe-coded project. That term gets used loosely, but here I mean something specific: I described what I wanted in plain English, Claude wrote the code, I reacted to what I saw in the browser, and we iterated from there. I didn't write a single line of JavaScript. Every function, every tab, every Firebase call came out of a conversation.
The first working version appeared in a single session. I started with a prompt that described the core problem — a multi-tab meal planner with a recipe library, a grocery list, and a pantry-matching tab — and asked for a self-contained HTML file I could open in any browser. That first version used local storage and worked immediately.
The initial prompt looked roughly like this:
I want to build a meal planner web app as a single HTML file. My household is wheat-free, dairy-free, and pescatarian. I need at minimum: a recipe library I can search and browse, a weekly view of upcoming planned dinners, and a grocery list that aggregates ingredients from whatever's scheduled. Stretch goal: a tab where I can tap the ingredients I have on hand and it shows me which recipes I can make. Keep it simple — no build tools, just a single file I can open in a browser. Use a clean, card-based design with a dark green header.
From there the iterations were fast. In the same session I added a proper data model with ingredient types (protein, grain, vegetable, etc.), urgency badges for upcoming meals, and the pantry matcher with a match-percentage bar. The app already felt useful.
The bigger lift came in a follow-up session: replacing local storage with
Firebase Auth and Firestore, so my partner and I would see the same meal plan
on any device without thinking about syncing. That required moving from a simple
file to a proper app with a login gate, a cloud database document, and real-time
updates via onSnapshot. Again, I described the goal, asked questions
when I didn't understand a step (like how Firestore security rules work), and
Claude handled the implementation.
The version you're looking at above is the current production app — the same one we use to plan dinners every week. It has 21 recipes, a two-week forward plan, and a grocery list that I take to the store on my phone.
The easiest way to make something like this is to describe your version of the problem and see what comes back. You don't need to know how web apps work — just be specific about what you want to track and what you want to do with that information.
Here's a template adapted from the prompt I used. Paste it into a conversation with Claude, swap in your own dietary constraints and features, and iterate from whatever you get back:
Build me a meal planner as a single self-contained HTML file (no build tools, no frameworks — just one file I can open in a browser). My household is [dietary constraints, e.g. gluten-free, vegetarian]. I need: - A recipe library I can search and browse - A weekly view of upcoming planned dinners, with urgency indicators (today / tomorrow / in N days) - A grocery list that automatically aggregates ingredients from whatever meals are scheduled in the next 7 days, grouped by category (protein, vegetable, grain, etc.) with checkboxes - A "what can I make?" tab: I tap the ingredients I have, it shows me which recipes match and how well Design: card-based UI with a [color] header. Clean and simple — this is a functional tool, not a portfolio piece. Start with 3–4 sample recipes in my dietary style so I can see it working immediately.
Once you have a working prototype, the next question to ask is: how do I make this permanent? A file on your desktop works, but it's brittle — one bad save and the data's gone, and you can't use it from your phone. That's when the conversation shifts to Firebase, GitHub Pages, and cloud sync — which is its own project, but a tractable one if you're curious to go there.