An interactive web application that displays real-time San Francisco Muni transit information using Next.js 15, Mapbox GL, and Supabase.

• Real-time tracking of SF Muni vehicles 🚌
• Interactive map interface with vehicle and stop markers
• Detailed information popups for vehicles and stops
• Filtering by operator and line
• Transport mode toggles (Bus 🚎, Metro 🚃, Cableway 🚋)
• Auto-refresh functionality (10-minute intervals)
• Transit stop display toggle
• Responsive layout for desktop and mobile

• Framework: Next.js 15 with App Router
• Language: TypeScript
• Database: Supabase
• Mapping: Mapbox GL & React Map GL
• Styling: Tailwind CSS
• State Management: React Hooks
• Build Tool: Turbopack

Before you begin, ensure you have:

• Node.js (Latest LTS version)
• npm, yarn, or pnpm
• Mapbox API Key
• Supabase Project and API Keys
• 511.org Transit API Key

Create a .env.local file with:

NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN=your_mapbox_token
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
TRANSIT_API_KEY=your_transit_api_key