Inspiration
As women ourselves, we realize that one of the most annoying things about being a woman is having to repeat a menstrual cycle every month. What's even worse is when you're period starts at a time you weren't expecting while you are in public. Thus, we wanted to create a product that would make it easier for women who are going through that process.
What it does
Our product allows users to locate pads and other menstrual products near them in an easy and convenient way. This is possible by allowing users to input their location (longitude and latitude coordinates) if they are at a public place offering free menstrual products. Users are also allowed to rate the location on how frequently the products are full.
How we built it
We utilized Next.JS and Supabase to create a login page for our project. We created a function that's called nearbyLocations that would check the potential user input for a mile radius of their choice. We created an output page of where the potential pins in the area of where the potential calculated pins would be. We also made a page called "add a pin" where users can input their rating out of 5 (showing whether they have pads or not), name, and description of the bathroom they are at. This will potentially take this info to a Json file and added to a list of pins (yet to be linked to json file).
Challenges we ran into
One of the main issues we ran into was API related. Our project relies heavily on utilizing a map API, but we soon discovered that the pricing of popular APIs (like Google Maps for example) was extremely expensive and would not be something we could test with. After scouring the internet for APIs and coming to the conclusion that they were too expensive, we decided that, for the purpose of this hackathon, we would just implement a list of locations that users could input into Google.
Another issue we ran into was styling the login and ensuring it did what we needed it to do. As this was our first time working with Supabase, it was a little confusing trying to navigate the login code and ensure it did what we needed it to do. Most of us also had little to no experience with Next.JS so that also provided a bit of a challenge.
In addition to this, we ran into issues with parsing and adding to the json file and linking it to the page, unable to have enough time to do it (as we are beginners when it comes to react).
We also ran out of time to fully connect our login page to the rest of the project. All the code is in the same repository but they are otherwise disconnected and will need to be merged together going forward.
Accomplishments that we're proud of
Even after struggling a bit with styling, we were able to put together a home screen and login that wasn't basic. The home screen even utilizes parallax scrolling, making it look visually appealing, at least in our opinion. We are also proud of the database we were able to implement. Even if it's not perfect, we now have a basic idea for how we can utilize one in our project and can improve it so we can later use it to store data points instead of only user information.
To add on, we were able to make the output pages and show examples of what t would potentially look like in the future once the json files are linked.
We were also able to create a function that would potentially take input from the user and check for other pins that are within a mile radius of the user's choice.
What we learned
In terms of technical things we learned, we learned how to implement a database in our project to store user information. We also learned how to make a simple website using Next.JS and how we can use styling languages like CSS (more specifically Tailwind CSS) to make the website look better.
In general, we were faced with another lesson in perseverance. As the three of us are only in our first year of college, we definitely did not have a lot of experience with creating projects like this. Initially, we thought it wouldn't be too difficult as there were many examples online for the basic features we wanted to implement. However, figuring out which of these features we wanted to implement with the limited time and budget we had made the assignment a lot more challenging than we had expected. Regardless, we managed to overcome those setbacks and create a project we are proud of.
What's next for Find a Pad
Going forward, we hope to turn Find a Pad into a mobile application. As this kind of product is mainly going to be used by people out in public, it would make it easier for users to be able to pull it up on their phones instead of through a website. Furthermore, we'd like to improve the login to have a sign in page and functioning user profile.
We would also like to implement another database to store different locations that we can turn into pins to apply on a map API. This would make it easier to keep the map updated and for all users to see the updated locations. We would also like to utilize the API to take in a user's location and show them which public places provide free menstrual products that they can use.
Built With
- apis
- next.js
- sql
- supabase
Log in or sign up for Devpost to join the conversation.