Strackr

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 composant 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 composant créé 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 composant avec de nouveaux composants pour gérer le positionnement des éléments (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 du développer un outil pour l'occasion pour permettre la traduction des fichiers de définition OpenAPI en type TypeScript. Cet outil, nommé o2ts, a permis d'améliorer la stabilité du code et évite de nombreux bugs lors de l'évolution du format de l'API.