# iambuzzz/foodiehub architecture

> Architecture diagram of the GitHub repository iambuzzz/foodiehub, 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/iambuzzz/foodiehub
- Repository: https://github.com/iambuzzz/foodiehub

## Overview

FoodieHub is a React food-ordering frontend. Users browse and filter restaurants, open a restaurant menu, add items to a Redux cart, and view or manage that cart; authenticated users can sync cart state and maintain a profile through Firebase. The graph includes documented feature branches whose component-level wiring was not sampled, but omits uncertain call edges. Restaurant data is local JSON in the sampled menu hook; README describes a local feed dataset as well.

Main entry points: [`src/components/Header.jsx`](https://github.com/iambuzzz/foodiehub/blob/main/src/components/Header.jsx) (Navigation header), [`src/App.jsx`](https://github.com/iambuzzz/foodiehub/blob/main/src/App.jsx) (App layout), [`src/utils/useFirestoreCartSync.js`](https://github.com/iambuzzz/foodiehub/blob/main/src/utils/useFirestoreCartSync.js) (Cart sync hook), [`src/components/Account.jsx`](https://github.com/iambuzzz/foodiehub/blob/main/src/components/Account.jsx) (Account profile)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application Shell"]
  node_entry["React entry<br/>[main.jsx]"]
  node_layout["App layout<br/>[App.jsx]"]
  node_header["Navigation header<br/>[Header.jsx]"]
  node_about["About page<br/>[About.jsx]"]
  node_grocery["Grocery vertical<br/>[Grocery.jsx]"]
  node_contact["Contact page<br/>[Contact.jsx]"]
end

subgraph group_discovery["Restaurant Discovery"]
  node_body["Restaurant feed<br/>[Body.jsx]"]
  node_feeddata["Restaurant dataset<br/>[mockdata.json]"]
  node_card["Restaurant cards<br/>[RestaurantCard.jsx]"]
end

subgraph group_ordering["Menu And Cart"]
  node_menu["Restaurant menu<br/>[RestaurantMenu.jsx]"]
  node_menuhook["Menu data hook"]
  node_menudata["Menu dataset<br/>[resdetails.json]"]
  node_categories["Menu accordions"]
  node_items["Dish list<br/>[ItemList.jsx]"]
  node_cartview["Cart view<br/>[Cart.jsx]"]
  node_store["Redux store<br/>[appStore.js]"]
  node_slice["Cart state<br/>[cartSlice.js]"]
end

subgraph group_identity["Identity And Persistence"]
  node_login["Login and signup<br/>[Login.jsx]"]
  node_account["Account profile<br/>[Account.jsx]"]
  node_context["User context<br/>[UserContext.js]"]
  node_sync["Cart sync hook"]
  node_firebase["Firebase setup<br/>[firebase.js]"]
end

node_visitor(("FoodieHub user"))
node_authservice["Firebase Auth"]
node_firestore[("Cloud Firestore")]

node_visitor -->|"opens app"| node_entry
node_entry -->|"provides state"| node_store
node_entry -->|"mounts routes"| node_layout
node_layout -->|"renders"| node_header
node_layout -->|"runs hook"| node_sync
node_layout -->|"provides user"| node_context
node_header -->|"navigates"| node_body
node_body -->|"reads feed"| node_feeddata
node_body -->|"renders results"| node_card
node_card -->|"opens details"| node_menu
node_menu -->|"loads menu"| node_menuhook
node_menuhook -->|"selects restaurant"| node_menudata
node_menu -->|"renders categories"| node_categories
node_categories -->|"shows dishes"| node_items
node_items -->|"updates cart"| node_slice
node_cartview -->|"reads and updates"| node_slice
node_store -->|"registers reducer"| node_slice
node_header -->|"navigates"| node_login
node_login -->|"uses auth config"| node_firebase
node_firebase -->|"configures"| node_authservice
node_header -->|"observes and signs out"| node_authservice
node_login -->|"signs in or up"| node_authservice
node_header -->|"updates user"| node_context
node_account -->|"reads user"| node_context
node_account -->|"uses services"| node_firebase
node_account -->|"reads and saves profile"| node_firestore
node_sync -->|"reads and dispatches"| node_store
node_sync -->|"observes session"| node_authservice
node_sync -->|"loads and saves cart"| node_firestore
node_header -->|"navigates"| node_about
node_header -->|"navigates"| node_grocery
node_header -->|"navigates"| node_contact

click node_entry "https://github.com/iambuzzz/foodiehub/blob/main/src/main.jsx"
click node_layout "https://github.com/iambuzzz/foodiehub/blob/main/src/App.jsx"
click node_header "https://github.com/iambuzzz/foodiehub/blob/main/src/components/Header.jsx"
click node_body "https://github.com/iambuzzz/foodiehub/blob/main/src/components/Body.jsx"
click node_feeddata "https://github.com/iambuzzz/foodiehub/blob/main/src/utils/mockdata.json"
click node_card "https://github.com/iambuzzz/foodiehub/blob/main/src/components/RestaurantCard.jsx"
click node_menu "https://github.com/iambuzzz/foodiehub/blob/main/src/components/RestaurantMenu.jsx"
click node_menuhook "https://github.com/iambuzzz/foodiehub/blob/main/src/utils/useRestaurantMenu.js"
click node_menudata "https://github.com/iambuzzz/foodiehub/blob/main/src/utils/resdetails.json"
click node_categories "https://github.com/iambuzzz/foodiehub/blob/main/src/components/RestaurantCategory.jsx"
click node_items "https://github.com/iambuzzz/foodiehub/blob/main/src/components/ItemList.jsx"
click node_cartview "https://github.com/iambuzzz/foodiehub/blob/main/src/components/Cart.jsx"
click node_store "https://github.com/iambuzzz/foodiehub/blob/main/src/utils/appStore.js"
click node_slice "https://github.com/iambuzzz/foodiehub/blob/main/src/utils/cartSlice.js"
click node_login "https://github.com/iambuzzz/foodiehub/blob/main/src/components/Login.jsx"
click node_account "https://github.com/iambuzzz/foodiehub/blob/main/src/components/Account.jsx"
click node_context "https://github.com/iambuzzz/foodiehub/blob/main/src/utils/UserContext.js"
click node_sync "https://github.com/iambuzzz/foodiehub/blob/main/src/utils/useFirestoreCartSync.js"
click node_firebase "https://github.com/iambuzzz/foodiehub/blob/main/src/utils/firebase.js"
click node_about "https://github.com/iambuzzz/foodiehub/blob/main/src/components/About.jsx"
click node_grocery "https://github.com/iambuzzz/foodiehub/blob/main/src/components/Grocery.jsx"
click node_contact "https://github.com/iambuzzz/foodiehub/blob/main/src/components/Contact.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_layout,node_header,node_about,node_grocery,node_contact,node_visitor toneBlue
class node_body,node_feeddata,node_card,node_firestore toneAmber
class node_menu,node_menuhook,node_menudata,node_categories,node_items,node_cartview,node_store,node_slice toneMint
class node_login,node_account,node_context,node_sync,node_firebase toneRose
class node_authservice toneIndigo
```

## Components

### Application Shell

- [React entry](https://github.com/iambuzzz/foodiehub/blob/main/src/main.jsx): `src/main.jsx`
- [App layout](https://github.com/iambuzzz/foodiehub/blob/main/src/App.jsx): `src/App.jsx`
- [Navigation header](https://github.com/iambuzzz/foodiehub/blob/main/src/components/Header.jsx): `src/components/Header.jsx`
- [About page](https://github.com/iambuzzz/foodiehub/blob/main/src/components/About.jsx): `src/components/About.jsx`
- [Grocery vertical](https://github.com/iambuzzz/foodiehub/blob/main/src/components/Grocery.jsx): `src/components/Grocery.jsx`
- [Contact page](https://github.com/iambuzzz/foodiehub/blob/main/src/components/Contact.jsx): `src/components/Contact.jsx`

### Restaurant Discovery

- [Restaurant feed](https://github.com/iambuzzz/foodiehub/blob/main/src/components/Body.jsx): `src/components/Body.jsx`
- [Restaurant dataset](https://github.com/iambuzzz/foodiehub/blob/main/src/utils/mockdata.json): `src/utils/mockdata.json`
- [Restaurant cards](https://github.com/iambuzzz/foodiehub/blob/main/src/components/RestaurantCard.jsx): `src/components/RestaurantCard.jsx`

### Menu And Cart

- [Restaurant menu](https://github.com/iambuzzz/foodiehub/blob/main/src/components/RestaurantMenu.jsx): `src/components/RestaurantMenu.jsx`
- [Menu data hook](https://github.com/iambuzzz/foodiehub/blob/main/src/utils/useRestaurantMenu.js): `src/utils/useRestaurantMenu.js`
- [Menu dataset](https://github.com/iambuzzz/foodiehub/blob/main/src/utils/resdetails.json): `src/utils/resdetails.json`
- [Menu accordions](https://github.com/iambuzzz/foodiehub/blob/main/src/components/RestaurantCategory.jsx): `src/components/RestaurantCategory.jsx`
- [Dish list](https://github.com/iambuzzz/foodiehub/blob/main/src/components/ItemList.jsx): `src/components/ItemList.jsx`
- [Cart view](https://github.com/iambuzzz/foodiehub/blob/main/src/components/Cart.jsx): `src/components/Cart.jsx`
- [Redux store](https://github.com/iambuzzz/foodiehub/blob/main/src/utils/appStore.js): `src/utils/appStore.js`
- [Cart state](https://github.com/iambuzzz/foodiehub/blob/main/src/utils/cartSlice.js): `src/utils/cartSlice.js`

### Identity And Persistence

- [Login and signup](https://github.com/iambuzzz/foodiehub/blob/main/src/components/Login.jsx): `src/components/Login.jsx`
- [Account profile](https://github.com/iambuzzz/foodiehub/blob/main/src/components/Account.jsx): `src/components/Account.jsx`
- [User context](https://github.com/iambuzzz/foodiehub/blob/main/src/utils/UserContext.js): `src/utils/UserContext.js`
- [Cart sync hook](https://github.com/iambuzzz/foodiehub/blob/main/src/utils/useFirestoreCartSync.js): `src/utils/useFirestoreCartSync.js`
- [Firebase setup](https://github.com/iambuzzz/foodiehub/blob/main/src/utils/firebase.js): `src/utils/firebase.js`

### Other components

- **FoodieHub user**
- **Firebase Auth**
- **Cloud Firestore**

## Connections

- FoodieHub user → React entry: opens app
- React entry → Redux store: provides state
- React entry → App layout: mounts routes
- App layout → Navigation header: renders
- App layout → Cart sync hook: runs hook
- App layout → User context: provides user
- Navigation header → Restaurant feed: navigates
- Restaurant feed → Restaurant dataset: reads feed
- Restaurant feed → Restaurant cards: renders results
- Restaurant cards → Restaurant menu: opens details
- Restaurant menu → Menu data hook: loads menu
- Menu data hook → Menu dataset: selects restaurant
- Restaurant menu → Menu accordions: renders categories
- Menu accordions → Dish list: shows dishes
- Dish list → Cart state: updates cart
- Cart view → Cart state: reads and updates
- Redux store → Cart state: registers reducer
- Navigation header → Login and signup: navigates
- Login and signup → Firebase setup: uses auth config
- Firebase setup → Firebase Auth: configures
- Navigation header → Firebase Auth: observes and signs out
- Login and signup → Firebase Auth: signs in or up
- Navigation header → User context: updates user
- Account profile → User context: reads user
- Account profile → Firebase setup: uses services
- Account profile → Cloud Firestore: reads and saves profile
- Cart sync hook → Redux store: reads and dispatches
- Cart sync hook → Firebase Auth: observes session
- Cart sync hook → Cloud Firestore: loads and saves cart
- Navigation header → About page: navigates
- Navigation header → Grocery vertical: navigates
- Navigation header → Contact page: navigates