A real-time Philippines weather dashboard that helps Filipinos decide whether to travel, plan activities, or stay indoors based on live weather data. Built with React + TypeScript and powered by Open-Meteo API and DuckDB-WASM for client-side data analysis.
🔗 Live Demo: https://ph-rain-forecast.vercel.app
- 🗺️ Rain Heatmap — Visual bubble map of the Philippines showing rainfall intensity per region
- 📊 7-Day Forecast — Weekly weather summary with temperature, rain, and wind data
- 📈 Rain Charts — Hourly and daily precipitation visualizations using Recharts
- 🌡️ Weather Alerts — Automatic alerts for extreme heat, storms, and low visibility
- 🤖 Kuya Weather Chatbot — AI-powered conversational weather assistant (Taglish)
- Ask about current weather, forecasts, travel safety, flood risk, heat index
- Supports natural language queries in Filipino and English
- Multi-signal analysis with emojis and structured output
- 🚗 Trip Go Checker — Should you travel? Get a safety verdict with transport-specific advice
- 🚕 Transport Surge Predictor — Predicts ride-hailing surge pricing based on weather conditions
- 📍 Region Comparison — Compare weather between two Philippine regions side-by-side
- 📅 Activity Planner — Best time recommendations for outdoor activities
- 📊 Historical Comparison — Compare current weather against historical patterns
- 🌙 Dark Mode — Full dark/light theme support
- 🌐 Bilingual (EN/FIL) — English and Filipino localization
- 📱 PWA / Offline — Installable as a mobile app with offline caching
- 📤 Share Forecast — Share weather forecasts with friends
- ⭐ Favorites — Save your frequently checked regions
- 📍 Geolocation — Auto-detect your region
| Layer | Technology |
|---|---|
| Frontend | React 18 + TypeScript + Vite |
| Charts | Recharts |
| Data (client) | DuckDB-WASM — SQL queries on Parquet in the browser |
| Data (pipeline) | DuckDB Node.js — generates Parquet files |
| Weather API | Open-Meteo (free, no API key needed) |
| Styling | CSS Modules with CSS custom properties |
| Deployment | Vercel |
├── pipeline/ → Node.js data generation scripts
├── public/data/ → Generated Parquet files served to browser
├── src/
│ ├── components/ → React UI components (70+ files)
│ ├── hooks/ → Custom hooks (DuckDB, dark mode, favorites, geolocation)
│ ├── utils/ → Types, helpers, city/region lists
│ └── App.tsx → Main app entry
├── e2e/ → Playwright end-to-end tests
├── vercel.json → Vercel deployment config
└── package.json
- Node.js 18+
- npm 9+
# Clone the repo
git clone https://github.com/debiangee/speedhackkiroweek9.git
cd speedhackkiroweek9
# Install dependencies
npm install
# Generate data (Parquet files)
npm run pipeline
# Start dev server
npm run dev| Command | Description |
|---|---|
npm run dev |
Start Vite dev server (http://localhost:5173) |
npm run build |
Production build to dist/ |
npm run pipeline |
Regenerate Parquet data files |
npm run preview |
Preview production build locally |
All 17 Philippine regions with city/province aliases:
NCR, CAR, Ilocos, Cagayan Valley, Central Luzon, CALABARZON, MIMAROPA, Bicol, Western Visayas, Central Visayas, Eastern Visayas, Zamboanga Peninsula, Northern Mindanao, Davao, SOCCSKSARGEN, Caraga, BARMM
The "Kuya Weather" chatbot understands natural queries like:
"bro what's the weather in Taguig"→ Current conditions with heat index"uulan ba sa Cebu?"→ Rain analysis with hourly breakdown"safe ba mag-travel sa Davao?"→ Travel advisory with transport modes"heat index sa NCR"→ Detailed heat report with PAGASA levels"baha risk sa Bicol"→ Flood risk assessment with 3-day outlook"compare Manila vs Baguio"→ Side-by-side region comparison
This project was developed using Kiro, an AI-powered development environment, as part of a speed hackathon challenge. Kiro handled:
- Feature implementation via structured specs (requirements → design → tasks)
- Automated code generation with steering rules for consistency
- Real-time diagnostics and build verification
- Deployment automation
MIT
Gee Espiritu (@debiangee)
Built for the Kiro Speed Hackathon Week 9 🚀