Caso de estudio
2026 / 06
Cota
Cotiza. Muestra en 3D. Cierra la venta.
- Rol
- Desarrollador Full-Stack
- Estado
- Demo en vivo
- Stack
- Next.js / React Three Fiber / Three.js / Supabase
01 / Capítulo
El problema
Los talleres de cancelería y herrería cotizan ventanas y puertas de aluminio a mano: el cliente describe lo que quiere, el maestro hace cuentas en una libreta — perfil, vidrio, herrajes, merma, mano de obra — y entrega un precio que el cliente no puede visualizar. El proceso es lento, propenso a error y no hay forma de que el cliente vea cómo se verá la pieza antes de pagar. Cada cotización es un acto de fe de ambos lados.
02 / Capítulo
Investigación
Hablé con quienes cotizan a diario y el patrón era claro: el cálculo del precio no es lo difícil — es repetir el mismo cálculo sin equivocarse, poder mostrarlo y mantener las tarifas al día cuando suben los materiales. Una cotización gana fuerza cuando el cliente la ve. Eso definió tres pilares: un visor 3D en tiempo real que arma la pieza mientras la diseñas, un motor de precios transparente (perfil por metro lineal, vidrio por m², herrajes, merma, mano de obra) cubierto por pruebas para que el cálculo nunca falle, y un panel de administración donde el taller edita sus propias tarifas sin tocar código.
03 / Capítulo
La solución
- 01
Visor 3D en tiempo real con React Three Fiber — la ventana o puerta se arma y rota en pantalla mientras ajustas medidas, montaje (pared, flotante, exterior) y tipo de apertura (fija, corrediza, abatible, arco…)
- 02
Editor de forma libre: arrastra los vértices del marco, teclea la medida exacta de cada lado en cm y verifica la escuadra del vano con las diagonales — clave en obra real
- 03
Motor de precios cubierto por pruebas (Vitest) — perfil de aluminio por metro lineal, vidrio por m², herrajes, merma, mano de obra, descuento e IVA, recalculado al instante con cada cambio
- 04
Cotizaciones multi-partida con folio, vigencia y marca del taller — preview 2D en alzado (SVG, imprimible), exportable a PDF y enviable por WhatsApp en un toque
- 05
Panel de administración con Supabase Auth: dashboard de cotizaciones recibidas y editor de tarifas — los cambios de precio se reflejan en el cotizador al instante, sin tocar código
- 06
Seguridad a nivel de base de datos con Row Level Security: catálogo de lectura pública para que el cotizador funcione, pero escritura restringida a administradores en allowlist — defensa en profundidad sobre Server Actions y middleware
04 / Capítulo
El sistema
05 / Capítulo
Resultado
3D
Vista previa en tiempo real
RLS
Seguridad a nivel de base de datos
Cotización + envío por WhatsApp
Ver vende: un visor 3D convierte una cifra abstracta en algo que el cliente entiende y aprueba más rápido.
El motor de precios es el corazón del producto — cubrirlo con pruebas (tipos de ventana, multi-partida, forma libre, descuentos) fue lo que me dejó cambiar tarifas sin miedo a romper una cotización.
Una herramienta que el taller mantiene solo necesita un panel propio: editor de tarifas + RLS significa que cambian precios sin tocar código y sin poder romper la seguridad.