Une plateforme « headless » pour la création de sites universitaires

Global University Systems gère un vaste réseau international d’universités et d’établissements scolaires. Chaque établissement a besoin de son propre site et, souvent, de plusieurs sous-marques, et le groupe ne cesse d’élargir son réseau. Il leur fallait un moyen de lancer rapidement de nouveaux sites sans avoir à tout recréer à chaque fois.

10up leur a développé une plateforme headless partagée : WordPress sur VIP pour le contenu, avec l’interface utilisateur de chaque site développée en Next.js à l’aide du framework HeadstartWP de 10up. J’ai rejoint le projet au stade de la validation du concept en tant que deuxième ingénieur sous la responsabilité d’un ingénieur senior, et j’ai conçu l’architecture du front-end.

L’objectif était de développer chaque composant une seule fois, puis de l’adapter au thème de chaque marque. Le front-end a été structuré en un monorepo à trois niveaux

• Composants de base : modules de construction non stylisés et accessibles, incluant des primitives polymorphes, partagés par tous les sites
• Packages de marque : composants Linaria basés sur des jetons de design et adaptés au thème de chaque institution. Des marques apparentées pouvaient partager un même package.
• Applications de site : une application Next.js légère par site, utilisant son package de marque ainsi que quelques éléments spécifiques au site, tels que l’en-tête.

Les types de contenu, tels que les programmes, les événements, les actualités et les membres de l’équipe, ont été définis une seule fois et partagés entre tous les sites ; chaque site pouvait désactiver les éléments dont il n’avait pas besoin. La prise en charge multilingue a été intégrée dès le départ, car de nombreuses institutions publient dans plusieurs langues.

• Architecture front-end et preuve de concept
• Bibliothèque de composants de base, jetons de conception et Storybook, avec révision visuelle dans Chromatic
• Packs de marque et applications Next.js pour les établissements du réseau
• Interlocuteur technique front-end pour le client
• Cahier des charges des fonctionnalités, modifications de conception et de fonctionnalités ; analyse et définition du périmètre pour chaque nouveau site ; processus de révision croisée avec un deuxième ingénieur senior une fois le travail réparti.

La validation du concept a été un succès et la plateforme s’est développée pour compter plus d’une douzaine d’applications de site au sein du réseau GUS, notamment Gisma, BSBI, l’Université d’Europe, Saba, St. Matthew’s et l’Université médicale des Amériques.

Mon rôle consistait alors à servir d’interlocuteur principal auprès du client. Chaque établissement avait ses propres parties prenantes et ses propres méthodes de travail, et comme les chefs de projet n’avaient pas de compétences techniques, la plupart des discussions relatives à la conception et aux fonctionnalités passaient par moi. Il s’agissait donc de traduire les demandes de chaque université en un projet que les deux équipes pouvaient mettre en œuvre, tout en veillant à ce que les modifications apportées au front-end et au back-end restent synchronisées.