DoodleDraw
- browser 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.
The 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.
The 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.
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.
- 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.