Forem

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 🥹

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay