I wanted a cool new way for streamer to interact with their audiences. Trivia game shows have always been popular on television, so why not bring that to Twitch and allow everyone to play!

What it does

It allows broadcaster to host trivia game shows and play with their audience live.

How I built it

Stream trivia comes in two part, the game screen and the screen overlay. The game screen is what the broadcaster is going to stream, it will show questions, results and leaderboard. The screen overlay is what the participants will use to interact with the game. It will let you join games, answer questions and keep track of your position.

The front-end is made with react, the back-end is using node and I use Redis to store the state of the game.

Challenges I ran into

The biggest challenge was to keep the video and overlay in sync. I wanted to have the question appear on stream at the same time as the choices appear on the overlay. To overcome that, I put an option to adjust the stream delay time so everything can show up at once and get the reaction of the streamer in sync with the rest. While it cannot be perfect every time, if you can reduce the delay to 2-3 seconds, it doesn't affect the game much.

Accomplishments that I'm proud of

Making sure the back-end could handle lots of request in very short amount of time.

What I learned

How to save data efficiently using redis.

What's next for Stream trivia

The next feature i'd like to implement is the ability for broadcaster (or maybe even viewers) to create their own set of questions.

Share this project: