Engineering · 2025

Customer Center

A customer portal built on a reusable Angular component library — about fifteen components composed into ten-plus sections, from a Figma design to working frontend.

Angular 17UmbracoTypeScriptSCSS

Context

Customer Center is a customer-facing portal for an agency’s clients — where a client follows their projects, milestones, documents, solutions and account health in one place. I built the frontend, through the agency, on top of an Umbraco backoffice.

It is an extensive product: about fifteen reusable components composed into more than ten sections, all driven from the same design system.

The component library

I built the components the portal is assembled from — sidebar, sortable table, tabs with button grouping, a slide-in sidenav, avatar, button group, section title, phone input, dropdown filter, card, favourite list, modal and page title. Each one is built to compose cleanly with the rest rather than as a one-off.

The sections

Those components compose into the portal’s sections: Customers (main and detail with sidenav), Milestones, Projects, Dashboard, Solutions, Health Check, Documents — in both admin and client views — Help & Support, and Profile Settings.

The customer detail page pulls company profile, tabbed content and a quotes table with status states into a single view; the slide-in panel surfaces a change or feature request over the dashboard without a full page change.

How it is built

To keep momentum while the backend was still in progress, I refactored the components against mocked data so the portal could be built and reviewed without waiting on live endpoints. From there I tightened component structure, the CSS-variable system, and the layout and UX in passes.

AI was a working partner throughout — generating component scaffolds and mock fixtures, and running consistency refactors across the variable system — so I could keep my attention on the parts that needed judgment.