About

Sketchalot is a real-time collaborative drawing board built as a Turborepo monorepo strategy, with a Next.js 14 + TypeScript frontend and separate HTTP and WebSocket backends running as independent Node.js services under apps/. Unlike most Excalidraw-clone tutorials that reach for socket.io out of the box, sketchalot's real-time layer is a WebSocket server built from scratch on the raw ws library — every stroke is a hand-serialized message broadcast to room subscribers, with no abstraction layer in between.

Key features

Turborepo monorepo — frontend, HTTP backend, and WebSocket backend as separate apps in one pnpm workspace, with shared packages for types and DB access
Hand-rolled WebSocket protocol — no socket.io or third-party realtime SDK; raw ws connections, custom message schema, and manual room-based broadcast logic
Split backend architecture — HTTP backend (Express) handles auth/room state, WebSocket backend handles only live stroke events, so the two scale independently
Multiple drawing tools — pencil, rectangle, circle, line, arrow, and eraser, all synced stroke-by-stroke
Live chat — a second message type multiplexed over the same WebSocket connection as drawing events
Room-based collaboration — join codes route clients into isolated broadcast groups server-side

Use cases

Studying or reusing a from-scratch WebSocket broadcast pattern instead of relying on socket.io/Liveblocks
Sketching system designs live with a teammate or interviewer without screen-sharing
A reference monorepo setup (Turborepo + pnpm workspaces) for splitting a realtime app into independently deployable services
Remote whiteboarding or teaching sessions needing low-level control over the sync protocol