Hackathon Table Numbers

At ChallengePost, my life is punctuated by hackathons. For 48 hours, it’s chaos. But unlike the hackers, I’m not concerned about meeting the submission deadline or nailing my demo at the expo. I’m worried about what happens in-between.

Intro to madness

I cut my expo teeth at PennApps X. After a sleepless, caffeine-fueled fugue, 1,200 hackers rushed to submit 237 projects before the 9:30am deadline. Afterwards, they hustled across campus to demo at an expo which was supposed to start at 10:30. At mega-hackathons like PennApps, expos can take up an entire gymnasium.

That left me and the organizers about an hour to assign and distribute table numbers. Hackers couldn’t setup with them. Judges couldn’t start their rounds until the hackers were situated. And sponsors needed to know which projects used their tech & APIs. It wasn’t pretty.

PennApps X Expo

Swing and a miss

A few months later at PennApps XI and MHacks V, Richard Murby and I tried to streamline the process with shared Google Sheets. We exported submission data from ChallengePost, assigned table numbers, created filterable tabs for each sponsor, and sent out the links via email.

It was a solid plan, but there was just one teeny tiny problem: Google Sheets can’t handle 1,000+ concurrent connections.

Getting it right

After my mega fail at PennApps, I resolved to find a solution. One that could scale for this summer’s 2,000 person Global Hackathon in Seoul. And guess what? I think I’ve got something.

Google Sheets is still the best way to manipulate and share tabular data with lots of people at once. And I think that the concurrent connection issue only affects sheets with filters and lots of formulas.

So, what if we treated Google Sheets as a simple datastore? Instead of running individual queries, we could load all the data locally and use client-side JavaScript to selectively show & hide data. That might alleviate the concurrent connection issue, right?

I found the solution while digging through GitHub one morning. According to author Jessica Lord, “Sheetsee.js is a client-side library for connecting Google Spreadsheets to a website and visualizing the information in tables, maps and charts.”

After looking the basic table demo, I knew I could adapt it for hackathons.

Here’s how it works:

  1. Create a copy of this Google Sheet and export your hackathon’s submission data from ChallengePost.

  2. Copy the Submission Title (A) and Sponsor Prizes (G) columns from the export into projectName (B) and sponsorPrizes (​C) in the Google Sheet.

  3. If you have less than 500 projects, delete the extra rows. If you have more, copy down the formula in tableNum (A) to assign extra table numbers. And if you need to reorder / reassign table numbers, (e.g. drones must be at tables 70–100), you’re in control.

  4. Select Publish sheet to web from the File menu and copy the sheet URL. It contains a sheet id which looks something like: 1kaNq96j0S76A2P_dk82Vek.

  5. Replace the id and name parameters in this URL with the id from step 4 and the URL-encoded name of your hackathon: nealrs.github.io/​hackathon_tables/​?id=XYZ123&name=PennApps%20W15

  6. Shorten the URL and share it via email, Twitter, Snapchat, or whatever.

That’s it. You’re done in less than 5 minutes. Here’s what it looks like:

Hackathon Table Demo

The app has a search filter and downloads all of the data locally. Hackers can look for their project by name to find their table and sponsors can identify projects using their tech. Since it’s a static page hosted on GitHub, there’s nothing to deploy either.

It looks good too, thanks to Holly Tiwari. She added the tiger striping, fixed header, and mobile styles.

The app works well, but I haven’t battle tested it yet. I’m hoping that you can help me out with that. The repo is open source and I’d love to get your feedback on it. Even better — a pull request!

2017 Neal Shyam