Othello AI

Overview

Othello AI is a full-stack web application that brings the classic board game Othello (Reversi) to life with intelligent AI opponents and real-time multiplayer capabilities. The game features multiple AI difficulty levels using classic game theory algorithms, enabling players to practice against increasingly challenging opponents or compete with friends in real-time.

The application demonstrates modern web development practices with a React frontend, Express.js backend, MongoDB database, and real-time communication via Socket.IO. The AI implementations showcase both deterministic (Minimax) and probabilistic (MCTS) approaches to game AI, providing educational value while delivering an engaging gaming experience.

Architecture

The system follows a client-server architecture with a React SPA frontend deployed on Vercel and a Node.js backend deployed on Google Cloud Run. Real-time multiplayer functionality is enabled through Socket.IO WebSocket connections, while game state and user data are persisted in MongoDB.

graph TB
    Frontend[React Frontend<br/>Vercel] -->|REST API| Backend[Express Backend<br/>Cloud Run]
    Frontend -->|WebSocket| Backend
    Backend -->|Game State| MongoDB[(MongoDB)]
    Frontend -->|AI Logic| AI[AI Algorithms<br/>Minimax/MCTS]

Key Features

• Multiple AI Opponents: Three AI difficulty levels - Random (easy), Minimax with alpha-beta pruning (medium-hard), and Monte Carlo Tree Search (hard)
• Real-Time Multiplayer: WebSocket-based multiplayer functionality with room management, game state synchronization, and reconnection handling
• Game History: Tracks game statistics including wins, losses, scores, and dates for user progress analysis
• User Authentication: JWT-based authentication with secure password hashing using bcrypt
• Responsive Design: Modern UI built with Tailwind CSS and ShadCN UI components, optimized for both desktop and mobile

Technology Stack

Frontend: React 18, Vite, React Router DOM, Tailwind CSS, ShadCN UI, Recharts, Socket.IO Client
Backend: Node.js, Express.js, Socket.IO, MongoDB, Mongoose, JWT, bcrypt
AI: Custom implementations of Minimax (with alpha-beta pruning) and Monte Carlo Tree Search
Deployment: Docker, Google Cloud Run (backend), Vercel (frontend)

Technical Highlights

The Minimax AI uses alpha-beta pruning to efficiently explore the game tree up to a depth of 3, evaluating board positions based on piece count, board position (valuing corners and edges), and mobility. The MCTS implementation uses 1000 iterations per move, balancing exploration and exploitation through the UCB1 formula, and simulates random games to estimate move strength.

The multiplayer system uses Socket.IO's room-based architecture where each game gets a unique roomId. When a player makes a move, the server validates it, updates the room state, and broadcasts the updated board to all room members. The system gracefully handles disconnections by tracking disconnected players and allowing reconnection with state recovery. Game state is stored in-memory for real-time performance, while completed games are persisted to MongoDB for statistics and history tracking.