Content Catalyst Platform

Overview

Content Catalyst provides a white-label subscriber portal platform for analyst research firms and enterprise insights providers, used by 275,000+ subscribers worldwide. I led the migration of the main product to a modern platform (Next.js App Router, React Server Components, Server Actions, MUI, AWS), delivering the majority of the frontend myself after leading the design and sprint planning.

I owned the frontend design system end to end (Figma, design tokens, variables), establishing conventions used across the main application, the AI assistant, and the admin platform, and built the per-tenant theming, feature-toggle, and locale-aware routing architecture that lets every tenant run its own branding and navigation without forking the codebase.

Design system

Migrated our Figma libraries onto MUI, adopting Figma's variables and modes to keep tokens in sync between design and code. Planned and implemented a dynamic design system for the homepage/showcase area, validated through dynamic mockups before it reached the codebase: a reusable component library (internally versioned V3, then reworked into V4) with easy-to-combine building blocks for content sections, letting new page sections ship fast instead of being bespoke each time.

Features I designed and built

The homepage/showcase configuration system: layout, card variations, and section types that tenants can configure without code changes, plus a customisable showcase header. Showcase-wide loading states: skeletons and Suspense boundaries across both server- and client-rendered parts of the page, which also fed into general Next.js SSR practice improvements on the team.

Category Navigator: the site's mega menu, browsing the platform's content taxonomy (sector, region, and featured content types) in one expandable panel instead of forcing subscribers through a page-by-page category tree. It opens on demand, positions itself against the header, and reuses the same category data structure across desktop and mobile.

Fully customisable header: a primary navigation bar tenants can populate with their own links (left-aligned, unlimited) plus a secondary bar (right-aligned, capped at two links), each configured per tenant in the admin platform without a code change or deploy.

Fully customisable page blocks: the showcase homepage is built from an ordered list of section types (Hero, Promoted Content, Licensed Content by Category Cover, Products & Services, Power BI dashboard embeds, and more) that a tenant admin can add, remove, reorder, and configure without a deploy. Each block type renders differently depending on the tenant's content and settings, from a category cover with an icon and live subscription feed, to a grid of product/service cards, to an embedded Power BI dashboard.

I also consolidated a long-standing IFrame-embedding problem, where CCM pages were each handling iframe embedding differently through several fragmented helper functions, into a single reusable, app-wide component with consistent JavaScript-driven iframe settings.

A design system agents implement against

I migrated the design system out of Figma and into markdown living in the codebase itself: folder-level routing docs (what to read for a given area) plus a per-component spec for anything with real behavioural nuance, covering when to use it, its props, and its API usage, so Claude Code reads the constraints and conventions before touching a component rather than guessing from surrounding code. More detail on this in my AI-Assisted Engineering Workflows write-up.