GenetecGenetec UI Kit
Een technische opdracht: een eventdemo met tabel, toetsenbordtoegankelijke tijdlijn en gevalideerd formulier.
Apparaatmockups en schermafbeeldingen van openbare websites uit oktober 2026. De sites kunnen wijzigingen bevatten die na mijn bijdrage zijn aangebracht.
Overzicht
Voor een technische opdracht van Genetec bouwde ik drie herbruikbare componenten in een werkende demo: een gebeurtenissentabel, een tijdlijn en een gebeurtenisformulier. Ze delen de data, dus een nieuwe gebeurtenis werkt beide weergaven bij. Dit is een sollicitatieopdracht, geen Genetec-product in productie.
Het doel
Herbruikbare componenten bouwen met gedeelde state, duidelijke laad- en foutstatussen en toegankelijke toetsenbordinteractie.
Mijn werk
Ik gebruikte React en TypeScript met aparte Zustand-state-slices. TanStack Table verzorgt het raster, de tijdlijn heeft toetsenbordnavigatie, en React Hook Form en Zod regelen de validatie en de focus op het eerste ongeldige veld.
Resultaten
- DataGrid: 200 rijen, paginering, sortering, multi-filtering, configureerbare kolomzichtbaarheid
- Tijdlijn: gebeurtenissen gegroepeerd per dag, pijltjesnavigatie, aria-live aankondigingen
- Gebeurtenisformulier: Zod-validatie, focus op eerste ongeldig veld, succesbereik
Een project in gedachten?
Vertel wat u wilt bouwen. We bespreken de omvang en de volgende stappen.
