Here's a react app I built to play one of my favorite dice games, Tenzie! How fast can you roll to get all dice the same?!
Link to project: https://tenzies-react-patterson.netlify.app/
Tech used: HTML, CSS, JavaScript, React
In this project, I utilized React's useState and useEffect hooks to manage the game's state and logic efficiently. To enhance the user experience, I employed CSS to display real dots on the dice for a visually engaging interface. The app keeps track of the number of rolls and even saves the lowest number of rolls to local storage so that players can challenge themselves to beat their previous records. The code provided in app.jsx demonstrates the core functionality, including rolling the dice, holding them in place, and checking for a winning condition when all dice show the same value. It also includes a confetti animation to celebrate a successful "Tenzies" roll. This app provides an enjoyable gaming experience and encourages players to aim for the best roll count.
In the process of building this React app for "Tenzies," I gained valuable experience in utilizing the useState and useEffect hooks to efficiently manage the application's state and update it in response to user interactions. Additionally, I deepened my understanding of CSS by implementing visual enhancements, such as displaying realistic dots on the dice. These lessons have not only improved my React skills but also expanded my knowledge of front-end development, making me more proficient in creating dynamic and visually appealing web applications.
Take a look at these other projects that I have in my own portfolio:
Bug-Tracker Full Stack App: (https://github.com/deanp04/bug-tracker-app-full-stack)
Restaurant Menu Explorer: (https://github.com/deanp04/restaurant-menu-explorer)
Client-Side Star Wars API: (https://github.com/deanp04/client-side-star-wars-api)