Inspiration

We got our main inspiration from the one line from the CWI debrief, "Education is not the bottleneck. Women often already know what supports their wellbeing." We focused on addressing the gap between knowing and being able to act, when you're exhausted, in a shared space, without privacy, carrying the weight of a crisis. We tried to

What it does

Safe Haven gives women in shelters a quick, visually guided way to check in with how they're feeling — emotionally, physically, and nutritionally — and immediately provides a personalized prompt, exercise, or piece of advice matched to their responses.

The entire check-in takes under 60 seconds. It requires no account, no personal information, and no reading ability in any particular language. When the session ends, the screen clears automatically. Nothing is stored at the individual level.

Staff see only anonymous, aggregate trends: mood, energy, and food signal, based on time of day. The tool helps them understand the emotional climate of the shelter and respond proactively, without anyone having to disclose anything.

How we built it

Safe Haven is built as three separate applications that work together: a resident-facing frontend, a staff admin dashboard, and a shared backend API.

Frontend: The resident check-in, built with React and Vite. The check-in flow is a sequence of full-screen React components, one per question, each requiring a single tap. React Context API manages state across the flow. The resident's responses are held as they progress through the questions, and LanguageContext makes the selected language available to every component. Translations live in a structured JavaScript object covering all supported languages, loaded once and referenced throughout. The 30-second auto-clear is its own component that monitors inactivity and resets all states back to the home screen. SVG assets handle all icons, keeping the app fast and resolution-independent.

Admin: the staff dashboard is built with React and Vite as a fully separate application. It fetches aggregate check-in data from the backend API and renders mood, energy, and food trend charts alongside engagement metrics. The admin and frontend are intentionally separated so the staff view can never be reached from the resident-facing tablet in kiosk mode.

Backend: a Node.js and Express REST API. A MongoDB connection is established. Two Mongoose models define the data layer used. Routers handle the API endpoints consumed by both the frontend and the admin. The backend is the only part of the system that writes to the database.

Design: The UI was prototyped in Figma before any code was written.

Challenges we ran into

  • The lookup table architecture was right, but it meant we needed actual coping prompts for each combination. Writing content that is trauma-informed, culturally neutral, appropriately paced, and genuinely useful was the hardest non-technical challenge.
  • Merging the admin dashboard page functionality with the Figma UI design. Making sure the functionality of any component is not compromised.

Accomplishments that we're proud of

  • Being able to build a full-stack application with a real-life database in 24 hours was very rewarding. The final product looks exactly like the prototype designed in Figma.
  • Separating the admin from the frontend entirely. Running the staff dashboard as its own application, with its own build and entry point, with no shared route to the resident check-in.
  • Having a language switch option for all components of the page to attend to residents from all backgrounds.
  • The app is a progressive web app so it works offline for the resident experience.

What we learned

Separating concerns architecturally was the right decision. The three-app structure forced us to think clearly about what each part of the system is responsible for. The matching logic lives in the frontend because it requires no server round-trip. The aggregate data lives in MongoDB because it needs to persist across sessions and devices. The admin is separate because it should never be reachable from the resident's screen. Those decisions made the system easier to reason about under pressure. Having clear communication and role assignment. Allotting fixed time slots and taking short but frequent breaks is essential.

What's next for Safe Haven

Next Steps:

  • Audio narration. For residents with limited reading ability or visual impairments, spoken guidance through a coping practice is meaningfully more accessible than text on a screen.
  • More combinations: The current build covers the 12 highest-priority check-in combinations. Having more questions can provide more information and better personalized prompts.

Built With

Share this project:

Updates