Your First Hackathon — ACM Hack

Breanna Nery
tech@ucla
Published in
12 min readNov 11, 2017
Visit hoth.splasththat.com to learn more about Hack on the Hill 3!

We’ve all heard the stories of elite hackers winning hackathons with revolutionary and game-changing projects. Some might think that the only way to be successful at hackathon is if (1) you were coding since you were ten or (2) you can blaze through 48 hours of coding with only Red Bull by your side. With this in mind, attending a hackathon as a beginner can be quite daunting.

For Hack on the Hill, ACM Hack’s bi-annual beginner friendly hackathon, we’d like to challenge those stereotypes by introducing you to a story you don’t often hear — the story of people’s very first hackathon. We interviewed six UCLA students on what they did during their first hackathon. Some had only taken a single computer science class and some even went to their first hackathon all by themselves! We hope their stories and experiences will encourage you to try out your first hackathon. If you are joining ACM for Hack on the Hill — good luck!

Introduce yourselves!

Nathan Yang, Ruthie Johnson, and Shashank Khanna

Nathan Yang

My name is Nathan and I’m a third year, computer science student. I’m an officer for ACM Hack and one of your organizers for Hack on the Hill! Outside of ACM and CS, I love to dance! I joined a team with Foundations Choreography last spring quarter and loved it so much that I decided to join an AFX team at UC Berkeley over the summer. In addition to dancing, I enjoy hiking and playing tennis and ultimate frisbee.

Ruthie Johnson

Hi, my name is Ruthie and I’m a first year computer science PhD Student. I graduated this past June from UCLA in mathematics of computation. I was an officer in ACM/ACM-W for the past 3 years, which is where I first heard about hackathons!

Shashank Khanna

I am a senior CS major, who started out as a Mechanical Engineering major. My fall quarter in freshman year, I took Prof. Smallberg’s CS31 which got me interested in programming. I didn’t get an internship freshman year, so I made an iPhone game over the summer and posted it on the app store. I thought it was a pretty terrible game, but people started downloading it and giving me compliments. That game basically started my journey in app development.

Charlotte McGinn, Justin Liu, and Tanzeela Khan

Charlotte McGinn

Hi! My name is Charlotte and I am a third year Computer Science and Engineering major. I’ve been involved with many different student organizations on campus (IEEE, ACM, DevX, and UCLA Radio, to name a few) over my past three years and love exploring different applications of computer science! Aside from that, I enjoy going to concerts, playing sports, and shooting some zombies in CoD in my free time.

Justin Liu

I’m a second year CS major who is all about design. I’m the current Director of Design for UCLA ACM and UCLA DevX, but you might also see me around at Bruin Entrepreneur and Creative Labs events.

Tanzeela Khan

Hello friends. I love hiking new landscapes, singing terribly, watching musicals, and DJ-ing for UCLA Radio. I’m currently planning my escape.

Where was your first Hackathon? Who did you end up working with?

Nathan Yang

The first hackathon I ever attended was LA Hacks 2016 right here at UCLA during my first year. I worked with my very good friends and then floormates: Helen Lee, Nikhil Kansal, and Su Thaw (all of whom are ACM officers as well)!

Ruthie and her team (from left to right: Vivian Zhang, Ruthie Johnson, Garima Lunawat, and Katie Aspinwall) at SB Hacks. Spoilers: They won the Popular Choice prize!

Ruthie Johnson

My first hackathon was the very first SB Hacks held at UCSB during my second year. I worked with Vivian Zhang, Garima Lunawat, and Katie Aspinwall, all who I met through the ACM-W mentorship program.

Shashank Khanna

My first hackathon was HackGT in 2015. I was very excited to go to Atlanta for the most part. I had never developed an app in a team before, and knew almost nothing about making apps in swift and knew no one at the Hackathon. Eventually, I ended up meeting another sophomore and two masters students, who became my team.

Charlotte McGinn

I actually attended a few hackathons where I didn’t really do much other than collect free swag, so I’m going to talk about the first hackathon where my team had a complete project. I went to LA Hacks last spring and was on a team with two of my fellow officers from WATT, Tanya and Jackie.

A snapshot from Hack on the Hill 2

Justin Liu

Hack on the Hill! I worked with Nathan Smith.

Tanzeela Khan

My first hackathon (where I worked on a full project) was at SB Hacks III (2017). I worked with Justin Liu, Dmitri Brereton, and Parth Ingle.

Describe the final project you made and the inspiration behind it. What did you specifically work on?

