Interactive web app
Parametric Furniture Generator
Generate cabinet and rack cut lists with interactive 3D preview and PDF export.
- React
- TypeScript
- Vite
- Tailwind CSS
- React Three Fiber
- Three.js
- jsPDF
Overview
A browser-based tool for generating cabinet and rack cut lists from user-defined dimensions and options. It combines parametric calculations with a visual 3D preview so users can validate the design before cutting material.
Problem
Manual cut-list planning is error-prone and hard to iterate when dimensions change. Spreadsheets can compute numbers, but they do not quickly reveal if the assembled structure still makes sense.
Solution
A guided input flow captures width, depth, height, vertical spaces, and optional doors (overlay or inset). The app computes parts and presents both a structured cut table and an interactive 3D model of the configured furniture.
Architecture
React + TypeScript + Vite powers the UI and state flow. Core cabinet calculations live in a dedicated module to keep geometry logic testable and separate from rendering. React Three Fiber/Three.js renders the cabinet model, while a utility module handles clipboard and PDF export with jsPDF.
Key decisions
Separate domain calculations from presentation to keep the model deterministic. Keep export logic in a utility layer so PDF and clipboard formats evolve without coupling to UI components. Use Tailwind for fast iteration on data-dense views like the cut list panel.
Challenges
Mapping parametric inputs to both precise dimensional outputs and a consistent 3D representation, handling door mode variants cleanly, and keeping PDF output readable with enough context for workshop use.
Outcome
A practical engineering tool that demonstrates product mindset, geometry-oriented logic, and end-to-end UX: input, validation through visualization, and production-friendly output.