Back to projects

Real-Time Multiplayer Web Game

Cooperative Puzzle

A browser-based real-time jigsaw puzzle experience built for solo play and synchronized two-player cooperation, with authoritative multiplayer state, persistent anonymous sessions, and scalable puzzle sizes.

Status Live / Active Visit Website View Source
Cooperative Puzzle real-time multiplayer game interface with a shared jigsaw board, puzzle gallery, players, chat, and game controls

Project Overview

Cooperative Puzzle is a real-time jigsaw game for solo play or two players sharing one room and one authoritative board. Both players can manipulate the same pieces; correct neighbors connect when dropped and connected pieces then move as groups. Anonymous sessions can be resumed without an account, while progress and persistent state are stored in PostgreSQL.

My Role

Designed and developed the complete product architecture and user experience, including the React/PixiJS frontend, FastAPI/WebSocket backend, authoritative puzzle synchronization, deterministic jigsaw geometry, anonymous reconnect system, responsive game UI, localization, database persistence, testing, and deployment pipeline.

Verified scope

Main Features

  • Solo mode
  • Two-player real-time multiplayer
  • Six-character private room codes
  • Anonymous reconnectable sessions
  • Continue unfinished puzzles
  • Server-authoritative movement, locking, merging, and completion
  • Correct-neighbor piece connection
  • Connected group movement
  • Deterministic jigsaw geometry and multiple controlled piece-shape families
  • Puzzle sizes: 25, 50, 75, 100, 250, 500, and 1000 pieces
  • Reference image and tidy-loose-pieces controls
  • Zoom, pan, and fullscreen controls
  • Player contribution display and real-time chat
  • Likes and personal sorting boxes where applicable
  • English and Arabic with RTL support
  • Responsive desktop and mobile layout
  • Completion seam fade and full-image reveal
  • Persistent PostgreSQL data with reconnect and continue behavior

Implementation

Technology Stack

Frontend

  • React
  • TypeScript
  • Vite
  • PixiJS
  • React Router

Backend

  • Python
  • FastAPI
  • Uvicorn
  • WebSockets
  • SQLAlchemy

Database

  • PostgreSQL
  • Neon

Deployment

  • Vercel
  • Render
  • GitHub

Testing

  • Pytest
  • Playwright

Architecture

Browser client on Vercel → FastAPI and WebSocket backend on Render → PostgreSQL on Neon. The live-room runtime intentionally uses a single backend process because ownership of active WebSocket rooms remains in process memory, while durable progress is stored separately in PostgreSQL.

Project Challenges

The core challenges were synchronizing two players without duplicate or conflicting movement; preserving exact geometric relationships between neighboring pieces; supporting high piece counts efficiently; reconnecting anonymous players without accounts; maintaining responsive PixiJS performance; and separating persistent database state from live WebSocket room state.

Have a real-time product in mind?

Let’s build a responsive, dependable experience.

Contact Me