ClimaGuard

Gemini-powered climate safety for children in 25 UNICEF high-risk countries — multilingual, multimodal, offline-ready.

Comment

Inspiration

It started with a single statistic from the UNICEF Children's Climate Risk Report 2026-link

"1.1 billion children — nearly half of all children on Earth — live in countries at extremely high risk from climate change."

I was reading the report late at night, expecting a dry policy document. Instead I found a map. Bangladesh. Pakistan, Sudan, Nigeria, The Philippines. Country after country shaded the deepest red — and right at the top of the list was my own country. Despite the scale of risk, no consumer tool exists that provides child-specific, locally-language, real-time guidance to a parent during a climate emergency.

What it does

ClimaGuard is a real-time AI-powered climate safety assistant for children in the world's 25 most vulnerable countries.

  • Real-Time Risk Assessment — Enter your child's age and location. Gemini AI analyzes current weather data (temperature, humidity, air quality, UV index, hazard forecasts) and returns a color-coded risk level (LOW → CRITICAL) with a personalized action plan.
  • AI Health Advisor— Parents describe symptoms in any language (voice or text). The app identifies likely climate-linked illnesses (cholera, dengue, heatstroke, respiratory disease) and guides first-response steps — without diagnosing. Always includes escalation paths: "Go to hospital immediately if..."
  • Vision Analyzer— Upload a photo of flood damage, a child's rash, or smoke-filled air. Gemini analyzes what's visible and suggests possible climate-linked causes and first-aid steps.
  • Multilingual Voice Input — Hold to record in any language. The app transcribes in Bengali, Arabic, Hausa, Spanish, Tagalog, and 40+ others without needing to type.
  • Global Risk Heatmap — BigQuery-powered world map shows real-time ClimaGuard analysis density, revealing which regions face the most critical child climate threats.
  • Offline Mode— Last risk report and emergency guidance cached locally. Works even when internet cuts out during a disaster.
  • PDF Report Export — Download a full risk + action plan to share with doctors, rescue workers, or schools — even without internet at the clinic.
  • Push Alerts — Firebase Cloud Messaging sends notifications when risk escalates or hazards pass.
  • Tap-to-Call Helplines — Emergency hotlines for ambulance, police, child protection, and disaster response bundled offline for all 25 countries.

How I built it

Frontend: Next.js 14 + TypeScript + Tailwind CSS
Backend: Node.js API routes (serverless-compatible)
AI Core:

  • Google Gemini 2.5 Flash — primary AI for risk analysis, health triage, vision analysis
  • OpenAI GPT-4o — fallback for text and vision when Gemini is unavailable
  • OpenAI Whisper — multilingual speech-to-text (50+ languages, <1s latency)

Data & Persistence:

  • Open-Meteo API — free, real-time weather (no API key needed)
  • Google Cloud Firestore — user reports and alert history
  • BigQuery + Cloud Storage — global analytics and PDF export pipeline

Mapping: Leaflet.js for interactive heatmap
Notifications: Firebase Cloud Messaging (FCM) for push alerts
Deployment: Vercel

Architecture Pattern: Multi-provider AI chain with automatic fallback
Gemini Key #1 (quota exhausted?)
  → Gemini Key #2 (blocked by Google?)
    → Gemini Key #3 (region restricted?)
      → OpenAI GPT-4o (always available as last resort)

This design ensures the app never goes down due to a single provider's quota, outage, or regional restriction.

Challenges I ran into

1. The Gemini project got suspended mid-hackathon

On day three, every API call started returning: 403 Forbidden — Your project has been denied access. No warning. No email. Just dead. I rotated to a second key (also blocked, same project). Then a third (429 quota). The app went down hard. The fix was the multi-provider chain: 3 Gemini keys + OpenAI GPT-4o + Whisper. Within an hour, the app was back online and resilient by design, not by luck.

2. GPT-4o refused to analyze a child's rash

After Gemini's vision API failed, GPT-4o picked it up — and immediately refused, citing safety policy on medical imagery of minors. Hard guardrail; no prompt could remove it. The fix: detect the refusal pattern in the response ("I'm sorry, I cannot...") and automatically retry without the image, providing general first-response guidance based on the parent's textual context (country, child age, climate hazards). Parents still get actionable help; the model still respects its boundaries.

3. Bangladeshi billing wouldn't accept any card I tried

I wanted to deploy to Google Cloud Run for the GCP track. Google Cloud's billing system rejected three different cards I tried from Bangladeshi banks — a known regional restriction. I eventually pivoted to deploying on Vercel for the demo, while keeping the entire Cloud Run / Cloud Build / Secret Manager pipeline in the repo (Dockerfile, cloudbuild.yaml) for whenever billing clears.

4. Leaflet panning broke silently in the global heatmap

The map's zoom buttons worked, but mouse-drag panning didn't. Took me 40 minutes to find: when Leaflet initializes inside a parent with overflow-hidden, dragging silently fails if the container hasn't finished its layout pass. Fixed with one line: requestAnimationFrame(() => map.invalidateSize()). A reminder that "it doesn't work" is sometimes a CSS layout race condition pretending to be a JavaScript bug.

