A simple and fun dice game built with React.js, where the player rolls dice until all are the same number. Players can “hold” dice to keep their values while rolling the rest — a quick, addictive mini-game demonstrating React hooks and state management.
i. Roll dice until all match
ii. Hold dice to lock their values
iii. Reroll only unheld dice
iv. Track number of rolls and time taken
v. Built entirely with React functional components and hooks
vi. Save best score in local storage
- Click Roll to roll all dice.
- Click on individual dice to hold them at their current value.
- Keep rolling until all dice show the same number.
- Once all dice match, you win 🎉
tenzies/
├── public/
├── src/
│ ├── components/
│ │ └── die.jsx
│ │ └── main.jsx
│ ├── App.jsx
│ ├── index.jsx
│ └── App.css
├── package.json
└── README.md
i. git clone https://github.com//tenzies-game.git
ii. cd tenzies-game
iii. npm install
iv. npm start
- Add animations for rolling dice
- Add timer and leaderboard
- Add dark/light mode
- Make it responsive for mobile
- Local multiplayer — allow friends on the same network to play together:
- Create/join a local lobby, sync dice rolls and held-dice across clients, and show shared roll/score state in real time.
- Options considered: WebRTC peer-to-peer (no central server), WebSocket with a small local host, or a hosted realtime DB for quick prototyping.
This project helped me learn:
- React state management with hooks (useState, useEffect)
- Component-based architecture
- Conditional rendering
- CSS styling and layout with Flex/Grid
- Deploying a React app to GitHub Pages / Netlify