Multiplayer Tic Tac Toe Game

Multiplayer Tic Tac Toe Game project screenshot 1 of 2
Loading image...
1 / 2
Use arrow keys, Home, End to navigate • 2 items

A modern implementation of the classic TicTacToe game featuring both Player vs Player and Player vs Computer modes. Built with React and Express.js, the game supports real-time multiplayer functionality through websockets and includes a strategic AI opponent for single-player gameplay.

What I Learned

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

  • Express.js Server Development Building RESTful APIs and handling HTTP requests with proper routing and middleware
  • Real-Time Communication: Implementing Socket.IO for bidirectional websocket communication and room-based multiplayer
  • Database Integration: Using Drizzle ORM with PostgreSQL for type-safe database operations and schema management
  • Game Logic Implementation: Developing strategic AI algorithms and game state management systems

Technical Architecture

Frontend

  • React 19
  • TypeScript
  • Tailwind CSS 4
  • Socket.IO Client
  • React Router

Backend

  • Express.js 5
  • Socket.IO 4
  • Drizzle ORM
  • PostgreSQL
  • CORS middleware
  • Bun runtime

Database Schema

  • Simple TicTacToe table with game state storage
  • JSON-based board representation for flexibility
  • Game mode tracking (PvP vs PvC)
  • Current player and game end state management

Database Design

The application uses a streamlined PostgreSQL schema managed through Drizzle ORM:

CREATE TABLE TicTacToe (
  id VARCHAR(255) PRIMARY KEY,
  Mode VARCHAR(255) NOT NULL,
  Board JSONB,
  Player VARCHAR(255) NOT NULL,
  End VARCHAR(255)
);

This simple yet effective schema stores:

  • Game ID: UUID for unique game identification
  • Mode: Game type (PvP or PvC)
  • Board: JSON array representing the 9-cell game board
  • Player: Current player's turn (X or O)
  • End: Game result when completed (winner or tie)

Key Implementation Details

Strategic AI Implementation

The computer opponent uses a priority-based decision system that evaluates moves in this order:

  1. Win: Complete a winning line if possible
  2. Block: Prevent player from winning on their next move
  3. Center: Take the center square for strategic advantage
  4. Corners: Occupy corner positions to create multiple winning opportunities
  5. Sides: Fill remaining side positions as last resort

Challenges Overcome

  • Socket.IO Room Management: Implementing isolated game sessions where players join specific rooms without interfering with other games
  • CORS Configuration: Setting up proper cross-origin resource sharing for development and production environments with multiple allowed origins
  • Game State Synchronization: Ensuring all connected clients receive consistent game updates while handling potential connection issues
  • AI Strategy Balance: Creating an AI opponent that provides challenge without being impossible to beat, using strategic priorities rather than perfect play
  • Database Schema Design: Designing a simple yet flexible schema that efficiently stores game state using JSON for the board representation

This project taught be a lot about the basic of full stack development! Great first week at the Fractal AI Accelerator.