Genetec · 2025
Genetec UI Kit - Event Manager
Przegląd
Genetec is a global physical security technology company headquartered in Montreal, delivering unified platforms for video surveillance, access control, and license plate recognition. The test task required building a small library of three reusable, production-quality components and showcasing them in a realistic demo app. The DataGrid handles 200 mock events with client-side pagination, sorting, multi-column filtering, configurable column visibility and labels, and loading/empty/error states. The Timeline renders events grouped by calendar day with full keyboard navigation (Left/Right between groups, Up/Down within groups) and aria-live screen-reader announcements on focus move. The Event Form modal uses React Hook Form + Zod - validates required title and date, shows field-level messages, focuses the first invalid field on submit, and provides cancel/save flow with a success region. All three components are wired through a domain-split Zustand store so adding an event from the form updates both the DataGrid and the Timeline in real time.
Wyzwanie
The task required three independently reusable components - not just a monolithic page. Each had accessibility requirements (WCAG 2.1 AA keyboard navigation, aria-live announcements) and had to share state cleanly. DataGrid needed configurable columns (hide/show, relabel, custom accessor) and explicit loading/empty/error states. The Form had to focus the first invalid field on submit - a detail that requires deliberate DOM management.
Rozwiązanie
Built with Vite + React 19 + TypeScript. Zustand store is split into domain slices (event, datagrid, timeline, modal) - each component owns its slice, shared data flows through the event slice. TanStack Table v8 drives the DataGrid. Timeline keyboard navigation is custom-built with aria-live="polite" for screen reader announcements. React Hook Form + Zod handle validation with useRef-based focus management for the first invalid field. shadcn/ui + Radix UI provide accessible primitive components throughout.
