SafetyNet - Tech That Protects

SafetyNet–a helpful tool that when in need, and when in danger, comes in clutch by telling you exactly what you need to withstand any disaster that may come your way.

Comment

## What it does SafetyNet helps users prepare for and respond to emergencies. It includes:

Live weather alerts using the OpenWeatherMap 3.0 API

A personalized checklist generator based on your location, household, and risk factors

A Google Map that shows nearby emergency places like clinics, shelters, and hospitals

A community page where people can share stories and advice

It’s designed to be simple, clear, and helpful during stressful situations.

How we built it

We used React with TypeScript and Tailwind CSS for the frontend. The weather alerts are powered by the OpenWeatherMap 3.0 API, and we used geolocation to detect the user’s current location. For the map, we integrated the Google Maps JavaScript API with Places Nearby Search to display markers for relevant emergency services. We also built a custom checklist that updates based on your survey answers, and we added animations and styling to make it smooth and accessible.

Challenges we ran into

Getting the Google Maps API and Nearby Search to work with markers was tricky at first.

The OpenWeatherMap 3.0 docs weren’t super clear, so figuring out how to display active alerts took some testing.

Designing a checklist that felt personalized and not generic required a lot of conditional logic.

We also spent time making sure the UI looked clean and didn't feel overwhelming.

Accomplishments that we're proud of

We made a working site that combines multiple APIs and real-time location data

The checklist system is dynamic and changes based on your inputs

We added a way for people to contribute their own testimonials

The design is simple but polished — we wanted it to feel real, not like a prototype

Overall, we’re proud we made something that could actually be useful in the real world

What we learned

How to work with the Google Maps and Places APIs in JavaScript

How to integrate multiple APIs and make sure they all work together

How to manage state across multi-step forms in React

Why design and UX matter when people are stressed or in a hurry

How to divide tasks and work efficiently as a team

What’s next for SafetyNet – Tech That Protects

Add SMS/push alerts so people can get notified in real time

Let users log in and save their checklist and locations

Add more health tools like nearby urgent care, vaccine info, or outbreak alerts

Make the site fully mobile responsive

Translate the site into multiple languages to support more communities

Built With

  • bolt
  • tailwind
  • vercel
Share this project:

Updates