Hack-A-Thon Prep Guide

Get ready to ace Hack-A-Thon with this handy guide. It's packed with easy-to-follow advice on everything from event logistics to working effectively in teams. Whether you're new to hacking or a seasoned pro, this guide has got you covered.

Slack invite link

Slide presentation with judges rubric

Fill out this teams form ASAP

✅ What to Expect & How to Prepare for the Hackathon

  • You’ll learn new skills, tricks, and maybe even a new programming language—so come ready to explore!

    • Laptop & Charger – Make sure it’s a machine where you can install/run software (some work laptops are restricted).

    Developer Tools

    • Favorite Text Editor – Have a modern code editor installed (popular options: VSCode, Atom, Sublime).

    • Git Installed & Ready – GitHub Desktop, SourceTree, or VSCode’s Git integration can help if you're new to it.

  • If you’re a designer or project organizer, consider having tools like:
    ✅ Sketch
    ✅ Canva
    ✅ Trello

    • If you have an idea to pitch, be ready to share it in 30 seconds! 🚀

    • No idea? No problem! You can join someone else’s team.

    • Ideas are pitched, voted on, and teams are formed on Hackathon Day morning.

    • Hackathons can be intense, and that’s normal! If you feel stuck, talk to a mentor—we’re here to help.

    • HTG is different! Unlike other hackathons, we expect you to disengage on Saturday, go home, and sleep. 💤

    • If you ever feel uncomfortable, let someone know—your well-being is a priority.

  • Don’t hesitate to reach out to mentors! We won’t do the work for you, but we’ll guide you, answer questions, and help you problem-solve.

✅ Things to keep in mind during the weekend

    • Many teams end up using React.JS; it’s the most popular Javascript framework right now. Be sure you can install and run `create-react-app` and then actually start up the app after it’s been created.

    • If your team decides to implement parts of the app in different languages, figure out what you’ll need to make them talk to each other before you go off and implement the individual pieces.

    • If at all possible, avoid writing a back end for the project; the presentation will be almost entirely dependent on how the front end works and looks. Substitute dummy data, dummy servers, dummy APIs where ever you can.

    • Similarly, avoid setting up APIs, authentication, authorization, and many other things you’d normally have to do for a real app. Unless you have people who are already deeply familiar with these things, you’re going to spend a lot of time reading, learning, testng, and debugging things which aren’t necessary for the demo. Instead fake these, just as you’d fake a back end server if at all possible.

    • Set up your team’s Git repository, on GitHub, Gitlab, BitBucket, etc., so that the master branch is protected, so team member cannot inadvertently push changes that overwrite other members’ changes.

    • Create a Git branch for every feature you work on. Establish up front a means for reviewing, testing, and merging branches on the remote git depot.

    • Make sure to communicate with your team members when branches are pushed up, merge/pull requests created, and so on, also if you’re dependent on unmerged branches when to pull them into your working repository.

    • You can use GUI Git tools if those are easier for you. Everyone doesn’t have to use the same means of working with git, either, for example, some people are more comfortable using the command line, others Sourcetree. This is perfectly fine.

✅ Guidance for teams

