Probo est une solution permettant de gérer la mise en conformité de son entreprise vis-à-vis de différents standards. Dans ce cadre, une interface permet aux entreprises de suivre l'évolution de cette mise en conformité ainsi que les différentes actions à mettre en place. L'objectif de ma mission a été de mettre en place le dashboard qui permet ce suivi.
Création d'une base de travail
Au-delà de la création des différents panneaux nécessaires à l'utilisation de l'application, l'objectif était de mettre en place une base de travail solide qui puisse être utilisée pour créer les futures fonctionnalités nécessaires à Probo.
Pour assurer une bonne séparation du code, on a mis en place un système de monorepo afin de pouvoir créer des composants réutilisables dans plusieurs des applications proposées par Probo.
Une particularité de ce projet réside dans le fait que le travail a été réalisé de manière ouverte et l'ensemble du code correspondant au dashboard est disponible sur GitHub.
Données dynamiques avec GraphQL
Afin de pouvoir afficher des données complexes, le backend (écrit en Go) utilise GraphQL pour exposer les données. Côté front-end, on se repose sur la bibliothèque Relay pour gérer la communication avec le backend.
L'application repose beaucoup sur le système de fragments, qui permet de mettre à jour automatiquement les données lorsqu'une mutation a lieu. Il était important de faire en sorte que l'interface se mette à jour dès lors que l'on modifie une donnée.
Il aura fallu un petit moment de réflexion et d'expérimentation afin de trouver une solution qui soit à la fois simple d'utilisation pour les futurs développements, mais aussi capable de gérer les différentes situations (mutation en profondeur, pagination, upload de fichiers...).
Création du site vitrine
Une autre partie de la mission a consisté à créer le site vitrine Probo à partir d'une maquette Figma fournie par le client. Après avoir étudié plusieurs solutions techniques, on a décidé d'utiliser Astro pour gérer la création du site avec des fichiers Markdown pour la gestion de certains contenus (blog, par exemple). La principale difficulté du projet a été d'essayer de respecter au maximum la vision du designer avec l'intégration d'animations.