November 06, 2018

My First Hackathon!

6 min read

I just experienced my first Hackathon ever! freeCodeCamp, Netlify, and GitHub sponsored the event. GitHub generously opened up their incredible HQ in San Francisco and even provided catered breakfast, lunch, and dinner (for both days 😋.)

It began promptly at 9 AM on a Saturday, starting with a hearty breakfast and coffee ☕️ . I met up with my small team consisting of 3 other developers (2 of whom I’ve never met.) But our team size quickly climbed to 6, as we mingled with other developers over breakfast. I met Gerardo, and Lena both were pretty new to Web Development like I am. The hour before the opening keynote flew by, as we talked about our diverse backgrounds. We then moved into the main conference hall for further discussion about the Hackathon, API's, and the JAMSTACK.

Hackathon Keynote

Quincy giving a warm introduction!

So what is the JAMSTACK?

"JAMstack: noun \’jam-stak’\ Modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup."

The Hackathon was open ended, and the requirements were that you must build a JAMSTACK application and deploy it on Netlify.

We then dispersed around the GitHub HQ with our respective teams, and the hacking commenced.

We decided to start by setting a timer (a simple yet excellent time management technique introduced to us by Lena) for about 45 minutes to study the API's available to us, and brainstorm ideas about what we were going to build as a team. After the timer went off, we went around the table with our ideas. There were excellent ideas put on the table but, the one that we all agreed on was Eugene’s idea:

Build a JAMSTACK application that helps people attending Hackathons, find their dream team.

What he imagined was an app that allows users to sign up for an account, and is asked a series of questions about their background, skills, and interests. We would then use an algorithm to determine open teams that closely match the user’s preferences and background. Gerardo even came up with an excellent project name: Hackaform! So we got to work! 🤨

We worked hard on Hackaform until the last minute before the pitch on Sunday. But instead of talking about what we built, I want to talk about what went well during the Hackathon and the challenges we faced as a team.

What went well

  • Like I mentioned earlier, we had an incredibly diverse group of individuals on our team, so, we didn't have trouble dividing up the responsibilities. Eugene worked on the algorithm for matching users with teams based on the data from the form submissions. Lena took on the Project management++ role to oversee the entire development process. She made sure we were checking in as a group every hour, filling out necessary forms for the competition, taking notes, gave the minute pitch to the judges and even wrote out the necessary HTML/CSS for the Formspree form. Gerardo, Sarmishta, and Miguel helped build out the various React components in our GatsbyJS app. I oversaw the team’s Git workflow/main repository and got the authentication flow to work using Netlify’s Identity Widget on top of GatsbyJS (albeit, it felt hacky!)
  • Even though we didn’t make it to the top 7 teams, we did make it to the presentation! Several teams were disqualified from the pitch because they couldn’t get their application to build in production.

The Challenges

  • Since this was our first time working as a team, we didn’t know each other's strengths and weaknesses.
  • Initially, when we were talking about Eugene’s application idea, we found ourselves piling on features that were way too complex, unnecessary, or both (I take some responsibility for this as I suggested an unnecessary feature - a random team name generator for teams to use to generate their team name 😅). What ended up working out for us was to agree on core features of the application early on, and making those the highest priority.
  • None of us had much experience collaborating on a codebase before, so, our workflow was not as efficient. We ran into issues when two team members worked on the same origin branch, therefore, when one person pushed changes to the branch the other person couldn’t push their own (unless doing a git pull --rebase origin <branch-name> which not everyone on the team understood how to do.) Fortunately, I had been studying how to collaborate effectively on GitHub before the Hackathon, so, I had some idea of the workflow. As aforementioned, I ended up overseeing the main repository, and I made sure each one of us that was pushing code, was working on a fork of the repository instead of the upstream repository itself.
  • We didn’t have enough time to figure out how to add Lena’s beautiful animated SVG background to our application, nor did we have time to incorporate Eugene’s algorithm for matching users with teams (we ended up hard coding in this feature 😅)

My Overall Experience

Although a bit stressful at times, I had a great time collaborating on a project with other like-minded individuals. I am so proud of my team!

If you haven’t attended a Hackathon yet, I highly encourage you to do so. It is quite the experience! I learned how to use Netlify’s Identity Widget in GatsbyJS (which I will write a blog about when I have some spare time,) I made some new friends, met Quincy (founder of freeCodeCamp), got some more stickers for my laptop 😅, and ultimately got a better idea of what a Hackathon is like. I can't wait for my next Hackathon!

a not so professional head shot.


👋 Hello, thanks for the read! If you found my work helpful, have constructive feedback, or just want to say hello, connect with me on social media. Thanks in advance!

© 2021 Made by Scott Iwako