Mealmind

Skipping the plan doesn't just make evenings stressful. It shows up in the grocery bill and in the trash.

• 68% of married or partnered U.S. adults say deciding what to eat is their biggest mealtime challenge, and 44% struggle to come up with a dinner plan most nights. (Wakefield Research for Factor, 2024)
• $728 of purchased food is wasted per U.S. consumer each year, or $2,913 for a household of four. (U.S. EPA, 2025)
• 26% of U.S. households produce 38% of food waste, and that group plans meals ahead less often than average. (Li & Roe, 2024)

The daily decision is the hard part, and when nobody makes it, food and money go to waste.

Planning helps: 57% of adults plan meals at least occasionally, and planners eat a wider variety of food with better diet quality (Ducrot et al., 2017). But for most people planning is optional, so a planner only works if it feels lighter than not planning at all.

Each finding became a design goal:

• Deciding is the biggest challenge, so the app should suggest, not ask. There should always be a starting point.
• Planning is optional for many people, so planning has to be quick: a few taps, not a spreadsheet.
• Households that plan less waste more, so the plan has to connect to the shopping trip.
• Cooking happens every day, so the app should keep what works: saved recipes, plans and lists that are still there tomorrow.

The breakthrough was realizing Mealmind isn't really a recipe app. Plenty of apps help you find a recipe. The real gap is between choosing meals and buying only what those meals need. That turned the brief into one question:

How might we help people decide what to eat before mealtime arrives, and buy only what their plan needs?

From then on, every screen had to move people along one path: get an idea, put it in the week, and walk out with a grocery list.

I wrote a prompt from that colored mockup for Figma Make to generate a first version, then rebuilt seven screens as editable Figma frames with auto layout, the olive-and-cream palette and DM Sans. I put the smiley logo beside every page title, so each tab shares the same header and the app reads as one product instead of separate pages.

I linked 51 interactions so the main flow could be clicked through before any code existed: switching tabs, opening a recipe, and sliding up the Add Meal sheet to drop it into the planner. The nav highlight uses Smart Animate to glide to the new tab, so people always see where they are and where they came from.

Building the live React app with real recipes exposed problems no mockup could. Ingredient data arrived messy ("6 servings avocado," wrapped units), so I redesigned the list with the name on the left and the amount on the right, one clean column that's easy to scan while cooking. Where the recipe source had no cook time or calories, I showed cuisine and category instead of inventing numbers. I pinned the status bar and nav so they stay in reach on long pages, and resized the Home tagline that was crowding the top of the screen.

This is also where the feature that ties everything together came to life: the grocery list. One button turns the week's meals into a combined list, adding matching ingredients together ("Garlic, 5 cloves," with the recipes that need it). A friendly grocery bag button with a carrot carries a badge counting what's left to buy.

• Home loads a fresh set of recipes from the spoonacular API on every visit, with real cook times, servings and calories.
• The free API plan allows about 25 opens a day. When it runs out, the app switches to TheMealDB automatically, so nobody sees an empty screen.
• A small server function keeps the API key out of the public code, as spoonacular's terms require.
• Saved recipes, the meal plan, the grocery list and your name stay in the browser between visits.
• Every change deploys to Vercel from GitHub.

I used AI as a production partner. Figma Make generated a first version of the screens from my prompt, and I chose what to keep. Claude rebuilt the screens as editable Figma frames, wrote most of the React code and connected the recipe API, while I refined the layout, chose the API and directed every change. ChatGPT and Claude helped find statistics, and I dropped any number I couldn't verify against its original source.

The most valuable part was the feedback loop: I tested the live app on my phone, caught what AI missed, and directed each fix. It let me ship a working product in days, and taught me to treat AI output as a first draft that still needs a designer's eye.

Mealmind went from a notepad sketch to a live app anyone can open on their phone. Open it and you get ideas right away. Tap a recipe into your week, and the grocery list writes itself.