GenetecGenetec UI Kit
Una prova tecnica: una demo eventi con tabella, cronologia accessibile da tastiera e modulo con validazione.
Mockup su dispositivi e schermate di siti pubblici di ottobre 2026. I siti possono includere modifiche successive al mio contributo.
Panoramica
Per una valutazione tecnica di Genetec ho creato tre componenti riutilizzabili in una demo funzionante: una tabella degli eventi, una timeline e un modulo per gli eventi. Condividono i dati, quindi aggiungere un evento aggiorna entrambe le viste. Si tratta di un progetto di valutazione, non di un prodotto Genetec in produzione.
L’obiettivo
Creare componenti riutilizzabili con stato condiviso, stati di caricamento ed errore chiari e interazioni da tastiera accessibili.
Il mio lavoro
Ho usato React e TypeScript con slice di stato Zustand separati. TanStack Table gestisce la griglia, la timeline supporta la navigazione da tastiera, e React Hook Form e Zod si occupano della validazione e del focus sul primo campo non valido.
Risultati
- DataGrid: 200 righe, paginazione, ordinamento, multi-filtro, visibilità colonna configurabile
- Timeline: eventi raggruppati per giorno, navigazione con tasti freccia, annunci aria-live
- Modulo evento: validazione Zod, focus del primo campo non valido, regione di successo
Hai un progetto in mente?
Raccontami cosa vuoi creare. Parliamo dell’ambito e dei prossimi passi.
