Technical Architecture

Technical Architecture

Stack

• React 18
• Vite 5
• CSS files per component
• Browser localStorage for persistence

Main Structure

src/
  App.jsx
  main.jsx
  components/
    Header.jsx
    Navigation.jsx
    PantryTracker.jsx
    AddFoodForm.jsx
    FoodItem.jsx
    RecipeGenerator.jsx
    ImpactDashboard.jsx
    ProgressChart.jsx
    StatCard.jsx

Data Flow

App.jsx owns global state:

• currentView
• foodItems
• stats

PantryTracker.jsx:

• reads foodItems from localStorage on mount
• writes foodItems to localStorage on updates
• recalculates stats from consumed items

RecipeGenerator.jsx:

• reads foodItems
• manages local selected ingredient state (selectedItems)
• builds mocked recipe output

ImpactDashboard.jsx:

• reads foodItems and stats
• computes impact ratios and achievements

Food Item Data Model

{
  id: number,
  name: string,
  category: 'produce' | 'dairy' | 'meat' | 'grains' | 'canned' | 'frozen' | 'other',
  quantity: string,
  expiryDate: string,    // YYYY-MM-DD
  addedDate: string,     // ISO datetime
  consumed: boolean
}

Current Limitations

• no backend API
• no user authentication
• no multi-device sync
• AI generation is not connected to an external provider
• no automated unit/integration/e2e test suite

Recommended Extensions

• connect recipes to a real LLM provider
• move persistence to API + database
• add proactive expiration notifications
• add automated component/integration tests