The Hackathon Handbook for First-Timers

SD Hacks — Photo credit to Alex Matthews/Qualcomm Institute

Hi! My name is Stanley, I’m a 2nd year data science major at UC San Diego! I’m currently a front end developer for ACM at UC San Diego, and I owe an extremely large part of my career to hackathons. After one year and 12 hackathons, I went from creating simple, static HTML pages to creating React applications, RESTful APIs, and web scrapers.

Over the next 36 hours, you’ll be going through copious amounts of caffeine, cursing, and creativity. This will be the guide to help get through your next hackathon alive.

Timeline

This is my general timeline for hackathons; some might be 24 or 12 hours instead. You don’t have to follow this timeline specifically, but I usually like to get 6–8 hours of sleep over the course of a 36 hour hackathon.

Day 1

• 6:00–9:00PM: Check-in, find a table, network, individual team formation
• 9:00–10:30PM: Opening ceremony, official team formation
• 10:30–12:00AM: Brainstorming, researching company challenges, wireframing

Workshops usually occur after opening ceremony until 1 am!

Day 2

• 12:00–4:00AM: Start coding! Flesh out the game plan, assign tasks, and solidify the idea
• 4:00–9:00AM: Sleep
• 9:00–12:00PM: Code, code, code
• 12:00–12:30PM: Eat lunch while coding
• 12:30–2:00PM: Checkout booths, workshops, meet hackers
• 2:00–6:00PM: Code, code, code
• 6:00–6:30PM: Eat dinner while coding
• 6:30–12:00AM: Code, code, talk to a bunch of mentors

Day 3

• 12:00–1:00AM: Go to a workshop, participate in cup stacking, get snacks
• 1:00–8:00AM: Freak out, ask mentors, if all goes well, get an hour nap
• 8:00–9:00AM: Hard code everything, flesh out devpost and pitch
• 9:00–10:00AM: Clean up table, wait for judge assignments, wrap demo up
• 10:00–12:00PM: Eat brunch, checkout booths, move to table assignment
• 12:00–1:30PM: Judging!!! Each judge is ~2 minutes
• 2:00–3:00PM: Closing ceremony, awards
• 3:00-Next Day: Sleep

SD Hacks 5.0 — Schedule for 36 hours

What to Bring

Software:

• Text Editor: (VS Code, Sublime, Atom)
• Version Control: Git (Setup a Github account)
• A hype Spotify playlist
• That’s pretty much it ¯\_(ツ)_/¯

Items:

• Wallet + ID
• Laptop
• Chargers for phone/laptop
• Large backpack for taking home Yerba
• Sleeping Bag
• Pillow/Blanket
• Water Bottle
• Warm/Cool Clothes
• Toiletries

How much sleep will I get / can I do homework?

Hackathons are 100% self-paced and everyone approaches them differently. If you have a midterm on Monday after a 36 hour hackathon, take some time out on Friday night to get your study, homework, and sleep in. You can also go back to your dorm midway if you aren’t feeling too well. I’ve gone to hackathons where I’ve had 0 sleep and ones where I just visited friends and bowled.

Team Formation

HackUCI 2019 — Part of ACM Board

If you don’t have a team, don’t worry! A Major League Hacking representative will have a team formation session after the opening ceremony. It’s different each time, but the representative may form a large circle and start grouping people based on experience, ideas, or icebreakers.

Hackathons typically have a max team size of 4 people, but it’s ok to have less. Hacking solo is definitely possible, but not ideal. Hackathons are a great place to learn new things and form connections!

What do I make?

Anything! °˖✧◝(⁰▿⁰)◜✧˖°

Web Development

Typically web applications are split into two sides: Front End and Back End.

Hacktech 2019 — A portfolio to potato converter using Flask, BeautifulSoup, and HTML + CSS

The Front End is what you see on screen and interact with. This is usually made up with HTML and CSS. HTML is used to create the text and objects on the screen, while CSS is used to style the layout and colors. JavaScript is used to make a page interactive; if you want a button to create an alert or reveal some text, you’ll most likely need JavaScript.

The Back End is what is hidden away from the user. If you need to process form data created in the Front End, you’ll need to send it to the Back End to store in a database. There are dozens of ways to do this, but I personally use a Python library called Flask. You can also use JavaScript for your Back End with Node.js. For databases, you can learn MongoDB or MySQL, but I personally use a 3rd party service like Firebase.

Mobile

Mobile development can be extremely rewarding. To make an app for mobile, you’ll need to first choose your platform (iOS or Android). If you don’t have a Mac, your choice is made automatically — Apple restricts iOS Development to Macs, and there isn’t a great way to develop for iOS on Windows.

Hack UCI 2019 — mARk, an iOS AR app

Generally, for iOS Apps, you can make a standalone app, or an app that leverages some sort of Back End (recommend using Firebase, it takes too much time to sync to a Mongo server). iOS Development is weirdly intuitive, in that you’ll spend the first half hating the platform and the second half loving it. To make something for mobile development, the best guides are usually found on Ray Wenderlich’s website (Also has Android and Unity tutorials, in addition to iOS!). In terms of programming languages, iOS uses Swift, which feels like a nicer version of Java, and Android uses Kotlin, which is similarly easy to use. Unity uses C#, which is almost the same thing as Java. Don’t be afraid of trying out a new language — it’s through hackathons where I learned that coding practices and fundamentals transfer pretty seamlessly through languages.

Hardware

