SweetPet

Projekt: responsywna strona internetowa z dynamicznym interfejsem i logiką kliencką.

Rozwój interfejsu został zrealizowany w React z modułową architekturą komponentów. Nawigacja między stronami została zrealizowana za pomocą React Router, co zapewnia płynne przejścia i pełne doświadczenie SPA. Zarządzanie globalnym stanem opiera się na stosie Redux Toolkit, logika danych jest podzielona na feature-slice'y, co sprawia, że kod jest zrozumiały i skalowalny.

Formularze mają logiczną walidację i obsługę UX, są zbierane za pomocą React Hook Form i komponentów zgodnych z React Hook Form. UI kit i wizualna część projektu są stylizowane za pomocą Chakra UI, a ogólne style są napisane w SCSS z wykorzystaniem metodologii BEM. W projekcie zintegrowano również klasy użyteczności Tailwind CSS, aby przyspieszyć układ skomplikowanych responsywnych siatek.

Interakcja z serwerem opiera się na architekturze REST, zapytania są wykonywane za pomocą natywnego Fetch API. Niezawodność działania jest pokryta automatycznymi testami: logika — Vitest, scenariusze użytkowników komponentów — React Testing Library.

Kontrola wersji i współpraca odbywają się w środowisku GitLab: struktura gałęzi, przegląd kodu przez merge requests i CI-pipe'y do sprawdzania kompilacji i testów. Projekt jest kompilowany za pomocą Vite, końcowy build jest zoptymalizowany i działa w różnych przeglądarkach, z dokładnym odwzorowaniem makiet z Figma.