Treadstone Designer
A garage designed in 3D and priced as it's drawn.
- Stack
- React 19, three.js through react-three-fiber, Supabase
- Tests
- 300+, plus Playwright on desktop, iPhone and iPad
Highlights
The drawing is the estimate
Square footage, wall run, cove base, stair count and the storage list all come from a takeoff of the design. Nobody types a square footage into a quote.
Runs on the laptop they already own
It has to run on an ordinary work laptop, not a gaming rig. The 3D view only redraws when something changes, and quality steps down before the frame rate does.
Margin can't leak into the room
One keystroke switches to presentation mode, which can't show cost or margin, so they never end up in front of the customer.
Why I built it
Treadstone Coatings is a family-run epoxy and polyaspartic flooring company in Nanaimo. A homeowner collecting three quotes can't picture a finished garage, so the cheapest number usually wins. A rep who can show them their own garage with their own flake blend and their own cabinets, and hand them a proposal before leaving, wins the job at a better margin.
Nothing off the shelf does that. Photo visualizers can't price anything, room planners render in the cloud and know nothing about flake, and the contractor sales suites are Windows desktop apps for pools and roofs.
How it's built
The geometry and pricing live apart from the app, so the numbers can be tested on their own. The catalog has real cabinets and racks at their real sizes, Torginol's flake blends, and travel costs out from Nanaimo.
The app is React and Vite. The floor plan is drawn in SVG and the 3D view is react-three-fiber. Supabase holds accounts and saved designs, and it keeps working when the connection drops.
Decisions I'd defend
Walls are flat shapes with holes cut for doors and windows, then pulled into 3D. The fancier way of doing it breaks in strange ways and eats weeks.
Presentation mode was a store flag from day one, not a bolt-on. Retrofitting the idea that some numbers must never render in front of a customer is how margin ends up on a projector.
What's next
The tool is going to an interior-design conference. Before then: glossier floors, a few lighting moods, and a photo overlay that puts the blend on the customer's actual floor.