SketchFlow

Inspiration

Anyone who sketches knows the problem: you iterate on a drawing dozens of times in a session, and by the end you've lost track of what you changed, why, and which version was actually better. Photoshop just hand you a flat file. Figma is built for vectors, not freehand. Nothing gives you version history for hand-drawn work, so we built it.

What it does

SketchFlow is a sketchbook with git-like checkpoints. You draw on a canvas, save snapshots as you go, and scrub back through your history at any time. You can compare any two checkpoints side-by-side, and a visual diff highlights exactly what was added, removed, or moved. From any older checkpoint you can fork a new variant to explore a different direction, and a Family Map shows your whole sketch's history as a branching tree.

How we built it

The app is React 18 and TypeScript on Vite. Brian built the frontend, including the drawing surface, a custom SVG stroke engine that serializes strokes to SVG so they stay diffable as text. Raphael and Nameer built the backend on Supabase: the checkpoint and branching schema, the diff engine that detects what was added, removed, or moved between saves, and the fork feature that powers the Family Map tree.

Challenges we ran into

Diffing hand-drawn sketches is hard because strokes never line up, so a pixel diff is useless. Tuning the component matching to catch real changes without flagging tiny adjustments took work, and comparing distant checkpoints needed a separate path-reconciliation step.

Accomplishments that we're proud of

We built a working component-level diff for freehand sketches, something pixel diffs can't do and wrapped it in a full checkpoint, fork, and Family Map workflow that actually runs.

What we learned

Diffing hand-drawn strokes is way harder than it sounds, since nothing ever lines up perfectly. We also learned how much serializing strokes to SVG early on paid off, making the whole history diffable as text.

What's next for SketchFlow

Real-time collaboration is the big one, the checkpoint model is a natural fit. Beyond that: user accounts, shareable links to sketches and family trees, and a tighter AI cost model.

Built With

• postgressql
• react
• supabase
• typescript
• vite