Devpost Expo / Table Number App
What is it?
This is a mobile-ready website for distributing and filtering table numbers at your hackathon expo. Here's an example from MHacks 6, where we had over 250 projects.
Everything is rendered client-side and the site is hosted on GitHub pages, so there's no backend / scaling issues to worry about. All you have to do is update the data.csv
file and push it up to your gh-pages
branch.
You can read about the history of this project on Devpost.
How to use this app
Local setup
- Fork this repository or clone it to your local machine
git clone https://github.com/nealrs/expo.git
- Fire up a local webserver in your development directory (just for testing)
python -m SimpleHTTPServer
If you want to livereload changes, I suggest using livereload. Otherwise you'll have to press refresh in your browser a lot (no big deal).
- Go to http://localhost:8000 ( localhost:35729 if you're using livereload) to see the local app.
It should look like this:
Adding your hackathon data
- Open up
index.html
and locate the following code blocks:
<title>HackathonName Expo</title>
<div class="container">
<div id="header">
<h1><a href="DevpostURL" title="HackathonName Expo"><img src="http://nealrs.github.io/devpost-follow-button/icon/devpost.svg" style="vertical-align:middle; width:60px;"> HackathonName</a><h1>
</div>
<div id="fullTable"></div>
</div>
- Change
HackathonName
to the name of your hackathon (e.g. PennApps XII) - Change
DevpostURL
to your hackathon's Devpost URL (e.g. http://mhacks6.devpost.com) - Add your own favicon & hackathon logo, we've put some placeholders in for now.
- Open
data.csv
in MS Excel or another spreadsheet app
There are 5 columns in this sheet:
- `expo` - Expo number (optional for large hackathons)
- `table` - Table number
- `project` - Project Name
- `sponsors` - Applicable sponsor prizes
- `link` - Link to project's Devpost page
- `category` - Optional data field for additional filtering
- `special`- Additional optional data field
This is where you'll paste in submission data & assign table numbers. If you don't need the optional `category` or `special` columns, you can delete them from the spreadsheet, and also comment them out in the code as shown:
```html
<table id="expoTable">
<thead>
<tr>
<th class="number">Table</th>
<th class="name">Project</th>
<th class="prize">Sponsor Prizes</th>
<!--<th class="cat">Category</th>-->
</tr>
</thead>
<tbody class="list">
{{#data}}
<tr>
<td class="number">E{{expo}} T{{table}}</td>
<td class="name"><a href="{{{link}}}" target="_blank">{{project}}</a></td>
<td class="prize">{{sponsors}}</td>
<!--<td class="cat">{{category}}</td>-->
</tr>
{{/data}}
</tbody>
</table>
```
I'd also recommend commenting out the `E{{expo}} ` tag unless you're running multiple expos.
-
Once the submission deadline is over, Go to the metrics tab on your hackathon dashboard and run a submissions export, without PII.
You'll receive a download link via email. Once you download the export, (it's a CSV) open it up in Excel and copy the following columns into their matching columns in
data.csv
:Submission Title
(A) ->project
(C)Submission Url
(B) ->link
(E)Sponsor Prizes
(usually G or H) ->sponsors
(D)- Repeat for
category
orspecial
if you're using them.
Save your CSV!
-
Assign Expo & table numbers
The app does not automatically assign table / expo numbers. We leave that up to you. There's no one-size-fits-all solution, so you can use whatever system works for you. However, every row should have a unique combination of Expo & table numbers.
Once you're done, go back to your browser and make sure everything is loads correctly.
NOTE Using Excel or a spreadsheet app is crucial right now. Do not edit
data.csv
with a text editor. Quinlan, I'm looking at you ๐)ALSO You must save this file as a CSV and commit+push it GitHub to update the list online.
-
Once you're satisfied, save everything, commit it, and push it up to your
gh-pages
branch.
Your table numbers will be live at http://your_github_username.github.io/expo
Custom URLs
If you have your own landing page / site for your hackathon, we suggest setting up a CNAME for a more user friendly URL. e.g. http://expo.funhacks.com. (It's a lot easier than http://derp78.github.com/hackathonname.)
If you need help setting up a CNAME, read this.
Filters & sponsors
Finding specific hacks, filtering for keywords, and providing sponsors with their judging lists is SUPER EASY with the expo app.
- You can use the search box to filter the entire table (all columns) based on any text string -- like hardware:
- You can set the filter by using URL parameters
Try this, add ?filter=SOME_API_NAME
to your url to create a unique, filtered list for each of your sponsors. For example, here's a list of hacks that mention Twilio:
Email them the link so they know exactly which tables to go to -- or take it a step further and print them a copy. The app contains custom print styles that save paper & ink.
Mobile browsing
We've included some 'sensible' mobile styles, which hide the category / special columns on small screens and collapse the borders.