Learn more about Phoemo at: https://devpost.com/software/217-phoemo

Nathan Yang

The project we built is called Phoemo. Phoemo, a concatenation of “Photo Emotion” (pronounced “fo-mo”), is a platform that observes and performs statistical analysis on the emotions of a crowd. An external camera/recording device wirelessly connects to a portable, central processing unit running our application and statistics for a crowd’s emotions are instantly calculated and displayed on our website.

Since it was my first hackathon and my first time making a web application, I was limited to working on the front-end of our project and displaying data from our backend on our website. Thankfully, Nikhil was able to guide us through the development of our project.

Learn more about Freeloader at: https://sbhacks.devpost.com/submissions/32351-freeloader

Ruthie Johnson

Our team made a web app that parsed a user’s Facebook feed, groups, and public posts for FREE stuff. We used the Facebook API and built the frontend using Bootstrap and some HTML/CSS. We felt that free stuff was a quintessential part of college/hackathons and so we designed an app that found just that. Inspired by the hackathon’s intro email warning that hackers simply cannot “freeload” the event, we named our project “Freeloader”.

Specifically, Vivian and I worked on using the Facebook API to allow our app to access a user’s Facebook (I will never forget how much documentation we read on the numerous types of authentication tokens used in the API…). Additionally, we built our own parser that mined the text. The parser code for this was literally from one of the beginning JavaScript modules on Codecademy. Garima and Katie worked on the front-end and the UI which was full of great animations and a lovely page about the creators.

Shashank Khanna

I spent all of the first day watching Swift videos on Lynda.com, and once I felt more comfortable with it, we started thinking about app ideas. We wanted to do something with indoor navigation, but realized quickly that that would be too much to take on for 24 hours. So in the end we decided to go with an app that was YikYak “on a more intimate level”. We placed beacons around Georgia Tech’s campus on various landmarks and your phone would give you a notification whenever you passed by it. You could also leave comments on the beacon itself for the next person to read! I was in charge of making the main application layer of the iOS app. It was a lot of fun.

Learn more about myLip at: https://devpost.com/software/mylip

Charlotte McGinn

Our project was called myLip, and it was a web app that helped people organize their lipsticks. It is like a virtual makeup box for that allows you to sort your lipsticks into different color categories. We thought this would be beneficial because it would help people be able to see what kinds of shades they have a lot of already and to avoid purchasing lipsticks of similar shades from different brands. We also had a “magic mirror” which used Microsoft Cognitive Services to overlay lipstick onto a photo of yourself to “try it on”. I worked on the frontend and design of this app.

I drew the graphics in photoshop and coded up the frontend in HTML and CSS. Even though it was pretty basic, this was my first time designing a somewhat legit interface from scratch.

Justin Liu

We (and more like just Nathan) built a website that pulled data from UCLA’s dining menu and reformatted it in a comedic way.

Learn more about Reverie at: https://devpost.com/software/sbhacks3

Tanzeela Khan

We created Reverie, a web app that mapped music to locations on a map. At the click of a button, the website would add the song you’re currently listening to on Spotify and create an pinpoint on the map including the embedded song. My job was to implement the “automatic feature” of capturing the current song on Spotify. I chose this job because I wanted to demystify APIs, something I had no prior experience with.

What was the biggest challenge you faced?

Nathan Yang

The biggest challenge I personally faced during this hackathon was not knowing enough to significantly contribute much to the project. I found myself looking up a lot of things on Google and asking Nikhil and mentors a lot of questions. But there’s nothing wrong with that! Hackathons are supposed to be learning experiences. Even though I didn’t contribute as much as I would have liked to, I still learned a lot!

Ruthie Johnson

Ironically though, all of us had only taken CS 31 or PIC10A before we attended, but the actual coding itself was not the most challenging. Logistically, the biggest challenge was just calling the Facebook API. I remember during the opening ceremony, the organizers were discussing all of the available APIs, and we didn’t even know what this mysterious “API” was, so we figured we just wouldn’t use one. So we basically found out that we actually used an API after the hackathon when someone explained what it was to us. At the time there was limited documentation for this API, so this was quite difficult. Also (this is quite funny now), we didn’t know that people usually use text editors, so we edited, debugged, and committed the code directly on Github! Talk about never being behind on a commit ;)

Shashank Khanna

The app was due at 8 am, and at 6 am a last minute change broke everything. The screen was showing up empty. I was super fortunate to bump into an engineer who worked at Apple during the hackathon, who basically guided me in fixing my UI so that everything returned back to normal again. The surprising thing is, we ended up winning that hackathon, and if I hadn’t met that engineer we might not have even submitted a working app. Sometimes luck really surprises you!

