In the world of web applications, the tendency to rely heavily on numerous dependencies is common. However, one developer has opted for simplicity by creating a whiteboard app with only three production dependencies: React, React-Dom, and Zustand. This approach not only reduces the app's footprint but also enhances its efficiency and accessibility.

The Problem and Solution

The developer's journey began with frustration over existing whiteboard apps that demand user sign-ups, cloud synchronization, or loading massive amounts of JavaScript. To address this, the developer built 'MindNotes Pro,' a drawing app that offers a blank canvas with minimal overhead, entirely bypassing the need for Redux, styled-components, axios, or lodash.

Technical Architecture

The app's drawing engine is encapsulated in a single Canvas.tsx file, approximately 600 lines of code, utilizing the Canvas API directly without any drawing libraries. The state management is handled by three Zustand stores: useDrawingStore for strokes, shapes, tools, and undo/redo functions; useViewStore for zoom and pan functionalities; and useThemeStore for managing the dark/light theme with system detection.

Key Technical Decisions

  1. Canvas API over SVG: The decision to use Canvas API instead of SVG was due to its hardware-accelerated 2D drawing capabilities, offering pixel-perfect control and efficiently handling thousands of strokes without the DOM overhead.
  2. Zustand over Redux: Zustand provides a lightweight state management solution at under 1KB, eliminating the need for boilerplate code. A single useDrawingStore holds the entire drawing state, with subscriptions that trigger Canvas redraws.
  3. No External CDN: By bundling everything, including fonts, icons, and SVG textures, the app remains fully accessible even in regions with restricted internet access, like China, without requiring a VPN.

Design and Features

The app features a warm, parchment-like design, departing from the typical cold blue/gray UI. It includes six brush types and nine drawing tools, along with six export formats and auto-save to localStorage. The app supports a 50-step undo/redo, zoom and minimap navigation, dark mode with system detection, and touch support for tablets and phones.

Results

  • Bundle Size: ~160KB gzipped
  • Build Time: ~2 seconds
  • Dependencies: 3
  • External CDN Calls: 0

The app is built with React 18, TypeScript 5, Vite 5, Zustand, Canvas API, and Tailwind CSS, showcasing a minimal yet powerful setup.

Code Example

import { useDrawingStore } from './stores/useDrawingStore';

function Canvas() {
  const { strokes, tools } = useDrawingStore();
  // Canvas rendering logic here
}

This small snippet illustrates the straightforward nature of using Zustand to manage the state within the app, making it easy to maintain and extend.

Next Steps

For developers interested in lightweight and efficient app development, exploring Zustand as a state management solution could provide significant benefits. Additionally, embracing the Canvas API can lead to performance improvements for drawing applications.