Real-time whiteboarding,
built on native WebSockets.
Engineered to avoid Socket.io overhead using native WebSockets.
Includes a custom Node.js backend with JWT-based authentication.
Actual app UI — no simulated mockups.
Built with: Next.js · Node.js · ws · PostgreSQL · Prisma · Tailwind
Why Flowboard?
Most whiteboards optimize for an endless list of features. Flowboard optimizes strictly for latency and simplicity. It's a technical demonstration of handling high-frequency state synchronization without relying on heavy abstractions.
Architecture Decisions
The engineering behind the canvas.
Native WebSockets over Socket.io
Socket.io includes fallback mechanisms that are unnecessary for modern browsers. Using the native `ws` library allows the server to process stringified JSON directly, minimizing latency during high-frequency drawing.
Custom Canvas Interaction Layer
Built a custom canvas interaction layer from scratch. Utilized Pythagoras theorem for circle-point collision detection and coordinate mapping for pencil-stroke erasure, avoiding heavy 3rd-party canvas libraries.
Custom Auth & Persistence
Implemented strict JWT verification on every WebSocket connection. All canvas shapes are stored persistently in PostgreSQL via Prisma, allowing users to rejoin and fetch existing board states instantly.
How It Works
The real-time synchronization flow.
Client Captures Input
Mouse coordinates and canvas events are batched locally and streamed via WebSockets to prevent overwhelming the server.
Server Broadcasts Events
The Node.js backend validates incoming payloads against the active room ID and immediately relays updates to connected peers.
Clients Reconcile State
The Canvas updates the state using optimistic rendering, ensuring the drawing feels instantaneous regardless of network latency.
Roadmap
Future technical improvements.
- •Redis-backed room scaling: Moving in-memory room state (`users[]` array) to Redis pub/sub to support horizontal scaling of the WebSocket server.
- •Message Queue Integration: Offloading database writes (Prisma `.create()`) to a queue to prevent DB bottlenecks during heavy collaborative drawing sessions.
Ready to test the latency?
Create a room and experience the real-time sync yourself.
Open Canvas