GenetecGenetec UI Kit
Un exercice technique : une démonstration de gestion d’événements avec tableau, chronologie accessible au clavier et formulaire validé.
Maquettes sur appareils et captures de sites publics d’octobre 2026. Les sites peuvent inclure des modifications apportées après mon intervention.
Aperçu
Pour une évaluation technique de Genetec, j’ai créé trois composants réutilisables dans une démo fonctionnelle : un tableau d’événements, une frise chronologique et un formulaire d’événement. Ils partagent les données, si bien qu’ajouter un événement met à jour les deux vues. Il s’agit d’un projet d’évaluation, pas d’un produit Genetec en production.
L’objectif
Créer des composants réutilisables avec un état partagé, des états de chargement et d’erreur clairs et des interactions clavier accessibles.
Mon travail
J’ai utilisé React et TypeScript avec des tranches d’état Zustand séparées. TanStack Table gère la grille, la frise se parcourt au clavier, et React Hook Form et Zod assurent la validation et le focus sur le premier champ invalide.
Résultats
- DataGrid : 200 lignes, pagination, tri, multi-filtrage, visibilité de colonne configurable
- Timeline : événements groupés par jour, navigation aux touches fléchées, annonces aria-live
- Formulaire d'événement : validation Zod, focus du premier champ invalide, région de succès
Un projet en tête ?
Décrivez ce que vous souhaitez créer. Discutons du périmètre et des prochaines étapes.
