Inspiration
As a designer working with remote teams, I grew frustrated with bloated, cloud-reliant annotation tools that compromised privacy and speed. I wanted a tool that kept data local, looked polished (no clunky UIs!), and handled everything from simple arrows to map capture—all in the browser. The dark-mode focus came from hours of annotating late nights; eye strain was non-negotiable to fix.
What it does
MeDo is a all-in-one image annotation web app: import local images/maps, add shapes/text/special effects (magnifier, mosaic), manage layers, undo/redo endlessly, and export in custom resolutions—all processed locally, no data sent to servers.
How we built it
Started with core Canvas API for drawing, layered React for UI state (layers/history). Integrated Leaflet to wrap map APIs (Google/AMAP/Baidu) for map capture, and localForage to persist user preferences (tool settings, theme). Designed micro-animations and dark-mode layers for visual hierarchy, testing iteratively with fellow designers for workflow fit.
Challenges we ran into
Map API inconsistencies (Google vs. Baidu/AMAP) required fallback logic with Leaflet. Handling large images (20MB+) meant adding client-side compression without losing quality. Making layer reordering smooth (drag-and-drop) took tweaking animation timing and state management to avoid jank.
Accomplishments that we're proud of
Creating a tool that’s both visually refined (dark-mode, micro-animations, frosted-glass UI) and functionally complete—layers, history, map capture—all 100% client-side. User testing showed even non-designers found the workflow intuitive, which was our biggest goal.
What we learned
Prioritizing local-first design meant mastering IndexedDB and Canvas performance optimizations. UI polish (animations, color consistency) matters as much as functionality for user retention. Cross-browser compatibility (Clipboard API, map providers) requires flexible, defensive coding.
What's next for this project
We’ll add lightweight template support for common annotation patterns (UI feedback, map markup), refine mobile responsiveness, and test optional offline PWA support. No plans for cloud sync—keeping it local-first remains core—but we’ll expand export options (PDF, vector layers) for professional users.
Log in or sign up for Devpost to join the conversation.