GenetecGenetec UI Kit
Tehnički zadatak: demo događaja s tablicom, vremenskom crtom dostupnom tipkovnicom i provjerom obrasca.
Makete na uređajima i snimke javnih web-stranica iz listopada 2026. Stranice mogu sadržavati promjene nastale nakon mog sudjelovanja.
Pregled
Za tehnički zadatak tvrtke Genetec izradio sam tri komponente za višekratnu upotrebu u funkcionalnom demu: tablicu događaja, vremensku crtu i obrazac događaja. Dijele podatke, pa dodavanje događaja ažurira oba prikaza. Riječ je o projektu za procjenu, a ne o produkcijskom proizvodu tvrtke Genetec.
Zadatak
Izraditi komponente za višekratnu upotrebu sa zajedničkim stanjem, jasnim stanjima učitavanja i pogreške te pristupačnim upravljanjem tipkovnicom.
Moj rad
Koristio sam React i TypeScript s odvojenim Zustand odsječcima stanja. TanStack Table upravlja tablicom, vremenska crta podržava navigaciju tipkovnicom, a React Hook Form i Zod brinu o validaciji i fokusu na prvo neispravno polje.
Rezultati
- DataGrid: 200 redaka, paginacija, sortiranje, multi-filtriranje, konfigurabilna vidljivost stupaca
- Vremenska crta: događaji grupirani po danu, navigacija strelicama, aria-live objave
- Obrazac događaja: Zod validacija, fokus prvog nevaljanog polja, regija uspjeha
Imate ideju za projekt?
Opišite što želite izraditi. Razgovarat ćemo o opsegu i sljedećim koracima.
