How lestterr/frontend works
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: App.jsx App coordinator · ThreeMapViewer.jsx 3D map viewer · Header.jsx City header · OfficeSidebar.jsx Office search
Components 12
Visitor experience
- App coordinator
src/App.jsx - Landing screen
src/components/LandingScreen.jsx - City header
src/components/Header.jsx
Office discovery
- Office search
src/components/OfficeSidebar.jsx - Office directory
src/data/offices.js
Map navigation
- Map preview
src/components/MapPreview.jsx - 3D map viewer
src/components/ThreeMapViewer.jsx - Route generation
src/components/ThreeMapViewer.jsx - Floor models
public/model2
Supporting services
- Live clock
src/hooks/useClock.js - Firebase setup
src/services/firebase.js
Other components
- Visitor
Connections 13
- Visitor → Landing screen: starts at
src/components/LandingScreen.jsx - App coordinator → Landing screen: renders
src/App.jsx - App coordinator → City header: renders
src/App.jsx - City header → Live clock: reads time
src/components/Header.jsx - App coordinator → Office search: renders
src/App.jsx - App coordinator → Office directory: filters offices
src/App.jsx - Office search → App coordinator: selects office
src/components/OfficeSidebar.jsx - App coordinator → Map preview: renders
src/App.jsx - Map preview → 3D map viewer: renders
src/components/MapPreview.jsx - 3D map viewer → Office directory: reads office metadata
src/components/ThreeMapViewer.jsx - 3D map viewer → Route generation: creates routes
src/components/ThreeMapViewer.jsx - 3D map viewer → Floor models: loads floor models
README.md - App coordinator → 3D map viewer: sends map commands
src/App.jsx