I built an application to distribute GitHub stickers to my class

(Eric Boivin) #1

Hi all! I teach Web development technologies at École de technologie supérieure in Montréal, Québec, a university class for future IT engineers. My course is about showing current technologies used for Web development such as modern JavaScript frameworks and REST APIs. I’ve been enrolled in the GitHub Education program since many years, with great success. Back in my days, there was no Classroom, you kids have it easy these days! shake fist at clouds

All kidding aside, when I got this year’s bundle for my 49 students, I was astounded by the stickers. Every year, this is a blast for students. Stickers are like the boy scout badges: people wear them with pride, and they really work hard to get the stickers for the technologies they like. My course being a solid introduction on GitHub, and the Octocat being such an iconic mascot, everybody wants their sticker. But this year, it was different. I didn’t get 4-5 designs like usual: I got 26. 2 copies of each, some being amazing. In the past, I was just dropping the stickers on the desk in front, and people came to get stickers. Some stickers were more popular than others, but that’s fine with me. However, this year, this couldn’t do. So to avoid any potential trampling damage, I decided that I should create a way so that students can claim their sticker. So without further ado, here’s my humble first contribution to the teaching community at GitHub.

The application is built using a popular Web framework, Vue.js. I teach Web technologies so I try to do demonstrations in class that use modern approaches. The application uses a MongoDB database, a node.js backend and is ready to be hosted on Heroku thanks to its integration with GitHub.

The flow is pretty simple. First, I need to give to students an URL with a unique key in it. The way I found for distributing it was that I gave a homework to students, and told them that there would be an incentive for finishing it as quickly as possible. Once they submitted their assignment, I went to do the grading. To do this I give the mark and the comments about their work in their readme, and then I provided them a URL to my application with their key embedded. (Screenshots will be in French, but I think you can get the gist of it :wink:

Students are then notified that their homework has been graded. The commit name I do to their repository is “Correction + surprise!”, so they can see in their emails that this might be work looking what I was committing. In the readme, they could then find the URL. Once clicking on it, they would access the application, providing their unique access key.

Once the key is submitted, the student gets to the surprise, a picture with all the available GitHub stickers! There’s a little text above it that explains that stickers are a big deal in the open source community, and that GitHub stickers are very popular. They can then click on the sticker of their choice to confirm their reservation. The backend knows how many stickers have been reserved so far, so when a sticker is out of order, the click is deactivated. Also, if a sneaky student tries to send an API call to reserve a sticker they shouldn’t have access, they get denied. They can’t also reserve more than 1 sticker.

And then, you’d ask me, how did I do the actual distribution of the stickers? I simply used a paperclip and put the sticker the student chose in their mid-term exam, so when I distributed them, they also got their sticker, just like when we were kids and we got our exams in elementary school!

So, there you have it! If you’re interested to check the application itself, it is available on Heroku here. I’m on a free plan, so the startup can take a little while. The code itself is on https://github.com/ericboivin/github-stickers-chooser.

You are totally free to fork it and deploy it for your own course! I am available to answer all your questions, for example on the data structure. But I know that it would be better to improve the app for the community. In the craze of the semester, I’ve done this application just for my class. But I want to maybe expand this app so that other teachers could use it.

So I’ll start soon to at least create issues on things I’d like to improve (or if anybody feels like it, send a pull request my way!). Some of these things include:

  • Translation
  • Support for multiple classes
  • Student roster generation
  • Attribution UI to know which student reserved which sticker, rather than going in the database
  • And finally, but not least! Once you rollover a sticker or you try to reserve one, you see the official name of the Octocat. I wanted to give a nod to the creators of the Octocats and followed the names recorded in the wonderful Octodex. Sadly, not all the stickers Octocats were there! Otherwise I would have used those high quality images rather than my bad camera picture! But thanks to @sanicki, our wonderful manager here, I got all the Octocats that are missing in the Octodex and I can give them their right name and a decent picture!

May this application bring joy to your students, and prevent any trampling injuries in your classes!

(Johan Kohlin) #2

How do you apply to get stickers?

(Eric Boivin) #3

Hi Johan! If you have an organization enrolled in the program, you can apply here: https://education.github.com/contact

(Michael Musgrove) #4

That’s fantastic! Thanks for sharing. Stickers haven’t ever been unpopular. Even all the way back when I was in school all the cool kids had the best stickers. Now the nerds have the best. :slight_smile: