https://github.com/shivamsaurabh25/tic-tac-toe
🎮 Tic Tac Toe Deluxe – A modern, animated Tic Tac Toe game built with React and Tailwind CSS. Features dark/light mode, player forms, scoring system, endless mode, confetti celebration, glowing UI effects, and responsive design
https://github.com/shivamsaurabh25/tic-tac-toe
tic-tac-toe tic-tac-toe-endless tic-tac-toe-react
Last synced: 8 months ago
JSON representation
🎮 Tic Tac Toe Deluxe – A modern, animated Tic Tac Toe game built with React and Tailwind CSS. Features dark/light mode, player forms, scoring system, endless mode, confetti celebration, glowing UI effects, and responsive design
- Host: GitHub
- URL: https://github.com/shivamsaurabh25/tic-tac-toe
- Owner: shivamsaurabh25
- Created: 2025-04-23T17:29:30.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-30T13:41:50.000Z (about 1 year ago)
- Last Synced: 2025-07-05T13:32:56.760Z (12 months ago)
- Topics: tic-tac-toe, tic-tac-toe-endless, tic-tac-toe-react
- Language: JavaScript
- Homepage: https://tic-tac-toe-endless.vercel.app
- Size: 336 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Tic Tac Toe Deluxe ⭕❌⌗
A modern and animated **Tic Tac Toe** game built using **React** and **Tailwind CSS**, packed with stylish UI, dark/light mode toggle, score tracking, endless mode, confetti celebration, and glowing UI effects.
---
## Features
- **Multiplayer Support** – Enter names and play as Player X and Player O.
- **Game Modes**
- **Normal Mode**: Classic play until someone wins or it's a draw.
- **Endless Mode**: Keep playing rounds without a reset.
- **Dark/Light Mode** toggle
- **Scoreboard** for both players
- **Confetti Celebration** on win
- **Tile Fade Indicator** before disappearing
- **Responsive Design** – Works well on mobile and desktop
- **Multicolor Glow Effect** behind logo for visual flair
- **Smooth animations** and transition effects
---
## Tech Stack
- **Frontend**: React.js, Tailwind CSS
- **Animations**: Custom CSS + Tailwind utilities
- **State Management**: React useState, useEffect hooks
---
## Getting Started
### Prerequisites
- Node.js and npm installed on your machine
### Installation
1. **Clone the repo**
```bash
git clone https://github.com/shivamsaurabh25/Tic-Tac-Toe.git
cd Tic-Tac-Toe
```
2. **Install dependencies**
```bash
npm install
```
3. **Start the development server**
```bash
npm run dev
```
4. Visit `http://localhost:5173` (or the Vite default port) in your browser.
---
## Folder Structure
```bash
📂Tic-Tac-Toe/
├── 📂Assets/
│ ├── favicon.png
├── 📂src/
│ ├── 📂components/
│ │ ├── Navbar.jsx
│ │ ├── BoardGame.jsx
│ │ ├── PlayerForm.jsx
│ │ └── Scoreboard.jsx
│ ├── styles/
│ │ └── index.css
│ ├── App.jsx
│ └── main.jsx
├── .gitignore
├── index.html
├── package.json
├── postcss.config.js
├── README.md
├── tailwind.config.js
├── vite.config.js
```
---
## Customization
- Change glow styles and animations in `Navbar.jsx`
- Add new game modes or rules in `BoardGame.jsx`
- Modify scoring logic in `App.jsx`
---
## Author
Made with ❤️ by [Shivam](https://github.com/shivamsaurabh25)
---
## License
This project is licensed under the MIT License.