Air Jordan (yes, a play on the basketball player) is a dashboard web application that provides real-time pollution data for any location in the world. This project was an exciting opportunity to work with a large dataset via API calls and display live environmental data.
The application leverages data from the OpenWeather API, incorporates geocoding for location searches, and includes map functionality to enhance the user experience.
-
Real-Time Data Retrieval
- Fetches live air quality index (AQI) data for any location worldwide.
- Ensures up-to-the-minute accuracy using OpenWeather’s Air Pollution API.
-
AQI Visualization
- Displays AQI levels in a user-friendly gauge format.
- Provides a clear color-coded system to help users quickly interpret air quality.
-
Pollutant Breakdown
- Lists the main air pollutants (CO, NO2, O3, PM2.5, PM10, etc.).
- Helps users understand which pollutants contribute to poor air quality.
-
Location Search Functionality
- Users can search for any city or coordinates to get localized air quality data.
- Implements geocoding to convert city names into latitude/longitude values.
-
Interactive Map Integration
- Displays the searched location on an interactive map.
- Utilizes Mapbox for a seamless and visually engaging map experience.
- Allows users to explore different regions and their air quality levels.
- Framework: Next.js (React-based)
- Styling: Tailwind CSS
- APIs Used:
- OpenWeather Air Pollution API (for AQI data)
- OpenWeather Geocoding API (for location searches)
- Mapbox API (for map rendering)
- Hosting: Vercel
- State Management: React Hooks (useState, useEffect)
- Additional Libraries: Axios (for API calls), Dynamic Imports (for SSR optimizations)