Note: These are not strict rules—just helpful insights from past hackathons to keep your team on track and make sure you have the best experience possible!

    • Take time to align as a team before jumping into coding! Many teams think coding ASAP is the best approach, but spending time upfront to define goals will pay off later.

      • ✅ Get to know each other – What does everyone want to get out of the hackathon?
        ✅ Share contact info – Stay connected throughout the event.
        ✅ Clearly define the problem – Who are your users? What are their needs?
        ✅ Set up your communication tools – Some useful options:

        • Slack

        • Zoom

        • GitHub / GitLab

        • Google Docs

        • Trello

    • Break work into small, manageable sprints. Set check-ins every few hours to keep things on track.

    • Assign key roles:

      • ✅ Product Manager – Tracks which features are being built.|
        ✅ Project Manager – Manages tasks, repositories, and workflow.
        ✅ Timekeeper – Runs meetings and keeps things moving.
        ✅ Info Manager – Documents key insights, artifacts, and learning

    • Plan daily check-ins:

      • ✅ End of Day 1 – Retrospective check-in on what’s working.
        ✅ Morning of Day 2 – Plan the day, make adjustments, and set priorities.

    • ⏳ Save time by avoiding common pitfalls:

      • 🚫 Don’t build a full user management system – Fake logins & sessions work fine.
        🚫 Don’t buy a domain name – Focus on the idea, not branding.
        🚫 Don’t pick a completely new tech stack – Stick to tools at least one team member knows well.
        🚫 If building a mobile app, demo it as a web page using Chrome/Firefox DevTools.

    • Research your space:

      • ✅ Who are your users? What are their needs?
        ✅ What other solutions exist?
        ✅ What APIs or data sources could support your idea?

    • Design for an MVP (Minimum Viable Product):

      • ✅ The goal is to demonstrate an idea, NOT build a full product.
        ✅ Target a 5-minute demo—skip PowerPoints unless they truly add value.
        ✅ “Show, don’t tell” – Live demos are best!

    • Pick tools the whole team can easily use. Stick with what’s familiar or be ready to support those learning.

      • ✅ Docs & Collaboration – Google Docs, Slack, Notion
        ✅ Code Repos – GitHub (make sure everyone has access!)
        ✅ Task Tracking – Trello, GitHub Issues, Google Sheets
        ✅ Frontend Development – Next.js, Vue.js, Jekyll, or plain HTML/CSS
        ✅ Backend & Databases – Avoid heavy backends unless necessary! Consider:

        • AirTable

        • Prisma (GraphQL)

        • ElephantSQL (PostgreSQL)

        • Netlify CMS

    • Easiest & recommended demo setup: Run your app from your laptop.

    • If deploying online, consider:

    • Lean on mentors! They won’t do the work for you, but they’ll guide you and answer questions.

    • Take breaks & rest. Hack-the-Gap encourages teams to go home & sleep on Saturday!

    • If you need help, speak up. Your well-being matters—reach out if something isn’t right.

✅ Additional Guidance for Hackathon 2025

Note: This advice comes from experience with past hackathons and how teams have successfully presented their final demos.

    • Remember, the goal isn’t to build a fully functional product—it’s to present a demo that shows how your application idea solves a real problem for a target user.

      Your demo should answer these key questions:

      • ✅ Who is this app for?
        ✅ What problem does it solve for the target user?
        ✅ How does a user interact with it? (Workflows & user journey)
        ✅ What dependencies does this app have?
        ✅ What challenges might arise if developed further?

    • Tip: Spend more time answering these questions before jumping into development or architecture setup.

    • Before building, consider:

      • ✅ What does the user need to know to complete their task?
        ✅ How does the app collect & use their information?
        ✅ Are there privacy or security concerns?

    • Keeping these in mind ensures your demo is clear, functional, and user-centered.

    • Minimize complexity in data flow. If you need to show different data in your demo, use predefined JSON structures instead of building full databases.

      Ways to simplify:

      • ✅ Use static JSON files instead of setting up a database.
        ✅ Hardcode API responses rather than spending time on API integration.
        ✅ Discuss potential APIs, costs, and availability, but fake API responses if needed.

    • A common issue is integration failures when team members use different development environments. Avoid this by ensuring everyone works in the same environment.

    • Options for Shared Development:

      • 🚀 [Docker] – Standardized setup, but has a learning curve.
        🚀 [GitHub CodeSpaces] – Free for individuals, but not ideal for team use.
        🚀 [Gitpod] – Cloud-based dev environment with a free team-friendly tier.
        🚀 [Glitch] – Great for collaboration, but free-tier projects are public
        🚀 [AWS Cloud9] – Powerful but too complex for a weekend project.

    • Tip: If you already have a team & project idea, set up your dev environment before the hackathon to save time.

    • Not every Hackathon project requires coding! If there’s a non-coding way to demonstrate your idea, go for it!

    • Alternative demo approaches:

      • ✅ Prototypes using Figma, Canva, or other design tools.
        ✅ Click-through mockups instead of functional code.
        ✅ Storyboards or user journey maps to visualize interactions.

✅ Top Resource Links

    • Network Name: O370-Guest

    • Password: Gu3$t8428

    • tbd

    • Breakfast - 9am

    • Lunch - 11:45am

    • Dinner - 4:30pm

It’s Hackathon Season!

A hackathon is a rapid innovation process aimed at developing projects, prototypes and blueprints to address a particular challenge. The Hack the Gap Hackathon is an experience to empower intergenerational teams to generate innovation.

This is a means to connect with other community members to participate in creative problem solving around a systemic and institutional issue impacting our society.

Discover more about Hackathon