GenetecGenetec UI Kit
Una prueba técnica: una demo de eventos con tabla, cronología accesible mediante teclado y formulario con validación.
Maquetas en dispositivos y capturas de sitios públicos de octubre de 2026. Los sitios pueden incluir cambios posteriores a mi participación.
Descripción general
Para una prueba técnica de Genetec, creé tres componentes reutilizables en una demo funcional: una tabla de eventos, una línea de tiempo y un formulario de eventos. Comparten los datos, así que añadir un evento actualiza ambas vistas. Es un proyecto de evaluación, no un producto de Genetec en producción.
El objetivo
Crear componentes reutilizables con estado compartido, estados de carga y error claros e interacciones de teclado accesibles.
Mi trabajo
Usé React y TypeScript con slices de estado de Zustand separados. TanStack Table gestiona la tabla, la línea de tiempo admite navegación por teclado, y React Hook Form y Zod se encargan de la validación y del foco en el primer campo no válido.
Resultados
- DataGrid: 200 filas, paginación, ordenamiento, multi-filtrado, visibilidad de columna configurable
- Timeline: eventos agrupados por día, navegación con teclas de flecha, anuncios aria-live
- Formulario de evento: validación Zod, enfoque de primer campo inválido, región de éxito
¿Tienes un proyecto?
Cuéntame qué quieres crear. Hablemos del alcance y los próximos pasos.
