Design a Whiteboard App – Frontend System Design

We’ll walk through the frontend system design for a browser-based drawing tool like Figma, Canva, or Excalidraw. Our goal is an infinite canvas that pans and zooms, a scene of vector objects you can select and transform, and interactions that stay at 60fps even when the file has hundreds of shapes. You’ll see how the scene graph stays normalized, why the renderer is not the model, and why React must not commit on every pointermove. Put simply, the task is to design a whiteboard app that stays smooth with hundreds of shapes on screen.

The interview is a performance problem wearing a design-tool costume. If you draw the scene as absolutely positioned divs, or you setState on every mouse pixel, the demo dies at a few hundred objects. We’ll keep a flat map of shapes, draw on Canvas 2D, overlay HTML for handles and text, and batch paints with requestAnimationFrame.

Problem Statement

Build the frontend for a browser-based design tool like Figma, Canva, or Excalidraw.

Requirements:

• An... premium content.