Initially built with vanilla TypeScript, the Rock, Paper, Scissors game has now been upgraded to React with TypeScript and Framer Motion. This project reflects my continued focus on mastering TypeScript, beginning in a vanilla JavaScript environment, then evolving into React, and now adding smooth animations with Framer Motion. It's been a great learning experience, sharpening my skills and improving my code quality.
- v3 Live Site URL (Latest): Click here
- v2 Live Site URL: Click here
- v1 Live Site URL: Click here
- Solution URL: Click here
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 (optional)
- React
- TypeScript
- Framer Motion
- Tailwind CSS
- Vite
This project strengthened my understanding of TypeScript, beginning in a vanilla JavaScript environment, continuing with React and TypeScript in v2, and now including animations using Framer Motion in v3. It has helped me improve static typing, code clarity, and enforce safer coding practices, while also adding smooth, interactive animations to enhance the user experience.
- Clone this repo:
git clone https://github.com/CodeWithAlamin/Rock-Paper-Scissors.git- Install dependencies:
npm install- Live server:
npm run dev- Build command:
npm run build👤 Alamin
- LinkedIn - @CodeWithAlamin
- Twitter - @CodeWithAlamin
- GitHub: @CodeWithAlamin
- Frontend Mentor - @CodeWithAlamin
Feel free to contact me with any questions or feedback!
The project was inspired by this challenge from Frontend Mentor. Special thanks to Frontend Mentor for providing the design and specifications for this project.
This project is licensed under the Apache License 2.0 License - see the LICENSE file for details.