Charlotte McGinn

The biggest challenge we faced was integrating the magic mirror with the rest of our app. I think we had used node.js for the login and Python for the magic mirror, and it was a mess to integrate the two. In the end, we did demos for the app and magic mirror separately, but I don’t think the judges minded very much since integration is an issue that a lot of hackathon projects face.

Justin Liu

I wasn’t sure how to merge my code with his, so learning how that would work was a challenge.

Fun Fact: Hack on the Hill will be hosting a Github workshop this time around so be sure to check it out!

Tanzeela Khan

The biggest challenge I faced was searching for an API that could output the current song. Oddly, the Spotify API did not have this feature, “recent song history”. After some digging on the internet for music APIs, Justin and I found out that SoundHound had this feature. The problem was, we had to apply through a google doc for an API key. This was not a viable option (but we did receive the API key two days after the hackathon). Later, I found the LastFM API, but when I tested it using my JSON parsing setup, I had no results. After yet more digging, I found claims of people saying that this API was broken. At a loss, I took one more stab at this API. I removed a question mark from the given documentation example. It worked.

Following our epiphany, I continued working with in a relatively smooth manner. I played songs on LastFM, extracting the song and artists from the “recent song history”. I then passed these as variables into the Spotify API and captured the closest matching song (the first one, obviously). I extracted the ID of that song and used Spotify examples to created an embedded link of that song. Then I pasted it onto the map. Here’s the last fix: we scrobbled Spotify to LastFM. Meaning, whatever music playing on Spotify would be sent to LastFM and eventually to our map. It was a crazy and rewarding workaround.

What advice do you have for someone’s very first hackathon?

Hackathons are meant to be learning experiences and a place for you to make something so be proud of yourself for stepping out of your comfort zone, learning something new, and making something cool!

Nathan Yang

My advice to first-time hackathon attendees is to not be afraid and ask questions. Everyone has their “first time” for everything and hackathons are not an exception. Try not to let the several long hours of hacking and the people who look like they know what they’re doing intimidate you.

Hackathons are meant to be learning experiences and a place for you to make something so be proud of yourself for stepping out of your comfort zone, learning something new, and making something cool! All the organizers, mentors, and other ACM officers at Hack on the Hill are there to help you and make sure you have the best experience possible. So if you see any of us around during the event, feel free to talk to us and ask us questions! See you at HOTH!

…make sure to celebrate the small victories of your project.

Ruthie Johnson

Don’t stress to much about having an idea before you attend. Most of the time your ideas end up changing so much during the hackathon anyways, and I’ve found that the best ideas come naturally and these are the projects you get most passionate about because it’s probably something that you inherently care about. Additionally, treat a hackathon as a weekend that you’re hanging out with your friends, not as Shark Tank. My team and some friends actually left during the hackathon for a few hours to go to the beach!

Additionally, make sure to celebrate the small victories of your project. It sounds like an insurmountable task when you think of making an app in 36 hours and people can get really frustrated (around hour 24 to be exact), but it’s celebrating each commit, all the funny commit messages, the new navbar, etc that makes the experience so much fun.

Lastly, don’t think you don’t belong there — because you do. It can be intimidating walking into the hacking space seeing everyone and all of their nifty hardware talking about how ReactJS is sooooo much better than any of the other bazillion JS libraries…but hackathons are all about learning and there are no pre-requisites for this. So just come and be open to learning (and eating free food), and I’m sure the first hackathon won’t be the last.

Shashank Khanna

Don’t expect anything, and go with the mindset of having fun.

The passion is really important because I’ve had teammates bail on me because they stopped caring about the project.

Charlotte McGinn

As someone who didn’t take any hackathons seriously until the end of her second year, I would say that you should come up with an idea that you think is interesting and are passionate about and run with it. The passion is really important because I’ve had teammates bail on me because they stopped caring about the project. If everyone has a common goal and vision, it makes it much easier to put your all into your project.

Justin Liu

Make sure to set an initial endpoint! Don’t aim for crazy features or insane UI on your first go — work on getting a project up first.

Tanzeela Khan

You can and will finish (some version) of your project. Do not give up.

Thank you again to Nathan Yang, Ruthie Johnson, Shashank Khanna, Charlotte McGinn, Justin Liu, and Tanzeela Khan for sharing their stories! Good luck on your first hackathon experience :)

--

--