all projects
2022 - now Fullstack Developer

Gamebase

A real-time multiplayer gaming platform with matchmaking, in-game chat, and player presence — Tic-Tac-Toe and Ludo, playable in the browser. New games will be added as time goes.

leaderboard
Homepage and Leaderboard
invitation-request
Invitation Request
tic-tac-toe
tic-tac-toe
ludo-lobby
Ludo lobby
Ludo game
Ludo game with real-time chat

Gamebase is a browser-based multiplayer platform where players sign up, get matched, and play board games against each other in real time. Currently supports Tic-Tac-Toe and Ludo, with matchmaking queues, private invites, in-game messaging, player profiles, and a report system.

Everything runs on WebSockets. Game state, turns, matchmaking, presence, and chat all flow through a single Socket.IO connection per player. The server keeps each game room in memory and persists it to MongoDB so players can reconnect after a dropped connection without losing their match. Disconnects get a grace period before the game is forfeited — if you come back in time, you pick up exactly where you left off.

The frontend is a React SPA with a space-themed auth flow and sound effects for game events. The backend is Node/Express with a full socket layer handling five separate handler modules: game logic, chat, matchmaking, Ludo lobbies, and reports.

highlights

  • Real-time multiplayer Tic-Tac-Toe and Ludo with turn-by-turn state sync over WebSockets
  • Matchmaking queues with automatic pairing and private invite links
  • Reconnection handling — dropped players get a grace period and rejoin without losing the game
  • In-game chat per room with conversation persistence in MongoDB
  • Player presence system — online, away, in-game — broadcast to all connected clients
  • Profiles with game stats, points, and match history

What Gamebase is

A browser-based multiplayer gaming platform. Sign up, pick a game, get matched with someone, and play in real time. Currently supports Tic-Tac-Toe and Ludo, with matchmaking, in-game chat, profiles, and a report system.

How multiplayer works

Everything runs through a single WebSocket connection per player. When you connect, the server authenticates your token, marks you online, and broadcasts your presence to everyone else. From there, every interaction — joining a queue, making a move, sending a message, going idle — is a socket event.

Game rooms live in server memory and get persisted to MongoDB on every state change. That dual storage means the game is fast (memory reads for every move) but also recoverable (if the server restarts or a player drops, the room is rehydrated from the database on reconnect).

Matchmaking

Two ways to get into a game:

  • Queue — join the matchmaking queue for a game type. When a second player joins, the server creates a room, assigns marks/colors randomly, and drops both players in.
  • Invite — send a private link to a specific player. They accept, and the room is created for just the two of you.

The queue state is broadcast to all connected clients so you can see who's waiting before you join.

Reconnection

Dropped connections are the hardest part of real-time multiplayer. If a player disconnects mid-game, they get a grace period. During that window, the game stays alive and the opponent sees a "reconnecting" state. If the player comes back, the server cancels the forfeit timer, re-joins them to the socket room, and sends the current game state so the client can pick up exactly where it left off. If they don't come back, the game is forfeited.

Chat and presence

Each game room gets its own conversation. Messages are persisted in MongoDB and loaded when you rejoin a room. The presence system tracks three states — online, away, and in-game — and broadcasts changes to all connected clients in real time.

The frontend

React with Tailwind and shadcn/ui. The auth flow has a space-themed background with shooting star animations. Game screens have sound effects for moves, wins, and draws. The Ludo board is a custom component with dice rolling and piece movement animations.

Tech stack

  • React + TypeScript + Tailwind CSS for the frontend
  • Node.js + Express for the API
  • Socket.IO for all real-time communication
  • MongoDB + Mongoose for persistence
  • Deployed on Vercel

built with

#React#Node.js#Express#Socket.io#Tailwindcss#Mongodb

© 2026 adepeju orefejo