GenetecGenetec UI Kit
Um teste técnico: uma demonstração de eventos com tabela, cronologia acessível por teclado e formulário validado.
Maquetes em dispositivos e capturas de sites públicos de outubro de 2026. Os sites podem incluir alterações posteriores à minha participação.
Visão geral
Para uma avaliação técnica da Genetec, criei três componentes reutilizáveis numa demo funcional: uma tabela de eventos, uma linha temporal e um formulário de eventos. Partilham os dados, por isso adicionar um evento atualiza as duas vistas. Trata-se de um projeto de avaliação, não de um produto da Genetec em produção.
O objetivo
Criar componentes reutilizáveis com estado partilhado, estados de carregamento e erro claros e interações acessíveis por teclado.
O meu trabalho
Usei React e TypeScript com slices de estado Zustand separados. O TanStack Table gere a grelha, a linha temporal tem navegação por teclado, e o React Hook Form e o Zod tratam da validação e do foco no primeiro campo inválido.
Resultados
- DataGrid: 200 linhas, paginação, ordenação, multi-filtro, visibilidade de coluna configurável
- Timeline: eventos agrupados por dia, navegação com teclas de seta, anúncios aria-live
- Formulário de evento: validação Zod, foco do primeiro campo inválido, região de sucesso
Tem um projeto em mente?
Conte-me o que pretende criar. Podemos discutir o âmbito e os próximos passos.
