frontend-architecture

Svelte SPA architecture for Exceptionless. Route groups, lib structure, API client,\nfeature slices, and barrel exports.\nKeywords: route groups, $lib, feature slices, api-client, barrel exports, index.ts,\nvertical slices, shared components, generated models, ClientApp structure

1. Zapoznaj się ze strukturą katalogów w src/Exceptionless.Web/ClientApp. Główne foldery to lib/ (logika aplikacji), routes/ (definicje tras) i app.html (punkt wejścia).

2. Organizuj trasy za pomocą grup tras (route groups) w folderze routes/. Utwórz grupy (app)/ dla tras wymagających uwierzytelniania, (auth)/ dla logowania i rejestracji oraz (public)/ dla stron publicznych. Każda grupa może mieć własny plik +layout.svelte z dedykowanym layoutem.

3. Strukturyzuj logikę biznesową w lib/features/ używając pionowych plastów (feature slices). Każdy feature (np. organizations/, projects/) powinien zawierać: api.svelte.ts z hookami TanStack Query, folder models/ z re-eksportami typów wygenerowanych, schemas.ts z walidacją Zod oraz components/ z komponentami specyficznymi dla tej funkcjonalności.

4. Umieszczaj komponenty wspólne dla całej aplikacji w lib/components/, w tym komponenty UI z biblioteki shadcn-svelte w podfolderze ui/. Typy wygenerowane z API przechowuj w lib/generated/.

5. Używaj barrel exports (pliki index.ts) do eksportowania publicznych interfejsów każdego feature'a, aby uprościć importy w komponentach i zmniejszyć zależności między modułami.

6. Narzędzia pomocnicze i funkcje wspólne przechowuj w lib/utils/. Dla kodu wspólnego między feature'ami użyj folderu lib/features/shared/.