Multi-Brand Platform
A single Next.js codebase serving 14+ brand websites through DatoCMS. One env variable switches the entire brand — Tailwind theme, CMS data, locales, Shopify config. 20+ CMS-driven section types, atomic design component library, and static generation. The hard part is designing a component API that holds up across every brand without per-brand conditionals.
[About]
The biggest front-end challenge I have faced: designing a component API that holds up across 14+ brand websites without a single per-brand conditional. Every component consumes the same props, but Tailwind theme tokens swap the entire visual identity — colors, typography, spacing — through a single environment variable. I built the atomic design library from scratch, from primitive UI atoms up to 20+ CMS-driven section types that editors compose into full pages inside DatoCMS. Type safety was non-negotiable at this scale. I introduced a GraphQL codegen pipeline that generates TypeScript interfaces directly from the CMS schema, so when an editor renames a field or adds a new block, the build breaks before it reaches production. Every component's props are derived from the generated types — no manual typing, no any, no guessing. The hardest part is abstraction longevity. Every new brand stress-tests the component API — if the abstraction leaks, it cascades across every site. I had to make constant trade-offs between flexibility and strictness, choosing render strategies per brand (SSR, ISR, static) to keep each site's Core Web Vitals and SEO healthy independently.
[Stack]