A fast, responsive mini-game built with React to explore component state, interactivity, and accessibility best practices. Roll until all dice match — click dice to hold their value between rolls and keep going until every die shows the same number.
Core
- React (Vite)
- JavaScript (ES6+)
- CSS3 (Grid & Flexbox)
Tooling & Libraries
- ESLint
- nanoid
- react-confetti
- react-use
src/
├── components/
│ └── Die.jsx
├── assets/
│ ├── docs/
│ │ ├── future-todos.md
│ │ └── pseudocode.md
│ └── shots/
│ ├── scsh-01.png
│ ├── scsh-02.png
│ └── scsh-03.png
├── App.jsx
├── main.jsx
└── index.css
| Game Start | Selected Dice | Game Won |
|---|---|---|
 |
 |
 |
Through this project I practiced:
- Managing component state and derived logic in React
- Handling accessibility with
aria-pressed,aria-live, and keyboard focus - Lazy state initialization and conditional rendering
- Responsive layouts with CSS Grid and Flexbox
- Integrating third-party React libraries for UX polish
Detailed refactor ideas, accessibility updates, and planned features are documented here:
➡️ future-todos.md
These include:
- Extracting game logic into a custom hook
- Adding roll animations and dark mode
- Persisting scores and game state
-
Clone the repository
git clone https://github.com/yourusername/react-tenzies.git cd react-tenzies -
Install dependencies
npm install
-
Run the app locally
npm run dev
Note: Keep all dice state in the parent (
App) to maintain a single source of truth. Avoid derived or duplicated state in child components. Use refs for DOM focus management without triggering re-renders. See future-todos.md for more technical notes.
- Scrimba Course — Learn React
- YouTube Tutorial — Tenzies Game Walkthrough
- Dependencies — nanoid, react-confetti, react-use
Completed: October 2025
Status: Functional and stable — future improvements planned
This project demonstrates React fundamentals, accessibility awareness, and thoughtful UI design — packaged into a clean, self-contained mini-game. It’s designed as both a learning project and a showcase of professional development practices.