Demeter

Demeter is an app that helps users track their contraception and period routines, customizable characters for tracking their periods, finding the nearest places for period and birth control products 🌿

Comment

Inspiration

The inspiration for Demeter came from the need to provide accessible, reliable health resources to individuals seeking support for reproductive and general health. Often, finding accurate information and nearby health services can be challenging, especially in areas with limited resources. We wanted to create a solution that not only empowers users with knowledge but also helps them take control of their health in a seamless and engaging way.

What it does

Demeter is a health tracking app that combines educational resources, health service locators, and personalized tracking in one convenient platform. The app allows users to:

  • Locate nearby health services like Planned Parenthood clinics, contraception services, and other reproductive health resources.
  • Track health routines with a calendar tool that predicts key dates and helps users monitor routines like contraception cycles or medical appointments.
  • Access learning resources on reproductive health by country, offering tailored information to help users understand health topics specific to their location.
  • Create a customized space character that adds a fun, personalized touch to the health journey, keeping users engaged with the app’s playful interface.

How I built it

Demeter was built using a combination of HTML, CSS, and JavaScript to create an interactive and responsive user interface. Also, I utilized React for managing dynamic content and state. For the health service locator, I integrated Google Maps API to find nearby health services based on the user’s input. I also used Firebase to manage user data and enhance the scalability of the app.

Challenges I ran into

One of the main challenges was implementing the Google Maps API for accurate service location tracking and ensuring that it seamlessly integrated with our React setup. Another challenge was designing the starry background animation, which required precise layering and timing to create a visually appealing effect without impacting the app’s performance. Managing the multiple APIs and coordinating data flow between them also presented obstacles that we had to address.

Accomplishments that I am proud of

I am proud of creating an intuitive, informative, and user-friendly app that addresses a genuine need in reproductive health support. The customized space character and starry background provide a unique, engaging experience, while the locator function brings real value by connecting users with nearby health services. Building a functional app that combines health education, location services, and user engagement is a significant accomplishment for us.

What we learned

Throughout this project, we learned the importance of integrating multiple technologies to create a cohesive product. The project strengthened our skills in React and API integration while also teaching us about user-centered design and making health information accessible. We also gained insights into balancing visual aesthetics with app performance.

What's next for Demeter

Moving forward, we want to:

  • Expand the locator functionality to include a wider range of health services and options for more specific searches.
  • Add a personalized reminder system that helps users stay on top of their routines and appointments.
  • Develop an AI-powered chatbot for real-time health information and support. Incorporate more detailed data visualization to help users track their health patterns over time.

Built With

Share this project:

Updates