Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/codepapa360/rock-paper-scissors
A Rock-Paper-Scissors game built with React, TypeScript, and Framer Motion. Enjoy a clean, interactive experience with smooth animations
https://github.com/codepapa360/rock-paper-scissors
framer-motion framermotion frontend frontend-app frontend-mentor frontendmentor-challenge rock-paper-scissors rock-paper-scissors-game typescript
Last synced: 26 days ago
JSON representation
A Rock-Paper-Scissors game built with React, TypeScript, and Framer Motion. Enjoy a clean, interactive experience with smooth animations
- Host: GitHub
- URL: https://github.com/codepapa360/rock-paper-scissors
- Owner: CodePapa360
- License: apache-2.0
- Created: 2024-08-14T13:52:39.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2024-08-27T11:57:40.000Z (2 months ago)
- Last Synced: 2024-09-26T23:42:12.469Z (about 1 month ago)
- Topics: framer-motion, framermotion, frontend, frontend-app, frontend-mentor, frontendmentor-challenge, rock-paper-scissors, rock-paper-scissors-game, typescript
- Language: TypeScript
- Homepage: https://rps-game-v3-codepapa360.vercel.app
- Size: 894 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
Rock, Paper, Scissors Game v3
[🖱️Live Website v3](https://rps-game-v3-codepapa360.vercel.app)
[](https://www.linkedin.com/in/CodePapa360)
[](https://x.com/CodePapa360)
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.
## Table of contents
- [Links](#links)
- [The challenge](#the-challenge)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Future Upgrades](#future-upgrades)
- [Author](#author)
- [Acknowledgments](#acknowledgments)
- [License](#license)
### Links
- v3 Live Site URL (Latest): [Click here](https://rps-game-v3-codepapa360.vercel.app)
- v2 Live Site URL: [Click here](https://rps-game-v2-codepapa360.vercel.app)
- v1 Live Site URL: [Click here](https://rps-game-codepapa360.vercel.app)
- Solution URL: [Click here](https://www.frontendmentor.io/solutions/rock-paper-scissors-game-with-typescript-fe6IN10Ent)
### The challenge
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)_
## Built with
- React
- TypeScript
- Framer Motion
- Tailwind CSS
- Vite
## What I Learned
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.
## Installation
- Clone this repo:
```sh
git clone https://github.com/CodePapa360/Rock-Paper-Scissors.git
```
- Install dependencies:
```sh
npm install
```
- Live server:
```sh
npm run dev
```
- Build command:
```sh
npm run build
```
## Author
👤 Alamin
- LinkedIn - [@CodePapa360](https://www.linkedin.com/in/codepapa360)
- Twitter - [@CodePapa360](https://www.twitter.com/CodePapa360)
- GitHub: [@CodePapa360](https://github.com/codepapa360)
- Frontend Mentor - [@CodePapa360](https://www.frontendmentor.io/profile/CodePapa360)
Feel free to contact me with any questions or feedback!
## Acknowledgments
The project was inspired by [this](https://www.frontendmentor.io/challenges/rock-paper-scissors-game-pTgwgvgH) challenge from Frontend Mentor. Special thanks to Frontend Mentor for providing the design and specifications for this project.
## License
This project is licensed under the [Apache License 2.0](./LICENSE.md) License - see the LICENSE file for details.