# steamedbunss/vancouverhub architecture

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

## Overview

Vancouver Hub is a React city-information dashboard for guests and signed-in residents. Users enter through the shared app shell, visit a configurable dashboard or dedicated category pages, and get local events, environmental conditions, traffic, gas prices, and nearby 311 reports from municipal and backend providers. Settings manage location, appearance, navigation, alert thresholds, and report filters; alert evaluation feeds navbar notifications. The README documents the provider and proxy capabilities; sampled source confirms routing, configuration persistence, and 311 preference handling, but not every page-to-provider call.

Main entry points: [`src/components/layout/Layout.tsx`](https://github.com/steamedbunss/vancouverhub/blob/main/src/components/layout/Layout.tsx) (Navigation shell), [`src/pages/TrafficPage.tsx`](https://github.com/steamedbunss/vancouverhub/blob/main/src/pages/TrafficPage.tsx) (Traffic), [`src/App.tsx`](https://github.com/steamedbunss/vancouverhub/blob/main/src/App.tsx) (App routing), [`src/pages/SettingsPage.tsx`](https://github.com/steamedbunss/vancouverhub/blob/main/src/pages/SettingsPage.tsx) (Settings)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application shell"]
  node_app["App routing<br/>[App.tsx]"]
  node_layout["Navigation shell<br/>[Layout.tsx]"]
end

subgraph group_resident["Resident experience"]
  node_dashboard["Dashboard<br/>[DashboardPage.tsx]"]
  node_settings["Settings<br/>[SettingsPage.tsx]"]
  node_auth["Authentication<br/>[AuthPage.tsx]"]
end

subgraph group_domains["City information"]
  node_events["Local events<br/>[EventsPage.tsx]"]
  node_environment["Environment"]
  node_traffic["Traffic<br/>[TrafficPage.tsx]"]
  node_neighbourhood["Neighbour reports<br/>[Safety311Page.tsx]"]
  node_dashboard_sections["Dashboard sections"]
end

subgraph group_integrations["Data integrations"]
  node_events_api["Events provider<br/>[events.ts]"]
  node_environment_api["Environment provider<br/>[environment.ts]"]
  node_traffic_api["Traffic providers<br/>[open511.ts]"]
  node_camera_api["Camera data"]
  node_border_fn["Border wait function<br/>[border-waits.ts]"]
  node_service_api["311 provider<br/>[serviceRequests.ts]"]
end

subgraph group_state["Personalization and alerts"]
  node_user_config[("User configuration")]
  node_config_context["Configuration context"]
  node_preferences["311 preferences"]
  node_alerts["Alert evaluation<br/>[evaluateAlerts.ts]"]
  node_wildfire_alerts["Wildfire alerts"]
  node_wildfire_storage[("Seen wildfire history")]
end

node_resident(("Resident"))
node_cascade["Cascade Gateway"]
node_backend["Hub backend"]

node_resident -->|"opens"| node_app
node_app -->|"routes through"| node_layout
node_layout -->|"displays"| node_dashboard
node_layout -->|"displays"| node_settings
node_layout -->|"displays"| node_events
node_layout -->|"displays"| node_environment
node_layout -->|"displays"| node_traffic
node_layout -->|"displays"| node_neighbourhood
node_app -->|"routes"| node_auth
node_dashboard -->|"renders"| node_dashboard_sections
node_dashboard_sections -->|"loads events"| node_events_api
node_dashboard_sections -->|"loads conditions"| node_environment_api
node_events -->|"loads events"| node_events_api
node_environment -->|"loads conditions"| node_environment_api
node_traffic -->|"loads events"| node_traffic_api
node_traffic -->|"loads cameras"| node_camera_api
node_traffic -->|"requests waits"| node_border_fn
node_border_fn -->|"fetches waits"| node_cascade
node_neighbourhood -->|"loads reports"| node_service_api
node_service_api -->|"requests data"| node_backend
node_events_api -->|"requests data"| node_backend
node_environment_api -->|"requests data"| node_backend
node_settings -->|"updates preferences"| node_config_context
node_config_context -->|"reads and writes"| node_user_config
node_settings -->|"edits filters"| node_preferences
node_preferences -->|"loads and saves"| node_service_api
node_alerts -->|"evaluates fires"| node_wildfire_alerts
node_wildfire_alerts -->|"tracks seen fires"| node_wildfire_storage

click node_app "https://github.com/steamedbunss/vancouverhub/blob/main/src/App.tsx"
click node_layout "https://github.com/steamedbunss/vancouverhub/blob/main/src/components/layout/Layout.tsx"
click node_dashboard "https://github.com/steamedbunss/vancouverhub/blob/main/src/pages/DashboardPage.tsx"
click node_settings "https://github.com/steamedbunss/vancouverhub/blob/main/src/pages/SettingsPage.tsx"
click node_auth "https://github.com/steamedbunss/vancouverhub/blob/main/src/pages/AuthPage.tsx"
click node_events "https://github.com/steamedbunss/vancouverhub/blob/main/src/pages/EventsPage.tsx"
click node_environment "https://github.com/steamedbunss/vancouverhub/blob/main/src/pages/EnvironmentPage.tsx"
click node_traffic "https://github.com/steamedbunss/vancouverhub/blob/main/src/pages/TrafficPage.tsx"
click node_neighbourhood "https://github.com/steamedbunss/vancouverhub/blob/main/src/pages/Safety311Page.tsx"
click node_dashboard_sections "https://github.com/steamedbunss/vancouverhub/tree/main/src/components/dashboard/sections"
click node_events_api "https://github.com/steamedbunss/vancouverhub/blob/main/src/lib/api/events.ts"
click node_environment_api "https://github.com/steamedbunss/vancouverhub/blob/main/src/lib/api/environment.ts"
click node_traffic_api "https://github.com/steamedbunss/vancouverhub/blob/main/src/lib/api/open511.ts"
click node_camera_api "https://github.com/steamedbunss/vancouverhub/blob/main/src/lib/api/vancouverTrafficCams.ts"
click node_border_fn "https://github.com/steamedbunss/vancouverhub/blob/main/netlify/functions/border-waits.ts"
click node_service_api "https://github.com/steamedbunss/vancouverhub/blob/main/src/lib/api/serviceRequests.ts"
click node_user_config "https://github.com/steamedbunss/vancouverhub/blob/main/src/lib/userConfigStorage.ts"
click node_config_context "https://github.com/steamedbunss/vancouverhub/blob/main/src/context/UserConfigContext.tsx"
click node_preferences "https://github.com/steamedbunss/vancouverhub/blob/main/src/context/ServiceRequestPreferencesContext.tsx"
click node_alerts "https://github.com/steamedbunss/vancouverhub/blob/main/src/lib/alerts/evaluateAlerts.ts"
click node_wildfire_alerts "https://github.com/steamedbunss/vancouverhub/blob/main/src/lib/alerts/evaluateNewWildfireAlerts.ts"
click node_wildfire_storage "https://github.com/steamedbunss/vancouverhub/blob/main/src/lib/alerts/seenWildfiresStorage.ts"

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_layout toneBlue
class node_dashboard,node_settings,node_auth toneAmber
class node_events,node_environment,node_traffic,node_neighbourhood,node_dashboard_sections toneMint
class node_events_api,node_environment_api,node_traffic_api,node_camera_api,node_border_fn,node_service_api toneRose
class node_user_config,node_config_context,node_preferences,node_alerts,node_wildfire_alerts,node_wildfire_storage,node_resident,node_cascade,node_backend toneIndigo
```

## Components

### Application shell

- [App routing](https://github.com/steamedbunss/vancouverhub/blob/main/src/App.tsx): `src/App.tsx`
- [Navigation shell](https://github.com/steamedbunss/vancouverhub/blob/main/src/components/layout/Layout.tsx): `src/components/layout/Layout.tsx`

### Resident experience

- [Dashboard](https://github.com/steamedbunss/vancouverhub/blob/main/src/pages/DashboardPage.tsx): `src/pages/DashboardPage.tsx`
- [Settings](https://github.com/steamedbunss/vancouverhub/blob/main/src/pages/SettingsPage.tsx): `src/pages/SettingsPage.tsx`
- [Authentication](https://github.com/steamedbunss/vancouverhub/blob/main/src/pages/AuthPage.tsx): `src/pages/AuthPage.tsx`

### City information

- [Local events](https://github.com/steamedbunss/vancouverhub/blob/main/src/pages/EventsPage.tsx): `src/pages/EventsPage.tsx`
- [Environment](https://github.com/steamedbunss/vancouverhub/blob/main/src/pages/EnvironmentPage.tsx): `src/pages/EnvironmentPage.tsx`
- [Traffic](https://github.com/steamedbunss/vancouverhub/blob/main/src/pages/TrafficPage.tsx): `src/pages/TrafficPage.tsx`
- [Neighbour reports](https://github.com/steamedbunss/vancouverhub/blob/main/src/pages/Safety311Page.tsx): `src/pages/Safety311Page.tsx`
- [Dashboard sections](https://github.com/steamedbunss/vancouverhub/tree/main/src/components/dashboard/sections): `src/components/dashboard/sections`

### Data integrations

- [Events provider](https://github.com/steamedbunss/vancouverhub/blob/main/src/lib/api/events.ts): `src/lib/api/events.ts`
- [Environment provider](https://github.com/steamedbunss/vancouverhub/blob/main/src/lib/api/environment.ts): `src/lib/api/environment.ts`
- [Traffic providers](https://github.com/steamedbunss/vancouverhub/blob/main/src/lib/api/open511.ts): `src/lib/api/open511.ts`
- [Camera data](https://github.com/steamedbunss/vancouverhub/blob/main/src/lib/api/vancouverTrafficCams.ts): `src/lib/api/vancouverTrafficCams.ts`
- [Border wait function](https://github.com/steamedbunss/vancouverhub/blob/main/netlify/functions/border-waits.ts): `netlify/functions/border-waits.ts`
- [311 provider](https://github.com/steamedbunss/vancouverhub/blob/main/src/lib/api/serviceRequests.ts): `src/lib/api/serviceRequests.ts`

### Personalization and alerts

- [User configuration](https://github.com/steamedbunss/vancouverhub/blob/main/src/lib/userConfigStorage.ts): `src/lib/userConfigStorage.ts`
- [Configuration context](https://github.com/steamedbunss/vancouverhub/blob/main/src/context/UserConfigContext.tsx): `src/context/UserConfigContext.tsx`
- [311 preferences](https://github.com/steamedbunss/vancouverhub/blob/main/src/context/ServiceRequestPreferencesContext.tsx): `src/context/ServiceRequestPreferencesContext.tsx`
- [Alert evaluation](https://github.com/steamedbunss/vancouverhub/blob/main/src/lib/alerts/evaluateAlerts.ts): `src/lib/alerts/evaluateAlerts.ts`
- [Wildfire alerts](https://github.com/steamedbunss/vancouverhub/blob/main/src/lib/alerts/evaluateNewWildfireAlerts.ts): `src/lib/alerts/evaluateNewWildfireAlerts.ts`
- [Seen wildfire history](https://github.com/steamedbunss/vancouverhub/blob/main/src/lib/alerts/seenWildfiresStorage.ts): `src/lib/alerts/seenWildfiresStorage.ts`

### Other components

- **Resident**
- **Cascade Gateway**
- **Hub backend**

## Connections

- Resident → App routing: opens
- App routing → Navigation shell: routes through
- Navigation shell → Dashboard: displays
- Navigation shell → Settings: displays
- Navigation shell → Local events: displays
- Navigation shell → Environment: displays
- Navigation shell → Traffic: displays
- Navigation shell → Neighbour reports: displays
- App routing → Authentication: routes
- Dashboard → Dashboard sections: renders
- Dashboard sections → Events provider: loads events
- Dashboard sections → Environment provider: loads conditions
- Local events → Events provider: loads events
- Environment → Environment provider: loads conditions
- Traffic → Traffic providers: loads events
- Traffic → Camera data: loads cameras
- Traffic → Border wait function: requests waits
- Border wait function → Cascade Gateway: fetches waits
- Neighbour reports → 311 provider: loads reports
- 311 provider → Hub backend: requests data
- Events provider → Hub backend: requests data
- Environment provider → Hub backend: requests data
- Settings → Configuration context: updates preferences
- Configuration context → User configuration: reads and writes
- Settings → 311 preferences: edits filters
- 311 preferences → 311 provider: loads and saves
- Alert evaluation → Wildfire alerts: evaluates fires
- Wildfire alerts → Seen wildfire history: tracks seen fires