Full-stack case study
A canvas-based design tool where users upload artwork, customise placement in real time, and order print products. The hard part was making a browser canvas feel native, on desktop and mobile, while keeping the backend in sync without a page reload.
6 mo
Active engagement: A/B testing, iteration, no regressions
3–4 wk
POC for the canvas editor before we were confident to build on it
Green
Core Web Vitals across LCP, CLS, and FID in production
6
Engineers across frontend, backend, and QA, no bloat
The problem
This is a custom print platform. Users upload artwork, customise it on a product, and order. That sounds straightforward. The execution wasn't.
The core challenge was the canvas editor: a real-time design tool that had to feel instant, work on mobile, stay in sync with a Rails backend, and handle the messy edge cases of print-ready artwork. No off-the-shelf tool fit the requirement. We had to build it from the ground up.
What we built
01
It starts with artwork upload, drag and drop or browse. Instant preview with no page reload. Simple on the surface, but the pipeline behind it had to handle format validation, image processing, and state sync fast enough that the user never noticed the work happening.
02
Most of the project lived here. Users resize, reposition, and adjust artwork placement on the product in real time. We built it on Konva.js, a canvas rendering library. The POC alone took three to four weeks: getting Konva talking to the Rails backend, keeping state consistent across renders, and handling edge cases in the rendering pipeline before we trusted it enough to build on.
03
Every change the user makes reflects instantly. No lag, no refresh. We wired WebSockets into the whole flow so the experience feels native rather than web-form-like. For a design tool where users are making dozens of small adjustments, that immediacy is the product.
04
A large share of the platform's traffic is mobile. We made sure the canvas editor, the upload flow, and the customisation UI all worked properly on small screens, not a degraded experience, the same one. That took custom handling for touch events on the Konva canvas.
05
We got LCP, CLS, and FID into the green zone under real production traffic. That translated directly into conversion: faster load times on a commerce platform close deals that a slow one loses.
06
This wasn't a build-and-leave engagement. We stayed on for around six months: A/B experiments, new features requested by the client, removing what wasn't working, and making sure nothing broke in the process. Consistent quality throughout with zero regressions shipped.
Tech stack
Canvas and real-time
Konva.js for canvas rendering, WebSockets for live state sync
Frontend
React, TypeScript, responsive layout including full canvas editor on mobile
Backend
Ruby on Rails API, image processing pipeline, cart and order management
Performance
Core Web Vitals tuning (LCP, CLS, FID), rendering strategy, asset optimisation
Experimentation
A/B testing framework, Mixpanel instrumentation, feature flags
Team
2 frontend engineers, 3 backend engineers, 1 QA, six months
We take on complex product builds and stay in them. If your scope needs a team that treats your product like their own, let's talk.