Online Trivia Game

portfolio image

Online trivia game, built using Meteor.js and React. Features solo game, head-to-head game and multiplayer mode. I was inspired to build this by a friend who likes to create customized board/trivia games. Since the games he created used online trivia sites for questions, I realized I could make the task of managing the games easier by creating a site to house questions and keep track of players and scores. The site went through several iterations before it arrived at its current state.

I settled on Meteor.js as a development platform because it offered integration with MongoDB and user authentication out of the box. Even better, I found an excellent starter boilerplate called Pup by the company Clever Beagle that rolled in user creation and authentication by email and oauth, authenticated routing, and MongoDB collection creation all together. Awesome.

Since the Pup boilerplate included React Bootstrap, I decided to use Bootstrap as much as possible for the UI components, since it saved me development time and created nice visual consistency. For layout (especially the category and player select layout), I used CSS Grid with a Flexbox fallback. For the game wheel, I used the fantastic Winwheel.js library – many thanks to the developer for such a fun, customizable wheel component. For animations, I used the excellent React Flip Move library to animate player standings and category selection and React Transition Group for some CSS UI animation fun.

In the future, I would like to add some fun branding to the game, show player statistics, and most of all, make use of React Native to make this into a native app for iOS and Android. I think this game would make a great app, and I’m excited to learn how to build one.

The code for the site in its current form is available to view on GitHub.