# gambirbuilds/nepali-recipe-finder architecture

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

- Interactive diagram: https://gitdiagram.com/gambirbuilds/nepali-recipe-finder
- Repository: https://github.com/gambirbuilds/nepali-recipe-finder

## Overview

Nepali Recipe Finder is a browser-based recipe discovery and bookmarking app. A cook searches or filters the curated catalog, opens a recipe to review its ingredients and cooking instructions, and can save it to a persistent shelf or follow its video and reference links. `App.tsx` owns view selection, filtering, and saved IDs; the components render those views and report user actions through callbacks. The sampled source confirms localStorage and outbound links; some catalog content is only partially excerpted.

Main entry points: [`src/App.tsx`](https://github.com/gambirbuilds/nepali-recipe-finder/blob/main/src/App.tsx) (App coordinator), [`src/data/recipes.ts`](https://github.com/gambirbuilds/nepali-recipe-finder/blob/main/src/data/recipes.ts) (Recipe catalog), [`src/components/RecipeDetail.tsx`](https://github.com/gambirbuilds/nepali-recipe-finder/blob/main/src/components/RecipeDetail.tsx) (Recipe detail), [`src/components/SavedShelf.tsx`](https://github.com/gambirbuilds/nepali-recipe-finder/blob/main/src/components/SavedShelf.tsx) (Saved shelf)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["App experience"]
  node_entry["React entry<br/>[main.tsx]"]
  node_app["App coordinator<br/>[App.tsx]"]
  node_header["Navigation header<br/>[Header.tsx]"]
  node_hero["Search hero<br/>[Hero.tsx]"]
  node_card["Recipe card<br/>[RecipeCard.tsx]"]
  node_detail["Recipe detail<br/>[RecipeDetail.tsx]"]
  node_shelf["Saved shelf<br/>[SavedShelf.tsx]"]
  node_footer["Editorial footer<br/>[Footer.tsx]"]
end

subgraph group_recipes["Recipe catalog"]
  node_catalog["Recipe catalog<br/>[recipes.ts]"]
  node_recipe_types["Recipe types<br/>[types.ts]"]
end

subgraph group_persistence["Saved recipes and links"]
  node_saved_ids["Saved recipe IDs<br/>[App.tsx]"]
  node_local_storage[("Browser localStorage")]
  node_youtube["YouTube search"]
  node_source_refs["Recipe source links"]
end

node_cook(("Home cook"))

node_cook -->|"opens app"| node_entry
node_entry -->|"renders"| node_app
node_app -->|"reads catalog"| node_catalog
node_app -->|"renders"| node_header
node_app -->|"renders"| node_hero
node_app -->|"renders results"| node_card
node_app -->|"renders selected"| node_detail
node_app -->|"renders saved view"| node_shelf
node_app -->|"renders"| node_footer
node_hero -->|"updates search"| node_app
node_header -->|"navigates views"| node_app
node_card -->|"opens or saves"| node_app
node_detail -->|"backs or saves"| node_app
node_shelf -->|"renders saved recipes"| node_card
node_shelf -->|"explores recipes"| node_app
node_catalog -->|"provides recipes"| node_app
node_app -->|"updates IDs"| node_saved_ids
node_saved_ids -->|"reads and writes"| node_local_storage
node_app -->|"loads and persists"| node_local_storage
node_detail -.->|"opens search"| node_youtube
node_detail -.->|"opens reference"| node_source_refs
node_catalog -->|"supplies recipe fields"| node_detail
node_catalog -->|"supplies recipe fields"| node_card
node_catalog -->|"supplies recipes"| node_shelf
node_recipe_types -->|"defines data shape"| node_catalog

click node_entry "https://github.com/gambirbuilds/nepali-recipe-finder/blob/main/src/main.tsx"
click node_app "https://github.com/gambirbuilds/nepali-recipe-finder/blob/main/src/App.tsx"
click node_header "https://github.com/gambirbuilds/nepali-recipe-finder/blob/main/src/components/Header.tsx"
click node_hero "https://github.com/gambirbuilds/nepali-recipe-finder/blob/main/src/components/Hero.tsx"
click node_card "https://github.com/gambirbuilds/nepali-recipe-finder/blob/main/src/components/RecipeCard.tsx"
click node_detail "https://github.com/gambirbuilds/nepali-recipe-finder/blob/main/src/components/RecipeDetail.tsx"
click node_shelf "https://github.com/gambirbuilds/nepali-recipe-finder/blob/main/src/components/SavedShelf.tsx"
click node_footer "https://github.com/gambirbuilds/nepali-recipe-finder/blob/main/src/components/Footer.tsx"
click node_catalog "https://github.com/gambirbuilds/nepali-recipe-finder/blob/main/src/data/recipes.ts"
click node_recipe_types "https://github.com/gambirbuilds/nepali-recipe-finder/blob/main/src/types.ts"
click node_saved_ids "https://github.com/gambirbuilds/nepali-recipe-finder/blob/main/src/App.tsx"

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_entry,node_app,node_header,node_hero,node_card,node_detail,node_shelf,node_footer toneBlue
class node_catalog,node_recipe_types toneAmber
class node_saved_ids,node_local_storage,node_youtube,node_source_refs toneMint
class node_cook toneIndigo
```

## Components

### App experience

- [React entry](https://github.com/gambirbuilds/nepali-recipe-finder/blob/main/src/main.tsx): `src/main.tsx`
- [App coordinator](https://github.com/gambirbuilds/nepali-recipe-finder/blob/main/src/App.tsx): `src/App.tsx`
- [Navigation header](https://github.com/gambirbuilds/nepali-recipe-finder/blob/main/src/components/Header.tsx): `src/components/Header.tsx`
- [Search hero](https://github.com/gambirbuilds/nepali-recipe-finder/blob/main/src/components/Hero.tsx): `src/components/Hero.tsx`
- [Recipe card](https://github.com/gambirbuilds/nepali-recipe-finder/blob/main/src/components/RecipeCard.tsx): `src/components/RecipeCard.tsx`
- [Recipe detail](https://github.com/gambirbuilds/nepali-recipe-finder/blob/main/src/components/RecipeDetail.tsx): `src/components/RecipeDetail.tsx`
- [Saved shelf](https://github.com/gambirbuilds/nepali-recipe-finder/blob/main/src/components/SavedShelf.tsx): `src/components/SavedShelf.tsx`
- [Editorial footer](https://github.com/gambirbuilds/nepali-recipe-finder/blob/main/src/components/Footer.tsx): `src/components/Footer.tsx`

### Recipe catalog

- [Recipe catalog](https://github.com/gambirbuilds/nepali-recipe-finder/blob/main/src/data/recipes.ts): `src/data/recipes.ts`
- [Recipe types](https://github.com/gambirbuilds/nepali-recipe-finder/blob/main/src/types.ts): `src/types.ts`

### Saved recipes and links

- [Saved recipe IDs](https://github.com/gambirbuilds/nepali-recipe-finder/blob/main/src/App.tsx): `src/App.tsx`
- **Browser localStorage**
- **YouTube search**
- **Recipe source links**

### Other components

- **Home cook**

## Connections

- Home cook → React entry: opens app
- React entry → App coordinator: renders
- App coordinator → Recipe catalog: reads catalog
- App coordinator → Navigation header: renders
- App coordinator → Search hero: renders
- App coordinator → Recipe card: renders results
- App coordinator → Recipe detail: renders selected
- App coordinator → Saved shelf: renders saved view
- App coordinator → Editorial footer: renders
- Search hero → App coordinator: updates search
- Navigation header → App coordinator: navigates views
- Recipe card → App coordinator: opens or saves
- Recipe detail → App coordinator: backs or saves
- Saved shelf → Recipe card: renders saved recipes
- Saved shelf → App coordinator: explores recipes
- Recipe catalog → App coordinator: provides recipes
- App coordinator → Saved recipe IDs: updates IDs
- Saved recipe IDs → Browser localStorage: reads and writes
- App coordinator → Browser localStorage: loads and persists
- Recipe detail → YouTube search: opens search
- Recipe detail → Recipe source links: opens reference
- Recipe catalog → Recipe detail: supplies recipe fields
- Recipe catalog → Recipe card: supplies recipe fields
- Recipe catalog → Saved shelf: supplies recipes
- Recipe types → Recipe catalog: defines data shape