HeatShield AI

• 

• 

Inspiration

Heatwaves are becoming one of the deadliest climate risks, but most public heat advisories are too generic to help a real household make fast decisions.

A family's risk during extreme heat depends on more than temperature alone. Housing type, cooling access, power reliability, water availability, symptoms, and nearby support all affect what they should do next. I wanted to build something practical that could turn those messy real-world conditions into a clear, usable action plan.

That is what inspired HeatShield AI.

What it does

HeatShield AI is a climate-health web app that creates personalized heatwave safety plans for vulnerable households.

The app lets a user enter household details such as:

• city or area
• household members and vulnerabilities
• housing type
• cooling access
• power reliability
• water availability
• current symptoms
• nearby support

It then generates a structured household heat protocol, including:

• risk level
• preparedness score
• immediate actions for the next 2 hours
• hydration guidance
• cooling recommendations
• household-specific care priorities
• emergency warning signs
• supply checklist
• day timeline for dawn, noon, and evening
• a volunteer-ready brief for community support

How I built it

I built HeatShield AI as a lightweight deployable web app with a simple frontend and a serverless planning backend.

The frontend was built with HTML, CSS, and vanilla JavaScript. I focused on making the UI feel polished, premium, and easy to scan under pressure. I redesigned the experience with a more editorial layout, richer result cards, scenario presets, and Instrument Serif styling to make the product feel more trustworthy and intentional.

The backend logic lives in a Node-compatible serverless API. It takes the household inputs, scores risk based on multiple signals, and returns a structured safety plan. I also added a rules-based fallback engine, so the planner still works even when live AI credentials are not configured.

The app is deployed on Vercel and available as a live project.

Challenges I ran into

One challenge was making the app feel useful instead of generic. A simple chatbot would not be enough for this problem, so I had to structure the planning logic around real household factors like water scarcity, limited cooling, and symptom severity.

Another challenge was keeping the product reliable. I wanted the app to remain functional even without live AI access, so I designed a fallback planning system that still produces meaningful outputs.

I also ran into frontend issues during the premium redesign. After expanding the results experience, the plan rendering flow had to be debugged and hardened so the app would work consistently in production.

Accomplishments that I'm proud of

I am proud that HeatShield AI is not just a concept or a UI mockup. It is a working, deployed product with a real social-good use case.

I am also proud of:

• the polished UI/UX
• the structured household risk logic
• the richer planning outputs beyond a simple response
• the fact that it remains usable even without live AI mode
• shipping both a live deployment and a public GitHub repository

What I learned

This project taught me that social-good products need clarity more than complexity. A technically impressive app is not enough if people cannot use it quickly during stressful situations.

I also learned the value of combining deterministic logic with AI-assisted generation. That balance makes the system more reliable, more explainable, and better suited for real-world use.

What's next for HeatShield AI

Next, I would like to:

• connect live weather and regional heat-alert data
• add multilingual support
• improve accessibility and low-bandwidth usability
• support NGO/community health workflows
• add location-aware cooling center or clinic recommendations

HeatShield AI is designed as a practical climate resilience tool that could grow into a real product for households, caregivers, and volunteers during dangerous heat events.

Built With

• api
• css
• functions
• html
• javascript
• node.js
• openai
• serverless
• vercel