Kain
AI-powered family meal planning app with Filipino cuisine focus, drag-and-drop weekly calendars, and real-time shared grocery lists. "Kain na!" means "Come eat!" in Tagalog.
- Client
- Personal Project
- Industry
- Food & Family
- Launched
- March 2026
- Team
- 1 developer
Results
What this project moved.
The numbers that mattered most to Personal Project, sourced from Search Console, Semrush, and analytics.
Authentic Filipino recipes with full nutrition data
Shared grocery lists with live sync across devices
Brainstorm, Plan My Week, and reverse ingredient search
The Challenge
Where they were stuck.
Meal planning services like Blue Apron are expensive, inflexible, and completely ignore the cuisines that many families actually cook. My family cooks Filipino food. Adobo, sinigang, kare-kare, lumpia. No meal kit service covers that. I also wanted something that worked the way real families shop: one person at the store texting "what do we need?" while someone else is at home checking the fridge.
Our Approach
What we built.
I built Kain as a full-stack app with React 19, Supabase, and Google Gemini. It has a drag-and-drop weekly calendar for meal planning, a recipe library seeded with 25+ authentic Filipino dishes, and AI-powered features that actually help. The Grocery Store Brainstorm lets you type an ingredient you’re looking at in the store and get instant recipe suggestions. Plan My Week generates a full week of meals based on your household’s preferences. And the shared grocery list syncs in real-time so multiple family members can shop simultaneously.
Under the Hood
How we built it.
The technical decisions that shaped the work.
Frontend
React 19 with TypeScript 5.9 and Vite 7. Tailwind CSS 4 for styling. Zustand for client state management. dnd-kit for drag-and-drop calendar interactions. Framer Motion for animations. Recharts 3 for nutrition visualizations.
Backend
Supabase handles everything: Postgres database, magic link + Google OAuth authentication, Realtime subscriptions for live grocery list sync, and Edge Functions for API proxies. Row-Level Security scopes all data to household level.
Integrations
Google Gemini 3 Flash for all AI features (brainstorm, weekly planning, recipe adaptation), proxied through Supabase Edge Functions. Spoonacular for recipe search. USDA FoodData Central for ingredient nutrition. Edamam for freeform recipe analysis.
Performance
Vite 7 dev server with instant HMR. TanStack React Query v5 for server state with optimistic updates. React Router v7 for client-side routing. Mobile-first responsive design with deep green and gold color palette inspired by Filipino heritage.
What Shipped
Key features.
Every capability built into the project.
Weekly Meal Calendar
Drag-and-drop recipes onto a 7-day calendar with breakfast, lunch, dinner, and snack slots using dnd-kit
Filipino Recipe Library
25+ authentic dishes (Adobo, Sinigang, Kare-Kare, Lumpia, Pancit) with full nutrition breakdowns
Grocery Store Brainstorm
Type an ingredient you’re looking at in the store, get AI-powered recipe suggestions, one-tap add to grocery list
Plan My Week
AI generates a full week of meals based on household preferences, dietary restrictions, and recent history
Shared Grocery Lists
Real-time synced lists via Supabase Realtime so multiple family members can shop simultaneously
Reverse Ingredient Search
"What can I make with chicken thighs, coconut milk, and garlic?" powered by Gemini
Nutrition Tracking
Macro breakdowns for every recipe with daily value percentages via USDA FoodData Central and Edamam
Mobile-First Design
Brainstorm page optimized for one-handed phone use in the grocery store. Full dark mode support
Stack
Tools & Technologies
9 technologies powering the build, end to end.
Your Turn
Ready to see what's broken on your site?
Free technical audit. No commitment, no jargon. You get a branded report showing exactly what's costing you customers, whether or not you hire us.