Map Web App - Phase 1

Started building a map-based tool to surface restaurants outperforming expectations. Inspired by a project by a data scientist in London who built a model to find restaurants performing better than their circumstances would predict.

What got built

Map

  • Mapbox GL integration with Seattle center
  • Custom markers sized/styled by discovery tier
  • Recenter and locate-me buttons
  • Light/dark theme support

Restaurant cards

  • Photo carousel with pagination dots
  • Tier badge with score differential
  • Tier explanation box with predicted vs. actual breakdown
  • Address display
  • Directions button (opens Apple Maps)
  • Website and Instagram buttons

Legend bar

  • Theme toggle
  • Clickable tier icons with popover explanations
  • Info button with full "How it works" sheet

Mobile layout

  • Fullscreen map
  • Floating legend (top-left)
  • Floating search bar (bottom)
  • Detail card as bottom sheet

Desktop layout (1024px+)

  • Floating search bar (top-left)
  • Floating legend (top-right)
  • Detail card slides in from left
  • Glass morphism styling throughout

Polish

  • 44px touch targets
  • Focus-visible states
  • 300ms transition timing
  • Viewport zoom enabled for accessibility

Mock data only. Testing the interface before wiring up real predictions.

Back to Log