My First Hackathon
By: Danny Buckley
Tags: Hackathons, Flatiron School, Bootcamp

Last weekend i attended my first hackathon.

Hackathon? Yep, hacking + marathon.

Basically, a hackathon is a competition where groups of people are formed to come up with a problem, an idea (i.e. a solution for that problem), and then try to realize a code-based (hence: hacking) solution.

This all goes down in a predefined and very limited time frame (few hours — few days) with often very little to no sleep for the competitors (hence: marathon). In the end, a winning team is chosen by a jury and given a reward.

Talent Hack is the host of the hackathon, offering a transformative recruiting experience where participants are observed over the weekend by recruiters and potential employers. I particularly like this recruitment strategy, it offers a closer representation of how an individual can work within a team and gives an insight into how they think about challenging real-life problems.

I signed up for the hackathon seeing it as another opportunity to break into the job market. And whilst this did prove as an excellent chance to show recruiters my problem-solving mindset and flexible coding skills, I did come away from the experience learning so much more.

The Beginning

This hackathon was a virtual one due to the current world situation, which is astray from the traditional annual hackathons Talent Hack host. The organizers saw this as an opportunity to widen the spectrum of talent and include team members from all around the world. The event in total had over 100 people participating from every corner of the world. In a time where remote working is becoming a more viable solution for businesses and also providing employees with a more healthy lifestyle, I saw this virtual hackathon as an opportunity to become accustomed to remotely working within a team.

Friday night at 7 pm is when the hackathon began. With over 100 people within a single zoom call listening to the Talent Hack opening ceremony where we were introduced to hosts and explained the weekend's time schedule.

The feeling of anxiety quickly swept over me with racing thoughts. What if I let the team down? Should I even be doing a hackathon with my experience level? The virtualness of the event made it ever so easy to just shut down the computer and run away from anything. But I looked over the Slack channels and saw the beginnings of a team forming, a UX designer and frontend software engineer have joined forces and was looking for a backend engineer. I offered my skills and was quickly brought into the team. Closely followed by a market researcher and a third coder joining the team. The team having members stretching all around Europe, creating a nice international feel further adding to the remote working experience.

Team Composition:

Myself: Frontend / Backend Software Engineer

Nina A.Popovici: UX Designer

Elizabeth Kayode: Market Researcher

Sergio Perez: Frontend Software Engineer

Samuel Jegede: Frontend Software Engineer

Quickly the team mentality kicked in and I was feeling empowered and inspired to tackle our challenge head-on.

The Challenge

With the remote industry rapidly growing, especially within the current climate. We were tasked with creating a productivity style web application that can be used to keep track of times of individual tasks. The overall feeling of the app should be simple and seamless while offering a professional experience aimed at remote workers. The team's final submissions will be judged on the app, design, aesthetics, and quality of code written.

The final outcome of the challenge should result in an advance ‘stopwatch’ like the feature that allows the user to stop and start the time-tracking in order to track the time spent on individual tasks.

The Ideation Phase

Our team quickly jumped onto a zoom call to discuss everyone's backgrounds, individual skills, and potential roles within the team. The UX designer took the lead in this phase taking us through the different UX deliverables that would be key to bringing this product to life. As a team, we created a mood board laying out team skills/roles, objectives, and key points. Then individually throughout the night created our developing our own ideas and creating wireframes for presenting to the rest of the team early tomorrow morning.

Over the night I created this mood board of ideas and wireframe created in InVision Studio. From my understanding of the challenge the web app being simple and with a clean easy to use experience was key to making this successful. I concentrated on a flat design removing any table design concepts you would traditionally find in a time tracking app whilst maintaining more advanced features under a layer of abstraction in the user interface.

The unique element that would set this application from the rest of the market is the ability to instantly share the task timers with anyone with a smile URL link that can be given to anyone. They invited viewers would not require to be signed up to the service removing a potential pain point of a user and would be able to see in real-time the current progress of a task and any notes made on the project. I felt this feature closely aligns with the recent trend of web applications allowing for quick sharing of documents/views with external users, a feature i have found useful myself on many occasions.

My mood board can be viewed with the link below:

https://miro.com/welcomeonboard/yAKmmngfbLHMZIeNJzMnwb0yJR8INQpwIzqnlhvIAN7pFirLgGlzVFv7BPogEDmk

The team rejoined at 8 am sharp the next morning to discuss everyone's wireframes and decide on the final application features that will be included. My wireframe design was liked amongst the team and it was decided that the design would form the bases of the desktop design whilst features from the wireframe will be used for the mobile version which we all decided will be the main focus of the team.

The Coding Phase

