GenetecGenetec UI Kit
Тестове завдання: демо керування подіями з таблицею, доступною з клавіатури шкалою часу та формою з перевіркою даних.
Макети на пристроях і скриншоти публічних сайтів за жовтень 2026 року. Сайти можуть містити зміни, внесені після моєї участі.
Огляд
Для тестового завдання Genetec я створив три повторно використовувані компоненти: таблицю подій, шкалу часу та форму. Вони мають спільні дані: нова подія з’являється в обох представленнях. Це тестовий проєкт, а не продукт Genetec.
Завдання
Створити незалежні компоненти зі спільним станом, зрозумілими станами завантаження й помилок та клавіатурною навігацією.
Що я зробив
Я використав React, TypeScript і окремі частини стану Zustand. TanStack Table керує таблицею, шкала часу має клавіатурну навігацію, а React Hook Form і Zod перевіряють поля форми.
Результат
- Таблиця з фільтрами, сортуванням і пагінацією для 200 тестових подій
- Шкала часу з клавіатурною навігацією й екранними оголошеннями
- Форма оновлює обидва представлення подій
- Компоненти з розділеною відповідальністю за стан
Маєте ідею проєкту?
Розкажіть, що хочете створити. Обговоримо обсяг роботи та наступні кроки.
