TimeCraft: designing
a board that moves.
A production Kanban SaaS I designed, built, and deployed solo. This page shows the interaction engineering behind its marketing surface: hand-rolled drag physics, an optimistic-UI simulation, and a cursor-reactive canvas background. No libraries, no video mockups.
Try the live demoThe card moves first. The server catches up.
This section demonstrates how I communicate a technical concept visually: the card commits to its new column in 0 ms while a simulated server ack lands a beat later. State machine: idle → moved → syncing → synced, with the delay exposed as a design token you can tweak.
Design decisions
One hero moment, not scattered fades
All motion budget went to the draggable card, the product’s core verb. Scroll reveals appear only where they explain sequence. Reduced-motion is respected end to end.
A grid, not a gradient blob
The ambient layer is an isometric dot grid on canvas: cursor-lit, cached offscreen for one blit per frame. It quotes the board metaphor instead of decorating around it.
Purple system, mono metadata
Bricolage Grotesque for voice, Space Mono for card IDs and timestamps, the “craft/tooling” cue. One purple ramp on near-white; no invented accent colors.
Engineering under the hood
Fractional indexing
A card move writes one row, not a renumbered column: each card keys into a fraction string between its neighbours. The same scheme orders columns and tasks.
Optimistic UI + rollback
Every mutation snapshots the store, applies instantly, and reverts if the API call fails. The snapshot-and-revert cycle is unit-tested.
Multi-tenant RBAC
Permissions are a typed union mapped to role sets, enforced at the API layer through a single authorize() gate, with no ad-hoc role checks in routes.
AI task breakdown
A goal streams back from the Claude API over SSE, one subtask per line. Each line is validated with Zod before it ever reaches the board.
Owned deploy path
GitHub Actions builds a multi-stage Docker image, pushes it to GHCR, and an EC2 box pulls it behind Caddy auto-HTTPS, tuned for a memory-constrained instance.
About this project
TimeCraft is a real product I built and operate end to end: concept, copy, visual system, every line of interaction code, and the production app behind it. Built with vanilla pointer events, canvas, and a requestAnimationFrame spring integrator. Concurrent state is what I work on daily.
TimeCraft
Let's talk
Open to full-stack roles and interesting projects. The fastest way to reach me is email.
noravut.ch@gmail.com