GenetecGenetec UI Kit
Technická úloha: ukážka správy udalostí s tabuľkou, časovou osou ovládanou klávesnicou a validovaným formulárom.
Makety na zariadeniach a snímky verejných webov z októbra 2026. Weby môžu obsahovať zmeny vykonané po mojom zapojení.
Prehľad
Pre technické zadanie spoločnosti Genetec som vytvoril tri znovupoužiteľné komponenty vo funkčnom deme: tabuľku udalostí, časovú os a formulár udalosti. Zdieľajú dáta, takže pridanie udalosti aktualizuje oba pohľady. Ide o projekt pre výberové konanie, nie o produkčný produkt Genetec.
Zadanie
Vytvoriť znovupoužiteľné komponenty so zdieľaným stavom, jasnými stavmi načítania a chýb a prístupným ovládaním klávesnicou.
Moja práca
Použil som React a TypeScript s oddelenými stavovými rezmi Zustand. TanStack Table obsluhuje tabuľku, časová os podporuje ovládanie klávesnicou a React Hook Form so Zod zabezpečujú validáciu a zameranie prvého neplatného poľa.
Výsledky
- DataGrid: 200 riadkov, stránkovanie, triedenie, multi-filtrovanie, konfigurovateľná viditeľnosť stĺpcov
- Časová os: udalosti zoskupené podľa dňa, navigácia šípkami, aria-live oznamovacia
- Formulár udalostí: validácia Zod, zameranie prvého neplatného poľa, oblasť úspechu
Máte nápad na projekt?
Opíšte, čo chcete vytvoriť. Preberieme rozsah a ďalšie kroky.
