$ cat README.md
SketchRace
Real-Time Multiplayer Drawing & Guessing Game
A live multiplayer drawing game where players take turns sketching and guessing, racing against the clock for points. A team project, with the backend built by Shreyash Tripathi, a Frontend Developer and UI/UX Engineer based in Noida, India.
my_role: Backend: built the real-time Socket.IO game server behind live drawing sync, turn rotation, hints and scoring, working with a teammate who built the Next.js frontend.
Overview
SketchRace is a real-time multiplayer drawing and guessing game that runs in the browser. Players join a room, one player draws a secret word on a shared canvas, and everyone else races to guess it in the chat before the timer runs out. Faster correct guesses score more points.
It was built by a two-person team. Shreyash Tripathi built the backend: the Socket.IO game server that keeps every player in a room in sync. A teammate built the Next.js 15 and React 19 frontend, which connects to the server with socket.io-client.
How it works
Rooms
Every match runs in its own room, reached at /room/[roomId]. The server tracks who is in each room, whose turn it is to draw, and each player's score.
Word selection
At the start of a turn the server opens a word-selection window for the drawer, who picks one of several randomly generated words; the choice comes back to the server as a word-selected event.
Live drawing
Each stroke on the Canvas API surface is sent as a drawing event and broadcast to everyone else in the room, so all canvases show the same picture as it is drawn. A clear-canvas event wipes every canvas at once.
Guessing and scoring
Guesses arrive as chat messages during a 45-second guessing window. With 20 seconds left, the server reveals two random letters of the word, sent only to the guessers. A correct guess earns the guesser 10 points (reduced by 20% after the hint) and the drawer 5, and if everyone gets it the turn ends early with a 10-point drawer bonus.
Game flow
Each turn starts with a 7-second word-selection countdown, which the drawer can skip (force-end-timer). The pen then rotates to the next player; after everyone has drawn the round advances, and after 3 rounds the server sends final scores and ends the game.
Challenges & solutions
challenge: Every player's canvas has to show the drawing as it happens; sending whole images after each stroke would be slow and heavy.
solution: The server relays small drawing events for each stroke to the other players in the same room, and each client replays them on its own canvas, so pictures stay in sync with very little data per update.
challenge: Timers and turns must be the same for everyone, or one player's clock could run ahead of another's.
solution: The server owns the game clock: it announces the word-selection and guessing phases to the whole room, broadcasts a tick every second, and rotates the drawer after each turn, so every client follows one shared timeline.
challenge: Scoring has to reward both sides: players who guess, and the drawer whose sketch made the word guessable.
solution: The server keeps every score. Guessers earn 10 points (20% less if they saw the hint); the drawer earns 5 per correct guess, 10 more if everyone gets it, and an end-of-turn bonus scaled by the share of players who guessed. Scores are broadcast after every change and totalled on the final scoreboard.
Results
- Shipped and live at sketchrace.vercel.app as a playable multiplayer game in the browser.
- The game runs on 10 real-time Socket.IO event types, covering drawing, canvas clearing, word choice, timers, chat, scoring and game resets.
- Separate rooms at /room/[roomId] let multiple matches run at the same time.
Key features
- Backend (Shreyash): Express + Socket.IO game server for rooms, live drawing sync, server-owned timers, hints and scoring.
- Shared drawing surface on the Canvas API, with strokes broadcast to every player in the room.
- Timed rounds with random word choices, chat guessing and a final scoreboard.
Tech stack
SketchRace is built with Socket.IO, Node.js, Canvas API, Next.js 15, React 19 and Tailwind CSS.
- Socket.IO
- Node.js
- Canvas API
- Next.js 15
- React 19
- Tailwind CSS
About the developer
Shreyash Tripathi is a Frontend Developer and UI/UX Engineer in Noida, India, currently Junior Developer, UI/UX at Garage Collective. He builds React, Next.js and TypeScript interfaces for AI-integrated SaaS products.