Design system de Sciences Po : une bibliothèque de composants pour React et Angular

J'ai été le développeur principal du design system de Sciences Po, une seule bibliothèque de Web Components pour les applications React et Angular de l'école. Les composants sont rendus côté serveur et conçus autour des exigences du RGAA 4.1 et des WCAG 2.1 AA, jusqu'au formulaire d'authentification utilisable sans JavaScript.

Parler d'un projet similaire Voir les projets clients

Client: Sciences Po
Rôle: Développeur full-stack senior, développeur principal du design system
Durée: 18 mois, de mai 2025 à octobre 2026 (une mission, trois projets)
Cadre: Freelance, via RECSI Group, à distance

001

001·Le contexte

Un design system pour deux frameworks

Ce design system institutionnel a été conçu avec les UX designers de l'école et constitue l'un des trois projets de ma mission pour Sciences Po.

002

002·La démarche

Comment j'ai travaillé sur le design system de Sciences Po

Le besoin et mon rôle: Une seule bibliothèque devait servir les deux frameworks. Développeur principal, j'ai pris en charge ses composants, leur documentation et sa chaîne de livraison.
Contraintes: Un rendu côté serveur, les exigences du RGAA 4.1 et des WCAG 2.1 AA, et un formulaire d'authentification critique utilisable sans JavaScript.
Décisions techniques: Des Web Components en StencilJS avec des surcouches React et Angular, un rendu côté serveur et des design tokens synchronisés entre Figma et le code.
Vérifications et mises en production: J'ai documenté les composants dans Storybook, écrit des tests automatisés et mis en place une chaîne CI/CD pour la bibliothèque.

003

003·Livrables

Ce que j'ai livré sur le design system de Sciences Po

Web ComponentsDes composants StencilJS utilisables en React comme en Angular
Rendu côté serveurDes composants rendus côté serveur comme dans le navigateur
AccessibilitéDes composants conçus autour des exigences du RGAA 4.1 et des WCAG 2.1 AA, dont un formulaire d'authentification utilisable sans JavaScript
Documentation StorybookLes composants documentés avec leurs états et leurs variantes
Design tokensDes tokens synchronisés entre Figma et le code