# juliayooo/tonton architecture

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

## Overview

TONTON is a customer-facing café website whose main workflow routes visitors to location and ordering information or to a live menu. The menu page fetches rows from Google Sheets through OpenSheet, resolves available item images from Firebase Storage, and renders categories and items. The home page adds a rotating slideshow, location links, reviews, and social links. The graph reflects the sampled React components and README capabilities; it does not infer wiring for features whose implementation was not provided.

Main entry points: [`src/pages/Home.tsx`](https://github.com/juliayooo/tonton/blob/main/src/pages/Home.tsx) (Home page), [`src/pages/Menu.tsx`](https://github.com/juliayooo/tonton/blob/main/src/pages/Menu.tsx) (Menu page), [`src/App.tsx`](https://github.com/juliayooo/tonton/blob/main/src/App.tsx) (App routes), [`src/components/OrderButton.tsx`](https://github.com/juliayooo/tonton/blob/main/src/components/OrderButton.tsx) (Order button)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_navigation["Site navigation"]
  node_app["App routes<br/>[App.tsx]"]
  node_header["Brand header<br/>[Header.tsx]"]
end

subgraph group_home["Home experience"]
  node_home["Home page<br/>[Home.tsx]"]
  node_slideshow["Photo slideshow<br/>[Slideshow.tsx]"]
  node_orderbutton["Order button<br/>[OrderButton.tsx]"]
  node_locations["Location details<br/>[Home.tsx]"]
  node_reviews["Review links<br/>[Home.tsx]"]
  node_social["Social link<br/>[Home.tsx]"]
end

subgraph group_menu["Menu experience"]
  node_menu["Menu page<br/>[Menu.tsx]"]
  node_sheet[("Menu spreadsheet")]
  node_firebase[("Firebase Storage")]
end

node_visitor(("Site visitor"))
node_maps(("Google Maps"))
node_ordering(("Mobile ordering"))
node_google_reviews(("Google reviews"))
node_instagram(("Instagram"))

node_visitor -->|"opens site"| node_app
node_app -->|"renders"| node_header
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_menu
node_home -->|"renders"| node_slideshow
node_home -->|"renders"| node_orderbutton
node_home -->|"renders"| node_locations
node_home -->|"renders"| node_reviews
node_home -->|"renders"| node_social
node_home -->|"links to"| node_menu
node_locations -->|"links to"| node_maps
node_orderbutton -->|"opens order page"| node_ordering
node_reviews -->|"links to"| node_google_reviews
node_social -->|"links to"| node_instagram
node_menu -->|"fetches rows"| node_sheet
node_sheet -->|"returns menu data"| node_menu
node_menu -->|"resolves image URLs"| node_firebase
node_firebase -->|"returns image URLs"| node_menu

click node_app "https://github.com/juliayooo/tonton/blob/main/src/App.tsx"
click node_header "https://github.com/juliayooo/tonton/blob/main/src/components/Header.tsx"
click node_home "https://github.com/juliayooo/tonton/blob/main/src/pages/Home.tsx"
click node_slideshow "https://github.com/juliayooo/tonton/blob/main/src/components/Slideshow.tsx"
click node_orderbutton "https://github.com/juliayooo/tonton/blob/main/src/components/OrderButton.tsx"
click node_locations "https://github.com/juliayooo/tonton/blob/main/src/pages/Home.tsx"
click node_reviews "https://github.com/juliayooo/tonton/blob/main/src/pages/Home.tsx"
click node_social "https://github.com/juliayooo/tonton/blob/main/src/pages/Home.tsx"
click node_menu "https://github.com/juliayooo/tonton/blob/main/src/pages/Menu.tsx"

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_app,node_header,node_google_reviews toneBlue
class node_home,node_slideshow,node_orderbutton,node_locations,node_reviews,node_social toneAmber
class node_menu,node_sheet,node_firebase toneMint
class node_visitor,node_maps,node_ordering,node_instagram toneIndigo
```

## Components

### Site navigation

- [App routes](https://github.com/juliayooo/tonton/blob/main/src/App.tsx): `src/App.tsx`
- [Brand header](https://github.com/juliayooo/tonton/blob/main/src/components/Header.tsx): `src/components/Header.tsx`

### Home experience

- [Home page](https://github.com/juliayooo/tonton/blob/main/src/pages/Home.tsx): `src/pages/Home.tsx`
- [Photo slideshow](https://github.com/juliayooo/tonton/blob/main/src/components/Slideshow.tsx): `src/components/Slideshow.tsx`
- [Order button](https://github.com/juliayooo/tonton/blob/main/src/components/OrderButton.tsx): `src/components/OrderButton.tsx`
- [Location details](https://github.com/juliayooo/tonton/blob/main/src/pages/Home.tsx): `src/pages/Home.tsx`
- [Review links](https://github.com/juliayooo/tonton/blob/main/src/pages/Home.tsx): `src/pages/Home.tsx`
- [Social link](https://github.com/juliayooo/tonton/blob/main/src/pages/Home.tsx): `src/pages/Home.tsx`

### Menu experience

- [Menu page](https://github.com/juliayooo/tonton/blob/main/src/pages/Menu.tsx): `src/pages/Menu.tsx`
- **Menu spreadsheet**
- **Firebase Storage**

### Other components

- **Site visitor**
- **Google Maps**
- **Mobile ordering**
- **Google reviews**
- **Instagram**

## Connections

- Site visitor → App routes: opens site
- App routes → Brand header: renders
- App routes → Home page: routes to
- App routes → Menu page: routes to
- Home page → Photo slideshow: renders
- Home page → Order button: renders
- Home page → Location details: renders
- Home page → Review links: renders
- Home page → Social link: renders
- Home page → Menu page: links to
- Location details → Google Maps: links to
- Order button → Mobile ordering: opens order page
- Review links → Google reviews: links to
- Social link → Instagram: links to
- Menu page → Menu spreadsheet: fetches rows
- Menu spreadsheet → Menu page: returns menu data
- Menu page → Firebase Storage: resolves image URLs
- Firebase Storage → Menu page: returns image URLs