ProjectRocketHack.io

TL;DR

Rockethack.io is the result of a frustrating experience when trying to find cool hackathons to sign up for.

Problem

After I participated in the START HACK 2021 with Andri Turra and Armando Schmid, I was hooked on hackathons and the challenge of going from idea to initial product in just 48h. As soon as I got home, I started to look for upcoming hackathons. Unfortunately, finding a suitable one was not as easy as I had hoped for (and that's not only because I basically didn't sleep for 3 days).

The main reason was there there is no central database of hackathons that is focused on the Europan or the DACH (Germany, Austria, and Switzerland) hackathon community. Websites like DEVPOST have an extensive and overwhelming list of hackathons all over the world, but finding ones in my area was challenging because there is no country filter. The only option is to search for each city/country individually. Not something I was particularly excited about. Additionally, many hackathons I was able to find on Google were simply not listed.

A prominent search result for "Hackathon Switzerland" was Eventbrite. What looked promising at first turned out to be mostly companies trying to sell courses or networking events with some hackathons sprinkled in between.

Neither alternative was fruitful. I figured that if I'm looking through pages of Google search results, I might as well put them in a database and share the results with others.

Approach

For user research, I decided to simply reach out to >30 other participants of the START HACK 2021. I wanted to better understand how they are currently searching for hackathons and what pieces of information would be most important to them. Many shared the same experience as I did and were either simply googling for hackathons and randomly finding one, or being made aware of an event by a friend.

The insights from these conversations turned into a few user stories:

As a hackathon-interested person in the DACH region,

1. I only want to see hackathons in this region, so I don't waste time scrolling through hackathons across the globe I will never be able to participate in.
2. I want to find hackathons for the topics I am interested in, so I can make the most of the experience.
3. I want to see the sponsors of the hackathons, so I can sign up for the ones supported by a company I want to potentially work for and make connections.

Solution

Rockethack.io had the vision to become the place where ambitious young professionals find their next challenge.

When visiting the site, users find all the relevant Hackathons and the most relevant information such as the start and end date of the event, the location, and general topics. Hackathons that already started/ended, are automatically removed from the list to not distract the user. Additionally, the list can be filtered by the topics of the hackathon.

If a hackathon catches the eye of a user, they can click on it to get the details. Here, additional information is ordered by relevance, starting with the start- and end date, the application deadline, the location, a description, the program, and, of course, the prizes. This is also where the call-to-action - a link to the sign-up page - is located. All of these are above the fold. Further down, users find the organizers, as well as sponsors and partners, and links to their websites.

Organizers also have the opportunity to add contacts:

Obviously, Rockethack.io is responsive for mobile, too:

Technical Implementation

Rockethack.io is built with Django, a web framework for Python that follows a Model-View-Template architecture.

Models

The models are classes that map to the tables and columns of a SQL database that Django creates in the background automatically. Here is an example of a model containing information about a sponsor:

Django also makes it easy to define the fields and the relationships between different models (read SQL tables):

For more detailed information about Django Models, please refer to the official documentation here.

Templates

What models do for the backend, templates do for the frontend - they provide the structure for the content by creating the HTML to be rendered in the browser. In addition to static HTML, Django uses a special syntax to generate and modify HTML, depending on the data provided. This code is responsible for displaying the topic tags in the hackathon list:

Instead of going with vanilla CSS, I opted for Tailwind CSS, a utility-first framework, for painless development. Additionally, I took advantage of some of their pre-designed components to get a jump start on the UI design.

More on Django Templates here.

Views

This is where the logic is implemented. Views connect the templates to the models in the background by taking a request and returning a response accordingly. This example is called when a user clicks on a hackathon from the list. It takes the request and the id of the clicked hackathon as arguments and returns the detail page:

Again, the details are here.

To get the website online, I decided to go with Heroku for the hosting of the PostgreSQL database and all the code. This turned out to be a great solution, especially with the integration of GitHub for continuous deployment for CI/CD.

Overall, I was surprised by how much was possible with Python and a little bit of HTML and CSS. However, the next time I would likely go for a different architecture with a stronger separation of the back- and frontend for more flexibility. Depending on the size of the project, I would probably build the frontend in either React for more advanced projects or Webflow for easier ones. Django also has a framework to develop REST APIs which includes tools for authentification, serialization, and other important parts. Alternatively, backend-as-a-service solutions such as Supabase would be a great choice.

Challenges

On the business side, Rockethack.io was dealing with the typical cold start/chicken-or-egg problem. The site is not attractive to students if there aren't any hackathons listed. But without any traffic, listing a hackathon is not worth it for organizers. To overcome this, I was searching for hackathons and adding the data myself in the beginning. However, it quickly became apparent that this was not sustainable long-term.

I implemented two solutions for this challenge:

When searching for hackathons, I noticed that most organizers had their own website indexed on Google, but none of them took advantage of the Google Event Enhancements (a special format of search results for events, similar as the "Shopping"-listings at the top of the search results). I quickly implemented and automated the standard, linking to the listing on Rockethack.io, to increase the reach of the listings and get additional search impressions and traffic.

Additionally, I added a "Add Hackathon" feature for organizers to list their hackathon on Rockethack.io. To ensure that this feature would not be abused (by including spam/dangerous links or content), each submission would be stored in the database, but not published until verified and approved by me.

Conclusion

Rockethack.io was the first project I built that was launched publically. There were many things I didn't know when I started and a lot of learning by doing but it was the perfect step to make progress. Unfortunately, I eventually realized that Rockethack.io was just that - a project. Before I stopped actively maintaining the project, it reached over 250 users and gained close to 4,500 impressions on google. The site is still online and I might return to it at a future time.