03 / 10 · Embeddable 3D furniture planner
quickPlanner
3D kitchen planner that runs in the browser.
- Golden test cases
- 164
- Price parity with Corpus
- to the cent
- Packages
- web · api · e3d · shared
quickPlanner is a furniture planner that companies embed on their websites. The customer places elements in a 3D room, changes their dimensions and decors and sees the price. The elements are the manufacturer's own Corpus .E3D files, and the finished plan exports back to Corpus as a project.
I built it alone: the web app, the API, the parser for the Corpus format and the database.
Context
- Manufacturers who design in Corpus wanted customers to configure wardrobes and kitchens online, with the same elements, rules and prices they use in production. Existing planners work with their own catalogues, so every element would have to be rebuilt by hand and the prices would drift.
What I built
- A parser for the Corpus E3D format in TypeScript: boards, formulas, dimension changes, decors and edge bands, shared between browser and server.
- The 3D planner in React and Three.js: room, placement, live dimension changes, decor picker, price summary.
- A NestJS API: Supabase JWT checked against JWKS, tenants and members, catalogue upload and parsing, prices and dimension ranges, rate limiting.
- S3D export that opens in Corpus with the same positions and dimensions as in the planner.
- A golden test set compared against Corpus itself, so every price rule is proven, not assumed.
How it works
- The public catalogue at /t/<slug> reads straight from Supabase through read-only RLS, so the embedded planner does not depend on the API being up.
- Everything that writes (tenants, uploads, members) goes through the API with a Supabase JWT; nothing else can write to the database or storage.
- The same E3D package evaluates formulas in the browser for live dimension changes and on the server for prices.
- Admins upload the Corpus element folder, and the catalogue, prices and dimension ranges come out of it.
Screens
Screens show demo data.
Elements placed in the room, price on the side. Dimension ranges and decors come from the Corpus element. The planner on a phone.
Outcome
- 164 golden cases, 56 of them with dimension changes, match Corpus prices to the cent.
- Swagger documentation, Vitest unit tests and Playwright end-to-end flows for the planner, dimensions, model, language and mobile.
- Screenshots show demo data.