How adtori/i-skafferiet works
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: App.jsx Routes and shell · PantryContext.jsx Pantry state · Home.jsx Pantry view · ItemDetails.jsx Item details
Components 20
App and routing
- React entry
src/main.jsx - Routes and shell
src/App.jsx
Pantry management
- Pantry view
src/pages/Home/Home.jsx - Add-item view
src/pages/AddItem/AddItem.jsx - Item details
src/pages/ItemDetails/ItemDetails.jsx - Pantry state
src/context/PantryContext.jsx - Browser storage
- Item form
src/components/AddItemForm/AddItemForm.jsx - Search input
src/components/SearchBar/SearchBar.jsx - Category filter
src/components/CategoryFilter/CategoryFilter.jsx - Filtered items
src/components/PantryList/PantryList.jsx - Pantry item
src/components/PantryItem/PantryItem.jsx
Recipe suggestions
- Recipe hook
src/hooks/useRecipes.js - Recipe service
src/services/recipeApi.js - TheMealDB
- Recipe results
src/components/RecipeList/RecipeList.jsx - Loading state
src/components/Loading/Loading.jsx
Shared interface
- Header navigation
src/components/Header/Header.jsx - Footer
src/components/Footer/Footer.jsx
Other components
- Pantry user
Connections 23
- 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