We were first introduced to the issue of Period Poverty in an online article that we read last year. It was both surprising and disheartening to read that Period Poverty caused girls to miss their education during their menstrual week, eventually causing them to drop out of school due to the lack of proper resources. We realized that something that I took for granted was what blocked many girls from their future potential. Thus, during the past 2 years, we have been raising awareness, products, and funds to help fund period pads, period educational booklets, and a period-friendly latrine for girls in need.

As a result, we wanted to make a project to make the process of receiving products from donors for girls and women a convenient and efficient experience. This hackathon provided us with the opportunity to use technology to create a web application where it could make it easier for girls and women in need to receive period products. For millions of girls and women, purchasing menstrual products poses a huge financial burden. The inability to effectively manage menstruation affects girls’ dropout rates from schools. When girls don’t have enough money to buy sanitary napkins, they resort to unhealthy options such as using newspapers and using one cloth for a long period of time. This puts not only their health but also their dignity and education at risk as they may be more vulnerable to early marriage and limitations in future career and economic opportunities.

Our PeriodFriend web application focuses on serving those affected by Period Poverty through helping receive products and raising awareness.

What it does

PeriodFriend is a Web Application that connects donors and women who are affected by Period Poverty through the “WishList” posting feature on our “Service” page. Girls and women affected by Period Poverty can first add period products to their Amazon’s WishList on Amazon, and then pass the link to the “Post” they create on our web application so that other users can help out and fulfill the period product donation request. Additionally, our web application includes features such as a resource page where users can view different NGOs that have been working to end this issue. Other features include the FAQ page which includes different commonly asked questions about menstrual hygiene management (MHM) safely so that girls and women who lack access to menstrual hygiene management information can find relevant information.

How we built it

We first started with the initial brainstorming of ideas. As our team has continued to work towards menstrual equity and gender equity through our participation in hosting period product donation drives and campaigns online, we settled on using technology to help alleviate the global problem of Period Poverty. passionately laid out our design wireframe on Figma. After a discussion of the complete set of requirements for the features, we started implementing the code for the web application.

The PeriodFriend web application has been built using React.js for the front-end. The backend for the application has been built using Firebase.

The resources and a record of links to wishlists required a database and a backend for management, so we integrated Firebase in our application for that purpose. The Cloud Firestore on Firebase allows for quick database entries and live updates to the web application.

The user interface has been built using Chakra UI component library for components and using HTML and CSS for the rest of the styling and layout. We drew out on Figma the different types of designs before deciding on the layout and functionalities. Chakra UI provides components that have all the accessibility features for the website as well as a great design out of the box.

Challenges we ran into

The major challenges that we encountered were when learning new technology and reading documentation.

Building a backend for the application was one of the first hurdles in the project as we did not have a lot of experience with backend development and integrating firebase. In the beginning, we were only able to write data inside our firebase database but had challenges in retrieving it. However, we decided to go with Firebase’s backend as a service to overcome the challenge of time as it would allow us to spend more time on the Front-end posting functionality and design.

We also wanted to integrate a chatbot that would allow users to ask any questions and have a more personalized web application, but we weren't able to write the necessary code for the chatbot to run it in time.

Creating the complete design and implementing it in React in a short time frame was another challenge. As a result, after researching online, we integrated Chakra UI to solve that challenge, so that we could offload a lot of the design work to the UI components library.

Accomplishments that we're proud of

  • In the beginning, we created a mockup and a working prototype for our web application in Figma
  • We are really proud of our “Service” page of our web application, where we were able to pull off a feature that allowed girls and women in need to be able to request period products they are in need of and receive them efficiently.
  • We are also proud of collaborating our different skills and strengths onto one (Yoonjung worked on Frontend Code while Daisy worked on the Figma and CSS). When one of us was not very strong at a certain area, for example, JavaScript, the other teammate helped and we worked through it together
  • 🏆 We are also proud of persevering throughout the process. Whenever we ran across CSS issues and coding bugs, we kept going, encouraged each other, and learned how to use online resources such as Stack Overflow to help solve our problems. This is also our first hackathon for one of our team members. Prior to this, one member had no experience with javascript and using firebase to store our period product wishlist database, so we are really proud that we were able to get the web application up and running, as well as implemented different functionalities such as the FAQ Page and Create Post feature
  • We also made our website responsive to the users, allowing them to create their own account on the website, sign in, and create posts for their wish lists on the page. With our authentication functionality, it would help prevent users from creating too many posts as the user would first have to sign in to access the “Create a WishList” button.

What we learned

  • Through hackgirl summer Hackathon, we learned so many new skills, one of which is Design Thinking. We learned how to effectively implement various designs on our web application and use CSS and other UI component libraries. Firebase - How to use Firebase’s Cloud Firestore and integrate with a React application.
  • We also learned how to use component libraries in React
  • We will definitely continue to explore the usage of these web frameworks and applications of programs. This hackathon allowed us to not only build our brainstorming skills in Figma and HTML, CSS, JavaScript, Firebase, and React skills in web development, but also our passion for using technology to empower others.

What's next for PeriodFriend

We hope to add more interactivity and features such as integrating a DialogFlow for creating a more personalized experience for users that is focused on enabling a more privacy-focused Q&A space.

Share this project: