How I built the Tenzi dice game in React

Why Tenzi?

Before diving in, if you're new to Tenzi: it's a fast-paced dice game where the goal is to roll all ten dice to the same number as quickly as possible. Recreating this game is a rewarding React project, as it involves state management, conditional rendering, side-effect handling, and component logic, making for an engaging learning experience.

My approach

Instead of following along with the Scrimba tutorial solution, I decided to face the challenge head-on: I built the entire project from scratch. This gave me the freedom to experiment and revisit tricky concepts.

Here's what I added to elevate the project:

• Timer: Challenge yourself to win as fast as possible!
• Roll count:: Track how many times you roll the dice to win.
• Custom dice with pips: Each die has authentic "pips" for a real dice feel.
• Responsive design: The game is playable on desktop and mobile.

Key lessons & challenges

While building Tenzi in React, several aspects stood out:

• React state & props: Managing the game's state (dice values, hold status, timer) helped reinforce my understanding of how data flows in React.
• Effect hooks: I used useEffect to manage the timer and handle side effects such as starting, stopping, and resetting the timer based on the game state.
• Component structure: Breaking the game into smaller, reusable components.

See it in action

You can play the finished game right here:

Thanks for reading and happy coding!