🎮 Advanced Tic Tac Toe Game

A modern, feature-rich Tic Tac Toe game with AI, user authentication, and responsive design

---

✨ Features

🎮 Game Modes

• 🤖 AI vs Human - Challenge an intelligent AI opponent
• 👥 Human vs Human - Play with friends locally
• 🎯 Multiple Match Types - Single game, Best of 3/5/7, or custom rounds

🔐 User Authentication

• 📝 Sign Up/Login - Secure user registration and authentication
• 👤 User Profiles - Personalized gaming experience
• 🔒 JWT Authentication - Secure session management

📱 Responsive Design

• 📱 Mobile Optimized - Perfect gameplay on all devices
• 💻 Desktop Enhanced - Rich experience on larger screens
• 🎨 Modern UI - Clean, intuitive interface with smooth animations

🧠 Smart AI

• 🎯 Minimax Algorithm - Challenging AI opponent
• ⚡ Real-time Moves - Instant AI responses
• 🎲 Strategic Gameplay - AI makes optimal moves

🎪 Advanced Features

• 📊 Match Tracking - Round-by-round score tracking
• 🏆 Win Detection - Animated strike-through for wins
• 🔄 Game State Management - Seamless game flow
• 💫 Smooth Animations - Engaging visual feedback

---

🛠️ Tech Stack

Frontend

Backend

Deployment

---

🚀 Quick Start

Prerequisites

• Node.js 16+ installed
• MongoDB database (local or cloud)

1. Clone the Repository

git clone https://github.com/saurabhduhariya/tic-tac-toe.git
cd tic-tac-toe

2. Backend Setup

cd Backend
npm install

# Create .env file with your MongoDB URI
echo "MONGO_URI=your_mongodb_connection_string" > .env
echo "JWT_SECRET=your_jwt_secret_key" >> .env

npm start

3. Frontend Setup

cd ../Frontend
npm install
npm run dev

4. Open Your Browser

Navigate to http://localhost:5173 and start playing! 🎮

---

🎮 How to Play

🎯 Game Modes

1. vs AI: Challenge the computer - you're X, AI is O
2. vs Human: Local multiplayer - take turns on the same device

🏆 Match Types

• Single Game: One quick round
• Best of 3/5/7: First to win majority of rounds
• Custom: Set your own number of rounds (1-100)

📱 Controls

• Desktop: Click on any empty square
• Mobile: Tap on any empty square
• Responsive: Seamless experience across all devices

---

🏗️ Project Structure

tic-tac-toe/
├── 📁 Frontend/                 # React frontend
│   ├── 📁 src/
│   │   ├── 📁 components/       # React components
│   │   │   ├── 📁 Auth/         # Authentication components
│   │   │   ├── 📁 Game/         # Game-related components
│   │   │   ├── 📁 Sidebar/      # Game controls
│   │   │   ├── 📁 Tic-Tac-Toe/  # Core game components
│   │   │   └── 📁 AI/           # AI logic
│   │   ├── 📁 utils/            # Utility functions
│   │   └── 📄 index.css         # Global styles
│   └── 📄 package.json
├── 📁 Backend/                  # Node.js backend
│   ├── 📁 Controllers/          # Route controllers
│   ├── 📁 Middleware/           # Auth middleware
│   ├── 📁 models/               # Database models
│   ├── 📁 Routes/               # API routes
│   └── 📄 index.js              # Server entry point
└── 📄 README.md                 # You are here! 📍

---

🧠 AI Algorithm

The AI uses the Minimax algorithm with the following features:

• 🎯 Perfect Play: AI never loses, only wins or draws
• ⚡ Optimized Performance: Efficient move calculation
• 🎲 Strategic Depth: Looks ahead to make optimal moves
• 🔮 Predictive Analysis: Considers all possible outcomes

// Simplified AI logic
function minimax(board, depth, isMaximizing) {
  // Base cases: check for terminal states
  if (checkWinner(board) === AI_PLAYER) return 10 - depth;
  if (checkWinner(board) === HUMAN_PLAYER) return depth - 10;
  if (isDraw(board)) return 0;
  
  // Recursive minimax with alpha-beta pruning
  // ... (full implementation in /Frontend/src/components/AI/aiLogic.js)
}

---

🌟 Key Features Breakdown

🎨 UI/UX Features

• ✨ Smooth animations and transitions
• 🎯 Interactive hover effects
• 📱 Mobile-first responsive design
• 🌙 Dark theme with cyan accents
• 🔄 Loading states and feedback

🔧 Technical Features

• ⚡ Fast React with Vite
• 🎨 Utility-first CSS with Tailwind
• 🔐 Secure JWT authentication
• 📊 Real-time game state management
• 🚀 Optimized for performance

🎮 Game Features

• 🏆 Win detection with strike animation
• 📊 Multi-round match support
• 🎯 Custom round configuration
• 💾 Game state persistence
• 🔄 Instant game reset

---

🚀 Deployment

Frontend (Vercel)

cd Frontend
npm run build
# Deploy to Vercel

Backend (Vercel)

cd Backend
# Configure vercel.json for serverless deployment
# Deploy to Vercel

---

🤝 Contributing

Contributions are welcome! Here's how to get started:

1. 🍴 Fork the repository
2. 🌟 Create a feature branch

   git checkout -b feature/amazing-feature

3. 💾 Commit your changes

   git commit -m 'Add amazing feature'

4. 📤 Push to the branch

   git push origin feature/amazing-feature

5. 🎯 Open a Pull Request

🐛 Bug Reports

Found a bug? Please open an issue with:

• 📝 Clear description
• 🔄 Steps to reproduce
• 💻 Expected vs actual behavior
• 📱 Device/browser information

---

👨‍💻 Developer

Saurabh Prajapat

Full Stack Developer passionate about creating engaging web experiences

---

🙏 Acknowledgments

• 🎮 Inspiration from classic Tic Tac Toe
• 🧠 Minimax algorithm for AI implementation
• 🎨 Modern UI/UX design principles
• 📱 Mobile-first responsive design approach

---

🎮 Ready to Play?

Made with ❤️ by Saurabh Prajapat

⭐ If you enjoyed this project, please give it a star! ⭐

---

_{🎮 Game on! • 🚀 Built with modern web technologies • 📱 Responsive design • 🧠 Smart AI}