https://github.com/urayushjain/tacwin
Modern, neon-themed Tic Tac Toe game with React. Responsive design, cool CSS effects, and a twist on the classic game!
https://github.com/urayushjain/tacwin
game reactjs tic-tac-toe
Last synced: 2 months ago
JSON representation
Modern, neon-themed Tic Tac Toe game with React. Responsive design, cool CSS effects, and a twist on the classic game!
- Host: GitHub
- URL: https://github.com/urayushjain/tacwin
- Owner: URAYUSHJAIN
- Created: 2024-11-17T18:16:07.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-11-18T06:44:00.000Z (7 months ago)
- Last Synced: 2025-02-03T02:57:43.475Z (4 months ago)
- Topics: game, reactjs, tic-tac-toe
- Language: JavaScript
- Homepage: https://tacwin.vercel.app
- Size: 188 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🎮 Tacwin-Glassy Tic Tac Toe Game
A beautifully designed **Tic Tac Toe** game with a modern glassy, neon-themed interface. Built using **React**, this project is a fun way to revisit a classic game while showcasing responsive design and CSS effects.
## 🌐 Live Demo
Try the game live [here](https://tacwin.vercel.app).
## 🚀 Features
- **Interactive Gameplay**: Play against yourself in this engaging game.
- **Neon & Glassy UI**: Modern interface with glassy effects and neon accents for a futuristic look.
- **Responsive Design**: Optimized for mobile and desktop screens.
- **Reset Button**: Restart the game anytime with a single click.
## 📂 Project Structure
```plaintext
src
├── assets/
│ ├── cross-icon.png
│ └── circle-icon.png
├── components/
│ ├── TicTacToe/
│ │ └── TicTacToe.jsx
│ └── styles.css
├── App.js
├── index.js
└── README.md
```
## 🛠️ Technologies Used
- **React**: Frontend JavaScript library for building user interfaces.
- **CSS3**: For styling and creating glassy and neon effects.
- **HTML5**: For structuring the web page.
## 🎨 Design Highlights
- **Glassy Effect**: Utilizes `backdrop-filter` and semi-transparent backgrounds for a glass-like look.
- **Neon Glow**: Icons for X and O have a vibrant neon glow effect using `filter: drop-shadow`.
- **Smooth Transitions**: Interactive hover and click animations for a seamless user experience.
## 💻 How to Run Locally
1. **Clone the repository**:
```bash
git clone https://github.com/your-username/tic-tac-toe-react.git
```
2. **Navigate to the project directory**:
```bash
cd tic-tac-toe-react
```
3. **Install dependencies**:
```bash
npm install
```
4. **Run the app**:
```bash
npm start
```
## 📱 Usage Instructions
1. Open the game in your browser.
2. Click on any box to place your move (X or O).
3. The game automatically checks for a win or draw.
4. Press the **RESET** button to start a new game.
## 📦 Deployment
To deploy this project on platforms like **Netlify** or **Vercel**, follow these steps:
1. Build the project:
```bash
npm run build
```
2. Deploy the `build` folder on your preferred hosting service.
## 🤝 Contributing
Contributions are welcome! Feel free to fork this repository, submit issues, or open pull requests.
## 🛡️ License
This project is licensed under the [MIT License](LICENSE).
---
🌟 **Star this repository** if you enjoyed playing this game or found the project helpful! 😊