# adtori/i-skafferiet architecture

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

- Interactive diagram: https://gitdiagram.com/adtori/i-skafferiet
- Repository: https://github.com/adtori/i-skafferiet

## Overview

iSkafferiet is a React pantry manager: users browse, search and filter stored items, add items with category, quantity and best-before date, and open item details to remove an item or see recipe suggestions. The app routes between pantry, add-item and detail views; shared pantry state persists in localStorage, while recipe loading and errors are handled separately from recipe presentation. The README documents accessibility, empty states and responsive design. Some components and pages were not sampled, so their internal wiring is shown only where supported by the tree or README.

Main entry points: [`src/App.jsx`](https://github.com/adtori/i-skafferiet/blob/main/src/App.jsx) (Routes and shell), [`src/context/PantryContext.jsx`](https://github.com/adtori/i-skafferiet/blob/main/src/context/PantryContext.jsx) (Pantry state), [`src/pages/Home/Home.jsx`](https://github.com/adtori/i-skafferiet/blob/main/src/pages/Home/Home.jsx) (Pantry view), [`src/pages/ItemDetails/ItemDetails.jsx`](https://github.com/adtori/i-skafferiet/blob/main/src/pages/ItemDetails/ItemDetails.jsx) (Item details)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App and routing"]
  node_entry["React entry<br/>[main.jsx]"]
  node_router["Routes and shell<br/>[App.jsx]"]
end

subgraph group_pantry["Pantry management"]
  node_home["Pantry view<br/>[Home.jsx]"]
  node_addpage["Add-item view<br/>[AddItem.jsx]"]
  node_details["Item details<br/>[ItemDetails.jsx]"]
  node_state["Pantry state<br/>[PantryContext.jsx]"]
  node_storage[("Browser storage")]
  node_form["Item form<br/>[AddItemForm.jsx]"]
  node_search["Search input<br/>[SearchBar.jsx]"]
  node_category["Category filter<br/>[CategoryFilter.jsx]"]
  node_list["Filtered items<br/>[PantryList.jsx]"]
  node_item["Pantry item<br/>[PantryItem.jsx]"]
end

subgraph group_recipes["Recipe suggestions"]
  node_recipes_hook["Recipe hook<br/>[useRecipes.js]"]
  node_recipe_service["Recipe service<br/>[recipeApi.js]"]
  node_mealdb[("TheMealDB")]
  node_recipe_list["Recipe results<br/>[RecipeList.jsx]"]
  node_loading["Loading state<br/>[Loading.jsx]"]
end

subgraph group_presentation["Shared interface"]
  node_header["Header navigation<br/>[Header.jsx]"]
  node_footer["Footer<br/>[Footer.jsx]"]
end

node_visitor(("Pantry user"))

node_visitor -->|"uses"| node_router
node_entry -->|"renders"| node_router
node_entry -->|"provides state"| node_state
node_router -->|"routes to"| node_home
node_router -->|"routes to"| node_addpage
node_router -->|"routes to"| node_details
node_router -->|"renders"| node_header
node_router -->|"renders"| node_footer
node_home -->|"reads items"| node_state
node_home -->|"renders"| node_search
node_home -->|"renders"| node_category
node_home -->|"renders"| node_list
node_addpage -->|"renders"| node_form
node_form -->|"adds item"| node_state
node_state -->|"reads and writes"| node_storage
node_list -->|"reads items"| node_state
node_list -->|"renders"| node_item
node_details -->|"reads and removes"| node_state
node_details -->|"requests recipes"| node_recipes_hook
node_details -->|"renders"| node_loading
node_details -->|"renders results"| node_recipe_list
node_recipes_hook -->|"calls"| node_recipe_service
node_recipe_service -->|"fetches recipes"| node_mealdb

click node_entry "https://github.com/adtori/i-skafferiet/blob/main/src/main.jsx"
click node_router "https://github.com/adtori/i-skafferiet/blob/main/src/App.jsx"
click node_home "https://github.com/adtori/i-skafferiet/blob/main/src/pages/Home/Home.jsx"
click node_addpage "https://github.com/adtori/i-skafferiet/blob/main/src/pages/AddItem/AddItem.jsx"
click node_details "https://github.com/adtori/i-skafferiet/blob/main/src/pages/ItemDetails/ItemDetails.jsx"
click node_state "https://github.com/adtori/i-skafferiet/blob/main/src/context/PantryContext.jsx"
click node_form "https://github.com/adtori/i-skafferiet/blob/main/src/components/AddItemForm/AddItemForm.jsx"
click node_search "https://github.com/adtori/i-skafferiet/blob/main/src/components/SearchBar/SearchBar.jsx"
click node_category "https://github.com/adtori/i-skafferiet/blob/main/src/components/CategoryFilter/CategoryFilter.jsx"
click node_list "https://github.com/adtori/i-skafferiet/blob/main/src/components/PantryList/PantryList.jsx"
click node_item "https://github.com/adtori/i-skafferiet/blob/main/src/components/PantryItem/PantryItem.jsx"
click node_recipes_hook "https://github.com/adtori/i-skafferiet/blob/main/src/hooks/useRecipes.js"
click node_recipe_service "https://github.com/adtori/i-skafferiet/blob/main/src/services/recipeApi.js"
click node_recipe_list "https://github.com/adtori/i-skafferiet/blob/main/src/components/RecipeList/RecipeList.jsx"
click node_loading "https://github.com/adtori/i-skafferiet/blob/main/src/components/Loading/Loading.jsx"
click node_header "https://github.com/adtori/i-skafferiet/blob/main/src/components/Header/Header.jsx"
click node_footer "https://github.com/adtori/i-skafferiet/blob/main/src/components/Footer/Footer.jsx"

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_router,node_visitor toneBlue
class node_home,node_addpage,node_details,node_state,node_storage,node_form,node_search,node_category,node_list,node_item toneAmber
class node_recipes_hook,node_recipe_service,node_mealdb,node_recipe_list,node_loading toneMint
class node_header,node_footer toneRose
```

## Components

### App and routing

- [React entry](https://github.com/adtori/i-skafferiet/blob/main/src/main.jsx): `src/main.jsx`
- [Routes and shell](https://github.com/adtori/i-skafferiet/blob/main/src/App.jsx): `src/App.jsx`

### Pantry management

- [Pantry view](https://github.com/adtori/i-skafferiet/blob/main/src/pages/Home/Home.jsx): `src/pages/Home/Home.jsx`
- [Add-item view](https://github.com/adtori/i-skafferiet/blob/main/src/pages/AddItem/AddItem.jsx): `src/pages/AddItem/AddItem.jsx`
- [Item details](https://github.com/adtori/i-skafferiet/blob/main/src/pages/ItemDetails/ItemDetails.jsx): `src/pages/ItemDetails/ItemDetails.jsx`
- [Pantry state](https://github.com/adtori/i-skafferiet/blob/main/src/context/PantryContext.jsx): `src/context/PantryContext.jsx`
- **Browser storage**
- [Item form](https://github.com/adtori/i-skafferiet/blob/main/src/components/AddItemForm/AddItemForm.jsx): `src/components/AddItemForm/AddItemForm.jsx`
- [Search input](https://github.com/adtori/i-skafferiet/blob/main/src/components/SearchBar/SearchBar.jsx): `src/components/SearchBar/SearchBar.jsx`
- [Category filter](https://github.com/adtori/i-skafferiet/blob/main/src/components/CategoryFilter/CategoryFilter.jsx): `src/components/CategoryFilter/CategoryFilter.jsx`
- [Filtered items](https://github.com/adtori/i-skafferiet/blob/main/src/components/PantryList/PantryList.jsx): `src/components/PantryList/PantryList.jsx`
- [Pantry item](https://github.com/adtori/i-skafferiet/blob/main/src/components/PantryItem/PantryItem.jsx): `src/components/PantryItem/PantryItem.jsx`

### Recipe suggestions

- [Recipe hook](https://github.com/adtori/i-skafferiet/blob/main/src/hooks/useRecipes.js): `src/hooks/useRecipes.js`
- [Recipe service](https://github.com/adtori/i-skafferiet/blob/main/src/services/recipeApi.js): `src/services/recipeApi.js`
- **TheMealDB**
- [Recipe results](https://github.com/adtori/i-skafferiet/blob/main/src/components/RecipeList/RecipeList.jsx): `src/components/RecipeList/RecipeList.jsx`
- [Loading state](https://github.com/adtori/i-skafferiet/blob/main/src/components/Loading/Loading.jsx): `src/components/Loading/Loading.jsx`

### Shared interface

- [Header navigation](https://github.com/adtori/i-skafferiet/blob/main/src/components/Header/Header.jsx): `src/components/Header/Header.jsx`
- [Footer](https://github.com/adtori/i-skafferiet/blob/main/src/components/Footer/Footer.jsx): `src/components/Footer/Footer.jsx`

### Other components

- **Pantry user**

## Connections

- Pantry user → Routes and shell: uses
- React entry → Routes and shell: renders
- React entry → Pantry state: provides state
- Routes and shell → Pantry view: routes to
- Routes and shell → Add-item view: routes to
- Routes and shell → Item details: routes to
- Routes and shell → Header navigation: renders
- Routes and shell → Footer: renders
- Pantry view → Pantry state: reads items
- Pantry view → Search input: renders
- Pantry view → Category filter: renders
- Pantry view → Filtered items: renders
- Add-item view → Item form: renders
- Item form → Pantry state: adds item
- Pantry state → Browser storage: reads and writes
- Filtered items → Pantry state: reads items
- Filtered items → Pantry item: renders
- Item details → Pantry state: reads and removes
- Item details → Recipe hook: requests recipes
- Item details → Loading state: renders
- Item details → Recipe results: renders results
- Recipe hook → Recipe service: calls
- Recipe service → TheMealDB: fetches recipes