How loamysand/betterbearings works
BetterBearings is a browser-based street-learning game with optional accounts and saved neighborhood street sets. A player opens the game, receives a street prompt, and selects its geometry on a map; guests can play random areas, while signed-in users can create and manage saved sets. The map and quiz hooks divide game state, area selection, and street rendering. The server separately handles authentication, street-set persistence, and a public street-selection API. The README documents browser-fetched Overpass data and map tiles; unsampled client request details are not inferred here.
Main entry points: Game.jsx Street quiz · App.jsx React routes · app.js Express app · AuthContext.jsx Auth state
Components 25
Game and maps
- React routes
client/src/App.jsx - Game page
client/src/pages/Home.jsx - Street quiz
client/src/components/Game.jsx - Quiz state
client/src/hooks/useGameState.js - Quiz area
client/src/hooks/useQuizArea.js - Map rendering
client/src/hooks/useLeafletMap.js - Street geometry
client/src/hooks/useStreetPolylines.js - Area selector
client/src/components/QuizAreaModule.jsx - Street loading
client/src/hooks/useStreets.js - Tile layer
client/src/utils/tileLayer.js
Accounts
- Sign-in dialog
client/src/components/AuthModal.jsx - Auth state
client/src/contexts/AuthContext.jsx - Street-set list
client/src/pages/StreetSets.jsx - Street-set detail
client/src/pages/StreetSetDetail.jsx - Create street set
client/src/components/CreateStreetSetModal.jsx
API services
- Auth endpoints
server/routes/authRoutes.js - Street-set endpoints
server/routes/streetSetRoutes.js - Street query endpoint
server/routes/streetRoutes.js - Express app
server/app.js
Street data
- Street-set queries
server/db/streetSets.js - Street queries
server/db/streets.js - PostGIS database
server/db/pool.js
Other components
- Player
- Overpass API
- Map tiles
Connections 27
- Player → React routes: opens
client/src/App.jsx - React routes → Game page: routes to
client/src/App.jsx - Game page → Street quiz: renders
client/src/pages/Home.jsx - Street quiz → Quiz state: uses
client/src/components/Game.jsx - Street quiz → Quiz area: uses
client/src/components/Game.jsx - Street quiz → Map rendering: uses
client/src/components/Game.jsx - Street quiz → Street geometry: uses
client/src/components/Game.jsx - Street quiz → Area selector: renders
client/src/components/Game.jsx - Street quiz → Street loading: loads streets
client/src/components/Game.jsx - Street loading → Overpass API: fetches data
README.md - Map rendering → Tile layer: adds base layer
client/src/hooks/useLeafletMap.js - Tile layer → Map tiles: loads tiles
README.md - React routes → Auth state: provides auth
client/src/App.jsx - Sign-in dialog → Auth state: calls login/signup
client/src/components/AuthModal.jsx - Auth state → Auth endpoints: requests auth
client/src/contexts/AuthContext.jsx - React routes → Street-set list: routes to
client/src/App.jsx - React routes → Street-set detail: routes to
client/src/App.jsx - Street-set list → Create street set: opens create flow
client/src/pages/StreetSets.jsx - Player → Sign-in dialog: signs in
client/src/components/AuthModal.jsx - Express app → Auth endpoints: mounts
server/app.js - Express app → Street-set endpoints: mounts
server/app.js - Express app → Street query endpoint: mounts
server/app.js - Auth endpoints → PostGIS database: queries
server/routes/authRoutes.js - Street-set endpoints → Street-set queries: calls
server/routes/streetSetRoutes.js - Street query endpoint → Street queries: calls
server/routes/streetRoutes.js - Street-set queries → PostGIS database: queries
server/db/streetSets.js - Street queries → PostGIS database: queries
server/db/streets.js