May 2016
nhacks.io: an interactive demonstration
In sophomore year, I led a hackathon called nhacks. It was the first year that Nspire (Canada’s largest student-run business-tech non-profit) was running events of this scale, and I got to lead the one in London, Ontario. To make the hackathon happen, I built a registration platform to handle hacker acceptance, waitlisting, email notifications, as well as sponsor accounts and name tags.
Instead of discussing the code base, I’ll demonstrate its functionality by walking through its use case as the hackathon approaches.
Note: There’s nothing particularly unique about this website; that is, it doesn’t have a particularly intelligent design or feature set. However, this was a project I built by myself in the midst of the most difficult academic year of my undergraduate education, while also working on the hackathon itself - sponsorship, ad campaigns, venue, etc. I’m proud of how functional it is, given that I was in second year and hadn’t really learned much about building complex systems - hell, I hadn’t even learned to use git yet! So I’m proud of having built this project, and although yes, it is basically just a CRUD app, it’s one that I’m fairly happy with.
Getting Started
Visit the NHacks demo at http://nhacks-demo.herokuapp.com. It’s running on a free Heroku dyno, so it might take ~5 seconds to spin up the first time.
Remember to use fake (but tasteful) information—this is a public demo, and anyone can see what you’ve entered.
Note that Heroku will refresh the database at 09:30 UTC (04:30 ET) every day, so if you are accessing this demonstration at around this time, the database might reset on you.
Three Months Before NHacks
Apply | Hacker
Visit the home page at nhacks-demo.herokuapp.com. Read a little about Nspire and NHacks, and decide if you want to apply or not (yes, you do!)
Scroll back up, and click APPLY.
Fill in your fake information—take care to remember the email address you entered! It’ll be your password for this demo. You’ll notice the placeholder “Trump University” — this website is from when President Trump was a punchline, not a fact.
nhacks.io originally confirmed registration by sending an email that included a strong, randomly generated password. Because email features have been removed for this demo, I’ve made the password equal to the email.
Click NHacks Home (top left) to return to the home page.
Revise Your Application | Hacker
Suppose you realize that you accidentally uploaded your final report instead of your resume, and you want to upload a new file.
Click LOGIN.
Enter the fake email address you signed up with in both the email and password text boxes.
The email address serves as the password only for this demonstration — this was not a feature in production.
Click LOGIN
Feel free to update your resume and/or skills! Remember to save before you log out.
One Month Before NHacks
Review Applications | Administrator
Let’s switch gears for a moment: you’re now a hackathon administrator, and you work with me on the NHacks team.
Registrations have gone well; we’re just about to close the registration, and we’ve reached over 1000 applications. Let’s log in to view them.
Navigate to the login page.
Login to the administrator account with the email admin@nhacks.io and password ‘administrator’.
If this doesn’t work, then someone must have changed the administrator password. Sorry, but you’ll have to check in after the database refreshes again!
Scroll down and click into any of the applications. I’ve included a few example ones with @labanl.in email addresses. You should be able to view the entire application.
Due to Heroku’s ephemeral file system structure, resumes may not show up.
Click the User Details tab. Here, you can make any changes you need to a user’s account if you need to. Notice the QR code at the bottom—we’ll come back to that.
Suppose you really like this applicant—let’s approve him/her! At the top, in the orange box, change Application Decision to Approved and select Update.
Congratulations: you’ve just approved your first hacker to your hackathon!
When hackathon registration closed, the web application sent out emails to all applicants to notify them of their status. Accepted hackers could log in to accept their spot and provide their t-shirt size and dietary restrictions; everyone else could sign up for waitlist spots. Every time a hacker who was accepted declined their spot, the system would send a new email to the next waitlisted hacker from the same school. This maximized the number of hackers we could accept without changing logistics numbers for each school.
For brevity, I’ve chosen to remove this feature from the demonstration.
Fulfill Sponsor Perks | Administrator, Sponsor
Administrator
Remember, you’ve got to take care of your sponsors—after all, they are the ones that make this possible. Some sponsors will have negotiated access to application resumes. To give them access, click Create User in the teal panel on the left of the control panel.
Supply an email address and select Sponsor for Account Type. Provide a first name and last name, and click Create.
Sponsor
Switch to being a sponsor: you’ve financially supported this hackathon to build your brand awareness and increase visibility in front of exceptional potential future hires.
You just received an email inviting you to view applicant resumes! To download a zip file with the resumes, first log in with your newly created account (the one that you, as an administrator, created moments ago).
Once again, the password is set to the email address.
In the teal box on the left, click on any of the download links to see what kind of hackers are attending our hackathon!
Log out (top left).
Screen Resumes | Sponsor
Switch gears again — now you’re a administrator, and you’ve financially supported this hackathon to build your brand awareness and increase visibility in front of exceptional potential future hires.
You just received an email inviting you to view applicant resumes! To download a zip file with the resumes, first log in with your newly created account (the one that you, as an administrator, created moments ago).
Once again, the password is set to the email address.
In the teal box on the left, click on any of the download links to see what kind of hackers are attending our hackathon!
Log out (top left).
One Week Before NHacks
Create Name Tags | Administrator
Switch gears — now you’re an administrator again.
Sponsors are now happy, and hackers have been notified. Your operations associate has sorted out the bus arrangements. It’s time to prepare for the day of.
We ran NHacks at the London Central Public Library. For security purposes, we had to be able to ensure that everyone allowed in the building after hours was authorized to be present. To do this, I built an iOS app that could scan QR Codes and verify their validity via web API served by this web application. To ensure QR Codes were authentic, their content included the hacker’s database user id, which is not otherwise exposed to the user in any way.
To make everyone a name tag, click Generate Name Tags in the teal box in the main control panel.
Select all users (or just the ones you want) and click Generate Selected Name Tags.
The system used to have a process where users had to allowed entry into NHacks on a separate page before their name tags could be generated. Volunteer staff, sponsors and accepted hackers were automatically allowed entry, but could manually be denied entry. This made sure we could enforce security at all points of entry.
Ta-da!
Congratulations — you’re ready to run NHacks! See you there.