DEV Community

Cover image for Making a simple trivia Game
Nabil Alamin
Nabil Alamin

Posted on

1

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/

homepage

Source Code 🌟

GitHub logo arndom / wvfrm-trivia

A trivia game based off MKBHD's waveform podcast

About Waveform Trivia 🌟

demo

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

Development

# install dependencies
npm i

# run locally
npm run dev
Enter fullscreen mode Exit fullscreen mode

Leave a 🌟 if you found this interesting.




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 🤷‍♂️).

Intro GIF

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 🥹

SurveyJS custom survey software

Simplify data collection in your JS app with a fully integrated form management platform. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more. Integrates with any backend system, giving you full control over your data and no user limits.

Learn more

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more