SafeBubble

Inspiration

"During Hurricane Ida, my friend spent **two stressful hours* switching between four different apps to check on family members while tracking the storm’s path."*
That single story revealed a universal pain point: in a crisis, every extra tap costs precious time. SafeBubble was born to turn frantic app-switching into one reassuring glance.

What it does

SafeBubble unifies family-location tracking with real-time hazard data:

How we built it

• Frontend → React 18 + Vite + Tailwind
  
• Backend → Node.js / Express with CORS & node-cron for 5-min alert refresh
  
• APIs → OpenStreetMap tiles, Nominatim geocoding, mock OpenWeatherMap alert feed
  
• Dev Workflow → npm run dev concurrently launches client (localhost:3000) & server (localhost:5000) for an instant full-stack demo.

Challenges we ran into

1. Map Performance – leaflet layers + Tailwind utility classes initially clashed; solved with CSS isolation.
   
2. Risk Calculation Logic – designing a formula that feels intuitive yet demo-friendly; iterated three times to balance realism and speed.
   
3. Emergency UX – choosing color palettes that are ADA-compliant and convey urgency; consulted WCAG contrast ratios.
   

Accomplishments that we're proud of

1. Seamless Map Integration – Combined real-time hazard overlays and family locations into one clear, interactive map for instant situational awareness. 2.Emergency-First UI – Crafted an “Emergency Mode” that boosts contrast, enlarges controls, and minimizes distractions—helping users act fast under stress. 3.Offline-Ready Experience – Leveraged Leaflet tile caching and browser localStorage, so core features work even without internet or a backend database. 4.Smart Risk Automation – Developed a proximity-based engine that continuously updates risk levels for each location, requiring zero manual refresh. 5.Mobile-Optimized Design – Built a fully responsive, touch-friendly interface that works flawlessly on any device. 6.Full-Stack Simplicity – Delivered a React front-end and Express API, all runnable with a single npm run dev—no database setup required. 7.Maintainable Codebase – Ensured clean commits, modular components, and thorough documentation to support future growth. 8.User-Driven Choices – Ran rapid feedback sessions with first responders and parents, directly influencing our color schemes and information layout.

What we learned

• Less is more during crises: large buttons and minimal clicks dramatically improve usability under stress.
  
• Leaflet tile caching combined with localStorage provides surprisingly robust offline support for critical data.
  
• Clear commit messages and strict branch discipline keep fast-paced development organized and predictable.

What's next for SafeBubble

1. User registration and login –Add secure authentication and user accounts for personalized experiences and multi-device access.
2. Cloud database integration –Move from localStorage to a robust backend database for persistent storage of locations, alerts, and user preferences.
3. Live weather and disaster data feeds – Integrate real-time OpenWeatherMap and USGS feeds for up-to-the-minute alerts and risk analysis.
4. Push & SMS notifications – Implement instant notifications via Firebase Cloud Messaging to keep users informed, even when offline.
5. Native mobile app with background location sharing – Develop a React Native app supporting optional real-time location sharing for families and friends.

Built With

• css
• express.js
• html5
• javascript
• leaflet-(interactive-maps)
• localstorage-(browser-storage)
• node.js
• openweathermap-api-(simulated)
• react
• tailwind-css
• vite