Building projects effectively at hackathons
Written by: Simran Thind
Have you ever found yourself at a hackathon with an awesome idea, but with no clue on how to initiate? Or perhaps stuck on a bug because this is the first time you’ve used this framework? Or even, trying to implement something yourself when you could have used a library instead?
Hackathons are great places to build projects and learn new technologies, but it can be frustrating at times when you become blocked on something that is new to you. A lot of people (including myself) come away with incomplete projects because of this, so I’ll be sharing some resources and tips that will help speed up the development process!
1. 📑 Begin your project with a boilerplate
Deciding how to build your project can be one of the harder, if not the hardest, aspects of the creation process. Setting up your code base with specific frameworks can often be tedious, particularly if you’re planning on making a full-stack web app. This is where boilerplates come in!
Per this dry Wikipedia definition, “boilerplate code or just boilerplate are sections of code that have to be included in many places with little or no alteration”. In other (cooler) words, boilerplates are the scaffolding for your project, that someone else has already gone through the trouble of setting up. Indeed, you’ve probably already seen boilerplate code:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8"/>
<title></title>
</head>
<body>
</body>
</html>This is probably the most common code one starts with when building a website. A lot of boilerplates are more involved than this — they already have a file organization set out, reusable components and templates in the code, and packages specified so that you can focus on fleshing out your application rather than the integration and smaller details. You can find a lot of boilerplates ready to go on GitHub; a lot of major frameworks offer their own, and even Major League Hacking provides ones for Flask and Node.js. Your own IDE in fact will have project templates available, so don’t overlook those too!
2. 🔧 Craft requests with API clients
What do retrieving Pokémon battle stats, recognizing items in images through computer vision, and mass-sending emails have in common? They can all be facilitated through APIs! Chances are your hackathon project will be making use of one, especially if the hackathon is offering API prizes, as they are wont to do.
If you’re having trouble creating requests, following documentation, or properly inspecting responses from the API, (API clients) can make your life easier. Applications like Postman and Insomnia offer more intuitive interfaces for structuring requests. Having the ability to save results, store environment variables, and handle cookies means you can spend less time wondering if you’re missing a field in your request body and more time actually doing something with the results you receive back. The most useful feature of all is code generation. Fields you’ve filled out regarding the API can be turned into snippets in common languages for you to re-use in your project. If you are inclined to create your own API, these clients are also good for spec’ing, debugging, and testing those kinds of projects.
3. 🎨 Use open-source and free design assets
While making your own icons and images can certainly lend a personal and unique touch to your project, it’s probably best to keep it simple and use assets from elsewhere, and leave new designs to big-ticket items like logos.
If you’re looking for icons, visit Google Material, the Noun Project, and flaticon! Wherever you decide to look, make sure to view the license for the icons in question and that you have the necessary permissions to use them. Google Material also has a UI component library; other component libraries and frameworks include Blueprint.js, UIKit, Milligram, Semantic UI, Bootstrap, and Flutter — and they make it easy to quickly build responsive websites and applications and apply themes to them. In terms of typography, Google Fonts is an excellent trove of free fonts; like icons, there are other free font websites out there, and so again check licensing information. Finally, for images and logos, check out logomakr (lots of graphics and icons to use) and Unsplash (free stock photography).
4. 🤝 Collaborate on user-friendly platforms
It’s easier to remain organized and keep up the pace on a project when using tools that foster teamwork! Glitch (primarily for building websites and web applications) and Google Colaboratory (Python code notebooks that are good for data/ML purposes) allow users to work on project files simultaneously, making it more fun to code together. If you have a traditional version-controlled project (i.e. probably something with Git), prevent wasting energy on merge conflicts or looking through history with more visual apps like GitHub Desktop or GitAhead which provide nice diffs to compare and a simpler time executing git commands. In addition to development, design and presentation can also benefit from products that allow you to closely work together. Need a central spot to keep prototypes, mocks, sketches, palettes, and anything else that might define the feel of your project? Figma (also used by Hack the North) and Invision are fine options. And for keeping track of tasks, you can’t go wrong with a project board on GitHub, or making a page for your team on Notion or Trello!
5. 👩💻 Leverage workshops and mentors
You’re never alone at a hackathon! Asking people around you can be quicker than searching online for answers; plus, you get the opportunity to meet someone new and learn from them.
Accessing mentor aid and other teams at hackathons is a good point to start. With their diverse experiences and knowledge, they can give you feedback on your project, troubleshoot, and encourage innovation or a different way of thinking about what you’re building. Lots of sponsors are willing to help too, particularly if you’re using a product or service of theirs. Feel free to approach their areas!
Attending panels and workshops can also drive the development of your project. You may come away from one inspired to use something new in your project, or gain a deeper understanding of a technology you’re already familiar with. Whatever the case, being able to go through a development process together with other people or pick the brains of the speaker can’t hurt. Attending these kinds of events at a hackathon can also be a good break from working on your project!
If you’d like to check out the resources mentioned in this post, as well as other materials all in one place, head over to https://github.com/simcard0000/hackathon-resources! Having used a lot of these tools myself as a hacker, I can vouch that with them you’ll be focusing on the aspects of your project that matter, becoming more familiar with the apps and perhaps even fit in a bit of sleep 😆 at the event!
Hack the North is scheduled for January 15–17, 2021 🎉
Sign up for our mailing list at hackthenorth.com to hear the latest from Hack the North! ⚙️
