Inspiration
We recognized the importance of hackathons to students (like us) looking to pursue technology careers in the future, and a lack of diversity has always been a problem at each of our respective schools. Because of that, we wanted to build something to help bring these experiences to areas that have traditionally lacked these types of opportunities. By accessing more diverse groups looking to break into tech, we believe that we can create better, more innovative solutions to the problems that we have today.
What it does
HackMap pulls data from a Firebase database. That data is scraped from Devpost's upcoming and ongoing hackathons. While the locations on Devpost are vague, an API can be used to find the approximate coordinates of locations. These locations are then shown on the map along with a plot of traditionally disadvantaged areas with less access to CS resources. We calculated those areas through median income and education data. Because Devpost and MLH do not offer a way to map or visualize hackathon locations, we believe our hack is innovative and can help shape the future of hackathon planning to include diverse groups.
How we built it
Our web app is built on SvelteKit. HTML, CSS, and JS played a fundamental role along with Python for web scraping, many JS libraries to assist our frontend and backend operations, Firebase to host our database, and Mapbox for the heart of the operation.
Challenges we ran into
Finding an API to turn the vague location descriptions into coordinates was a challenge. We were originally going to use the OpenStreetMap API, as one of our team members used it in the past, but it seems that it was discontinued. Our other options included the Google Maps API, but we did not have the credit card and authentication needed to onboard, so we ended up manually replicating that process. With more resources, we believe we could have quickly implemented this feature. Other challenges included Mapbox and aggregating data across the US, but we managed to overcome those hurdles.
What we learned
Throughout this experience, our team learned a lot about both the collaboration and technical aspect of creating useful and functional code products. Due to the time constraints, our group had to be able to split and delegate tacks properly, helping us learn how to break our project down into smaller doable bits. We also learned a lot more about the technical aspects of creating a big project. Through 3.js, we learned how to create interesting and eye catching 3d backgrounds. We also learned how to use Mapbox, a map API to visualize all the locations we wanted to use in our project. Perhaps our biggest learning experience was the web scraping aspect of our project. None of us had experience using at and as a result it was tough to understand at first but we ultimately were able to learn how to web scrape off of devpost. Throughout the project, working through technical challenges that arose also helped all of us familiarize us our self with html, css, and js and taught us how to navigate common bugs. In the end, we learned a lot of valuable lessons about team works and about coding itself.
Accomplishments that we're proud of
We are proud of creating a tool that can be quickly deployed to scrape hackathon data and visually represent the data in a way that is easily interpretable by users. Along the way, we had to over come multiple hurdles, such as learning how to web scrap for the first time and not being able to use the API we had initially intended to. Despite these issues, we continued to find solutions and were able to develop a comprehensive final product that is able to supply important to both coders and organizers.
What we learned
Throughout this experience, our team learned a lot about both the collaboration and technical aspect of creating useful and functional code products. Due to the time constraints, our group had to be able to split and delegate tacks properly, helping us learn how to break our project down into smaller doable bits. We also learned a lot more about the technical aspects of creating a big project. Through 3.js, we learned how to create interesting and eye catching 3d backgrounds. We also learned how to use Mapbox, a map API to visualize all the locations we wanted to use in our project. Perhaps our biggest learning experience was the web scraping aspect of our project. None of us had experience using at and as a result it was tough to understand at first but we ultimately were able to learn how to web scrape off of devpost. Throughout the project, working through technical challenges that arose also helped all of us familiarize us our self with html, css, and js and taught us how to navigate common bugs. In the end, we learned a lot of valuable lessons about team works and about coding itself.
What's next for HackMap
We can improve the map interface to add county boundaries and better highlight specific underserved areas. We can also automate our scraping process (which was manual given our limited time) and scrape data from MLH hackathons that may not be on Devpost yet. We can also add more info on hover for hackathons, such as a link to the Devpost page so people can easily sign up. Ultimately, we hope that this project will also inspire hackathon organizers to take other steps to help foster diversity and inclusion in the hackathon space. For example, Devpost implementing an API can help make hacks like ours easier to build, addressing the issues that hackathons face today in reaching certain areas.
Log in or sign up for Devpost to join the conversation.