Sundays in SF

Event management app for Sundays in SF sessions with live sky gradients and Apple HIG-inspired design.

Project Overview

This is a single-page React app with three main screens:

  1. Pre-Session: Welcome screen with WiFi QR code and schedule
  2. Timer: Create and run timers with animated sunrise-to-sundown gradient
  3. Closeout: Thank you screen with QR codes for next session and Commons Public Hours

All screens feature live San Francisco sky gradient backgrounds using atmospheric scattering simulation.

Configuration

Set these environment variables in Val Town:

  • SUNDAYS_WIFI_SSID: WiFi network name
  • SUNDAYS_WIFI_PASSWORD: WiFi password
  • SUNDAYS_NEXT_SESSION_URL: URL for next session QR code
  • SUNDAYS_COMMONS_URL: URL for Commons Public Hours QR code

The alarm sound is served from blob storage via the /api/blob/mrbluesky_snippet endpoint.

Architecture

  • Backend: Hono server (backend/index.http.ts) serves the frontend and injects env vars
  • Frontend: React SPA with TailwindCSS and custom Apple HIG styling
  • Shared: Atmospheric rendering engine and shared types
  • No database: All state is client-side, no persistence needed

Key Technical Details

  • Gradient rendering uses physical atmospheric scattering model
  • Timer animation maps full day cycle (dawn→noon→dusk) to timer duration linearly
  • Glass-morphism cards use backdrop-filter: blur(40px)
  • WiFi QR codes use standard WIFI:T:WPA;S:{ssid};P:{password};; format
  • Host navigation is a floating pill-shaped segment control

See README.md for full setup instructions.