Air Mate

A React.js web application that provides real-time air quality and weather information based on user location or city search.

🌐 Live Demo: https://jaslam94.github.io/air-mate/

Overview

Air Mate is a clean, responsive web application that displays current air quality index (AQI) and weather conditions. The app automatically detects the user's location via IP address and provides the option to search for air quality data in any city worldwide.

Last Updated: December 13, 2021

Features

• IP-based Detection: Automatically fetches air quality data based on user's IP location
• City Search: Search for air quality information in any city globally
• Real-time Data: Current air pollution levels and weather conditions
• Data Caching: Local storage implementation to reduce API calls (10-minute cache)
• Responsive Design: Optimized for desktop and mobile devices
• Visual Indicators: Color-coded AQI levels and weather icons

Tech Stack

• Frontend: React.js 17.0.2
• Styling: Bootstrap 5, Styled Components
• HTTP Client: Axios
• Routing: React Router DOM
• Data Source: IQAir API
• Build Tool: Create React App
• Deployment: GitHub Pages

Key Dependencies

{
  "react": "^17.0.2",
  "axios": "^0.22.0",
  "react-router-dom": "^5.3.0",
  "styled-components": "^5.3.1",
  "react-data-table-component": "^7.4.1",
  "react-toastify": "^8.0.3",
  "countrycitystatejson": "^20.8.13"
}

Project Structure

src/
├── components/
│   ├── airData.jsx          # Main air quality display component
│   ├── ipBasedData.jsx      # IP-based location data handler
│   ├── searchBasedData.jsx  # City search functionality
│   ├── weatherData.jsx      # Weather information display
│   ├── pollutionData.jsx    # Air pollution metrics
│   ├── header.jsx           # Application header
│   └── footer.jsx           # Application footer
├── services/
│   ├── httpService.js       # API communication service
│   └── logService.js        # Logging utilities
├── App.js                   # Main application component
└── config.json             # API endpoints configuration

Getting Started

Prerequisites

• Node.js (v14 or higher)
• npm or yarn
• IQAir API key

Installation

1. Clone the repository

git clone https://github.com/jaslam94/air-mate.git
cd air-mate

2. Install dependencies

npm install

3. Get an API key from IQAir

4. Create environment file

# Create .env.development in the root directory
REACT_APP_IQ_AIR_API_KEY=your_api_key_here

5. Start the development server

npm start

The application will open at http://localhost:3000

Build for Production

npm run build

Deploy to GitHub Pages

npm run deploy

API Integration

The application integrates with the IQAir API to fetch:

• Current air quality index (AQI)
• Pollutant concentrations (PM2.5, PM10, NO2, SO2, CO, O3)
• Weather conditions (temperature, humidity, pressure)
• Location-specific data (city, state, country)

Performance Optimizations

• Local Storage Caching: API responses cached for 10 minutes
• Lazy Loading: Components loaded as needed
• Error Handling: Graceful degradation for API failures
• Loading States: User-friendly loading indicators

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

This project is for educational and portfolio demonstration purposes only. Not intended for commercial use.

About

This project was created as a learning exercise to demonstrate React.js development skills and showcase technical capabilities to potential clients. It serves as a portfolio piece highlighting modern web development practices and API integration.