# lestterr/frontend architecture

> Architecture diagram of the GitHub repository lestterr/frontend, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-30). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/lestterr/frontend
- Repository: https://github.com/lestterr/frontend

## Overview

This React frontend helps visitors find City Hall offices and view a guided route through a 3D building model. Visitors enter from the landing screen, choose or search for an office, then use the map and floor controls to inspect its route. The app coordinates these views and keeps office metadata as local data; the viewer handles model interpretation and route generation. The README describes Firebase as setup for later Firestore use, but the sampled files show no runtime connection to it. Some route behavior is inferred from the viewer’s sampled implementation; unsampled details are not represented.

Main entry points: [`src/App.jsx`](https://github.com/lestterr/frontend/blob/main/src/App.jsx) (App coordinator), [`src/components/ThreeMapViewer.jsx`](https://github.com/lestterr/frontend/blob/main/src/components/ThreeMapViewer.jsx) (3D map viewer), [`src/components/Header.jsx`](https://github.com/lestterr/frontend/blob/main/src/components/Header.jsx) (City header), [`src/components/OfficeSidebar.jsx`](https://github.com/lestterr/frontend/blob/main/src/components/OfficeSidebar.jsx) (Office search)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["Visitor experience"]
  node_app["App coordinator<br/>[App.jsx]"]
  node_landing["Landing screen<br/>[LandingScreen.jsx]"]
  node_header["City header<br/>[Header.jsx]"]
end

subgraph group_office["Office discovery"]
  node_sidebar["Office search<br/>[OfficeSidebar.jsx]"]
  node_office_data["Office directory<br/>[offices.js]"]
end

subgraph group_navigation["Map navigation"]
  node_map_preview["Map preview<br/>[MapPreview.jsx]"]
  node_viewer["3D map viewer<br/>[ThreeMapViewer.jsx]"]
  node_route_engine["Route generation<br/>[ThreeMapViewer.jsx]"]
  node_model_assets["Floor models"]
end

subgraph group_support["Supporting services"]
  node_clock["Live clock<br/>[useClock.js]"]
  node_firebase[("Firebase setup<br/>[firebase.js]")]
end

node_visitor(("Visitor"))

node_visitor -->|"starts at"| node_landing
node_app -->|"renders"| node_landing
node_app -->|"renders"| node_header
node_header -->|"reads time"| node_clock
node_app -->|"renders"| node_sidebar
node_app -->|"filters offices"| node_office_data
node_sidebar -->|"selects office"| node_app
node_app -->|"renders"| node_map_preview
node_map_preview -->|"renders"| node_viewer
node_viewer -->|"reads office metadata"| node_office_data
node_viewer -->|"creates routes"| node_route_engine
node_viewer -->|"loads floor models"| node_model_assets
node_app -->|"sends map commands"| node_viewer

click node_app "https://github.com/lestterr/frontend/blob/main/src/App.jsx"
click node_landing "https://github.com/lestterr/frontend/blob/main/src/components/LandingScreen.jsx"
click node_header "https://github.com/lestterr/frontend/blob/main/src/components/Header.jsx"
click node_clock "https://github.com/lestterr/frontend/blob/main/src/hooks/useClock.js"
click node_sidebar "https://github.com/lestterr/frontend/blob/main/src/components/OfficeSidebar.jsx"
click node_office_data "https://github.com/lestterr/frontend/blob/main/src/data/offices.js"
click node_map_preview "https://github.com/lestterr/frontend/blob/main/src/components/MapPreview.jsx"
click node_viewer "https://github.com/lestterr/frontend/blob/main/src/components/ThreeMapViewer.jsx"
click node_route_engine "https://github.com/lestterr/frontend/blob/main/src/components/ThreeMapViewer.jsx"
click node_model_assets "https://github.com/lestterr/frontend/tree/main/public/model2"
click node_firebase "https://github.com/lestterr/frontend/blob/main/src/services/firebase.js"

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_landing,node_header toneBlue
class node_sidebar,node_office_data toneAmber
class node_map_preview,node_viewer,node_route_engine,node_model_assets toneMint
class node_clock,node_firebase toneRose
class node_visitor toneIndigo
```

## Components

### Visitor experience

- [App coordinator](https://github.com/lestterr/frontend/blob/main/src/App.jsx): `src/App.jsx`
- [Landing screen](https://github.com/lestterr/frontend/blob/main/src/components/LandingScreen.jsx): `src/components/LandingScreen.jsx`
- [City header](https://github.com/lestterr/frontend/blob/main/src/components/Header.jsx): `src/components/Header.jsx`

### Office discovery

- [Office search](https://github.com/lestterr/frontend/blob/main/src/components/OfficeSidebar.jsx): `src/components/OfficeSidebar.jsx`
- [Office directory](https://github.com/lestterr/frontend/blob/main/src/data/offices.js): `src/data/offices.js`

### Map navigation

- [Map preview](https://github.com/lestterr/frontend/blob/main/src/components/MapPreview.jsx): `src/components/MapPreview.jsx`
- [3D map viewer](https://github.com/lestterr/frontend/blob/main/src/components/ThreeMapViewer.jsx): `src/components/ThreeMapViewer.jsx`
- [Route generation](https://github.com/lestterr/frontend/blob/main/src/components/ThreeMapViewer.jsx): `src/components/ThreeMapViewer.jsx`
- [Floor models](https://github.com/lestterr/frontend/tree/main/public/model2): `public/model2`

### Supporting services

- [Live clock](https://github.com/lestterr/frontend/blob/main/src/hooks/useClock.js): `src/hooks/useClock.js`
- [Firebase setup](https://github.com/lestterr/frontend/blob/main/src/services/firebase.js): `src/services/firebase.js`

### Other components

- **Visitor**

## Connections

- Visitor → Landing screen: starts at (evidence: `src/components/LandingScreen.jsx`)
- App coordinator → Landing screen: renders (evidence: `src/App.jsx`)
- App coordinator → City header: renders (evidence: `src/App.jsx`)
- City header → Live clock: reads time (evidence: `src/components/Header.jsx`)
- App coordinator → Office search: renders (evidence: `src/App.jsx`)
- App coordinator → Office directory: filters offices (evidence: `src/App.jsx`)
- Office search → App coordinator: selects office (evidence: `src/components/OfficeSidebar.jsx`)
- App coordinator → Map preview: renders (evidence: `src/App.jsx`)
- Map preview → 3D map viewer: renders (evidence: `src/components/MapPreview.jsx`)
- 3D map viewer → Office directory: reads office metadata (evidence: `src/components/ThreeMapViewer.jsx`)
- 3D map viewer → Route generation: creates routes (evidence: `src/components/ThreeMapViewer.jsx`)
- 3D map viewer → Floor models: loads floor models (evidence: `README.md`)
- App coordinator → 3D map viewer: sends map commands (evidence: `src/App.jsx`)