Genetec UI Kit

Overview

For a Genetec technical assessment, I built three reusable components in a working demo: an event table, a timeline and an event form. They share event data, so adding an event updates both views. This is an assessment project, not a production Genetec product.

The goal

Build reusable components with shared state, clear loading and error states, and accessible keyboard interactions.

What I built

I used React and TypeScript with separate Zustand state slices. TanStack Table handles the grid; the timeline has keyboard navigation; React Hook Form and Zod handle validation and focus on the first invalid field.

Delivered

• Table with sorting, filtering and pagination over 200 sample events
• Timeline with keyboard navigation and screen-reader announcements
• Validated form that updates both event views
• Reusable components with separate state responsibilities