Imatate

I needed to capture some measurements alongside reference photos for our kitchen tiling so, of course, I decided to build an app for this purpose. It’s actually an app I’ve wanted for a while in different contexts: it would have been useful getting curtain quotes, during our search for a new kitchen, recording which colour paint we used in a room, or annotating the names of the plants I’ve used in the aquarium.

imatate—that’s image annotate—allows you to take a photo and draw lines, boxes, arrows, and text labels on top of it. Each annotation can have a comment, a hyperlink, and real-world measurements: a line knows its length, a box knows its width × height and computed area, all shown in a per-image unit. Photos can be grouped into collections, and both single photos and whole collections can be shared read-only via unguessable links.

Starting at 10:50 with a 4-paragraph spec, I had a local version by noon and a fully deployed app by early evening, then kept adding features (animations, image caching, collections) between coats of paint. Most of the interaction happened from my phone while I worked on the kitchen.

I described the app’s (brief!) development process in You can just build it.

How it was built

The whole thing runs on Cloudflare’s stack: a Worker serves both the API and the static SPA via Workers Static Assets. D1 holds users, sessions, and image metadata, with each image’s annotations stored as one JSON document. Images go to R2, downscaled client-side to ≤2560px WebP before upload.

The front end is Svelte 5 + Vite with an SVG overlay for the annotation layer. Auth is passwordless using magic links.