A data-driven analytics platform that analyzes air quality trends and surfaces health insights using real-time and historical data for major Indian cities.
VayuWatch monitors air quality across 15+ major Indian cities using CPCB (Central Pollution Control Board) standards. The platform provides real-time AQI data, historical trend analysis, and personalized health recommendations.
- Real-time AQI Monitoring - Live air quality data for major Indian metros
- Historical Trend Analysis - 7-day trends with moving averages
- Health Insights - CPCB-based health recommendations
- Pollutant Breakdown - PM2.5, PM10, O3, NO2, SO2, CO levels
- Smart Alerts - Threshold-based notifications
- City Comparison - Compare AQI across multiple cities
- Dark Mode UI - Developer-friendly interface
├── src/ # Frontend Application
│ ├── components/ # React UI Components
│ │ ├── ui/ # Reusable UI primitives
│ │ ├── AQICard.tsx # AQI display card
│ │ ├── AQIGauge.tsx # Visual AQI gauge
│ │ ├── TrendChart.tsx # Recharts trend visualization
│ │ ├── PollutantCard.tsx # Individual pollutant display
│ │ └── HealthAdvice.tsx # Health recommendations
│ ├── pages/ # Route pages
│ │ ├── Dashboard.tsx # Main dashboard
│ │ ├── Trends.tsx # Historical trends
│ │ ├── Insights.tsx # Health insights
│ │ └── Alerts.tsx # Alert management
│ ├── hooks/ # Custom React hooks
│ │ └── useAQI.ts # AQI data fetching hook
│ ├── lib/ # Utility functions
│ │ └── aqi.ts # AQI calculations & helpers
│ └── contexts/ # React contexts
│ └── AuthContext.tsx # Authentication state
│
├── supabase/ # Backend Services
│ └── functions/ # Edge Functions (Serverless)
│ ├── aqi-current/ # Current AQI endpoint
│ ├── aqi-history/ # Historical data endpoint
│ ├── aqi-collect/ # Data collection job
│ └── aqi-seed/ # Database seeding
│
└── public/ # Static assets
- React 18 - UI library with hooks
- TypeScript - Type safety
- Tailwind CSS - Utility-first styling
- Recharts - Data visualization
- React Query - Server state management
- React Router - Client-side routing
- Supabase - PostgreSQL database + Auth
- Edge Functions - Serverless API endpoints (Deno)
- Row Level Security - Data protection
- Real-time AQI data simulation (expandable to CPCB API)
- Weather integration ready
- Historical data storage
- Node.js 18+
- npm or yarn
# Clone the repository
git clone https://github.com/yourusername/vayuwatch.git
cd vayuwatch
# Install dependencies
npm install
# Start development server
npm run devCreate a .env file in the root directory:
VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_PUBLISHABLE_KEY=your_anon_key| Endpoint | Method | Description |
|---|---|---|
/aqi-current |
GET | Current AQI for a city |
/aqi-history |
GET | Historical AQI data |
/aqi-collect |
POST | Trigger data collection |
curl "https://your-project.supabase.co/functions/v1/aqi-current?city=Delhi"VayuWatch uses a custom dark theme optimized for data visualization:
- AQI Color Coding: Green (Good) → Maroon (Severe)
- CPCB Standards: India-specific thresholds
- Accessible: WCAG 2.1 compliant contrast ratios
- Moving Averages: 24-hour rolling average
- Trend Detection: Improving/Stable/Worsening indicators
- Health Risk Assessment: Low/Moderate/High/Severe/Critical
- Regional Comparison: City vs national average
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit changes (
git commit -m 'Add amazing feature') - Push to branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
Built with ❤️ for cleaner air in India