MealPath - Nutrition & Meal Planning PWA

The Challenge

Following a structured nutrition plan on a phone is messy. Spreadsheets and chat exports don't hold up when you need today's meals, the shopping list, and prep notes in one place. Offline matters too. Kitchens and weak reception shouldn't block marking a meal done or checking an item off.

I wanted a real app for a four-week Greek programme: clear daily guidance, weekly prep, portions, and progress, without turning meal planning into admin work.

The Solution

MealPath is a mobile-first Progressive Web App for that programme. Authenticated users get a dashboard for today, week and day views, meal prep instructions, shopping lists, portion references, and a short usage guide. Content stays in Greek where the programme does.

You can install it on phone or desktop. After the first sync, core flows keep working offline: browse meals, toggle completion, update shopping state, then sync when the network returns.

Photo by Brooke Lark on Unsplash

Technical Architecture

React 19 and TypeScript on Vite, React Router for nested auth-aware routes, Tailwind and shadcn/ui for the mobile shell. Supabase handles PostgreSQL and Auth. Shared programme data lives in normalized tables; user progress and shopping state stay user-owned with RLS.

TanStack Query covers remote reads and mutations. Dexie and IndexedDB hold programme snapshots and a pending mutation queue so writes survive disconnects. Zustand stays limited to light UI preferences. Zod validates the Excel-derived JSON before import, plus forms and env boundaries.

vite-plugin-pwa precaches the app shell, keeps Supabase traffic network-only, and shows install and update prompts. Updates wait if mutations are still pending so a reload doesn't drop local work.

My Role & Contributions

I designed and built it solo end to end. Schema and migrations, RLS, the import pipeline from nutrition JSON into Postgres, repositories and query layers, offline sync rules, auth flows, and the Greek UI for dashboard through settings. Deployed to mealpath.theodosiou.me on Cloudflare Workers.

Challenges & Learnings

Offline-first with auth is the hard part. Local writes need deterministic mutation IDs, clear sync statuses, and careful logout cleanup so user data doesn't leak across sessions. Programme content is shared; progress is personal. Keeping those domains separate in Postgres made RLS and caching much cleaner than stuffing the whole programme into one JSON blob.

Impact & Results

Shipped as a usable PWA for the full four-week programme. Daily meals, shopping, prep, and progress work on a phone, including after install when the network drops. If you need a similar offline-capable product app (health, planning, or field tools), get in touch or browse more projects. I usually reply within a day or two; I'm in Thessaloniki so timezone may add a little delay.