A single app designed to support women through cycle tracking, safety tools, and peace of mind.
Inspiration Many existing period tracking tools focus primarily on health data while overlooking personal safety and emotional reassurance. We were inspired to create Haven as an all-in-one platform that integrates menstrual tracking with proactive safety features.
Our goal was not to replace emergency services, but to help reduce panic and response time during moments of urgency, while also being useful in everyday life. By combining health awareness with safety-focused features, Haven aims to provide users with confidence and peace of mind.
What It Does :-
Haven is a hackathon prototype designed to support women’s health and safety through the following features:
- Period tracking
- Emergency contact list
- Personalization quiz that provides cycle-based resources and suggestions
- Alarm feature
- Optional live location sharing with trusted contacts These features together aim to support users both in daily routines and during urgent situations.
How We Built It:-
We began by designing the user interface and feature flow in Figma, which helped us clearly define the app’s structure and user experience. Using this design as a reference, we developed a polished frontend prototype using HTML and CSS. The frontend implementation focused on layout, responsiveness, and visual clarity. A basic backend API was written in JavaScript to support core interactions. Due to time constraints and team availability, some backend functionality remains minimal.
Challenges We Ran Into:-
Our team was distributed across different time zones, which made scheduling meetings and consistent check-ins challenging. To adapt, we delegated tasks so that each team member could focus on a specific responsibility and share progress asynchronously.
Additionally, one team member was unable to participate toward the end of the hackathon, which required quick adjustments to responsibilities during the final stages of development.
Accomplishments We’re Proud Of :-
This was our first hackathon, and we are proud of what we were able to accomplish despite limited experience, time zone differences, and last-minute changes in team availability. We successfully designed and built a functional prototype while learning new tools, collaborating remotely, and contributing to a project centered on women’s health and safety.
What We Learned :-
Through this project, we learned the basics of UI/UX design using Figma, frontend development with HTML and CSS, and the general workflow of building a web application. We also gained experience in remote collaboration, task delegation, and adapting under time pressure. Most importantly, this project helped us understand how technology can intersect with social justice and how digital tools can be used to address real-world challenges.
Project Status :-
This project is a prototype developed during a hackathon. Some features, including the calendar view, alarm functionality, and live location sharing, are currently under development and represented conceptually in the prototype. Note: The demo video showcases a more polished UI version created during the hackathon. The current repository reflects the CodePen-based frontend prototype, which may differ slightly in visuals.
Demo Video YouTube Demo: https://youtu.be/h_W7Ho37218
Team & Credits 🤍 This project was built as part of a team hackathon.
Hilary (Canada): Designed the UI/UX prototype in Figma and prepared the demo presentation and theory/submission content.
Megan Miao (Canada): Created the demo video showcasing the app in a mobile-style experience. Contributed to ideation and feature planning.
Anushka: Developed the frontend using HTML and CSS, contributed to ideation and feature planning, and implemented the basic JavaScript functionality at the final stage of hackathon.
A fourth team member was unable to participate during the final stage of the hackathon.