Rusith's ink-brush logo
← all projects

02 · 2026 · live

DoodleDrawbrowser sketches, saved locally.

A local-first drawing app built with Next.js and the embedded Excalidraw editor. It runs fully in the browser, stores drawings in IndexedDB, and gives users a practical workspace for creating, saving, reopening, importing, exporting, duplicating, renaming, and deleting designs without accounts or a backend service.

DoodleDraw interface showing a browser-based Excalidraw drawing workspace with saved design controls.

Problem

Drawing tools are often tied to accounts, remote storage, or single-session canvases. DoodleDraw needed to keep the creative loop immediate: open the app, draw, save locally, return later, and move work in or out through familiar file formats.

Approach

DoodleDraw uses a Next.js 16 App Router structure with an embedded Excalidraw canvas, browser-native IndexedDB persistence through idb, autosave status feedback, a saved-design gallery, route-based editing for existing drawings, and import/export utilities for Excalidraw, JSON, PNG, and SVG files. The storage layer is wrapped behind an abstraction so future sync or filesystem providers can be added without rewriting the editor UI.

Role

Full-stack frontend engineer. Designed and implemented the local-first product experience, editor shell, autosave flow, IndexedDB storage model, gallery management, import/export path, thumbnail generation, responsive UI, and Vercel deployment.

Highlights

  • Embedded Excalidraw canvas supports shapes, text, free draw, images, pan, zoom, undo, redo, selection, resizing, and object movement.
  • IndexedDB persistence stores saved designs with elements, app state, binary files, timestamps, and generated PNG thumbnails for gallery previews.
  • Autosave and manual save flows make in-progress work visible while still allowing empty or partial drawings to be captured intentionally.
  • Gallery tools support reopening, renaming, duplicating, and deleting designs from local browser storage.
  • Import and export flows cover .excalidraw, .json, .png, and .svg scene or image files without API routes, authentication, or a remote database.

Stack

  • TypeScript
  • Next.js 16
  • React 19
  • Tailwind CSS
  • Excalidraw
  • IndexedDB
  • idb
  • uuid
  • date-fns
  • lucide-react
  • Vercel

At a glance

Surface
Local-first drawing web app
Routes
Home, editor, saved designs, design detail
Editor
Embedded Excalidraw canvas
Storage
IndexedDB via idb
Status
Live / public source
nextSpendShift