# nak89/recipe-book-mobile architecture

> Architecture diagram of the GitHub repository nak89/recipe-book-mobile, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-15). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/nak89/recipe-book-mobile
- Repository: https://github.com/nak89/recipe-book-mobile

## Overview

Kroueng Psom is a bilingual personal cookbook and meal-planning app. The main journey is to discover or create recipes, keep them in a cookbook, assign them to a week, turn that plan into a market list, and cook from step-by-step instructions. The app is an Expo client: recipe, plan, grocery, and photo operations use its API client, while sign-in uses Supabase directly. The README documents the product branches; sampled source confirms selected screen-to-client and authentication links, so unsampled route wiring is not inferred.

Main entry points: [`src/lib/api.ts`](https://github.com/nak89/recipe-book-mobile/blob/main/src/lib/api.ts) (API client), [`src/app/(app)/(tabs)/planner.tsx`](https://github.com/nak89/recipe-book-mobile/blob/main/src/app/(app)/(tabs)/planner.tsx) (Weekly planner), [`src/components/AuthForm.tsx`](https://github.com/nak89/recipe-book-mobile/blob/main/src/components/AuthForm.tsx) (Sign-in forms), [`src/components/RecipeForm.tsx`](https://github.com/nak89/recipe-book-mobile/blob/main/src/components/RecipeForm.tsx) (Recipe authoring)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_recipes["Recipes"]
  node_explore["Explore library<br/>[explore.tsx]"]
  node_collection["Recipe collection<br/>[index.tsx]"]
  node_author["Recipe authoring<br/>[RecipeForm.tsx]"]
  node_detail["Recipe detail<br/>[index.tsx]"]
  node_cookmode["Cook mode<br/>[CookModeScreen.tsx]"]
  node_pantry["Localized suggestions<br/>[usePantry.ts]"]
end

subgraph group_planning["Planning and shopping"]
  node_planner["Weekly planner<br/>[planner.tsx]"]
  node_weekdraft["Dinner-week draft<br/>[generate-week.tsx]"]
  node_weekstate["Shared week state<br/>[WeekContext.tsx]"]
  node_grocery["Market list<br/>[grocery.tsx]"]
  node_grocerylogic["Grocery logic<br/>[grocery.ts]"]
end

subgraph group_identity["Identity and language"]
  node_authform["Sign-in forms<br/>[AuthForm.tsx]"]
  node_authstate["Authentication state<br/>[AuthContext.tsx]"]
  node_google["Google sign-in<br/>[googleAuth.ts]"]
  node_language["English and Khmer<br/>[strings.ts]"]
end

subgraph group_services["App services"]
  node_supabase[("Supabase Auth")]
  node_api["API client<br/>[api.ts]"]
  node_backend["Recipe backend"]
  node_recipe_types["Recipe and plan shapes<br/>[recipe.ts]"]
end

subgraph group_presentation["Shared presentation"]
  node_app["App shell<br/>[_layout.tsx]"]
  node_theme["Theme and typography<br/>[index.ts]"]
end

node_cook(("Home cook"))

node_cook -->|"opens app"| node_app
node_app -->|"signs in"| node_authform
node_authform -->|"submits credentials"| node_authstate
node_authstate -->|"reads session"| node_supabase
node_authform -->|"starts OAuth"| node_google
node_google -->|"requests authorization"| node_supabase
node_cook -->|"browses dishes"| node_explore
node_explore -->|"saves recipe copy"| node_collection
node_cook -->|"searches and favourites"| node_collection
node_cook -->|"creates recipe"| node_author
node_cook -->|"opens recipe"| node_detail
node_detail -->|"starts cooking"| node_cookmode
node_cookmode -->|"shows steps and timers"| node_cook
node_cook -->|"plans meals"| node_planner
node_planner -->|"generates dinner draft"| node_weekdraft
node_planner -->|"shares week state"| node_weekstate
node_cook -->|"shops from plan"| node_grocery
node_grocery -->|"builds market list"| node_grocerylogic
node_cook -->|"switches language"| node_language
node_author -->|"uses suggestions"| node_pantry
node_collection -->|"fetches recipes"| node_api
node_planner -->|"loads and saves plan"| node_api
node_grocery -->|"loads and updates groceries"| node_api
node_author -->|"saves recipes and photos"| node_api
node_api -->|"sends API requests"| node_backend
node_api -->|"uses data shapes"| node_recipe_types
node_app -->|"provides shared styling"| node_theme
node_authform -->|"renders translations"| node_language

click node_app "https://github.com/nak89/recipe-book-mobile/blob/main/src/app/_layout.tsx"
click node_explore "https://github.com/nak89/recipe-book-mobile/blob/main/src/app/(app)/(tabs)/explore.tsx"
click node_collection "https://github.com/nak89/recipe-book-mobile/blob/main/src/app/(app)/(tabs)/index.tsx"
click node_author "https://github.com/nak89/recipe-book-mobile/blob/main/src/components/RecipeForm.tsx"
click node_detail "https://github.com/nak89/recipe-book-mobile/blob/main/src/app/(app)/recipe/%5Bid%5D/index.tsx"
click node_cookmode "https://github.com/nak89/recipe-book-mobile/blob/main/src/components/CookModeScreen.tsx"
click node_planner "https://github.com/nak89/recipe-book-mobile/blob/main/src/app/(app)/(tabs)/planner.tsx"
click node_weekdraft "https://github.com/nak89/recipe-book-mobile/blob/main/src/app/(app)/generate-week.tsx"
click node_weekstate "https://github.com/nak89/recipe-book-mobile/blob/main/src/context/WeekContext.tsx"
click node_grocery "https://github.com/nak89/recipe-book-mobile/blob/main/src/app/(app)/(tabs)/grocery.tsx"
click node_grocerylogic "https://github.com/nak89/recipe-book-mobile/blob/main/src/lib/grocery.ts"
click node_authform "https://github.com/nak89/recipe-book-mobile/blob/main/src/components/AuthForm.tsx"
click node_authstate "https://github.com/nak89/recipe-book-mobile/blob/main/src/context/AuthContext.tsx"
click node_google "https://github.com/nak89/recipe-book-mobile/blob/main/src/lib/googleAuth.ts"
click node_language "https://github.com/nak89/recipe-book-mobile/blob/main/src/i18n/strings.ts"
click node_pantry "https://github.com/nak89/recipe-book-mobile/blob/main/src/data/usePantry.ts"
click node_api "https://github.com/nak89/recipe-book-mobile/blob/main/src/lib/api.ts"
click node_theme "https://github.com/nak89/recipe-book-mobile/blob/main/src/theme/index.ts"
click node_recipe_types "https://github.com/nak89/recipe-book-mobile/blob/main/src/types/recipe.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_explore,node_collection,node_author,node_detail,node_cookmode,node_pantry toneBlue
class node_planner,node_weekdraft,node_weekstate,node_grocery,node_grocerylogic toneAmber
class node_authform,node_authstate,node_google,node_language toneMint
class node_supabase,node_api,node_backend,node_recipe_types toneRose
class node_app,node_theme,node_cook toneIndigo
```

## Components

### Recipes

- [Explore library](https://github.com/nak89/recipe-book-mobile/blob/main/src/app/(app)/(tabs)/explore.tsx): `src/app/(app)/(tabs)/explore.tsx`
- [Recipe collection](https://github.com/nak89/recipe-book-mobile/blob/main/src/app/(app)/(tabs)/index.tsx): `src/app/(app)/(tabs)/index.tsx`
- [Recipe authoring](https://github.com/nak89/recipe-book-mobile/blob/main/src/components/RecipeForm.tsx): `src/components/RecipeForm.tsx`
- [Recipe detail](https://github.com/nak89/recipe-book-mobile/blob/main/src/app/(app)/recipe/%5Bid%5D/index.tsx): `src/app/(app)/recipe/[id]/index.tsx`
- [Cook mode](https://github.com/nak89/recipe-book-mobile/blob/main/src/components/CookModeScreen.tsx): `src/components/CookModeScreen.tsx`
- [Localized suggestions](https://github.com/nak89/recipe-book-mobile/blob/main/src/data/usePantry.ts): `src/data/usePantry.ts`

### Planning and shopping

- [Weekly planner](https://github.com/nak89/recipe-book-mobile/blob/main/src/app/(app)/(tabs)/planner.tsx): `src/app/(app)/(tabs)/planner.tsx`
- [Dinner-week draft](https://github.com/nak89/recipe-book-mobile/blob/main/src/app/(app)/generate-week.tsx): `src/app/(app)/generate-week.tsx`
- [Shared week state](https://github.com/nak89/recipe-book-mobile/blob/main/src/context/WeekContext.tsx): `src/context/WeekContext.tsx`
- [Market list](https://github.com/nak89/recipe-book-mobile/blob/main/src/app/(app)/(tabs)/grocery.tsx): `src/app/(app)/(tabs)/grocery.tsx`
- [Grocery logic](https://github.com/nak89/recipe-book-mobile/blob/main/src/lib/grocery.ts): `src/lib/grocery.ts`

### Identity and language

- [Sign-in forms](https://github.com/nak89/recipe-book-mobile/blob/main/src/components/AuthForm.tsx): `src/components/AuthForm.tsx`
- [Authentication state](https://github.com/nak89/recipe-book-mobile/blob/main/src/context/AuthContext.tsx): `src/context/AuthContext.tsx`
- [Google sign-in](https://github.com/nak89/recipe-book-mobile/blob/main/src/lib/googleAuth.ts): `src/lib/googleAuth.ts`
- [English and Khmer](https://github.com/nak89/recipe-book-mobile/blob/main/src/i18n/strings.ts): `src/i18n/strings.ts`

### App services

- **Supabase Auth**
- [API client](https://github.com/nak89/recipe-book-mobile/blob/main/src/lib/api.ts): `src/lib/api.ts`
- **Recipe backend**
- [Recipe and plan shapes](https://github.com/nak89/recipe-book-mobile/blob/main/src/types/recipe.ts): `src/types/recipe.ts`

### Shared presentation

- [App shell](https://github.com/nak89/recipe-book-mobile/blob/main/src/app/_layout.tsx): `src/app/_layout.tsx`
- [Theme and typography](https://github.com/nak89/recipe-book-mobile/blob/main/src/theme/index.ts): `src/theme/index.ts`

### Other components

- **Home cook**

## Connections

- Home cook → App shell: opens app (evidence: `README.md`)
- App shell → Sign-in forms: signs in (evidence: `src/app/_layout.tsx`)
- Sign-in forms → Authentication state: submits credentials (evidence: `src/components/AuthForm.tsx`)
- Authentication state → Supabase Auth: reads session (evidence: `src/context/AuthContext.tsx`)
- Sign-in forms → Google sign-in: starts OAuth (evidence: `src/components/AuthForm.tsx`)
- Google sign-in → Supabase Auth: requests authorization (evidence: `src/lib/googleAuth.ts`)
- Home cook → Explore library: browses dishes (evidence: `README.md`)
- Explore library → Recipe collection: saves recipe copy (evidence: `README.md`)
- Home cook → Recipe collection: searches and favourites (evidence: `README.md`)
- Home cook → Recipe authoring: creates recipe (evidence: `README.md`)
- Home cook → Recipe detail: opens recipe (evidence: `README.md`)
- Recipe detail → Cook mode: starts cooking (evidence: `README.md`)
- Cook mode → Home cook: shows steps and timers (evidence: `README.md`)
- Home cook → Weekly planner: plans meals (evidence: `README.md`)
- Weekly planner → Dinner-week draft: generates dinner draft (evidence: `README.md`)
- Weekly planner → Shared week state: shares week state (evidence: `src/context/WeekContext.tsx`)
- Home cook → Market list: shops from plan (evidence: `README.md`)
- Market list → Grocery logic: builds market list
- Home cook → English and Khmer: switches language (evidence: `README.md`)
- Recipe authoring → Localized suggestions: uses suggestions (evidence: `src/data/usePantry.ts`)
- Recipe collection → API client: fetches recipes (evidence: `src/app/(app)/(tabs)/index.tsx`)
- Weekly planner → API client: loads and saves plan (evidence: `README.md`)
- Market list → API client: loads and updates groceries (evidence: `README.md`)
- Recipe authoring → API client: saves recipes and photos (evidence: `README.md`)
- API client → Recipe backend: sends API requests (evidence: `README.md`)
- API client → Recipe and plan shapes: uses data shapes (evidence: `src/lib/api.ts`)
- App shell → Theme and typography: provides shared styling (evidence: `src/app/_layout.tsx`)
- Sign-in forms → English and Khmer: renders translations (evidence: `src/components/AuthForm.tsx`)