Hack Tracker | Devpost

Landing Page
User Input, which then gives hackathons based on input
Displays hackathons!!

Inspiration

The inspiration for our project stemmed from a shared experience between our team members—Daniel and Fernando—who are second and third-year university students. We realized that despite our interest in hackathons, there wasn’t much information available on where to find them, especially for students like us who were new to this kind of event. As a result, this hackathon became our first, and it motivated us to solve the very problem we faced: the lack of accessible resources to find and learn about hackathons.

What it does

Our project, HackTracker, aims to gather user locations and want to go to hackathons. After gathering this information, our back-end system uses web scraping to compile relevant hackathons. Afterward, it evaluates the user's choices and suggests the best hackathons, including specifics like the venue, dates, and application materials. To put it briefly, it offers a simplified, customized experience to assist users in finding hackathons that match their requirements and passions.

How we built it

We developed HackTracker using the T3 stack, which includes a variety of technologies that were new to us. To divide the workload efficiently, our team split up responsibilities:

Daniel focused on the front end, handling everything from the design to user experience using React, TypeScript, and Tailwind CSS.
Fernando was responsible for web scraping, and gathering up-to-date hackathon data from various sources.
Carlos took charge of back-end development, ensuring smooth data handling and integrating our web scraping results with the recommendation engine.

Collaboration and clear communication were key to ensuring the project came together as we worked in tandem with unfamiliar tools and frameworks.

Challenges we ran into

We faced numerous challenges, particularly because none of us had prior experience with the T3 stack. One of the biggest hurdles was connecting the web-scraped data to our recommendation engine and then ensuring that this information was displayed correctly on the front end.

Additionally, we encountered difficulties when implementing features like a sidebar, which we initially had to scrap and completely redesign. There were also issues with animations, such as getting the background to function as we envisioned. All of these obstacles tested our problem-solving skills and required us to adapt quickly, but in the end, overcoming them made us more confident developers.

Accomplishments that we're proud of

One of our proudest achievements is getting everything to work together seamlessly. From front-end to back-end, we successfully implemented a fully functional web app that recommends hackathons based on personalized criteria. We’re especially proud of how the front end turned out, as it provides an intuitive, user-friendly interface that enhances the overall experience. Additionally, successfully connecting our web-scraped data to the recommendations engine felt like a major victory, given the challenges we faced.

What we learned

Throughout this project, we learned a great deal:

The T3 stack: Gaining proficiency with tools like React, TypeScript, and Tailwind CSS, along with managing a full-stack project.
Working as a team: We improved our ability to collaborate effectively through Git, ensuring version control and smooth integration of our work.
Web scraping and APIs: Fernando’s work on web scraping allowed us to pull data from external sources, and we learned how to integrate APIs to enhance functionality.

What's next for Hack Tracker

Although we made great progress, there are still several features we’d love to implement post-hackathon. For instance, we want to add a feature that recommends different travel methods—like flights or train tickets—to help users get to their chosen hackathons. We also plan to refine the hackathon sorting system, allowing users to filter recommendations by additional criteria such as event dates or application deadlines. Finally, we plan to deploy HackTracker on a cloud platform like Vercel for broader access and scalability.

In the weeks following ShellHacks, we’re excited to continue building on HackTracker’s foundation and turn it into a fully-featured, go-to resource for hackathon enthusiasts everywhere.

Built With

css
html
node.js
prisma
react
tailwind
trpc
typescript

Submitted to

ShellHacks 2024

Created by

I have done the web scraping scripts for that project, which was my first exposure to both web scraping and Python. Setting up the environment with all the necessary tools had been somewhat painful, but I've learned from this process. Also, I tried to research some aspects of the T3 stack, though experiencing a lot of difficulties, I am waiting for an opportunity to learn more about this technology in further projects.

Fernando Ailon
Thanks for checking my page out! HMU on linkedIn by connecting!
This project is my first in using the T3 Stack, where I collaborate on the core with a great team of people, most of whose work has happened on the backend. I implemented various functions to connect user inputs to web-scraped data from the Major League Hacking website for seamless user interaction. I made modifications and enhancements to make our project more functional and responsive.

Carlos Catala
:)
I was the front-end developer and took on the challenge of learning the T3 stack for the first time, therefore I had to learn React, TypeScript and Tailwind CSS for the first time throughout the making of our project. At first it was extremely overwhelming, but after working through the project, using and adapting to these technologies I ended up feeling very comfortable using all of them and had a lot of fun figuring it all out.

Daniel Efres