How I Built a Whiteboard App with 3 Dependencies

#react #typescript #opensource #webdev

The Problem

Every whiteboard app I tried wanted me to sign up, sync to the cloud, or load 2MB of JavaScript. I just wanted a blank canvas.

The Solution

MindNotes Pro — a drawing app with 3 production dependencies:

react, react-dom, zustand

That's it. No Redux. No styled-components. No axios. No lodash.

Try it now →

Architecture

The drawing engine lives in a single Canvas.tsx file (~600 lines). It uses the Canvas API directly — no drawing library. State is managed by 3 small Zustand stores:

useDrawingStore — strokes, shapes, tools, undo/redo, localStorage persistence
useViewStore — zoom and pan
useThemeStore — dark/light theme with system detection

Key Technical Decisions

1. Canvas API over SVG

Canvas gives us hardware-accelerated 2D drawing and pixel-perfect control. SVG would have been easier for hit testing, but Canvas handles thousands of strokes without DOM overhead.

2. Zustand over Redux

Zustand is under 1KB and needs no boilerplate. A single useDrawingStore holds all drawing state. Subscriptions trigger Canvas redraws.

3. No external CDN

Everything is bundled — fonts, icons, even the SVG noise texture for the paper background. This makes the app accessible from China without a VPN.

4. Warm parchment design

Instead of the typical cold blue/gray UI, I used a warm earth tone palette (#f5f0e8 background, #c47a5a accent) with SVG fractal noise for paper texture.

Features

6 brush types: pen, highlighter, pencil, calligraphy, dashed, glow
9 drawing tools: select, pen, eraser, pan, rectangle, circle, text, line, arrow
6 export formats: PNG, JPG, PDF, SVG, Word, JSON
Auto-save to localStorage
50-step undo/redo
Zoom & minimap navigation
Dark mode with system detection
Touch support for tablets and phones