For Hardware, you have a slight advantage, as physical products can often appear to be more impressive than pure software ones. That being said, the best way to make a good hardware hack is to integrate with a software API. Some of the most successful apps I’ve seen utilize Firebase via Arduino to make truly IoT software (without building a REST API). Another type of hardware device you can use is called a Raspberry Pi — these can be found from the MLH Hardware Lab. These can be made into Bluetooth peripherals and paired with another device to make Bluetooth IoT ; however, keep in mind these are very tricky for a hackathon. That said, if you get them to work they go well with judges. I recommend using Bleno to implement this.

HARD Hack 2019 —Bluetooth hardware hack

MLH Hardware Lab, VR, and more

At most MLH-certified hackathons, there will be a hardware lab. These labs will have all kinds of things, from meditation headbands to Oculus Rifts. These are all super cool and can be used to make great things — they also have laptops there so if you don’t have a great dev-ready laptop feel free to checkout theirs and use theirs instead.

SD Hacks 4.0 — Jimmy Dang trying out VR

A Note on VR

*Edit 12/20/2019: This section no longer applies with the release of the Oculus Quest having processing on-board

VR is fun. Unless you have a decked out Windows computer, VR will be far too laggy and incredibly painful. That said, if you do have VR, use Unity to make something with it. The best advice for a good VR hack is to tell a story. VR is all about the experience, and the developers behind Oculus and Vive have created the nicest possible experience for the hardware. It’s up to you to tell a story and make the Virtual World you create to feel seamless and immersive, and the best way to do that is to immerse the user in a narrative. Demos are key with VR, and if your judge doesn’t try on the VR, it’ll be far harder to win.

How Does Judging Work?

While it differs from hackathon to hackathon, the general format is that you’ll have a Devpost (project submission portal) due an hour before the official deadline, and then you’ll be assigned a table number in which you’ll be judged at.

Twitchcon Hackathon 2019 — Twitch Throwbacks

Depending on which and how many tracks or categories you sign up for, you’ll receive more or less judges. Judges will usually stay for ~2 minutes for your elevator pitch about the project. They’ll ask you some general technical questions afterwards, but they’ll rarely ask to see your code.

If you make it to the final round, you’ll get notified near the end of judging. At the final round, you’ll be demoing to the entire crowd for ~5 minutes with some questions from judges afterwards.

How do I win a hackathon?

I’ll preface this by saying that hackathons are notorious for having wacky judging systems. The rubric is based on completely subjective decisions, so a project with a really complicated Back End can be beaten by a website created from a template. You’ll get much more out of a hackathon through talking to people, going to workshops, and learning things you wouldn’t have otherwise picked up.

• A majority of teams usually stick to the tracks or categories given by a hackathon such as health, education, or transportation. While you can compete in those categories, you might be better off competing in a company-specific challenge with an obscure API.
• Stack the front end. This is controversial, but having a really nice looking UI without the actual features implemented (or hard coded) may make your project seem more polished than it actually is. If the judges ask you about a specific feature and you genuinely don’t have it implemented, don’t lie.
• Take (calculated) shortcuts. There’s a balance between what you want to learn, and what you’re willing to give up for the sake of time. Implementing a login/authentication system is a great learning experience, but it might take longer to create than the project itself. Using a 3rd party auth or just hard-coding a profile will speed up development greatly.
• Get a solid pitch. If you can prepare a quick powerpoint slide, take screenshots, and have a solid demo running, then you’re set for judging. I’d recommend having one person with sufficient sleep on Saturday night to do the talking, but everyone should chime in still. Additionally, try to make your Devpost submission look nice — you can reuse this for resumes/recruiting.
• Utilize your mentors. I have not gone to a single hackathon without asking someone for help. You’re surrounded by hundreds of passionate hackers that are definitely willing to help if you ask.

Final Remarks

In 36 hours, you’ll have ups and downs where you’ll feel like quitting. I’ve been there. Yet, the euphoria of creating something and having dozens of people interact with it is unmatched. If there’s one thing I want you to take away from this article, it’s that you have an infinite capacity to learn and grow. Hackathons are just one of the millions of ways to push yourself out of your comfort zone and try out new things.

Slo Hacks 2019 — Left to Right: Jeffrey Ha, Jason Tran, Me

Acknowledgements

• Huge thanks to Ronak Shah writing the Mobile/Hardware/VR section of this article
• This article wouldn’t have been possible without the support of ACM UC San Diego — I wouldn’t be the developer I am today without the support from this organization

Resources

• Hackathon Guide: https://blog.teamtreehouse.com/your-first-hackathon
• Web Development Glossary: https://careerfoundry.com/en/blog/web-development/50-web-development-buzzwords-that-all-new-programmers-should-learn/
• Arduino + Firebase: https://create.arduino.cc/projecthub/electropeak/connecting-arduino-to-firebase-to-send-receive-data-cd8805
• Packing List: https://medium.com/@ucsbhacks/how-to-pack-for-a-hackathon-2b1358f951dc
• MLH Website: https://mlh.io/
• Devpost: https://devpost.com/
• Starter Packs: https://docs.google.com/document/d/1RDOkY7Wtv3bt_VyzfIiczSEE5MC5xeO_E3fKICsQ41o/edit
• Hackathon Idea Generator (Last Resort): https://www.wolframcloud.com/objects/microsites/ProjectGenerator/idea?n=630

Plugs

My Links:

• Github: https://github.com/leestanley
• Devpost: https://devpost.com/leestanley
• Website: https://leestanley.me/

Ronak’s Links:

• Github: https://github.com/ronakdev
• Devpost: https://devpost.com/ronakdev
• Website: https://ronakshah.org/

ACM UC San Diego:

• Facebook: https://www.facebook.com/acmucsd/
• Website: https://acmucsd.com/