I (Mathilda) am a transgender woman. I find it very difficult to keep track of my many medications, including hormone medications. Forgetting to take them gives me negative effects that are quite uncomfortable. I also find it difficult to understand my body’s natural hormone cycles, because most research about hormone cycles only covers cisgender women’s experiences with menstruation. I and many of my friends who are on HRT or have irregular hormones would benefit greatly from a tool to help keep track of these things.

What it does

Our solution should provide them a platform where they can input important information based on their treatment (reports, documents, feelings, symptoms), get recommendations based on their input levels, and help them engage with a group of people who are going through similar experiences.

How we built it


Our UI/UX designer:

Started with some base-level research which helped her design wireframes, the design system, and the HI-fidelity prototype using Figma. The logo was created using Adobe - Illustrator._

Our programmers worked on: Frontend: For web Application using React.js. Backend: Node.js for backend & Express.js for server. DataBases: MongoDB.

  1. We began by brainstorming to come up with a problem statement that the team could collectively settle on.
  2. Then we took a few minutes to scribble down any thoughts, features, or emotions that the apo could instill in its users.
  3. We then went on to primary and secondary research, where we used prospective users to back up our hypothesis.
  4. We split our work into three categories: frontend, backend, and design, and worked on the project according to our strengths but also by communicating with the team about our needs.
  5. Voila!

Challenges we ran into

  1. Time constraints prevented us from doing in-depth analysis, designing the screens, and creating a design guide from scratch.
  2. The frontend CSS Frameworks conflict with each other so we need to go through the code and change the style.
  3. Challenge with the deployment of the project.

Accomplishments that we're proud of

  1. We designed an inclusive period tracking application without ever needing to gender the user or assume anything about the user's physiology.
  2. We were able to work together, with good communication all throughout the project.
  3. We were able to work and explore around with pnpm, webpack, lazy loading, alias, redis, docker, etc.
  4. Creating a design system and 30+ Hi-fi design screens within a span of 24hrs.
  5. We were able to pick up aspects/ concepts apart from our expertise.
  6. It was the first hackathon for half our members.

What we learned

  1. Constant communication and check-ins are important to gt the team working together efficiently.
  2. Time management is key to projects like these.
  3. It's not about winning or losing it's about working on a collaborative project with the intent of making new connections, taking back a new piece of information, or learning!

What's next for openHRT

  1. Improved UI, complete user flow in terms of all the functionalities, and the use of design techniques such as gamification or animation to make the app more user-friendly and fun to use.

  2. TechStacks We are going to use for building the Product in the Future:

Frontend: for Web Application, we will use React.js & for Mobile Application we would love to use Flutter & Dart. Backend: Node.js for Backend, Express.js for server, Passport.js for session management. Databases: for Data storage MongoDb & for session storage Redis. Server Optimizer & maintainers: we will love to use Kubernetes for server maintenance & Elastic search for Data retrieval. Build Optimization: webpack & Docker.

Share this project: