MAYTE_3D: tienda online con personalizador 3D (en desarrollo)
En desarrollo, todavía sin publicar. Tienda online para un taller de impresión 3D, resina, grabado láser y sublimación: catálogo, carrito, cuentas con puntos, un personalizador donde el cliente sube su diseño y lo ve en 3D sobre el producto, y un panel para administrar todo el negocio.
El problema
MAYTE_3D fabrica productos a pedido (impresión 3D, resina, grabado láser y sublimación) y vende por WhatsApp e Instagram. Cada pedido personalizado se arma a mano: el cliente manda su imagen por chat, se le pasa un precio, se va y viene con fotos para que vea cómo queda, y el stock, los pagos y los estados se llevan de memoria. No hay un lugar donde el cliente pueda ver el catálogo completo, comprar sin escribir, ni probar su diseño sobre el producto antes de pagar.
Objetivo
Construir una tienda propia donde el cliente pueda comprar o encargar productos personalizados sin intermediarios: elegir el producto, subir su diseño, verlo en 3D, conocer el precio exacto y confirmar el pedido. Y que el negocio pueda administrar catálogo, stock, precios, pedidos, aprobación de diseños, puntos y contenido del sitio desde un panel, sin tocar código.
Contexto
Taller de Melo (Cerro Largo, Uruguay) sin equipo técnico. Requisitos fijados con el dueño: venta en pesos uruguayos, compra como invitado, pagos por transferencia, efectivo o POS coordinados a mano (sin cobro online en esta etapa), retiro en el local o envío a todo el país a cargo de quien recibe, aprobación de cada diseño antes de fabricar, y hasta tres administradores. El proyecto está en desarrollo: corre completo en un entorno local con datos de ejemplo marcados como DEMO, a la espera de los productos, precios y políticas reales para publicarlo.
La solución
Una sola aplicación web con cuatro frentes: Tienda: home editable desde el panel, catálogo con filtros y búsqueda, ficha de producto con variantes y stock, carrito lateral, checkout de una página para invitados o clientes con cuenta, y seguimiento del pedido con número y email. Personalizador 3D: el cliente sube una imagen o escribe un texto, lo mueve, escala y rota sobre la zona imprimible, cambia el color del producto y ve el resultado en 3D en tiempo real, con el precio recalculado por el servidor en cada cambio. Cuenta y puntos: registro, pedidos con línea de tiempo, diseños guardados, direcciones y un programa de puntos configurable que se acredita al entregar y se canjea en el checkout. Panel de administración: pedidos con aprobación de diseños, descarga del archivo listo para imprimir a 300 dpi, pagos y notas; productos con fotos, colores con recargo y stock por variante; reglas de precio y cupones; clientes y ajustes de puntos; modelos 3D; medios de pago y entrega; textos de la home, mensajes, preguntas frecuentes y políticas; y registro de actividad.
Mi trabajo
Desarrollo integral como único desarrollador, desde el relevamiento con el cliente hasta las pruebas: Producto y UX: relevamiento de requisitos, arquitectura de páginas y del panel, identidad visual a partir del logo (fondo oscuro con rojo, amarillo y celeste) y diseño pensado primero para celular. Frontend: tienda, cuenta, panel y personalizador 3D con Three.js y React Three Fiber; animaciones con propósito (intro del logo armándose cara por cara, cubo con profundidad que sigue al mouse, cinta de servicios, contadores, inclinación de tarjetas) respetando "reducir movimiento". Backend: modelo de datos de 49 tablas, motor de precios único, creación de pedidos en transacción, autenticación con roles, subida segura de archivos y 49 acciones de administración auditadas. Modelo 3D: taza generada por código con la convención de materiales del personalizador, y documentación para preparar nuevos modelos en Blender. Calidad: 74 pruebas unitarias y 62 pruebas de navegador que corren en escritorio y celular, incluyendo intentos de manipular precios, stock, puntos y permisos.
Desafíos
Personalización 3D real, no una foto: el diseño se dibuja en un lienzo que se usa como textura del modelo en vivo; la misma función genera la vista previa y el archivo de producción a 300 dpi, así que lo que el cliente ve es lo que se imprime. Celulares sin WebGL: el visor se carga solo al abrir el personalizador, y sin soporte 3D el cliente sigue diseñando sobre una vista plana con las mismas herramientas. Precios imposibles de manipular: el navegador solo manda producto, variante, cantidad y diseño; precio, recargos, cupones, puntos y total se recalculan siempre en el servidor, al cotizar y otra vez al confirmar. Stock sin ventas dobles: el descuento de stock es atómico dentro de la transacción del pedido y una clave de idempotencia evita pedidos duplicados por doble clic. Archivos de clientes seguros: se valida la firma real del archivo, se limita tamaño y resolución, se vuelve a codificar la imagen y solo la ven su dueño y el administrador. Base local para varios procesos: la base de desarrollo (PostgreSQL en WebAssembly) se corrompía con los procesos de Next.js; la solución fue servirla por un puerto con el protocolo de PostgreSQL y un turno seguro por conexión y por transacción.
Decisiones técnicas
Next.js 16 con Cache Components: el esqueleto de cada página es estático y los datos llegan por streaming, así el build no depende de la base. Un motor de precios puro y probado (base, variante, recargos fijos, porcentajes) usado por la ficha, el personalizador, el carrito y el pedido. El pedido guarda una copia del desglose: cambiar un precio mañana no altera pedidos viejos. Editor de diseño propio sobre canvas con coordenadas relativas en lugar de una librería pesada: menos peso en el celular y un único formato de diseño. Pagos detrás de una interfaz y registrados a mano: transferencia, efectivo y POS hoy, Mercado Pago después sin rehacer el checkout. Archivos detrás de un proveedor de almacenamiento: volumen de Railway al empezar, R2 o S3 sin tocar el resto del código. Todo dato que no es real queda marcado como DEMO y el sitio bloquea a los buscadores hasta apagar el modo demostración.
Tecnologías
Frontend
Backend
Base de datos
Herramientas
Funcionalidades
Galería
Documentos
Resultados
Estado: en desarrollo, todavía no publicado. El MVP está completo y funcionando en un entorno local con datos de ejemplo. Falta para publicar: cargar productos, precios y políticas reales del negocio, y desplegar en Railway con base de datos en Neon. Cubre lo que hoy se hace a mano por chat: catálogo, compra, personalización con vista 3D, aprobación de diseños, pagos, stock y fidelización. 74 pruebas unitarias y 62 de navegador, en escritorio y celular, en verde.