Making a simple trivia Game

TLDR

I created a trivia game over the past couple of weeks. It's inspired by the Waveform podcast that comes out weekly on Fridays.

Play: https://www.wvfrmtrivia.xyz/

Source Code 🌟

arndom / wvfrm-trivia

A trivia game based off MKBHD's waveform podcast

About Waveform Trivia 🌟

A simple trivia game made with NextJS, Typescript, Material-UI and Firebase.

Development

# install dependencies
npm i

# run locally
npm run dev

Leave a 🌟 if you found this interesting.

View on GitHub

The Idea

I watch the Waveform podcast the MKBHD team hosts on Fridays after work. It's a great way to catch up on tech plus their personalities also make it more enjoyable. They have this entertaining trivia segment that ranges across tech, science and randomness.

Sometime last year a fan built a dashboard with stats for the segment and it was so nice to see that I got inspired to make a game out of it(there's also been a lack of hackathons 🤷‍♂️).

How I built it

I used these to build the app

• NextJS
• MUI
• Firebase (Firestore and Cloud Functions)
• Vercel

I got the question bank from the source of the dashboard created by Howie Adderly. After which I wrote a script to upload to firestore...it's pretty weird that firestore still doesn't support JSON imports directly. After which it was a matter of building out the UI and functionalities of the app.

I was able to build some of these features with the others on the way:

• Gameplay
• Anonymous users with a point system
• Leaderboard (Currently limited)
• Social sharing (TBD)
• Push Notifications (TBD)
• Community Questions via FireCMS (TBD)

I hope you enjoyed the game

PS: I recently joined Twitter and made a post about this, some love there would be nice 🥹