Environmental Situational Awareness

AIRA Monitor is a comprehensive civic technology platform designed to provide real-time situational awareness regarding air quality and flood risks in Thailand. It aggregates fragmented environmental data into a single, cohesive "God-tier" responsive interface.

Guided by the philosophy "Your breath... let us take care of it," the system leverages modern web capabilities to deliver critical health information with zero latency across any device form factor.

Engineering Stack

The application is built on a bleeding-edge stack, prioritizing performance, type safety, and next-generation styling capabilities.

Core Framework: Next.js 15 (App Router)
Language: TypeScript
Styling Engine: Tailwind CSS v4 (utilizing oklch color spaces)
Geospatial Engine: MapLibre GL JS
UI/UX: Lucide React & Geist Font Family

Core Capabilities

The platform integrates multi-source data streams to provide actionable insights:

Feature	Description	Technology
AQI Monitoring	Real-time visualization of PM 2.5 indices	WAQI API Integration
Flood Layer	Interleaved flood risk data and water levels	GISTDA Data Stream
AI Insights	Context-aware health recommendations & "Vibe" check	Large Language Model
Vector Mapping	Smooth zooming, panning, and station interaction	MapLibre GL

Implementation

To deploy the AIRA monitoring instance locally, ensure Node.js 18+ or Bun is available in your environment.

# 1. Clone the repository
git clone https://github.com/MarkeloPuangpoo/aira
 
# 2. Install dependencies (Bun recommended)
bun install
 
# 3. Configure Environment Variables (.env.local)
# NEXT_PUBLIC_AQI_TOKEN=...
# NEXT_PUBLIC_GISTDA_KEY=...
 
# 4. Initialize Development Server
bun run dev

Design Philosophy

Mobile-First Architecture: The UI utilizes bottom-sheet interaction patterns for mobile devices to ensure thumb-friendly navigation, transitioning to floating glass-morphism panels on desktop viewports.

Fluid Responsiveness: Engineered to scale flawlessly from an iPhone SE to a 4K Desktop monitor, ensuring accessibility for all demographics.

Bilingual Support: Native toggling between Thai (TH) and English (EN) to serve both local citizens and international residents.