GenetecGenetec UI Kit
Technický úkol: ukázka správy událostí s tabulkou, časovou osou ovládanou klávesnicí a validovaným formulářem.
Makety na zařízeních a snímky veřejných webů z října 2026. Weby mohou obsahovat změny provedené po mém zapojení.
Přehled
Pro technické zadání společnosti Genetec jsem vytvořil tři znovupoužitelné komponenty ve funkčním demu: tabulku událostí, časovou osu a formulář události. Sdílejí data, takže přidání události aktualizuje oba pohledy. Jde o projekt pro výběrové řízení, nikoli o produkční produkt Genetec.
Zadání
Vytvořit znovupoužitelné komponenty se sdíleným stavem, jasnými stavy načítání a chyb a přístupným ovládáním klávesnicí.
Moje práce
Použil jsem React a TypeScript s oddělenými stavovými řezy Zustand. TanStack Table obsluhuje tabulku, časová osa podporuje ovládání klávesnicí a React Hook Form se Zod zajišťují validaci a zaměření prvního neplatného pole.
Výsledky
- DataGrid: 200 řádků, stránkování, řazení, multi-filtrování, konfigurovatelná viditelnost sloupců
- Časová osa: události seskupené po dni, navigace šipkou, aria-live oznámení
- Formulář událostí: validace Zod, zaměření na první neplatné pole, oblast úspěchu
Máte nápad na projekt?
Popište, co chcete vytvořit. Probereme rozsah a další kroky.
