Sign in and Sign Up Page
FAQ Page with Categories, Questions, and Answers
Home Page (continued)
Resource Page where Users can Learn More
Creating a WishList Post on the "Service" Page. Users will not have to reveal their personal details such as Name and Specific Location.
Service Page where people can help by donating products through the Amazon WishList Link on the Post Created.
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 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
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.