Education · Global University Systems

A headless platform for launching university sites

Frontend and technical point of contact for a headless WordPress and Next.js platform that runs sites across Global University Systems’ network of universities.

Role
Senior Frontend Engineer at 10up
Services & expertise
  • Frontend Engineering
  • Solution Architecture
  • Visual Design
  • Discovery
  • Technical Delivery
  • Design Systems
  • Component Libraries
  • Headless Architecture
  • Client Consultation
  • Performance Optimisation
  • Accessibility
  • Internationalisation
  • Agile
Stack & Tools
  • Next.js
  • React.js
  • Typescript
  • WordPress VIP
  • HeadstartWP
  • Linaria
  • Storybook
  • Jest
  • Radix UI

Overview

Global University Systems runs a large international network of universities and schools. Each institution needs its own site and often several sub-brands, and the group keeps adding to the network. They needed a way to launch new sites quickly without rebuilding the same things every time.

10up built them a shared headless platform: WordPress on VIP for content, with each site’s front end built in Next.js using 10up’s HeadstartWP framework. I joined at proof of concept stage as the second engineer under a staff engineer, and architected the frontend side.

Strategic Approach

The aim was to build each component once and theme it for each brand. The frontend became a monorepo in three layers:

  • Core components: unstyled, accessible building blocks, including polymorphic primitives, shared by every site
  • Brand packages: Linaria components built on design tokens and themed per institution. Sibling brands could share one package.
  • Site apps: a thin Next.js app per site, using its brand package plus a few site-specific pieces such as the header

Content types such as programmes, events, news and team members were defined once and shared across every site, and sites could switch off what they didn’t need. Multilingual support was built in from the start, because many of the institutions publish in more than one language.

Diagram of the GUS platform: WordPress content feeds thin Next.js site apps, each built on a brand package that sits on a shared core component library.

Deliverables

  • Frontend architecture and proof of concept
  • Core component library, design tokens and Storybook, with visual review in Chromatic
  • Brand packages and Next.js apps for institutions across the network
  • Frontend technical point of contact for the client: feature requirements, design and functionality changes
  • Discovery and scoping for each new site
  • A cross-review process with a second senior engineer once the work was split

Outcome

The proof of concept worked and the platform grew to more than a dozen site apps across the GUS network, including Gisma, BSBI, University of Europe, Saba, St. Matthew’s and Medical University of the Americas.

My job was then to be the frontend voice with the client. Each institution came with its own stakeholders and ways of working, and the project managers weren’t technical, so most design and functionality conversations went through me. That meant translating what each university asked for into something both teams could build, and keeping frontend and backend changes in step.