GenetecGenetec UI Kit
Technikai próbafeladat: eseménykezelő demó táblázattal, billentyűzettel kezelhető idővonallal és ellenőrzött űrlappal.
Eszközös látványtervek és nyilvános weboldalak képernyőképei 2026 októberéből. Az oldalak a közreműködésem utáni módosításokat is tartalmazhatnak.
Áttekintés
Egy Genetec műszaki feladathoz három újrahasználható komponenst készítettem egy működő demóban: eseménytáblázatot, idővonalat és eseményűrlapot. Közös adatokat használnak, így egy új esemény mindkét nézetet frissíti. Ez felvételi feladat, nem éles Genetec termék.
A feladat
Újrahasználható komponensek építése közös állapottal, egyértelmű betöltési és hibaállapotokkal, valamint akadálymentes billentyűzetes kezeléssel.
Az én munkám
React és TypeScript mellett külön Zustand állapotszeleteket használtam. A táblázatot a TanStack Table kezeli, az idővonal billentyűzettel is bejárható, a validációt és az első hibás mezőre helyezett fókuszt pedig a React Hook Form és a Zod végzi.
Eredmények
- DataGrid: 200 sor, lapozás, rendezés, többszűrés, konfigurálható oszlopok láthatósága
- Idővonal: napi csoportosított események, nyíl navigáció, aria-live bejelentések
- Eseményleírás: Zod ellenőrzés, első érvénytelen mező fókusza, sikerrégió
Van egy projektötlete?
Mondja el, mit szeretne létrehozni. Megbeszéljük a feladatokat és a következő lépéseket.
