If you’re reading this, then like us, you’re probably passionate about attending and/or organizing hackathons. You’ve also probably found yourself looking up information regarding a hackathon either in preparation for or in review of the event.
Personally, we found that the process of finding the aforementioned info can be dull, tedious, and very repetitive, so we decided to do something about it! We created a faster, engaging, and more precise tool for getting info on hackathons: HackWrapr!
We know that every team will say that their project is ground-breaking and maybe they all are, but we urge you to just give ours a try. If you do, we believe that you will truly wonder why you ever searched up hackathons any other way.
What it does
All you have to do is paste the devpost link for the hackathon of interest, and at the push of a button, HackWrapr will scrape the internet for information on the event and provide it to you in a gamified manner. You are given a chance to guess the values of the info, and afterwards its true value will be revealed alongside whether you guessed correctly.
How we built it
- We discussed what we’d like to implement, keeping in mind the time limitation.
- We sketched up a draft for what the website could look like using figma.
- We distributed the programming amongst the three of us appropriately.
- Using React.js, Next.js, and Tailwind, we created the GUI/frontend of our website
- Petty note: there is no devpost api, we had to scrape all the information ourselves. It sucked, but we got through it and wanted to mention that
- At the end of this, we went through all the info that we have, took out specific pieces we deemed important, and presented it to our user in a gamified manner
Challenges we ran into
- The hell that is merging git branches was difficult to navigate. But sitting down with one another, and drawing out our processes, we were able to get it running.
- As two of the three of us had never used React.js and Tailwind on the level that we did today, it was a bit hard to navigate at the beginning, but we were able to catch up!
- Creating an interactive slider for the game portion of our website on React
Accomplishments that we're proud of
- The slider we put on for the game portion of our website was really difficult to implement. We were able to get the slider on our page with relative ease, however, customizing it was a totally different story. Although it doesn’t seem like much, our little slider makes us very proud.
- We scraped through enormous amounts of data!
- As we’re beginner hackers we were really nervous coming in, but in the end we were able to make a really well designed and implemented website!
What we learned
- How to utilize: Tailwind and CSS
- How to utilize: Figma
- How to utilize Procreate
What's next for HackWrapr
- We would love to implement more games/levels in the gaming portion
- We would love to allow users to specify what info they want returned
- We would like animate items on our website
- We would love to use more interesting fonts