Overview
MealMapper came out of a chore my wife and I repeat every single week: decide what we're eating, then turn those decisions into a grocery order. The deciding is the fun part. The translation is pure friction: cross-referencing recipes, consolidating ingredients, remembering we're already out of garlic, retyping the whole thing into a store app.
So MealMapper follows one straight line and removes the friction at every step:
plan the week → auto-build the grocery list → order it, without retyping a thing.
It was also my first project on a real backend. Supabase handles auth, a Postgres database, and realtime sync, so both of us edit the same plan and the same list from our own phones and see each other's changes live.
Plan a week of meals
The week is the home screen. Tap any day, and a picker opens with your whole recipe library: searchable, filterable by how the meal cooks (Quick Prep, Slow Cooker, Rice Cooker), and with a Surprise Me button for the nights you can't decide. The library itself is organized into collections you define ("Kids meals," "Pasta," "Quick meals"), with favorites and prep times on every card.
Every recipe in one place
You shouldn't have to retype a recipe you found online. Paste a URL and MealMapper reads the page's structured recipe data, pulling the photo, ingredients, instructions, times, and servings into a clean preview before you save it. Pick a different hero image from the page's thumbnails if you like. You can also enter one by hand. Every saved recipe gets Details / Ingredients / Cook tabs, a serving scaler that adjusts quantities, and a quiet "times made" counter.
A grocery list that builds itself
This is the step that used to eat the most time, so it's the step MealMapper automates completely. From the week's planned meals it generates one consolidated list, merging duplicate ingredients across recipes, carrying their quantities, and sorting everything into the order you actually walk a store: produce, bakery, meat, dairy, pantry, frozen. Pantry staples you always keep on hand are tracked separately so they don't clutter the run. Check items off as you shop, and because the list lives on the household, whoever's at the store and whoever's at home are looking at the same thing in real time.
Order without retyping it
A finished list is only half the job. You still have to buy it. MealMapper closes that gap by connecting straight to the store. Link a Kroger account and it matches each item on your list to a real product on the shelf, with live prices, sale flags, and pickup-or-delivery availability, so you can confirm the exact thing you meant and send the whole cart to Kroger in one pass. Prefer Instacart? The same list hands off there instead.
Built on a real backend
Under the product-y surface, MealMapper is a single Expo + React Native codebase that ships to iOS, Android, and the web build linked above. State is split between a Zustand store for UI and TanStack Query for server data. Supabase is the backbone (auth, Postgres, and Realtime for the live household sync), and the parts that have to talk to the outside world run as Supabase Edge Functions: a recipe importer that parses structured recipe markup from arbitrary URLs, and the Kroger OAuth, product search, and cart endpoints (plus Instacart link generation) that make the one-tap order possible.
My role
Everything: concept, product and UX design, and the full-stack build, from the Supabase schema and edge functions through to the cross-platform app and this web deployment.