Seguridad laboral, capacitación y EPP · Desarrollo Web
Una sola base de código que se comporta como tres sitios distintos: cada marca de Grupo CAEMP vive en su propio dominio, con su color y su logo, pero comparte un único proyecto y un único despliegue.
Cliente
Grupo CAEMP
Duración
≈4 meses de desarrollo (noviembre 2025 – marzo 2026).
Lanzamiento
Marzo 2026 — en producción en los cuatro dominios desde el lanzamiento.
Mi rol
Desarrollo full-stack end-to-end
Grupo CAEMP agrupa tres líneas de negocio claramente diferenciadas: CAEMP OTEC (capacitación certificada SENCE para minería, energía y telecomunicaciones), CAEMP PLUS (comercialización de equipos de protección personal) y Crecimiento (habilidades blandas, liderazgo y talleres vivenciales). Cada una se dirige a un público distinto y necesitaba presentarse con identidad propia —su color, su logotipo y su dominio— para no diluir su propuesta dentro de una marca paraguas genérica.
La salida intuitiva era levantar un sitio por marca. Esa decisión multiplica el costo: tres bases de código que mantener, tres pipelines de despliegue, tres veces el trabajo para corregir un bug transversal o publicar un componente compartido, y una deriva visual inevitable a medida que cada sitio evoluciona por su cuenta.
El desafío de negocio era sostener tres marcas con identidad fuerte y dominios independientes sin pagar el precio de mantener tres proyectos separados, y sin sacrificar el SEO propio de cada dominio.
La solución es una arquitectura multi-dominio: un único proyecto TanStack Start que sirve cuatro dominios (grupocaemp.cl más los tres de marca) desde un solo despliegue. En cada request, el sistema lee el host y resuelve a qué línea de negocio pertenece mediante un match exacto de dominio —deliberadamente exacto para evitar falsos positivos como que grupocaemp.cl coincida con caemp.cl.
El corazón del mecanismo es un rewrite bidireccional a nivel de router. En la entrada, una visita a caempplus.cl/productos se reescribe internamente a la ruta /plus/productos; en la salida, los links que el router genera hacia /plus/productos se devuelven al usuario como /productos, de modo que la URL del dominio de marca permanece limpia y sin el prefijo interno.
Sobre esa resolución de tenant, cada marca compone su propia experiencia: su set de rutas, su configuración de header y footer, sus colores de Tailwind y sus datos de contenido. Los componentes de UI, el layout y la lógica de formularios y envío de correo se comparten; lo específico de cada negocio vive en módulos separados. El resultado son tres sitios con personalidad propia y un solo lugar donde corregir, mejorar y desplegar.
4
dominios servidos
grupocaemp.cl y las tres marcas, desde una sola base de código y un solo despliegue.
3
marcas con identidad propia
color, logo y dominio diferenciados por línea de negocio
Frontend en TanStack Start con React 19 y TypeScript estricto, renderizado en servidor sobre Nitro v2 y empaquetado con Vite. El ruteo es file-based con TanStack Router, y la condición multi-dominio se resuelve en tres capas: un mapa de host→tenant (getTenantFromHost con match exacto), un rewrite bidireccional input/output en el router que traduce entre la URL pública por marca y el prefijo de ruta interno (/crecimiento, /plus, /otec), y un middleware de tenant que inyecta marca y prefijo en el contexto de cada request. El theming por marca se aplica con clases de Tailwind v4 condicionadas al prefijo activo; los componentes de UI usan Radix y shadcn con class-variance-authority. Los formularios se validan con TanStack Form y Zod, y las solicitudes de contacto y cotización se canalizan a través de API routes alojadas en el dominio del grupo (grupocaemp.cl) que envían correo transaccional con Resend y React Email. Todo se entrega como un único despliegue en Vercel, con los cuatro dominios apuntando al mismo build y una whitelist de CORS por origen.
Cada elección respondió a una restricción concreta del proyecto, no a una moda.
Framework full-stack con SSR sobre Nitro y ruteo file-based que expone un hook de rewrite a nivel de router.
Mapa explícito host→marca con match exacto y middleware que inyecta marca y prefijo en el contexto de cada request.
Tokens de color por línea de negocio (azul OTEC, verde PLUS, púrpura Crecimiento) aplicados según el prefijo activo.
Servidor SSR universal que despliega los cuatro dominios como un único build en Vercel.
Un solo proyecto sirve cuatro dominios. El host de cada request resuelve la línea de negocio y un rewrite bidireccional traduce entre la URL pública de la marca y el prefijo de ruta interno, manteniendo URLs limpias por dominio.
CAEMP OTEC (capacitación certificada SENCE), CAEMP PLUS (equipos de protección personal) y Crecimiento (habilidades blandas y talleres), cada una con su catálogo, sus secciones y su contenido propios.
Cada dominio se presenta como un sitio propio con su metadata y locale es_CL, preservando la autoridad y el posicionamiento individual de cada marca.
Cursos para OTEC y Crecimiento, productos EPP para PLUS, y talleres, programas y teatro aplicado para Crecimiento, con páginas de listado filtrable y de detalle.
UI, layout, navegación cross-tenant y lógica de formularios son comunes; las secciones, los datos y la identidad de cada marca viven en módulos separados.
Formularios validados por marca cuyas solicitudes se centralizan en API routes del dominio del grupo y se envían por correo con plantillas en React Email.
Noviembre 2025
Arranque del proyecto y definición de la arquitectura multi-dominio para las tres líneas de negocio del grupo.
Nov 2025 – Mar 2026
Implementación de la resolución de tenant por host, el rewrite bidireccional de rutas, el theming por marca sobre un design system compartido y la carga de contenido de cada línea de negocio.
Marzo 2026
Publicación de los cuatro dominios apuntando a un único despliegue en Vercel.
Hoy
Los cuatro dominios operan sobre una única base de código, con mejora continua de contenido y secciones de cada marca.
Construyo sistemas a medida de extremo a extremo. Conversemos.