The coders of the team got together to discuss what technologies should be used to create the application. Going into this process I was ready to be the person with the least amount of coding experience and was ready to let a more senior coder take the lead of code design choices. However, I found myself taking the lead amongst the coders as both were early on in coding Bootcamp and me finishing the Flatiron Software Engineering Bootcamp several months ago, by default put me as the most experienced. I was comfortable taking this position but it definitely took me by surprise and quickly the lack of experience amongst the team began to show problems.

Everyone was at different learning stages within their coding career with the one common language amongst all of us being JavaScript. We decided as a team that both the backend and frontend frameworks will be JavaScript-based for a more simplified and unified development process with everyone at least having a basic understanding of how to read the code. I decided that I would create the barebones structure of both the Frontend and Backend including all the technology/libraries that we would need to create the application whilst the other two coders quickly learned the basics of React so once I hand off the barebones structure of the frontend, they can work on creating the components on top of the structure while I implement the backend API.

I created the backend on top of the Node runtime environment and using Koa.js as a lightweight framework to build an effective scalable RESTful API. Selecting a relational PostgreSQL database for the accuracy and efficiency it provides when dealing with large datasets. I integrated KNEX SQL builder into the backend to allow for easy connections to be built into the database and a combination of Chai and Mocha libraries to create a comprehensive testing framework.

I then moved onto creating the frontend framework with React being chosen for its wide adoption amongst the industry and quick development process. Supplementing the React Framework, Redux, and Redux-Saga were integrated for application state management and handling of asynchronous side-effects. Once both backend and frontend structures were completed with full integration and testing, I passed the GitHub repository’s to the team and then worked on the authentication and user account management elements. Working with the Auth0 service to provide a high-security solution to connecting various external login services to the application including Google and Facebook. I then implemented secure API routes on the backend using JWT token request authorisation which when combined with the Auth0 services, allows for an adaptive security solution for the application.

Both the Backend and Frontend Github repositories can be viewed with the links below:

The Realisation

It was becoming late into the night and it was then I came to the realisation that 36 hours to code a whole application was just not enough time. I was reassured by our UX designer that having a functional application was not going to matter. She was a hackathon veteran so I found comfort in these words and picked me up from my lowest point in the process. I am proud of my fellow teammates and the work they accomplished in such little time.

Elizabeth created various documents throughout the day which would would help us in the presentation tomorrow and also took the lead in creating the presentation with contributions from the rest of the team.

The UX design from Nina looked amazing with a unique design that makes it really stand out amongst the competition. Nina managed to create a fully useable prototype that will be used for the presentation tomorrow to give the judges a feel for the application.

Sergio and Samuel both worked hard throughout the day and night learning React concepts in such a little amount of time. Sergio’s work resulted in the basis of the project viewer toolbar and Samuel created a fully useable JavaScript timer with a moveable pie-chart which can be transferred into a react component with some work.

I worked to 4 am working as hard as I could to bring the frontend into at least a position to have some functional elements that can be used. However, time got the better of me and with the rest of the team asleep, I felt it would at least helpful to get 3 hours of sleep before tomorrow's big presentation.

The final Adobe XD prototype can be viewed with the link below:

The Final Hurdle

The team reformed over cups of coffee at 8 am not so sharp on Sunday. We all worked on the presentation that would be presented to the judges, squeezing all the information and work we have completed into a short 5-minute presentation. I continued with the code with all the hope i had left to get something functional in front of the judges but as 12 pm came racing round it was just proved to little time to get anything done with the little sleep me and our team had.

The presentation came upon us soon after 12, we gave each other one final team talk to hype us up and we gave it our all to the judges. 36 hours of work presented in a short 5 minutes made the whole hackathon experience come to a abrupt ending. Viewing the other team's work, I was comforted by the lack of functional applications being presented but amazed by the standard of work achieved by everyone.

The points came in with around 15 teams being scored on numerous categories. All teams points actually came close within each other, creating a nice feeling of achievement amongst all teams. With our team coming middle of the table, only 10 points behind 1st place scoring a total of 141 points out of a potential 200 points.

The Conclusion

The whole experience has been thoroughly enjoyable with so much learned from working with such a diverse pool of talent from differing backgrounds. It has taught me essential skills in working with a team remotely which will be vital going into the current job market. Another import takeaway I got from the hackathon is setting a more concise goal of creating an MVP as soon as possible with proper analysis of the team's skill levels before deciding on features to include within the MVP. I will definitely be up for completing more hackathons going forward and also looking to complete the time tracker application within the next few weeks with the help of my fellow teammates, just in a more relaxed fashion.

Update

One of the clients working with Talent Hack has decided to go forward with the full development of the web application. After been amazed by the quality shown. The winning team and our team have been chosen to combine to bring our vision to the market. Something that I am thrilled about and look forward to gaining experience working within a larger team!