Todos los proyectos
Activo

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 compliance

Resultado

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