Frontend development

React Trivia Game

Looking for a fun way to exercise your brain? Put your knowledge to the test with this mobile-first-design, addictive trivia game that's loaded with over 10,000 mind-boggling questions from an external source and covers a dozen categories.
Demonstrative image of the project
Client
Personal project
Year
2023
Project Type
Design & development
Scope

What's the best way to stay sharp within your craft? That's right. Practice.

This project was a simple test of my React skills one afternoon.

The idea?

Create a game with React that fetches data from an external source and renders it individually on the frontend based on the selected parameters by the user.

Goals
The primary goals of this project were:

1. Develop a trivia game with a seemingly endless amount of questions per category.

2. Utilize a mobile-first design flow

3. Maintain the user's score throughout the game to showcase upon completion.

4. Render the correct answers to the questions a user answered incorrectly after completion.

5. Add user authentication (magic links) to maintain a daily scoreboard.

Execution

The project was executed in multiple steps. First, I created a lo-fi mockup of what the UI would look like based on the optimal user flow. These mockups were done in excalidraw and transferred to Figma. No hi-fi mockups were made as the goal of this project was to spend a morning keeping my React skills sharp.

Second, I (lazily and regrettably, I know; vite is king these days.) bootstrapped the project with create-react-app. Development of the user workflow began with the homepage and a following page for the user to select a category.

Third, the game itself was created. This step included rendering one of five questions per page, including the answers for the question. The question was fetched as an object from the API containing all relevant information including, but not limited to, the question itself, incorrect answers, a category, and a correct answer.

Fourth, I utilized useState and useRef hooks to manage the state of game completion and a user's score to be rendered on the final page of the game - the Scorecard.

Finally, mobile-first styling was added to polish off a quickly developed trivia game that can be played on any device.

Results

A mobile-first-design, addictive trivia game that's loaded with over 10,000 mind-boggling questions from an external source and covers a dozen categories.

Passionately developed by Chris Tomshack