DrawTogether

Three-mode web game built with Next.js 14 (App Router) + Socket.IO:

• Skribbl Race — one player draws, others guess.
• Gartic Phone — pass-it-on prompt → drawing → guess loop.
• Color Together — shared coloring book with templates and free draw.

Stack

• Next.js 14, React 18, TypeScript
• Tailwind CSS
• Custom Node server (server.js) hosting Next + Socket.IO on a single port
• OpenTelemetry auto-instrumentation (traces) → SigNoz OTLP HTTP

Run locally

npm install
npm run build
npm start              # serves on :3000

Dev mode: npm run dev (also via server.js).

Environment

var	default	what
PORT	3000	http port
SIGNOZ_OTEL_ENDPOINT	http://100.64.0.10:4318	OTLP base for tracing
NODE_ENV	production in container

Endpoints

• GET / — landing
• GET /create — create-room form
• GET /join — join form
• GET /room/[code] — lobby (auto-redirects to /play when host starts)
• GET /room/[code]/play — game UI (skribbl/gartic/color)
• GET /room/[code]/results — final scores / Gartic books
• GET /api/health — health check
• GET /api/room/[code]/exists — quick room lookup
• WebSocket on the same port at /socket.io

Docker

docker build -t drawtogether .
docker run -p 3000:3000 drawtogether