Meal Diary

Inspiration Nobody actually logs their meals. You download a nutrition app, use it for three days, get tired of searching "chicken breast" in a database, and quit. We wanted to kill the friction. You can already point your phone at anything and AI identifies it — so why are we still making people type what they ate?

What it does MealDiary lets you snap a photo of your food and instantly get calories, protein, carbs, and fat. No manual entry. The AI identifies every item on your plate, estimates portions, and breaks down your macros. You can edit anything it gets wrong, save entries to a daily diary, track streaks, and see your progress over time. Works offline too — your data stays on your phone.

How we built it React Native with Expo SDK 54, TypeScript, expo-router. The scan pipeline is: camera captures a photo, Gemini 2.0 Flash analyzes it, we parse the JSON response (with a backwards scanner because Gemini wraps everything in markdown fences), show editable results, and save to AsyncStorage. The macro ring updates live as you edit. We built a custom design system — Ionicons instead of emoji, distinct macro colors, proper spacing tokens. Zero AI slop in the UI.

Challenges we ran into Gemini doesn't return clean JSON. It prefaces with "Sure! Here's what I see:" and wraps code fences around the data. We had to build a backwards-scanning JSON extractor that finds the last { in the response and parses from there.

Portion estimation from a 2D photo is genuinely hard. A bowl of rice looks the same whether it's 200g or 400g. We use heuristic multipliers based on the AI's description ("small" = 0.5x, "large" = 1.5x) and let users override.

Expo SDK 54 broke with React 19.1. One missing function (resetServerContext removed in 19.1) caused the entire web export to silently fail. Took hours to trace to [email protected] being installed instead of ~14.0.12.

Every chatbot-generated UI looked identical — beige rounded buttons with emoji everywhere. We scrapped the first three design attempts and built the design system manually.

Accomplishments that we're proud of The photo-to-macros pipeline actually works. You point your phone at a real meal, and within seconds you get a breakdown that's about 80% accurate. That's enough to be useful without the frustration of manual entry.

We built 7 test suites with 55 tests covering nutrition math, AI parsing, storage, date handling, and credit system. Everything passes. The type system catches most bugs before they happen.

The whole app is offline-first. No account required, no cloud dependency for core functionality. Your food diary lives on your phone.

What we learned AI food recognition is surprisingly good. AI portion estimation is not. The gap between "I see chicken and rice" and "that's 340 calories" is where most of the error lives.

Offline-first architecture isn't optional for a meal app. You're at a restaurant with bad signal. You still need to log what you ate.

Dependency version mismatches are the hardest bugs to find. The React 19.1 / expo-font issue produced no clear error message — just a silent build failure.

What's next for Meal Diary Barcode scanning for packaged foods. Restaurant menu integration. Weekly reports with trends. Better portion estimation using reference objects in the photo. Maybe a watch widget for quick logging without pulling out your phone.