L'objectif du projet était de travailler sur la nouvelle version de l'interface de Strackr, une application qui permet le suivi d'affiliation depuis un seul dashboard.
Création d'un design system
Afin de préparer le redesign, la première étape a été de créer une librairie de composants à partir d'un design créé avec Figma. Pour présenter les composants dans un environnement isolé, j'ai choisi d'utiliser Storybook.
Pour organiser la grande quantité de composants, j'ai utilisé le principe de l'Atomic Design en séparant les composants en 3 grandes catégories :
- Atomes
- Molécules
- Organismes
Cette organisation permet de s'y retrouver plus facilement dans la centaine de composants utilisés dans l'application.
Développement incrémental
Une fois la librairie de composants créée, une nouvelle partie de la mission a consisté à les mettre en place pour créer les différents écrans de l'application. Cela a permis de continuer à développer la librairie de composants avec de nouveaux éléments pour gérer le positionnement (Stack, Row, ...).
Afin de maintenir une bonne organisation du projet, j'ai mis en place un système de monorepo basé sur pnpm et turborepo.
Des outils sur mesure
L'application communique de manière importante avec une API documentée avec OpenAPI. Pour assurer un typage de bout en bout, j'ai dû développer un outil pour l'occasion afin de permettre la traduction des fichiers de définition OpenAPI en types TypeScript. Cet outil, nommé o2ts, a permis d'améliorer la stabilité du code et d'éviter de nombreux bugs lors de l'évolution du format de l'API.