Tic Tac Toe Game

A simple, responsive Tic Tac Toe game built with React and Vite. This classic game allows two players to compete on the same device, with a sleek and user-friendly interface.

---

🚀 Features

• Two-Player Mode: Enjoy the game with a friend on the same screen.
• Score Tracking: Keep track of scores across multiple rounds.
• Game Reset: Reset the current game without losing the score.
• New Game: Start a fresh game with a clean slate.
• Responsive Design: Optimized for both desktop and mobile devices.
• Modern Styling: Built with Tailwind CSS for a clean and polished look.

---

📂 Project Structure

src/
├── assets/          # Static assets (e.g., images)
├── components/
│   ├── AnnounceWinner.jsx   # Announce winner
│   ├── Board.jsx            # Main game board logic
│   ├── Square.jsx           # Individual square component
│   ├── GameInfo.jsx         # Displays game status and result
│   └── Scoreboard.jsx       # Tracks player scores
├── App.jsx          # Root React component
├── main.jsx         # Entry point for the React app
├── index.css        # Global styles
├── tailwind.config.js # Tailwind CSS configuration
└── ...

---

🛠️ Built With

• React: A JavaScript library for building user interfaces.
• Vite: A fast and modern build tool for web projects.
• Tailwind CSS: A utility-first CSS framework for styling.

---

🖥️ Demo

Desktop View

Mobile View

---

🚧 Prerequisites

Ensure you have the following installed:

• Node.js (v14 or higher)
• npm or yarn

---

📦 Installation

1. Clone the repository:

   git clone https://github.com/thesaiteja24/tic-tac-toe-react.git

2. Navigate into the project directory:

   cd tic-tac-toe-react

3. Install dependencies:

   npm install

   or

   yarn install

---

🛠️ Usage

1. Start the development server:

   npm run dev

   or

   yarn dev

2. Open your browser and navigate to:

   http://localhost:5173
   

---

🛡️ How to Play

• Players take turns placing their marks (X or O) on the grid.
• The first player to align three marks in a row (horizontally, vertically, or diagonally) wins the round.
• If all squares are filled and no player wins, the round ends in a draw.
• Use the "Reset" button to restart the round or "New Game" to reset scores and start fresh.

---

🌟 Customization

Future Enhancements

• AI Mode: Play against the computer with adjustable difficulty levels.
• Themes: Add light and dark themes for better user customization.
• Online Multiplayer: Challenge friends remotely using WebSocket or similar technology.

Styling

You can customize styles in index.css or the Tailwind CSS configuration file.

---

🧪 Build for Production

To create an optimized production build:

npm run build

or

yarn build

The build will be available in the dist folder.

---

📜 License

This project is licensed under the MIT License. See the LICENSE file for details.

---

🤝 Contributing

Contributions are welcome! Follow these steps:

1. Fork the repository.
2. Create a feature branch:

   git checkout -b feature-name

3. Commit your changes:

   git commit -m "Add some feature"

4. Push to the branch:

   git push origin feature-name

5. Open a Pull Request.

---

💬 Feedback

If you have any feedback or suggestions, feel free to reach out at iamsaiteja2411@gmail.com or create an issue on this repository.

---

📄 Acknowledgments

• React for its incredible library.
• Vite for the fast and efficient development experience.
• Tailwind CSS for its elegant utility-first design.

---

Let me know if you want further refinements or have specific sections to add! 😊