This is a solution to the Rock, Paper, Scissors challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for the game depending on their device's screen size
- Play Rock, Paper, Scissors against the computer
- Maintain the state of the score after refreshing the browser ✓
- Bonus: Play Rock, Paper, Scissors, Lizard, Spock against the computer ✓
- Solution URL: https://github.com/Mooenz/rock-paper-scissors
- Live Site URL: https://mooenz.github.io/rock-paper-scissors/
- Semantic HTML5 markup
- CSS custom properties (Tailwind CSS)
- Flexbox
- CSS Grid
- Mobile-first workflow
- React - JS library
- TypeScript - For type safety
- Tailwind CSS - For styling
- Vite - Build tool
- Zustand - State management
During this project, I learned how to effectively use Zustand for state management in a React application. I also improved my skills in TypeScript by ensuring type safety throughout the codebase. Additionally, I gained experience in implementing responsive designs using Tailwind CSS and handling game logic for Rock, Paper, Scissors, Lizard, Spock.