REAL-TIME / COLLAB
DrawApp — Collaborative Whiteboard
A real-time collaborative whiteboard with Socket.IO, Redis Pub/Sub scaling, Redis job queues for persistence and email, NextAuth, and a Next.js + Tailwind UI.
Overview
DrawApp is a real-time collaborative whiteboard where users draw shapes, add text, change colors, and scale the canvas together. Socket.IO carries live events, Redis Pub/Sub scales sockets across instances, and Redis job queues flush shapes to PostgreSQL and handle email verification / password reset at scale.
The Problem
Collaborative canvases need low-latency fan-out, auth, durable persistence without blocking the hot path, and the ability to run more than one Socket.IO process when load grows.
Architecture
Key Decisions
Socket.IO + Redis Pub/Sub
Live drawing events stay on sockets; Redis Pub/Sub fans them across multiple Socket.IO instances for horizontal scale.
Redis queues for async side work
Shape flush to PostgreSQL and email verification / password reset run as background jobs so collaboration stays snappy.
NextAuth for secure login
Authentication is handled with NextAuth rather than a hand-rolled session stack.
Docker Compose one-command run
The full stack boots with docker-compose up for easy local demos.
Failure Modes
Single Socket.IO process saturates
Redis Pub/Sub lets additional instances join the same collaboration rooms.
Persistence blocking the draw path
Shapes flush asynchronously via Redis queues instead of writing PostgreSQL on every stroke.
Auth / email load spikes
Verification and password-reset emails are queued so the realtime path stays isolated.
Implementation
- Real-time collaboration for rectangle, circle, line, and text shapes
- Dynamic colors and canvas zoom/scale
- Socket.IO realtime layer scaled with Redis Pub/Sub
- Redis job queues for PostgreSQL flush and email workflows
- NextAuth authentication and Tailwind + Aceternity UI
- Docker Compose deployment
Lessons
- —Realtime collaboration and durable persistence should not share the same critical path.
- —Redis Pub/Sub is the practical way to scale Socket.IO beyond one process.
- —Queue email and flush work so drawing latency stays user-facing, not DB-facing.