Szablon dla projektów

Ograniczenia ⚠️

• szablon zakłada architekturę SPA + API bez Server Side Renderingu

Technologie/elementy

Szablon przygotowany z myslą o pracy w środowisku:

• node 22.14.0

• yarn 4 (jest cześcią repo)

• Bazowa struktura: vite.dev

• Frontend:

  • react
  • Style: CSS Modules
  • Wykonywanie zapytań do serwera: Axios HTTP
  • Obsługa komunikacji z serwerem: TanStack Query
  • Routing: react Router
  • Podstawowe Komponenty: React Aria
  • Obsługa formularzy: React Hook Form

• Backend:

  • Podstawowa bilbioteka: Expressjs
    • Obsługa zapytań CORS: cors
  • Baza danych: MongoDB
    • Biblioteka: mongoose
    • Podgląd w środowisku developerskim: mongo-express

• Testy:

  • Wizualne: Storybook
  • Jednostkowe: Vitest
  • Mockowanie komunikacji z serwerem Mock Service Worker
  • UI: React Testing Library
  • Testy obsługi zapytań: supertest
  • Testy operacji na bazie danych: vitest-mongodb

Polecenia

• yarn dev - serwer developerski frontendu
• yarn server:dev - server developerski backendu
• yarn storybook - server developerski Storybook
• yarn test - testy jednostkowe frontend + backend
• yarn test:all - testy jednostrowe frontend + backend + storybook

---

Środowiska

Developerskie

Szablon zakłada że developer ma lokalnie uruchomionego Dockera

Inicjalizacja bazy danych:

docker compose -p template-project -f ./.docker/dev/docker-compose.yml up --build -d

Ustawienia edytora (VS Code)

Nowy plik *.stories.ts(x)

Jeżeli kożystamy z VS Code i mamy zainstalowaną wtyczkę "Auto Snippet" (jest na liście zalecanych w ustawieniach projektu) to po stworzeniu nowego pliku *.stories.ts(x) zostanie do niego dodane podstawowy kod.

How to

Integracja React Aria z React Hook Form

Przykład: src\components\widgets\name-form\name-form.tsx

Źródła

• https://react-spectrum.adobe.com/react-aria/forms.html#react-hook-form

---

Testy:

Mockowanie API w testach aplikacji frontendowej

Przykłady:

• src\network\requests\get-todolist.test.ts
• src\network\requests\post-todolist-item.test.ts

Źródła

• MSW Intercepting request

---

Testy react hooks z react-query

Przykład: src\modules\todolist\use-todolist.test.tsx

Źródła

• TanStack Query Testing

Testowanie obsługi zapytań w API

Przykład: server\api\router.test.ts

Źródła

• Supertest

Testowanie obsługi bazy danych

Przykłady:

• server\selectors\get-todolist.test.ts
• server\selectors\add-todolist-item.test.ts

Źródła

• vitest-mongodb