# afifakhatib/foodblog_project architecture

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

- Interactive diagram: https://gitdiagram.com/afifakhatib/foodblog_project
- Repository: https://github.com/afifakhatib/foodblog_project

## Overview

This repository appears to be a browser-based recipe site, with pages for browsing recipes, viewing recipe information, adding recipes, and learning about the site. The file tree also shows page-oriented JavaScript modules and two video assets. No README or source excerpts were provided, so page-to-script wiring, navigation, data flow, and the videos’ specific use cannot be verified; the graph therefore shows the product areas without inferred runtime connections.

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_discovery["Recipe discovery"]
  node_home["Home page<br/>[index.html]"]
  node_home_js["Home behavior<br/>[index.js]"]
  node_recipes["Recipe listing<br/>[recipes.html]"]
  node_recipes_js["Recipe behavior<br/>[recipes.js]"]
  node_recipe_info["Recipe details<br/>[recipeInfo.html]"]
  node_recipe_info_js["Detail behavior<br/>[recipeInfo.js]"]
end

subgraph group_contribution["Recipe contribution"]
  node_add_recipe["Add recipe page<br/>[addRecipe.html]"]
  node_add_recipe_js["Recipe form behavior<br/>[addRecipes.js]"]
end

subgraph group_site["Site information"]
  node_about["About page<br/>[AboutUs.html]"]
  node_video_one["Video asset 1<br/>[video_1.mp4]"]
  node_video_two["Video asset 2<br/>[video_2.mp4]"]
end

node_visitor(("Visitor"))
node_helper["Shared helpers<br/>[helper.js]"]

click node_home "https://github.com/afifakhatib/foodblog_project/blob/main/index.html"
click node_home_js "https://github.com/afifakhatib/foodblog_project/blob/main/assets/js/index.js"
click node_recipes "https://github.com/afifakhatib/foodblog_project/blob/main/recipes.html"
click node_recipes_js "https://github.com/afifakhatib/foodblog_project/blob/main/assets/js/recipes.js"
click node_recipe_info "https://github.com/afifakhatib/foodblog_project/blob/main/recipeInfo.html"
click node_recipe_info_js "https://github.com/afifakhatib/foodblog_project/blob/main/assets/js/recipeInfo.js"
click node_add_recipe "https://github.com/afifakhatib/foodblog_project/blob/main/addRecipe.html"
click node_add_recipe_js "https://github.com/afifakhatib/foodblog_project/blob/main/assets/js/addRecipes.js"
click node_about "https://github.com/afifakhatib/foodblog_project/blob/main/AboutUs.html"
click node_helper "https://github.com/afifakhatib/foodblog_project/blob/main/assets/js/helper.js"
click node_video_one "https://github.com/afifakhatib/foodblog_project/blob/main/assets/images/video_1.mp4"
click node_video_two "https://github.com/afifakhatib/foodblog_project/blob/main/assets/images/video_2.mp4"

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_home_js,node_recipes,node_recipes_js,node_recipe_info,node_recipe_info_js toneBlue
class node_add_recipe,node_add_recipe_js toneAmber
class node_about,node_video_one,node_video_two toneMint
class node_visitor toneIndigo
class node_helper toneTeal
```

## Components

### Recipe discovery

- [Home page](https://github.com/afifakhatib/foodblog_project/blob/main/index.html): `index.html`
- [Home behavior](https://github.com/afifakhatib/foodblog_project/blob/main/assets/js/index.js): `assets/js/index.js`
- [Recipe listing](https://github.com/afifakhatib/foodblog_project/blob/main/recipes.html): `recipes.html`
- [Recipe behavior](https://github.com/afifakhatib/foodblog_project/blob/main/assets/js/recipes.js): `assets/js/recipes.js`
- [Recipe details](https://github.com/afifakhatib/foodblog_project/blob/main/recipeInfo.html): `recipeInfo.html`
- [Detail behavior](https://github.com/afifakhatib/foodblog_project/blob/main/assets/js/recipeInfo.js): `assets/js/recipeInfo.js`

### Recipe contribution

- [Add recipe page](https://github.com/afifakhatib/foodblog_project/blob/main/addRecipe.html): `addRecipe.html`
- [Recipe form behavior](https://github.com/afifakhatib/foodblog_project/blob/main/assets/js/addRecipes.js): `assets/js/addRecipes.js`

### Site information

- [About page](https://github.com/afifakhatib/foodblog_project/blob/main/AboutUs.html): `AboutUs.html`
- [Video asset 1](https://github.com/afifakhatib/foodblog_project/blob/main/assets/images/video_1.mp4): `assets/images/video_1.mp4`
- [Video asset 2](https://github.com/afifakhatib/foodblog_project/blob/main/assets/images/video_2.mp4): `assets/images/video_2.mp4`

### Other components

- **Visitor**
- [Shared helpers](https://github.com/afifakhatib/foodblog_project/blob/main/assets/js/helper.js): `assets/js/helper.js`