GenetecGenetec UI Kit
Un test tehnic: o demonstrație de evenimente cu tabel, cronologie accesibilă prin tastatură și formular validat.
Machete pe dispozitive și capturi ale site-urilor publice din octombrie 2026. Site-urile pot include modificări făcute după contribuția mea.
Prezentare generală
Pentru o evaluare tehnică Genetec, am creat trei componente reutilizabile într-un demo funcțional: un tabel de evenimente, o cronologie și un formular de eveniment. Ele partajează datele, astfel că adăugarea unui eveniment actualizează ambele vizualizări. Este un proiect de evaluare, nu un produs Genetec în producție.
Obiectivul
Crearea de componente reutilizabile cu stare partajată, stări clare de încărcare și eroare și interacțiuni accesibile din tastatură.
Munca mea
Am folosit React și TypeScript cu slice-uri de stare Zustand separate. TanStack Table gestionează tabelul, cronologia are navigare din tastatură, iar React Hook Form și Zod se ocupă de validare și de focusul pe primul câmp invalid.
Rezultate
- DataGrid: 200 rânduri, paginare, sortare, multi-filtrare, vizibilitate coloane configurabilă
- Cronologie: evenimente grupate pe zi, navigare săgeți, anunțuri aria-live
- Formular eveniment: validare Zod, focalizare câmp invalid primul, regiune succes
Aveți o idee de proiect?
Spuneți-mi ce doriți să construiți. Discutăm despre amploare și pașii următori.
