Airopath: Air-Quality-Aware Routing

Overview

AiroPath is a mobile application for cyclists and pedestrians that calculates multiple routes between two points and ranks them by real-time AQI (Air Quality Index). It empowers users to choose the cleanest path for their health, rather than just the fastest one.

Features

• AQI-aware routing: Fetches live AQI data along each route and scores them by air quality.
• Multi-mode: Supports both cycling and walking travel modes.
• Location search: Powered by Nominatim (OpenStreetMap) with autocomplete and current location detection.
• Route cards: Side-by-side comparison of alternative routes showing distance, duration, and AQI score.
• Authentication: Secure email/password and Google OAuth powered by Supabase.
• Theme support: Monochromatic dark and light themes that follow system preferences.

Why I Built This

I wanted a way to find healthier routes for cycling and walking, especially in urban environments where air quality can vary significantly from one street to another. This project solves the problem of blindly taking the fastest route when a slightly longer path might offer significantly cleaner air.

Technical Stuff

Frontend

The frontend is built as a cross-platform mobile app prioritizing smooth map interactions and a clean interface:

• Expo (React Native): For seamless cross-platform development.
• Expo Router: For file-based routing and navigation.
• react-native-maps: Rendering the map view with Google Maps provider.
• TypeScript: Ensuring type safety across components and API integrations.

Backend & Services

AiroPath relies on a combination of powerful APIs and backend services:

• OpenRouteService API: Generating multiple alternative routes for pedestrians and cyclists.
• WAQI API: Fetching real-time air quality data points.
• Supabase: Managing user authentication and database storage securely.

Route Scoring Flow

The core feature of AiroPath is its intelligent route scoring algorithm:

1. Fetch routes: The app requests up to 3 alternative routes from OpenRouteService.
2. Sample AQI: The WAQI API is queried every ~3 km along each generated route, with results cached to avoid redundant calls.
3. Score: Routes are ranked by average AQI. A lower AQI indicates cleaner air, resulting in a better score.
4. Display: Each route is presented with its distance, estimated duration, and a color-coded AQI badge (Good / Moderate / Unhealthy).

Technical Challenges & Solutions

Challenge 1: Efficient AQI Sampling

• Problem: Querying the WAQI API for every coordinate on a long route would hit rate limits and slow down the app.
• Solution: Implemented a sampling mechanism that checks AQI at approximately 3 km intervals and aggressively caches results to optimize API usage and speed up route rendering.

Challenge 2: Handling Complex Map State

• Problem: Managing user location, start/end pins, route polylines, and AQI markers dynamically.
• Solution: Created focused React components (LocationSearch, PinBar, RouteCard) and separated routing logic into dedicated services (routeService.ts) to maintain a clean architecture.

Performance Optimizations

• AQI data caching to prevent redundant network requests.
• Optimized React Native Map rendering with minimal re-renders.
• Environment variables securely managed via Expo config.