Issue #2: 🔴 Build Interactive Frontend Dashboard

[ZEZE1020]

Description

Create interactive dashboard with map visualization showing air quality data from multiple sources.

Tasks

Phase 1: Map

• Install Leaflet or Mapbox GL JS or any other applicable tool
• Create interactive map component
• Add markers for OpenAQ stations
• Add markers for Pandora sites
• Add TEMPO satellite overlay
• Color-code markers by AQI
• Add popup info windows

Phase 2: Visualization

• Create AQI dashboard component
• Add pollutant trend charts
• Create forecast panel
• Add time-series viewer
• Implement color scale legend

Phase 3: Integration

• Connect to backend API
• Fetch data from all sources
• Handle loading states
• Add error boundaries
• Implement auto-refresh (5 min)

Phase 4: Polish

• Add data attribution footer
• Create data sources modal
• Add PDF export
• Make mobile responsive
• Add loading skeletons

Dependencies to Install

npm install leaflet react-leaflet recharts axios date-fns

Files to Create

frontend/src/
├── components/
│   ├── Map/AirQualityMap.jsx
│   ├── Map/DataMarker.jsx
│   ├── Dashboard/AQIDashboard.jsx
│   ├── Dashboard/PollutantCard.jsx
│   ├── Dashboard/ForecastPanel.jsx
│   └── DataAttribution.jsx
└── services/api.js

Acceptance Criteria

• Interactive map with 3+ data sources
• Color-coded AQI markers
• Working trend charts
• Responsive design
• Data attribution displayed
• Auto-refresh working
• PDF export functional

---