# 🎮 Real-time Multiplayer Tic-Tac-Toe

A feature-rich, real-time multiplayer Tic-Tac-Toe game built with modern web technologies.
Play against friends online or challenge an intelligent AI opponent — all within a beautiful, responsive interface.

---

📋 Table of Contents

• ✨ Features
• 🛠 Technologies Used
• 📁 Project Structure
• 👨‍💻 Author

---

✨ Features

🎯 Core Gameplay

• 🕹️ Real-time Multiplayer (PvP): Play with friends online using WebSocket connections
• 🤖 AI Opponent (PvC): Challenge a smart AI with strategic gameplay
• 👥 Local Multiplayer: Play with a friend on the same device
• 🏠 Private Game Rooms: Create/join private rooms with unique room IDs
• 🔄 Live Game State Sync: Real-time synchronization of board and moves
• 🧠 Win/Draw Detection: Automatically detects game outcomes
• 🕓 Player Turn Management: Clear indication of current player
• 🔁 Instant Rematch: Quick replay option
• 📱 Responsive Design: Fully optimized for desktop, tablet, and mobile
• 🌙 Dark Mode: Beautiful dark theme for enhanced UX
• ⚡ Disconnect Handling: Graceful player drop management
• 📰 Live Status Updates: Real-time feedback on all actions

---

🛠 Technologies Used

⚛️ Frontend

Technology	Version	Purpose
React	19.1.1	Component-based UI framework
Vite	7.1.7	Lightning-fast build tool
React Router DOM	7.9.3	Client-side routing
Socket.IO Client	4.8.1	Real-time event-based communication
Tailwind CSS	4.1.13	Utility-first CSS framework

🧩 Backend

Technology	Version	Purpose
Node.js	—	JavaScript runtime
Express	5.1.0	Web framework
Socket.IO	4.8.1	WebSocket server
CORS	2.8.5	Cross-origin requests
dotenv	16.4.5	Environment variable management
Nodemon	3.1.10	Auto-restarting dev server

---

📁 Project Structure

frontend/
├── src/
│   ├── components/
│   │   ├── Board.jsx
│   │   ├── BoardView.jsx
│   │   ├── Square.jsx
│   │   ├── Game.jsx
│   │   ├── GameModeSelector.jsx
│   │   ├── GameControls.jsx
│   │   ├── PvPSetup.jsx
│   │   ├── WinnerPopup.jsx
│   │   ├── Logo.jsx
│   │   └── utils/
│   │       ├── socket-client.js
│   │       └── ai.js
│   ├── hooks/
│   │   └── useTicTacToe.js
│   ├── App.jsx
│   ├── main.jsx
│   └── App.css
└── package.json

backend/
├── index.js
├── package.json
└── .env

---

👨‍💻 Author

🧑‍💻 Vijay kumar

Hi! I'm Vijay kumar, a passionate full-stack developer who loves building interactive web applications.
This project was born from my desire to explore real-time web technologies and create something fun and engaging.

---

🚀 About This Project

This Real-time Tic-Tac-Toe Game represents my journey in mastering:

• ⚡ Real-time Communication: Implementing WebSocket connections with Socket.IO
• 🧩 Full-Stack Development: Building both frontend and backend from scratch
• 🧠 Game Logic: Designing intelligent AI algorithms and win detection systems
• ⚛️ Modern React: Leveraging React 19 with hooks and custom state management
• 💻 Responsive Design: Creating beautiful UIs with Tailwind CSS

---

💡 Key Implementations

Through this project, I gained hands-on experience with:

• 🔌 WebSocket Architecture: Real-time bidirectional communication
• 🎮 Game State Management: Synchronizing state across multiple clients
• 🤖 AI Algorithm Design: Building strategic decision-making systems
• 🎨 UI/UX Design: Creating intuitive and engaging user interfaces with AI

---

---

📊 Project Stats

• 🕒 Development Time: ~1 week
• 🧰 Technologies Used: React, Node.js, Express, Socket.IO, Tailwind CSS
• ☕ Coffee Consumed: Too many to count!

---

Made with ❤️ and lots of ☕ by Vijaykumar

---