Hoodii Platform
Un monorepo de Turborepo que impulsa ocho aplicaciones web en producción para marcas distintas. Un solo codebase, infraestructura compartida, identidades independientes.
Situación
Múltiples marcas siendo construidas en paralelo: diferentes clientes, diferentes identidades visuales, pero el mismo stack tecnológico subyacente (Next.js, Tailwind, Sanity CMS, Vercel). Yo era el único ingeniero trabajando en todos los proyectos simultáneamente.
El Problema
Repositorios separados significaba duplicar componentes, configuraciones de build y correcciones de bugs en cada proyecto. Cada vez que arreglaba algo en el componente de botón, tenía que hacerlo en cuatro lugares. Mantener la paridad entre proyectos se convertiría rápidamente en trabajo manual de bajo valor. Necesitaba compartir la ingeniería sin mezclar las marcas.
Lo Que Hice
Construí un monorepo de Turborepo con una separación clara entre paquetes compartidos y aplicaciones por marca. Los paquetes compartidos manejan todo lo independiente de la marca: componentes UI, primitivos de animación, validación de formularios, metadatos SEO y esquemas de variables de entorno. Cada app importa lo que necesita y aplica sus propios tokens de diseño.
La diferenciación de marca ocurre a través de una capa delgada de propiedades CSS personalizadas. Colores, escalas tipográficas, radios de borde y espaciado se resuelven a valores específicos por marca. El mismo componente de botón se renderiza con tratamiento visual completamente diferente dependiendo de qué app lo importe.
hoodii-platform/
├── apps/
│ ├── hoodii-site Portfolio (this site)
│ ├── themoment-site E-commerce storefront
│ ├── themoment-admin Order management dashboard
│ ├── construction-site Subcontracting brand
│ ├── consulting-site Sport psychology practice
│ ├── studio Sanity CMS (all brands)
│ ├── storybook Component library docs
│ └── health-bridge Android health data bridge
├── packages/
│ ├── ui 60+ shared React components
│ ├── tokens Per-brand CSS variables
│ ├── motion Animation primitives (Framer)
│ ├── forms Validated form components
│ ├── seo Metadata generators
│ └── env Type-safe environment schemas
└── tests/
├── smoke/ Cross-app health checks
├── e2e/ End-to-end test suites
└── accessibility/ WCAG complianceResultado
8 aplicaciones en producción desde un solo codebase. Una actualización de componente se aplica a todas las marcas. Un estudio de Sanity gestiona todos los contenidos. Los builds completos de la plataforma se completan en menos de dos minutos. La complejidad de mantener múltiples marcas se resolvió una sola vez.
8 live apps
Todas desplegadas y mantenidas desde un repo
60+ components
Biblioteca UI compartida con docs en Storybook
6 packages
UI, tokens, motion, forms, SEO, env
4 marcas distintas
Cada una con identidad visual independiente
Builds < 2 min
Turborepo con caché y ejecución paralela
1 Sanity studio
Múltiples datasets, una interfaz de admin
Stack Tecnológico
Frontend
- Next.js 16
- React 19
- TypeScript
- Tailwind CSS
Design System
- Storybook
- Per-brand CSS tokens
- Shared primitives
- Chromatic
Monorepo
- Turborepo
- PNPM Workspaces
- Parallel builds
- Remote caching
CMS
- Sanity.io v3
- Per-app datasets
- Portable Text
- Image CDN
Testing
- Playwright
- Axe-core
- Storybook interaction tests
Infrastructure
- Vercel
- Per-app deployments
- Edge functions
- Sentry