All work
case studyWeb & Commerce

Furniture cut-list designer — 3D preview and SketchUp export

A browser tool that turns wardrobe dimensions into an exact cut list, a live 3D model and a ready-to-run SketchUp script — replacing two Python scripts the workshop ran by hand on one machine.

Role
Full-stack engineer
Timeline
Delivered as a standalone web app
Stack
React 18 · TypeScript · Vite · Three.js · React Three Fiber · Tailwind CSS · Cloudflare Pages
Furniture cut-list designer — calculator inputs beside a 3D wardrobe preview
project coverWeb & Commerce

A live system in daily operation for waste-management ticket intake — this page embeds the running demo.

Launch live demoUpload the sample tickets or your own scans — full extraction, validation and export.
Problem

What was broken

The workshop sized every wardrobe by hand. Two Python scripts — one for the cut list, one that emitted a SketchUp model — lived on a single machine and could only be run by the person who wrote them. Everyone else worked from a spreadsheet and a tape measure, and a mis-typed panel width is a ruined board.

Approach

How it was fixed

Ported both Python scripts to typed TypeScript, preserving the cut formulas exactly rather than rewriting them, so the shop's numbers stayed the shop's numbers. Added a React Three Fiber viewport that rebuilds the piece live as dimensions change, with toggleable measurement overlays. The Ruby generator emits a script that models the whole unit inside SketchUp — copy to clipboard or download as a .rb file. Metric/imperial conversion, five 18 mm board materials, a preset library for the two standard units, EN/ES throughout, and localStorage so a half-finished design survives a refresh.

Constraints

  • The existing formulas were non-negotiable: −1.8 cm on height, −3.6 cm on width and 18 mm board thickness encode how the shop actually cuts and assembles.
  • The shop measures in centimetres, but imported hardware and client drawings arrive in inches.
  • Output had to land in SketchUp, the tool the workshop already models in — not a proprietary format.
Stack

Tools in the system

  • React 18
  • TypeScript
  • Vite
  • Three.js
  • React Three Fiber
  • Tailwind CSS
  • Cloudflare Pages
Outcome

What changed

Dimensions go in; an exact cut list, a rotatable 3D model and a SketchUp script come out — in either language and either unit system. The calculation that lived in one person's Python scripts is now a link anyone in the shop can open on any device.

torre + colgadorFurniture types
5 × 18 mmBoard materials
metric + imperialUnit systems
Lessons

What carries forward

  1. 01Porting a trusted calculation means preserving its constants verbatim — the −1.8 and −3.6 cm adjustments are shop knowledge, not magic numbers to clean up.
  2. 02A live 3D preview catches proportion mistakes that a table of numbers hides completely.
  3. 03Exporting into the tool someone already uses beats any format of your own, however good.

Related case studies

All work