🦦 Otto — the quieter kind of cookbook

A warm, hand-painted recipe app led by Otto the otter chef.
750+ honest recipes, a place for yours, and nobody shouting five stars at you.

---

What Otto does today

Discover & cook

• Browse and search 750+ recipes (seeded from TheMealDB, served from Otto's own DB) with painted category tiles and an "Otto's pick" hero
• Recipe detail: parallax photo hero, serif title on cream, source attribution, computed meta (servings · ingredients · steps), live ingredient scaling with US/Metric conversion, inline video, semantic-ink method steps, nutrition estimate card, related-recipes exit
• Cook mode: mise-en-place → big-type steps with hand-painted Otto action art (chop/mix/sauté/simmer/bake/wait/season/pour/serve), tappable durations that start named timers, a multi-timer hub, alarm sound + vibration, keep-awake, swipe navigation, exit protection, and a Proud-Otto finish with "Snap your plate" journal capture

Your cookbook

• Save any recipe with the paw mark (Otto's signature)
• Import from any recipe site — paste a URL, Otto reads the ingredients and steps (deterministic schema.org parsing, no AI), you review, it's on the shelf with the source credited forever
• Ask Otto — chat with Otto to generate a recipe, or snap a photo of one; write your own in the same editor; edit and delete freely. The editor's Ask-Otto row (new + edit modes) hands whatever's typed to the chat so Otto continues from your half-finished recipe
• Cookbook tab with All · Saved · My recipes segments and a Cooked filter

Plan & shop

• Otto's week: a loose 7-day planner (no meal-slot guilt), add from any recipe or from the plan, cooked check-offs, "What's cooking tonight?" surfaced on Discover
• Shopping list built from the week on demand: one row per ingredient with summed quantities, aisle sections, provenance ("for World's Best Lasagna"), check-offs that never reorder mid-store, your own extras
• Shared kitchen: start a household or join one with an invite code — everyone adds to and checks off the same list in real time
• Share a recipe or a shopping list as a link (capability tokens) or a rendered share card

The rest

• 3-screen painted onboarding + splash (still image + animated lid-lift, reduced-motion aware)
• "You" tab: earned stats (cooked/saved/yours — each a door), a private cooking journal, inline US/Metric, editable name + avatar, quiet sign-out, visible account deletion
• Otto Club membership — $34.99/yr · $4.99/mo · 5-day trial, honest pricing math; RevenueCat wired end-to-end (purchase/restore/entitlement + Supabase membership webhook), running on the RC Test Store until the App Store products go live

Tech stack

Expo SDK 54 · React Native 0.81 · React 19 · TypeScript · expo-router v6 · TanStack Query v5 · zod v4 · Supabase (Auth + Postgres + Edge Functions + Realtime) · Lora (serif). No custom server — server-side logic runs as Supabase Edge Functions. RLS is the security boundary.

Project structure

Recipe-App/
├── app/                    expo-router routes (file-based; a file = a screen)
│   ├── _layout.tsx           root: GestureHandler → ErrorBoundary → SafeArea →
│   │                         QueryClientProvider → AuthProvider → <Stack> (+ ToastHost, NotifSync)
│   ├── index.tsx             launch gate → onboarding / sign-in / tabs (resolveRoute)
│   ├── (auth)/               sign-in · sign-up · forgot-password (+ redirect guard)
│   ├── (tabs)/               Discover (index) · Cookbook · raised ＋ (create/chat) · Plan · Account
│   ├── recipe/[id].tsx       recipe detail
│   ├── recipe/cook/[id].tsx  Cook mode
│   ├── recipe/edit.tsx       recipe editor (write/edit your own)
│   ├── add.tsx               Add sheet (URL / paste / photo import)
│   ├── shopping.tsx          shopping list
│   ├── household.tsx         shared kitchen (create/join by code)
│   ├── journal.tsx           cooking journal
│   ├── otto-club.tsx         membership / paywall surface
│   ├── chats.tsx             recent Ask-Otto chats
│   └── onboarding · notifications · preferences · faq · auth/callback · *-password
│
├── src/
│   ├── features/           feature-first modules — each owns its screens, components,
│   │                       *.queries.ts (TanStack Query), pure logic (*.ts) + tests (*.test.mjs)
│   │   ├── auth/             session (AuthProvider), sign in/up, password reset,
│   │   │                     OAuth (Apple/Google/Facebook), social + username helpers
│   │   ├── recipes/          Discover, recipe detail, cards, filters, video embed,
│   │   │                     TheMealDB→recipe transform, ingredient scaling
│   │   ├── cookbook/         saved + "my recipes" with segments (All · Saved · Mine)
│   │   ├── cook/             Cook mode + engines: session (step split/match),
│   │   │                     stepEnrich (timers/temps), stepAction (which Otto art)
│   │   ├── nutrition/        the on-device nutrition engine (see below) +
│   │   │                     NutritionCard / CalorieRing + category estimates
│   │   ├── planner/          Otto's week + shopping list; week + shoppingList engines
│   │   ├── household/        shared kitchen: queries + realtime hooks (useHousehold)
│   │   ├── import/           Add sheet (URL/paste/photo) + recipe editor + draft hand-off
│   │   ├── chat/             "Ask Otto" chat → recipe generation
│   │   ├── share/            share cards + capability share links (recipe / list) + tokens
│   │   ├── journal/          private "snap your plate" cooking journal
│   │   ├── notifications/    reminder sync (NotifSync) + notification preferences
│   │   ├── profile/          Account, Preferences, Household screen, Otto Club, FAQ
│   │   └── onboarding/       carousel + splash + the onboarding/route gate
│   │
│   ├── shared/             cross-feature primitives
│   │   ├── theme/            design tokens + semantic-ink (terracotta = computed/interactive)
│   │   ├── ui/               shared components (Screen, buttons, mascot states, toast…)
│   │   ├── supabase/         the Supabase JS client
│   │   ├── lib/              fdaCalories (21 CFR 101.9 rounding), format helpers
│   │   ├── haptics.ts        haptic feedback wrapper
│   │   ├── storage.ts        AsyncStorage key-value store
│   │   ├── imagePicker.ts    camera / photo picker
│   │   ├── bus.ts            Otto event bus (mascot reacts to app events)
│   │   ├── assets.ts         asset registry (mascot/action/food art)
│   │   └── motion.ts         reanimated helpers (no layout anims on web)
│   │
│   └── types/database.ts   generated Supabase types (regenerate after each migration)
│
├── supabase/
│   ├── functions/          Edge Functions = the "backend" (Deno, deployed to Supabase)
│   │   ├── content/          TheMealDB proxy (key server-side; the app never sees it)
│   │   ├── import-recipe/    URL → recipe via schema.org JSON-LD (deterministic, SSRF-guarded)
│   │   ├── generate-recipe/  Ask Otto — Claude (opus) recipe gen: prompt · chat · photo modes
│   │   ├── resolve-nutrition/ Claude (haiku) picks a real USDA record for unseen ingredients
│   │   ├── revenuecat-webhook/ RevenueCat events → public.memberships (shared-secret auth)
│   │   ├── canonicalize/     otto_recipes curation: original recipe → canonical structured record
│   │   └── delete-account/   completes account deletion (auth user + storage)
│   └── migrations/         Postgres schema + RLS as timestamped SQL (source of truth)
│
├── assets/                 mascot art, Otto action paintings, food-category icons, app icons, sounds
├── docs/                   reference/ (living docs) · history/ (build record + captures) · legal/
│                           see docs/README.md for the index
├── e2e/                    Playwright journeys (auth · cook · plan · share · …)
├── test/                   node --test unit suites (co-located *.test.mjs run here too)
├── eas.json                EAS Build profiles (production = native, no OTA channel)
├── app.json                Expo config (bundle id com.otto.recipes, plugins, scheme otto://)
└── references/             non-app material: the Altavida brand project + reusable app/website scaffolds

Architecture & data flow

Your app (Expo / RN)
   │  Supabase JS client + TanStack Query
   ▼
Supabase
   ├─ Postgres  ── your data behind Row-Level Security (RLS is the security boundary)
   ├─ Auth      ── email/password + Apple/Google/Facebook OAuth
   ├─ Realtime  ── the shared shopping list syncs via postgres_changes
   └─ Edge Functions ── the few jobs that must run server-side:
        content → TheMealDB    import-recipe → schema.org    delete-account
        generate-recipe → Claude (opus)      resolve-nutrition → Claude (haiku) + USDA
        revenuecat-webhook → memberships     canonicalize → otto_recipes curation

• No custom server. The app queries Postgres directly through the Supabase client; RLS decides what each user can see. The Edge Functions hold the only secrets (TheMealDB / Anthropic / USDA keys, the RevenueCat webhook secret, the service-role key) so they never touch the app bundle.
• Memberships: RevenueCat is the purchase layer (entitlement club); its webhook writes public.memberships (read-own-row RLS, service-role writes) so the backend always knows who's in the Club.
• Two content sources, one job each — TheMealDB supplies recipes + ingredient lines (it carries no nutrition, by design); USDA FoodData Central (CC0) supplies the per-ingredient nutrition those lines are costed against.
• Semantic ink — terracotta = computed/interactive, ink = human-authored. Honesty law — never fabricate data; null beats a guess.

The nutrition engine (src/features/nutrition/engine/)

Runs on-device with zero network calls — usdaTable.json ships in the app. An ingredient line is parsed to grams (parse.ts), looked up against the bundled USDA table (lookup.ts), and costed × per-100g ÷ servings with guards for raw/cooked, coverage, and kcal plausibility (compute.ts + guards.ts). Only an unseen ingredient falls back to the resolve-nutrition Edge Function (Claude picks a real USDA record), then caches forever. The cook/scale/shopping engines (cook/session, stepEnrich, planner/shoppingList, recipes/recipe.scale) are likewise pure, deterministic, and unit-tested — no LLM in the render path.

Design system

Light-only, token-pure. Terracotta #C4562E accent, cream paper surfaces, Lora serif display, warm ink. Otto appears at emotional beats; the paw is the save mark everywhere.

• docs/reference/DESIGN_SYSTEM.md (authoritative) · docs/reference/MASCOT.md · docs/reference/SCREEN_MAP.md
• Tokens: src/shared/theme/; mascot/action/food art under assets/ via src/shared/assets.ts
• Figma DS file: X1eGT54CTwtowHNve30vvE; master board mM0uWkHod9rL1Ff1VJ64Au

Run it

# app (web + Expo Go)
npm install && npx expo start                     # :8081

# native iOS dev build (needs the native modules — expo-audio/keep-awake/image-picker)
npx expo run:ios --device "iPhone 17 Pro Max"

Server-side logic (Edge Functions) and schema (migrations) live under supabase/ and deploy to the Supabase project — there is no separate server to run.

CocoaPods on a stock Mac (no Homebrew, system Ruby 2.6): gem install --user-install activesupport -v 6.1.7.10 --no-document && gem install --user-install cocoapods --no-document, then put $HOME/.gem/ruby/2.6.0/bin on PATH. ios/ and android/ are generated (expo prebuild) and gitignored. Splash/plugin changes need expo prebuild -p ios --clean.

.env

# .env (root) — publishable client config, safe to expose; RLS is the security boundary
EXPO_PUBLIC_SUPABASE_URL=...
EXPO_PUBLIC_SUPABASE_ANON_KEY=...
EXPO_PUBLIC_USE_OTTO_RECIPES=true   # serve recipe display from Otto's DB (not TheMealDB)

EXPO_PUBLIC_* vars are inlined at build time — restart Expo after changing them, and keep the same set registered in EAS env (eas env:list production) or TestFlight builds silently ship without them. Server-side secrets (ANTHROPIC_API_KEY, THEMEALDB_KEY, USDA_API_KEY, the service-role key for account deletion) live in Supabase Edge Function config, never in the app bundle.

Checks

npm run typecheck     # tsc --noEmit
npm run lint          # eslint app src test
npm test              # node --test (unit + engine + edge-function logic)

CI (.github/workflows/ci.yml) runs all three on every push to main and PRs into it.

Release (TestFlight)

Native builds only — no OTA channel (native modules change too often). Credentials are local (credentials/ios/, gitignored: distribution cert .p12 + provisioning profile + the App Store Connect API key), so no Apple ID login is ever needed. The loop:

# 1. bump ios.buildNumber (and version if it's a new release) in app.json, commit
# 2. build (~20 min; env vars come from EAS `production` environment, NOT .env)
EXPO_NO_CAPABILITY_SYNC=1 npx eas-cli build -p ios --profile production --non-interactive

# 3. submit — temporarily add ascApiKeyPath/ascApiKeyId/ascApiKeyIssuerId to
#    eas.json submit.production.ios (the CLI ignores the env-var route), then revert
npx eas-cli submit -p ios --profile production --latest --non-interactive
git checkout eas.json

# 4. attach to the internal group — REQUIRED, the group doesn't auto-distribute;
#    a submitted-but-unattached build reaches nobody
node ~/.claude/skills/eas-ios-testflight/scripts/tf-attach.mjs "Otto Insiders"

Internal testing needs no Beta App Review — testers install the moment the build is attached. ITSAppUsesNonExemptEncryption: false in app.json skips the export-compliance prompt.

Docs map

Doc	What it holds
docs/reference/ARCHITECTURE.md	Full v2 codebase map (grounded in the source)
docs/reference/API_ARCHITECTURE.md	The data-access model — RLS queries, Edge Functions, RPCs, Realtime
docs/reference/DESIGN_SYSTEM.md	The authoritative design system
docs/reference/CONTEXT_ENGINEERING.md	"How to navigate the tree" + task→file map
docs/reference/contracts/	Feature-module, database, engine, UI, persistence, testing, data-ownership contracts
docs/tickets/	Active work: nutrition accuracy + the otto-recipes data-ownership plan
docs/history/REDESIGN_NOTES.md	The decision log — every call with rationale
docs/history/ · docs/README.md	The full build record (tickets, rebuild, research, captures)

Status

On TestFlight — v1.0.15 (build 31), internal "Otto Insiders" group. The feature-first v2 rebuild is live on main (the old RN-JS app + Express backend are archived on the v1-legacy branch). Backend runs entirely on Supabase — all Edge Functions active, Claude generation + nutrition resolution working, security advisors cleaned up. Otto Club paywall shows launch pricing against the RevenueCat Test Store.

Next: a device pass on the OS-level paths (Apple/Google/Facebook login, timer audio, camera, push); real App Store subscription products (Paid Apps agreement → ASC products → swap the appl_ RevenueCat key) and feature gating on the club entitlement; then App Store submission.

Project identity

• Domain: ottosapp.com — marketing site lives in its own repo (Otto_Website); Terms + Privacy hosted at /terms and /privacy (App Review requirement, linked from the paywall)
• Auth: email/password + Apple, Google, and Facebook OAuth (Supabase Auth); transactional email over Google Workspace SMTP
• Deep-link scheme: otto:// (OAuth callbacks + share links); bundle id com.otto.recipes, Apple team A6J6HGNWZK
• Active data work (docs/tickets/): nutrition accuracy (usdaTable is per-100g — the weight layer owns accuracy) and OWN_RECIPE_DB — migrating the 750 seed recipes into curated otto_recipes rows via the canonicalize function

Credits

Recipe content by TheMealDB. Nutrition from USDA FoodData Central (public domain, CC0). Built with free-tier tools throughout — two sources, one job each: TheMealDB supplies recipes and ingredient lines; USDA supplies the per-ingredient nutrition those lines are costed against.