​

Draw

​

Features

• Full-screen Excalidraw - The drawing canvas takes up the entire screen with Excalidraw’s native UI
• Gallery page - Browse, search, sort, rename, and delete your drawings from a dedicated gallery view
• Collections - Group drawings by collection/category with tab-based filtering
• Preview thumbnails - Gallery shows thumbnail previews of each drawing in a masonry layout
• Dynamic theme switching - Seamlessly switch between light and dark mode with instant thumbnail updates
• Auto-save - Drawings save automatically in the background
• Standard format - Saves as .excalidraw JSON files (easy to backup/migrate)
• Gamification stats panel - Obsidian-inspired stats with rank system and progress tracking
• Search & sort - Filter drawings by name, sort by last modified/created/name
• Keyboard shortcuts - Press N in gallery to create a new drawing
• URL-based routing - History API router (/ gallery, /draw/:id) with clean URLs

​

Architecture

draw/
├── frontend/          # React + Vite app
│   └── src/
│       ├── App.jsx          # Root: router + theme state
│       ├── api.js           # API client
│       └── components/
│           ├── GalleryView.jsx
│           ├── DrawView.jsx
│           ├── DrawingCard.jsx
│           └── RankBadge.jsx
├── backend/           # Express server with file-based storage API
│   └── server.js
├── data/              # Persistent storage (mounted volume)
│   ├── index.json     # Drawing metadata index
│   ├── library.json   # Custom library items
│   ├── thumbnails/    # PNG thumbnail files
│   └── *.excalidraw   # Individual drawing files
├── Dockerfile
└── compose.yaml

​

API Endpoints

​

Deployment

cd ~/apps/draw
docker compose build && docker compose up -d

• Accessible at draw.augustin.ai via Cloudflare tunnel → Traefik
• Internal port: 3000