AQI Monitor with Lottie Animations

Features

• Real-time AQI data from WAQI API
• ML model predictions using XGBoost
• Dynamic Lottie animations based on AQI levels
• Glassmorphism UI design
• Pollutant breakdown display

Setup Instructions

Backend Setup

1. Install Python dependencies:

1. Run the Flask server:

Frontend Setup

1. Navigate to the frontend directory:

1. Install dependencies:

1. Run the development server:

Customizing Lottie Animations

1. Visit LottieFiles
2. Search for animations like:
   • "clear sky background" (for good AQI)
   • "cloudy weather" (for moderate AQI)
   • "smog city" (for unhealthy AQI)
   • "pollution" (for hazardous AQI)
3. Download the JSON files
4. Replace the files in frontend/src/animations/:
   • good.json - AQI 0-50
   • moderate.json - AQI 51-100
   • unhealthy.json - AQI 101-200
   • hazardous.json - AQI 201+

Usage

1. Enter a city name in the search box
2. Click "Check AQI" to fetch data
3. View both API data and ML model predictions
4. See pollutant breakdown below

AQI Categories

• Good (0-50): Green
• Moderate (51-100): Yellow
• Unhealthy for Sensitive Groups (101-150): Orange
• Unhealthy (151-200): Red
• Very Unhealthy (201-300): Purple
• Hazardous (301+): Maroon