5. Country coordinates pointed to empty desert

When users selected Mali, the map centered on (17.57, -3.99) — middle of the Sahara, no city tiles, just sand. Turned out half my country entries used the geographic centroid instead of the capital city. A real parent would think the app was broken. Fixed by hand for the worst offenders (Mali → Bamako, etc.) per the AGENTS.md rule I had written but forgotten to enforce.

6. Multilingual speech transcription gave wrong language

Spanish voice input was being transcribed as Hindi. Whisper was working, but Gemini (the initial transcriber) was misidentifying languages. Fixed by making the language explicit in the prompt: "The speaker is speaking Spanish — transcribe in Spanish only."

Accomplishments that I am proud of

=>Built a production-grade multi-provider AI fallback chain. Most apps pick one AI provider and hope. ClimaGuard never goes down — it chains Gemini → Gemini → Gemini → OpenAI → Whisper across three API keys and two vendors.

=> Deployed 40+ language voice support globally. Whisper transcribes voice in Bangla, Arabic, Hausa, Tagalog, Spanish, French, Urdu, Amharic, and 30+ others — without needing separate language models.

=>Turned safety guardrails into features. When GPT-4o refused to analyze medical imagery, instead of fighting the refusal, we designed around it: text-only triage. Parents still get first-response guidance.

=> Built an offline-first PWA. Users in disaster zones can't rely on internet. The app caches the last risk report and emergency guidance locally — when connectivity returns, sync silently in the background.

=> Integrated 25 countries' emergency helplines. Every country's ambulance, police, child protection, and disaster hotlines are bundled offline. A parent in Sudan or Bangladesh can tap one button to call, no data needed.

=> Deployed on a budget. Open-Meteo (free weather), Vercel (free tier), Firebase (generous free tier), multi-key rotation to avoid quota costs. Zero cost for weather data; negligible AI spend due to fallback efficiency.

What I learned

=> Multi-provider architecture beats single-vendor lock-in. One API key, one quota, one regional restriction = app down. Three keys, two vendors = resilience by design. The cost is minimal; the uptime is worth it.

=> Safety guardrails are features, not obstacles. When GPT-4o refused to analyze a medical image of a minor, that was the right choice. Instead of fighting it, we designed a feature around it (text-based triage). Users got better guidance, and safety was preserved.

=> Geographic coordinates matter for trust. Users notice when the map puts their country in the middle of the Sahara. One broken coordinate = "this app is broken" in their mind. Validation and hand-verification for critical data points pays dividends.

=> Emergency-context tools must work offline. A parent in a flooded home, with power failing, with no internet for hours — they don't care about your cloud architecture. Cached data, bundled helplines, offline-first design is not optional for climate emergency tools.

=> Explicit language hints improve multilingual AI. "Transcribe this" → wrong language. "The speaker is speaking Spanish; transcribe in Spanish" → correct. Small prompt changes, massive accuracy gains.

=> Container layout race conditions are real. CSS overflow-hidden + Leaflet initialization = silent failure. This took longer to debug than any API integration. Test interactive components early and in their final container.

What's next for ClimaGuard

=>Expand to additional UNICEF high-risk countries. Currently 25 countries; the UNICEF report identifies 100+. Prioritize by risk tier and local language speaker population.

=> SMS & WhatsApp alert channels. Not everyone has a smartphone or data plan. Twilio integration to send critical alerts via SMS to parents' feature phones.

=> Offline video guidance. Pre-recorded first-response videos for major hazards (flooding, heatstroke, cyclone sheltering) bundled in the app. Text + video = better retention in high-stress moments.

=> Integration with local health systems. Partnerships with clinics and NGOs in high-risk regions. When a parent uploads a report, it can be automatically forwarded to the nearest health facility with consent.

=> Community translation validation. Crowdsource translation checks for non-English languages. A parent in Bangladesh can validate that the Arabic guidance is medically accurate for their child.

=> School and clinic deployments. Bundle ClimaGuard as an offline app on school tablets in Mali, Sudan, Philippines. Teachers and health workers get decision-support tools in the same interface.

=> Real-time satellite hazard prediction. Integrate NOAA/ECMWF satellite data for flood, cyclone, and dust storm prediction 48-72 hours out. Earlier warning = more lives saved.

=> Bi-directional health system integration. When a parent in a clinic uses ClimaGuard, the clinic's medical records system is notified. Context flows both ways: app learns from clinic outcomes; clinic learns from app's pre-triage work.

Built With

  • built-with-next.js-16
  • deployed
  • firebase-(firestore-?-auth-?-fcm-?-cloud-functions)
  • google-cloud-(cloud-run-?-cloud-build-?-bigquery-?-cloud-storage-?-secret-manager-?-api-gateway)
  • google-gemini-2.5-flash-(text-?-vision-?-audio-?-function-calling)
  • leaflet.js
  • on
  • open-meteo
  • openai-gpt-4o-+-whisper-fallback
  • tailwind-css
  • typescript
Share this project:

Updates