Buildaut · Frontend
3D home visualizer
Re-architected the 3D experience, cutting load time from ~35s to ~4s, with a full migration to TypeScript.
1React + Three.js2Cloudflare Workers3GraphQL + cache4Magic link + RBAC5R2 (3D models)6D1
- 1React + Three.js
- 2Cloudflare Workers
- 3GraphQL + cache
- 4Magic link + RBAC
- 5R2 (3D models)
- 6D1
35s → 4s
3D experience load time
100% TS
JS → TS migration with zero build errors
2 roles
client/admin RBAC with magic link
Context
Buildaut customers explore their future home in 3D before construction. The experience was the heart of the product and also the biggest reason people dropped off.
Challenge
Around 35 seconds until the scene was interactive, a JavaScript codebase that was hard to evolve, and API bottlenecks holding the load back.
Solution
- Re-architected loading pipeline: the scene loads in stages, prioritizing what the user sees first.
- Full JavaScript → TypeScript migration, shipped with zero build errors, unlocking safe refactors.
- Magic link authentication with RBAC separating client and admin.
- GraphQL audit page with caching, so the team can follow what happens on each project.
- Serverless deploy on Cloudflare (R2 for assets, D1 for data) and fixes for the API bottlenecks slowing the scene.
Outcome
An experience that took ~35s to load now opens in ~4s, on a codebase the team can evolve without fear.