react-scavenger-hunt

react-scavenger-hunt is a small React SPA written in TypeScript that displays an interactive, linear quiz intended to be used during (something akin to) a birthday present scavenger hunt. You can pull down this repo, write your own questions and answers, and use it yourself!

In action:

Features

• Include any number of questions
• Questions can accept more than one valid answer
• Full JSX support for rich, dynamic question content
• Progress saved in browser, so you can leave and resume where you left off
• Responsive, works great in a phone browser
• Fully open source and modifiable — tweak it exactly how you want it

Origin

I built this little quiz app in the first month of COVID-19 lockdown as a present for my partner and a way to keep in practice with React while I was looking for a new job. I've stripped the personal stuff from this repo and generalized it so anyone familiar with React can use it to make their own quiz.

Here's how the original quiz looked:

Feaured Versions

Over on Reddit, user JonnyKnipst made a custom version for their Reddit Secret Santa giftee! They also contributed a Dockerfile to this project 🙂.

Getting started

First, clone this repo to a machine with NodeJS and NPM installed. Then, in the repo directory:

$ npm i -g yarn
$ yarn

There shouldn't be much limitation re: Node/Yarn version, but this was developed against Node 12.

Creating your own quiz

It's pretty easy to get started making your own quiz. I’d follow these steps:

1. Edit src/data/QuizData.tsx, which contains the questions and answers for your quiz. Read through the ones already there, since they explain the supported features for question authoring.
   1. You can also change the emojis that cycle through on the start button by modifying the START_BUTTON_EMOJIS array in this file.
2. The main Animoji image in the middle of the header can be swapped by replacing the images in public/images. I used my partner's Memoji.
3. Change the <title> to a custom message, if you want.

Develop & build

The project is based on create-react-app, so the build toolchain should be familiar if you've used that before.

Develop locally

$ yarn start

This spawns a server at localhost:3000 with hot module reloading.

Build for production

$ yarn build

Built assets are written to the build directory. Point a static file server like serve to that directory and you're good to go.

Docker

Contributed by @Jonn3y

Starting a container

In order to use this project inside a docker container, just do:

docker build -t react-scavenger-quiz .
docker run -d --name react-scavenger-quiz -p 3000:80 react-scavenger-quiz

Now you can access the quiz at http://<ip-of-docker-server>:3000/

Stopping a container

You can stop the container by running:

docker stop react-scavenger-quiz

Deleting the outdated container

In order to start a new container after rebuilding the image, you might need to delete the old container first:

docker container rm react-scavenger-quiz

Now you can start a new container with the same friendly name --name react-scavenger-quiz:

docker run -d --name react-scavenger-quiz -p 3000:80 react-scavenger-quiz