The world is in a... state. We need something to keep us entertained and cheerful until we can leave our homes and gather with our friends in close groups again. And what better way than hosting a remote spring-themed quiz for all of our friends and loved ones?
Usually, our quizzes have a crucial pen and paper and swap-with-the-team-next-to-you element to them. Alas, not this time.
Luckily though, we are not only quiz queens and marathon quaranteeners, but also delightful devs, so we decided to create an app to provide an interactive peer marking experience for our quizees.
The goal was to make it reusable, easy to use and beautiful.
To see for yourself what we ended up with, visit the site on: https://jaquizzy.netlify.app/
This app connects to an Airtable database. You can access the required template here by clicking Copy base in the top right hand corner. Once copied into your own workspace, you can edit the fields of the quiz submission form and add in your own question names/categories.
The Airtable docs are really helpful when it comes to understanding the interface.
git clone https://github.com/tloth/mark-my-quizzy.git
Add your AIRTABLE_API_KEY to a .env file.
yarn install
yarn start
That's it! It's ready to view on http://localhost:3000 with netlify-lambda proxying the Netlify Functions requests to http://localhost:9000
The idea was simple. Three pages:
- A welcome page with a form.
- A marking page with another team's prefilled answers.
- A results page with live scores.
| Rough designs | |
|---|---|
 |
 |
With a week to go, we got to work.
- React
- Typescript
- Airtable
- @reach/router
- Netlify functions
- styled components
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent