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.
Try the game live here.
- 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.
src
├── assets/
│ ├── cross-icon.png
│ └── circle-icon.png
├── components/
│ ├── TicTacToe/
│ │ └── TicTacToe.jsx
│ └── styles.css
├── App.js
├── index.js
└── README.md
- React: Frontend JavaScript library for building user interfaces.
- CSS3: For styling and creating glassy and neon effects.
- HTML5: For structuring the web page.
- 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.
- Clone the repository:
git clone https://github.com/your-username/tic-tac-toe-react.git
- Navigate to the project directory:
cd tic-tac-toe-react
- Install dependencies:
npm install
- Run the app:
npm start
- Open the game in your browser.
- Click on any box to place your move (X or O).
- The game automatically checks for a win or draw.
- Press the RESET button to start a new game.
To deploy this project on platforms like Netlify or Vercel, follow these steps:
- Build the project:
npm run build
- Deploy the
build
folder on your preferred hosting service.
Contributions are welcome! Feel free to fork this repository, submit issues, or open pull requests.
This project is licensed under the MIT License.
🌟 Star this repository if you enjoyed playing this game or found the project helpful! 😊