Quoi: your Quiz Nights gone digital

This is the third post of the Whitesmith’s Birthweek Hackathon series (1st and 2nd). This time I’m writing you about Quoi!

Why

First, a little context. Whitesmith does a lot of quizzes. Like a lot. Every Whitesmith gathering is celebrated with a Quiz, most of the times hosted by our Quiz Master. They are done with pen and paper and are usually about… everything. From Estádio da Luz capacity mixed with some obscure Citizen Kane trivia to some really geek culture (we’re all big nerds, after all).

We also join forces outside work to participate in some pub quizzes in Coimbra; one of them is Doctor Why, a popular pub quiz in Italy and Portugal. Doctor Why is a little different from most pub quizzes: every team has a remote game pad on their table and the questions are answered in real-time. The quickest team to answer correctly wins more points, and the quickest team to answer wrong loses more; this introduces a great dynamic to the game, since answering becomes more strategic.

The Hackathon

So there we were, at a little paradise called Loural, with the chance of doing something cool for the Hackathon. As we were having a Whitesmith Quiz that same week, Alexandra, Diogo, Nuno, Pedro, and myself came up with the idea of recreating our quizzes with that real-time experience by using a device that most of us have: a smartphone! And so, Quoi was born.

Say Quoiii?!

Quoi (\kwa\) is a web application for playing pub quizzes using a TV and your smartphone, where the fastest team to answer correctly gets more points.

Since we had a great opportunity to learn something new, we took the chance to work with technologies we had little to no experience with. They ended up being

• ES6 + Node.js back-end server
• React + Redux web apps
• React Native mobile app
• Electron to wrap this up into a nice desktop app

What does it look like?

The result

Does it work? Glad you asked. After the Quiz Master opens the desktop app and loads a CSV with the questions (s)he prepared for the evening, players just have to connect to the server with the mobile app and we’re ready to go! Every team gets 10 seconds to answer the questions that appear on the TV screen; if they get them right the smartphone goes green, and if not… it goes shame-red. The Quiz Master has full control over the pace of the game through the controls app, and chooses when to start the clock, and when to show the right answer and the team leaderboard on the TV, so every team knows where it stands. The winning team gets the praise of their colleagues for the evening (and maybe some beer?).

And now what

Most of the game works great, but… it could use some post-_let’s just ship this_ love:

• A simpler connection flow (e.g.: auto-discovering the server).
• The mobile app’s UI needs to be designed… by a designer!
• A team photo before the game begins (for a swagger ranking screen).
• Some other extras that could enhance the experience (wrong answer buzzers!).

We would love to work on Quoi more actively, but in the short-term we should be focused on maturing other projects of our own: Causa (blog post coming soon!) and Hawkpost (one of our Hackathon’s projects!).

The code and the git log are what is expected from a hackathon: very HOTFIX-ish. It’s an open-source project, so your issues and PRs on whitesmith/quoi-app and whitesmith/quoi-mobile are welcome!

I would like to thank the whole Quoi team for their work, I really enjoyed the result! And Whitesmith for giving us the opportunity to hack this during the week!

Keep shipping