GenetecGenetec UI Kit
Zadanie rekrutacyjne: demo zarządzania wydarzeniami z tabelą, osią czasu obsługiwaną klawiaturą i walidacją formularza.
Makiety na urządzeniach i zrzuty publicznych stron z października 2026 r. Strony mogą zawierać zmiany wprowadzone po moim udziale.
Przegląd
W ramach zadania technicznego dla Genetec zbudowałem trzy komponenty wielokrotnego użytku w działającym demo: tabelę zdarzeń, oś czasu i formularz zdarzenia. Korzystają ze wspólnych danych, więc dodanie zdarzenia aktualizuje oba widoki. To projekt rekrutacyjny, a nie produkcyjny produkt Genetec.
Cel
Zbudować komponenty wielokrotnego użytku ze wspólnym stanem, czytelnymi stanami ładowania i błędu oraz dostępną obsługą klawiatury.
Moja praca
Użyłem React i TypeScript z osobnymi wycinkami stanu Zustand. TanStack Table obsługuje tabelę, oś czasu ma nawigację klawiaturą, a React Hook Form i Zod odpowiadają za walidację i fokus na pierwszym błędnym polu.
Rezultaty
- DataGrid: 200 wierszy, paginacja, sortowanie, multi-filtrowanie, konfigurowalna widoczność kolumn
- Timeline: zdarzenia pogrupowane po dniu, nawigacja klawiszami strzałek, ogłoszenia aria-live
- Formularz zdarzeń: walidacja Zod, fokus pierwszego nieprawidłowego pola, region sukcesu
Masz pomysł na projekt?
Opowiedz, co chcesz stworzyć. Omówimy zakres i kolejne kroki.
