Menu

Post image 1
Post image 2
1 / 2
0

How I Built a Whiteboard App with 3 Dependencies

DEV Community·maomaoguai·26 days ago
#Z9z4Gb4K
Reading 0:00
15s threshold

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 Enter fullscreen mode Exit fullscreen mode 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.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.

Read More