VanDiex
Construimos VanDiex como un e-commerce de materiales arquitectónicos de lujo donde el problema no estaba en vender productos, sino en venderlos al cliente correcto: el arquitecto y el interiorista no compran por una ficha genérica, compran por marca, acabado y especificación. Por eso levantamos un storefront a medida en Next.js (47 rutas, 23 módulos, 265 archivos) con páginas showcase inmersivas por marca, y modelamos el cierre real del negocio con un sistema de cotización completo —formulario, PDF en el navegador y email— en vez de forzar un carrito. Detrás corre una arquitectura de dos cerebros: MedusaJS para lo transaccional y PayloadCMS (11 colecciones, ficha de producto de 6 pestañas, perfiles de marca y case studies con antes/después) para el contenido rico, unidos por un mapper propio, más una capa de proveedores para alimentar el catálogo curado. La prueba: el storefront, el CMS y la capa de datos ya están desplegados en staging y producción, con un pipeline CI/CD que reconstruye solo el componente que tocas.
Categoría
E-Commerce
Stack
Next.js, TypeScript, PostgreSQL
Status
En desarrollo
El problema
Las marcas premium de griferia, herrajes y pisos (Phylrich, Emtek, Hansgrohe, Moretti) no se venden con una ficha genérica de e-commerce: el arquitecto y el interiorista compran por especificación técnica, acabado y prestigio de marca. Una plantilla de tienda estándar abarata esos productos y pierde la venta. Además el catálogo viene de proveedores con sus propios formatos, y el cierre real no es un "agregar al carrito" sino una cotización formal.
Lo que construimos
- —Storefront a medida en Next.js / React con 47 rutas y 23 módulos de UI (265 archivos), routing por región (mx/MXN por defecto) y estética minimalista de alta gama tipo Apple
- —Páginas showcase de marca inmersivas: hero cinemático, galería con lightbox, catálogo con filtros y secciones de FAQ y servicios, sobre un template reutilizable más una ruta dinámica por marca
- —Sistema de cotizaciones completo (≈743 líneas): modal con formulario validado, generación de PDF en el navegador y servicio de email, con endpoint de cotización en el backend
- —CMS de contenido en PayloadCMS con 11 colecciones: Productos con ficha de 6 pestañas (básica, especificaciones, precios, multimedia, SEO, relaciones), Marcas con perfil rico (certificaciones, premios, garantía, sostenibilidad) y Case Studies con antes/después
- —Capa de proveedores (colecciones Suppliers y SupplierProducts, ~560 líneas) para ingerir y mapear catálogos externos al modelo del catálogo curado
- —Backend transaccional MedusaJS (productos, variantes, precios, carrito, checkout, órdenes, regiones) con endpoint custom de cotización
- —Checkout con Stripe Elements de extremo a extremo (direcciones, envío, pago, revisión, confirmación)
- —Transferencia de órdenes entre usuarios por token (aceptar/rechazar), una mecánica poco común en e-commerce
- —Integración dual de datos: Medusa para lo transaccional y Payload para el contenido enriquecido, con un cliente y mapper que traduce el contenido de Payload al formato de Medusa
- —Pipeline CI/CD con detección selectiva de cambios (rebuild solo del componente tocado), contenedores y despliegue staging/producción
Resultados
47 rutas de página y 23 módulos de UI (265 archivos .ts/.tsx) en el storefront
11 colecciones en el CMS; la ficha de Producto define 6 pestañas de especificación (Products.ts ≈496 líneas)
Sistema de cotizaciones de ≈743 líneas (modal, generador de PDF, servicio de email, cliente API)
Backend de e-commerce + CMS desplegados en staging y producción; storefront en staging (producción pendiente)
CI/CD con rebuild selectivo por componente (storefront / Medusa / CMS) sobre Docker multi-stage