Breathe Smarter. A next-generation, real-time Air Quality Index (AQI) monitoring application built for precision, aesthetics, and speed.

The Antigravity AQI Tracker is a high-performance web dashboard designed to provide users with accurate, real-time air quality data for their location and major cities worldwide. Built with a "Weightless Elegance" design philosophy, it combines deep atmospheric data with a stunning, glassmorphic UI.

Unlike standard weather apps, this tracker focuses specifically on detailed pollutant breakdowns (PM2.5, PM10, NO2, SO2, O3, CO) and provides health-centric insights using both US EPA and Indian CPCB standards (configurable).

• Real-time AQI Gauge: A visually immersive gauge that dynamically changes color and theme based on pollution levels.
• Auto-Geolocation: Instantly detects your current location to show hyper-local air quality data.
• Comprehensive Pollutants: Detailed tracking of PM2.5, PM10, Nitrogen Dioxide, Sulfur Dioxide, Carbon Monoxide, and Ozone.
• Weather Integration: Seamlessly integrated live weather context (Temperature, Humidity, Wind Speed) powered by Open-Meteo.

• Interactive Trend Charts: Visualise AQI history over the last 24 hours to spot pollution patterns.
• Glassmorphic UI: A premium, dark-mode-first interface using backdrop blurs and smooth Framer Motion animations.

• City Comparisons: Compare your air quality against major metro cities like Delhi, Mumbai, and New York.
• Global Rankings: (Coming Soon) A dynamic leaderboard of the world's most polluted cities.
• Interactive Map: (Coming Soon) A 3D globe view of air quality hotspots.

This project is engineered for performance and scalability:

• Frontend Core: React 19 (Vite)
• State Management: Redux Toolkit & RTK Query (Caching, Polling, Optimistic Updates)
• Styling: Tailwind CSS & Vanilla CSS Variables
• Animations: Framer Motion
• Data Visualization: Recharts
• Icons: Lucide React
• APIs:
  • Open-Meteo: For high-precision Air Quality & Weather data.
  • BigDataCloud: For reverse geocoding (Coordinates to City Name).

Follow these steps to run the project locally:

• Node.js (v18 or higher)
• npm or yarn

1. Clone the repository

   git clone https://github.com/visen-vin/aqi-tracker.git
   cd aqi-tracker

2. Install dependencies

   npm install

3. Run the development server

   npm run dev

4. Open in Browser Navigate to http://localhost:5173 to view the app.

src/
├── components/         # Reusable UI components
│   ├── common/         # Header, Footer, Loaders
│   ├── dashboard/      # Dashboard-specific widgets (Gauge, Charts)
│   └── layout/         # Layout wrappers (Atmosphere background)
├── config/             # App-wide configuration
├── screens/            # Main Page Views (Dashboard, Rankings, Map)
├── store/              # Redux State Management
│   ├── api/            # RTK Query API definitions
│   └── slices/         # Redux Slices
├── utils/              # Helper functions (AQI Calculation logic)
└── App.jsx             # Main Application Entry

• Core Dashboard: Live Data, Pollutants, Trends.
• Comparing Cities: Basic static comparison.
• Global Rankings: Integration with dynamic ranking APIs.
• Heatmap: Visual map overlay for pollution intensity.
• PWA Support: Installable mobile web app experience.
• Notifications: Alerts when AQI breaches safe limits.

This project was made possible by these incredible open-source tools and data providers:

• Open-Meteo: The core engine powering our Air Quality and Weather data. An amazing free, open-source API.
• BigDataCloud: Used for high-precision client-side reverse geocoding to detect city names from coordinates.

• Lucide React: Beautiful, consistent, and lightweight icon pack.
• Tailwind CSS: The utility-first CSS framework that enables our rapid, custom UI development.
• Framer Motion: For the buttery smooth animations and "weightless" feel.
• Recharts: Composable charting library used for the trend visualization.

• React 19: The latest version of the web's most popular library.
• Redux Toolkit: For efficient state management and RTK Query data fetching.
• Vite: Next-generation frontend tooling.

Contributions are welcome! Please feel free to submit a Pull Request.

This project is open-source and available under the MIT License.