Buildaut · Frontend
Visualizador 3D de residências
Re-arquitetura da experiência 3D que derrubou o carregamento de ~35s para ~4s, com migração completa para TypeScript.
1React + Three.js2Cloudflare Workers3GraphQL + cache4Magic link + RBAC5R2 (modelos 3D)6D1
- 1React + Three.js
- 2Cloudflare Workers
- 3GraphQL + cache
- 4Magic link + RBAC
- 5R2 (modelos 3D)
- 6D1
35s → 4s
tempo de carregamento da experiência 3D
100% TS
migração JS → TS sem erros de build
2 papéis
RBAC cliente/admin com magic link
Contexto
Clientes da Buildaut exploram a própria casa em 3D antes da obra. A experiência era o coração do produto e também o maior motivo de abandono.
Desafio
Cerca de 35 segundos até a cena ficar interativa, base em JavaScript difícil de evoluir e APIs com gargalos que travavam o carregamento.
Solução
- Pipeline de carregamento re-arquitetado: a cena passa a carregar em etapas, priorizando o que o usuário vê primeiro e adiando o resto.
- Migração completa de JavaScript para TypeScript, entregue sem erros de build, o que destravou refatorações seguras.
- Autenticação por magic link com RBAC separando cliente e admin.
- Página de auditoria em GraphQL com cache, para o time acompanhar o que acontece em cada projeto.
- Deploy serverless na Cloudflare (R2 para os assets, D1 para dados) e correção dos gargalos de API que seguravam a cena.
Resultado
A experiência que levava ~35s para carregar passou a abrir em ~4s, e a base de código passou a aceitar evolução sem medo.