Active

Hoodii Platform

A Turborepo monorepo powering eight live web applications across distinct brands. One codebase, shared infrastructure, independent identities.

Situation

Multiple brands being built simultaneously: different clients, different visual identities, but the same underlying technology stack (Next.js, Tailwind, Sanity CMS, Vercel). I was the sole engineer working across all projects at the same time.

Complication

Separate repos meant duplicating components, build configs, and bug fixes across every project. Every time I fixed something in the button component, I'd have to do it in four places. Keeping parity between projects would quickly become low-value manual work. I needed to share the engineering without blending the brands.

What I Did

I built a Turborepo monorepo with a clear separation between shared packages and per-brand applications. Shared packages handle everything brand-agnostic: UI components, animation primitives, form validation, SEO metadata, and environment variable schemas. Each app imports what it needs and applies its own design tokens.

Brand differentiation happens through a thin CSS custom properties layer. Colors, typography scales, border radii, and spacing all resolve to brand-specific values. The same button component renders with completely different visual treatment depending on which app imports it.

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

Result

8 live apps from one codebase. One component update applies to all brands. One Sanity studio manages all content. Full platform builds complete in under two minutes. The complexity of maintaining multiple brands was solved once.

8 live apps

All deployed and maintained from one repo

60+ components

Shared UI library with Storybook docs

6 packages

UI, tokens, motion, forms, SEO, env

4 distinct brands

Each with independent visual identity

Sub-2min builds

Turborepo with caching and parallel execution

1 Sanity studio

Multiple datasets, one admin interface

Tech Stack

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

← All work Next: Journal Research →