# kareem-hany-77/food-recipes-website architecture

> Architecture diagram of the GitHub repository kareem-hany-77/food-recipes-website, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-13). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/kareem-hany-77/food-recipes-website
- Repository: https://github.com/kareem-hany-77/food-recipes-website

## Overview

Step by Step is a static home-cooking recipe website: visitors browse or search recipes, open a recipe, and follow its ingredient checklist and cooking steps. The main runtime layer is a dependency-free script that adds saved progress, progress indicators, cook mode, printing, menu behavior, and recipe-list filtering to the HTML pages. The README documents these capabilities and page roles; only app.js was sampled, so connections between particular HTML pages and its DOM behaviors are not independently verified in source excerpts.

Main entry points: [`app.js`](https://github.com/kareem-hany-77/food-recipes-website/blob/main/app.js) (Recipe checklist), [`index.html`](https://github.com/kareem-hany-77/food-recipes-website/blob/main/index.html) (Home page), [`koshari.html`](https://github.com/kareem-hany-77/food-recipes-website/blob/main/koshari.html) (Recipe pages), [`advices.html`](https://github.com/kareem-hany-77/food-recipes-website/blob/main/advices.html) (Cooking advice)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site["Website pages"]
  node_home["Home page<br/>[index.html]"]
  node_recipe["Recipe pages<br/>[koshari.html]"]
  node_advice["Cooking advice<br/>[advices.html]"]
  node_videos["Videos<br/>[vid.html]"]
end

subgraph group_discovery["Recipe discovery"]
  node_catalog["All recipes<br/>[recipes.html]"]
  node_categories["Course pages<br/>[main.html]"]
  node_listing["Search and filters<br/>[app.js]"]
  node_random["Surprise me<br/>[app.js]"]
end

subgraph group_cooking["Cooking experience"]
  node_checklist["Recipe checklist<br/>[app.js]"]
  node_progress["Progress and next step<br/>[app.js]"]
  node_cookmode["Cook mode<br/>[app.js]"]
  node_print["Print action<br/>[app.js]"]
end

subgraph group_runtime["Browser runtime"]
  node_navigation["Mobile navigation<br/>[app.js]"]
  node_storage[("Browser storage")]
  node_wakelock["Screen wake lock"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens"| node_home
node_visitor -->|"browses"| node_catalog
node_visitor -->|"filters by course"| node_categories
node_visitor -->|"opens recipe"| node_recipe
node_visitor -->|"reads"| node_advice
node_visitor -->|"views"| node_videos
node_visitor -->|"searches"| node_listing
node_visitor -->|"checks items"| node_checklist
node_checklist -->|"saves progress"| node_storage
node_storage -->|"restores progress"| node_checklist
node_checklist -->|"updates"| node_progress
node_visitor -->|"toggles"| node_cookmode
node_cookmode -->|"requests screen lock"| node_wakelock
node_visitor -->|"prints recipe"| node_print
node_visitor -->|"opens menu"| node_navigation
node_visitor -->|"requests recipe"| node_random

click node_home "https://github.com/kareem-hany-77/food-recipes-website/blob/main/index.html"
click node_catalog "https://github.com/kareem-hany-77/food-recipes-website/blob/main/recipes.html"
click node_categories "https://github.com/kareem-hany-77/food-recipes-website/blob/main/main.html"
click node_recipe "https://github.com/kareem-hany-77/food-recipes-website/blob/main/koshari.html"
click node_advice "https://github.com/kareem-hany-77/food-recipes-website/blob/main/advices.html"
click node_videos "https://github.com/kareem-hany-77/food-recipes-website/blob/main/vid.html"
click node_listing "https://github.com/kareem-hany-77/food-recipes-website/blob/main/app.js"
click node_checklist "https://github.com/kareem-hany-77/food-recipes-website/blob/main/app.js"
click node_progress "https://github.com/kareem-hany-77/food-recipes-website/blob/main/app.js"
click node_cookmode "https://github.com/kareem-hany-77/food-recipes-website/blob/main/app.js"
click node_print "https://github.com/kareem-hany-77/food-recipes-website/blob/main/app.js"
click node_navigation "https://github.com/kareem-hany-77/food-recipes-website/blob/main/app.js"
click node_random "https://github.com/kareem-hany-77/food-recipes-website/blob/main/app.js"

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_home,node_recipe,node_advice,node_videos toneBlue
class node_catalog,node_categories,node_listing,node_random toneAmber
class node_checklist,node_progress,node_cookmode,node_print toneMint
class node_navigation,node_storage,node_wakelock toneRose
class node_visitor toneIndigo
```

## Components

### Website pages

- [Home page](https://github.com/kareem-hany-77/food-recipes-website/blob/main/index.html): `index.html`
- [Recipe pages](https://github.com/kareem-hany-77/food-recipes-website/blob/main/koshari.html): `koshari.html`
- [Cooking advice](https://github.com/kareem-hany-77/food-recipes-website/blob/main/advices.html): `advices.html`
- [Videos](https://github.com/kareem-hany-77/food-recipes-website/blob/main/vid.html): `vid.html`

### Recipe discovery

- [All recipes](https://github.com/kareem-hany-77/food-recipes-website/blob/main/recipes.html): `recipes.html`
- [Course pages](https://github.com/kareem-hany-77/food-recipes-website/blob/main/main.html): `main.html`
- [Search and filters](https://github.com/kareem-hany-77/food-recipes-website/blob/main/app.js): `app.js`
- [Surprise me](https://github.com/kareem-hany-77/food-recipes-website/blob/main/app.js): `app.js`

### Cooking experience

- [Recipe checklist](https://github.com/kareem-hany-77/food-recipes-website/blob/main/app.js): `app.js`
- [Progress and next step](https://github.com/kareem-hany-77/food-recipes-website/blob/main/app.js): `app.js`
- [Cook mode](https://github.com/kareem-hany-77/food-recipes-website/blob/main/app.js): `app.js`
- [Print action](https://github.com/kareem-hany-77/food-recipes-website/blob/main/app.js): `app.js`

### Browser runtime

- [Mobile navigation](https://github.com/kareem-hany-77/food-recipes-website/blob/main/app.js): `app.js`
- **Browser storage**
- **Screen wake lock**

### Other components

- **Visitor**

## Connections

- Visitor → Home page: opens (evidence: `README.md`)
- Visitor → All recipes: browses (evidence: `README.md`)
- Visitor → Course pages: filters by course (evidence: `README.md`)
- Visitor → Recipe pages: opens recipe (evidence: `README.md`)
- Visitor → Cooking advice: reads (evidence: `README.md`)
- Visitor → Videos: views (evidence: `README.md`)
- Visitor → Search and filters: searches (evidence: `README.md`)
- Visitor → Recipe checklist: checks items (evidence: `README.md`)
- Recipe checklist → Browser storage: saves progress (evidence: `app.js`)
- Browser storage → Recipe checklist: restores progress (evidence: `app.js`)
- Recipe checklist → Progress and next step: updates (evidence: `app.js`)
- Visitor → Cook mode: toggles (evidence: `app.js`)
- Cook mode → Screen wake lock: requests screen lock (evidence: `app.js`)
- Visitor → Print action: prints recipe (evidence: `app.js`)
- Visitor → Mobile navigation: opens menu (evidence: `app.js`)
- Visitor → Surprise me: requests recipe (evidence: `app.js`)