frontend-architecture

Skill opisujący strukturę projektu Svelte SPA dla Exceptionless. Zawiera wzorce organizacji kodu: feature slices (pionowe plastry funkcjonalności), grupy tras (route groups) dla uwierzytelniania, współdzielone komponenty UI, wygenerowane modele z API oraz barrel exports. Idealne dla zespołów budujących aplikacje Svelte z czystą separacją logiki biznesowej, autentykacji i komponentów wspólnych.

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/.