# trakt/trakt-web architecture

> Architecture diagram of the GitHub repository trakt/trakt-web, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/trakt/trakt-web
- Repository: https://github.com/trakt/trakt-web

## Overview

Trakt Web is a SvelteKit frontend for browsing media and viewing personal media insights. The main evidenced runtime path is user-facing lists consuming paginated query results; other documented-by-tree capabilities include media presentation, account actions, streaming-service management, analytics, and preview-feature state. The sampled files establish query and streaming-action wiring, but not route composition or the full request-to-API implementation, so those connections are left out where ownership is unclear.

Main entry points: [`projects/client/src/lib/features/query/useQuery.ts`](https://github.com/trakt/trakt-web/blob/main/projects/client/src/lib/features/query/useQuery.ts) (Query observables), [`projects/client/src/lib/sections/settings/_internal/streaming-services/useStreamingServicesActions.ts`](https://github.com/trakt/trakt-web/blob/main/projects/client/src/lib/sections/settings/_internal/streaming-services/useStreamingServicesActions.ts) (Streaming settings actions), [`projects/client/src/lib/utils/storage/safeStorage.ts`](https://github.com/trakt/trakt-web/blob/main/projects/client/src/lib/utils/storage/safeStorage.ts) (Safe browser storage), [`projects/client/src/lib/sections/navbar/components/filter/filters/_internal/useStreamingServiceOptions.ts`](https://github.com/trakt/trakt-web/blob/main/projects/client/src/lib/sections/navbar/components/filter/filters/_internal/useStreamingServiceOptions.ts) (Streaming filters)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Client foundation"]
  node_client_shell["SvelteKit client"]
  node_preview_flags["Preview feature state"]
  node_webview["WebView session keys"]
  node_review_banners["Review banners"]
end

subgraph group_browse["Browse and media"]
  node_list_query["Paginated list state"]
  node_list_ui["Lists and navigation"]
  node_media_ui["Media presentation"]
  node_media_actions["Media actions"]
  node_charts["Media visualizations"]
  node_streaming_options["Streaming filters"]
  node_streaming_logo["Service branding"]
end

subgraph group_account["Account and streaming"]
  node_streaming_settings["Streaming settings actions"]
  node_confirm["Confirmation flow"]
  node_streaming_preferences["Streaming preferences"]
end

subgraph group_platform["Client services"]
  node_query_provider["Query provider"]
  node_query_client["Query client context"]
  node_query_api["Query observables<br/>[useQuery.ts]"]
  node_requests["Request modules"]
  node_analytics["Analytics batching<br/>[createHalEngine.ts]"]
  node_safe_storage["Safe browser storage<br/>[safeStorage.ts]"]
end

node_user(("Web user"))
node_younify["Streaming provider"]
node_hal["HAL analytics service"]

node_user -->|"uses"| node_client_shell
node_client_shell -->|"provides"| node_query_provider
node_query_provider -->|"sets context"| node_query_client
node_query_api -->|"gets client"| node_query_client
node_list_query -->|"queries pages"| node_query_api
node_list_ui -->|"consumes list"| node_list_query
node_streaming_options -->|"queries sources"| node_query_api
node_streaming_logo -->|"queries sources"| node_query_api
node_streaming_options -->|"reads preferences"| node_streaming_preferences
node_streaming_logo -->|"reads country"| node_streaming_preferences
node_streaming_settings -->|"sends sync requests"| node_requests
node_streaming_settings -->|"requests confirmation"| node_confirm
node_streaming_settings -.->|"redirects to connect"| node_younify
node_query_api -->|"uses query functions"| node_requests
node_analytics -.->|"sends batches"| node_hal
node_preview_flags -->|"persists read state"| node_safe_storage
node_webview -->|"defines storage key"| node_safe_storage
node_review_banners -->|"uses dismissal state"| node_safe_storage

click node_client_shell "https://github.com/trakt/trakt-web/tree/main/projects/client/src"
click node_query_provider "https://github.com/trakt/trakt-web/blob/main/projects/client/src/lib/features/query/QueryClientProvider.svelte"
click node_query_client "https://github.com/trakt/trakt-web/blob/main/projects/client/src/lib/features/query/_internal/queryClientContext.ts"
click node_query_api "https://github.com/trakt/trakt-web/blob/main/projects/client/src/lib/features/query/useQuery.ts"
click node_list_query "https://github.com/trakt/trakt-web/blob/main/projects/client/src/lib/sections/lists/stores/usePaginatedListQuery.ts"
click node_list_ui "https://github.com/trakt/trakt-web/tree/main/projects/client/src/lib/components/lists"
click node_media_ui "https://github.com/trakt/trakt-web/tree/main/projects/client/src/lib/components/media"
click node_media_actions "https://github.com/trakt/trakt-web/tree/main/projects/client/src/lib/components/buttons"
click node_charts "https://github.com/trakt/trakt-web/tree/main/projects/client/src/lib/components/charts"
click node_requests "https://github.com/trakt/trakt-web/tree/main/projects/client/src/lib/requests"
click node_streaming_options "https://github.com/trakt/trakt-web/blob/main/projects/client/src/lib/sections/navbar/components/filter/filters/_internal/useStreamingServiceOptions.ts"
click node_streaming_logo "https://github.com/trakt/trakt-web/blob/main/projects/client/src/lib/components/media/streaming-service/useStreamingServiceLogo.ts"
click node_streaming_settings "https://github.com/trakt/trakt-web/blob/main/projects/client/src/lib/sections/settings/_internal/streaming-services/useStreamingServicesActions.ts"
click node_confirm "https://github.com/trakt/trakt-web/tree/main/projects/client/src/lib/features/confirmation"
click node_streaming_preferences "https://github.com/trakt/trakt-web/blob/main/projects/client/src/lib/stores/useStreamingPreferences.ts"
click node_analytics "https://github.com/trakt/trakt-web/blob/main/projects/client/src/lib/features/analytics/_internal/createHalEngine.ts"
click node_preview_flags "https://github.com/trakt/trakt-web/blob/main/projects/client/src/lib/features/feature-flag/useUnreadPreviewFeatures.ts"
click node_safe_storage "https://github.com/trakt/trakt-web/blob/main/projects/client/src/lib/utils/storage/safeStorage.ts"
click node_webview "https://github.com/trakt/trakt-web/blob/main/projects/client/src/lib/features/webview/webviewStorageKey.ts"
click node_review_banners "https://github.com/trakt/trakt-web/blob/main/projects/client/src/lib/sections/banner/_internal/useReviewBanners.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_client_shell,node_preview_flags,node_webview,node_review_banners,node_user toneBlue
class node_list_query,node_list_ui,node_media_ui,node_media_actions,node_charts,node_streaming_options,node_streaming_logo toneAmber
class node_streaming_settings,node_confirm,node_streaming_preferences toneMint
class node_query_provider,node_query_client,node_query_api,node_requests,node_analytics,node_safe_storage toneRose
class node_younify,node_hal toneIndigo
```

## Components

### Client foundation

- [SvelteKit client](https://github.com/trakt/trakt-web/tree/main/projects/client/src): `projects/client/src`
- [Preview feature state](https://github.com/trakt/trakt-web/blob/main/projects/client/src/lib/features/feature-flag/useUnreadPreviewFeatures.ts): `projects/client/src/lib/features/feature-flag/useUnreadPreviewFeatures.ts`
- [WebView session keys](https://github.com/trakt/trakt-web/blob/main/projects/client/src/lib/features/webview/webviewStorageKey.ts): `projects/client/src/lib/features/webview/webviewStorageKey.ts`
- [Review banners](https://github.com/trakt/trakt-web/blob/main/projects/client/src/lib/sections/banner/_internal/useReviewBanners.ts): `projects/client/src/lib/sections/banner/_internal/useReviewBanners.ts`

### Browse and media

- [Paginated list state](https://github.com/trakt/trakt-web/blob/main/projects/client/src/lib/sections/lists/stores/usePaginatedListQuery.ts): `projects/client/src/lib/sections/lists/stores/usePaginatedListQuery.ts`
- [Lists and navigation](https://github.com/trakt/trakt-web/tree/main/projects/client/src/lib/components/lists): `projects/client/src/lib/components/lists`
- [Media presentation](https://github.com/trakt/trakt-web/tree/main/projects/client/src/lib/components/media): `projects/client/src/lib/components/media`
- [Media actions](https://github.com/trakt/trakt-web/tree/main/projects/client/src/lib/components/buttons): `projects/client/src/lib/components/buttons`
- [Media visualizations](https://github.com/trakt/trakt-web/tree/main/projects/client/src/lib/components/charts): `projects/client/src/lib/components/charts`
- [Streaming filters](https://github.com/trakt/trakt-web/blob/main/projects/client/src/lib/sections/navbar/components/filter/filters/_internal/useStreamingServiceOptions.ts): `projects/client/src/lib/sections/navbar/components/filter/filters/_internal/useStreamingServiceOptions.ts`
- [Service branding](https://github.com/trakt/trakt-web/blob/main/projects/client/src/lib/components/media/streaming-service/useStreamingServiceLogo.ts): `projects/client/src/lib/components/media/streaming-service/useStreamingServiceLogo.ts`

### Account and streaming

- [Streaming settings actions](https://github.com/trakt/trakt-web/blob/main/projects/client/src/lib/sections/settings/_internal/streaming-services/useStreamingServicesActions.ts): `projects/client/src/lib/sections/settings/_internal/streaming-services/useStreamingServicesActions.ts`
- [Confirmation flow](https://github.com/trakt/trakt-web/tree/main/projects/client/src/lib/features/confirmation): `projects/client/src/lib/features/confirmation`
- [Streaming preferences](https://github.com/trakt/trakt-web/blob/main/projects/client/src/lib/stores/useStreamingPreferences.ts): `projects/client/src/lib/stores/useStreamingPreferences.ts`

### Client services

- [Query provider](https://github.com/trakt/trakt-web/blob/main/projects/client/src/lib/features/query/QueryClientProvider.svelte): `projects/client/src/lib/features/query/QueryClientProvider.svelte`
- [Query client context](https://github.com/trakt/trakt-web/blob/main/projects/client/src/lib/features/query/_internal/queryClientContext.ts): `projects/client/src/lib/features/query/_internal/queryClientContext.ts`
- [Query observables](https://github.com/trakt/trakt-web/blob/main/projects/client/src/lib/features/query/useQuery.ts): `projects/client/src/lib/features/query/useQuery.ts`
- [Request modules](https://github.com/trakt/trakt-web/tree/main/projects/client/src/lib/requests): `projects/client/src/lib/requests`
- [Analytics batching](https://github.com/trakt/trakt-web/blob/main/projects/client/src/lib/features/analytics/_internal/createHalEngine.ts): `projects/client/src/lib/features/analytics/_internal/createHalEngine.ts`
- [Safe browser storage](https://github.com/trakt/trakt-web/blob/main/projects/client/src/lib/utils/storage/safeStorage.ts): `projects/client/src/lib/utils/storage/safeStorage.ts`

### Other components

- **Web user**
- **Streaming provider**
- **HAL analytics service**

## Connections

- Web user → SvelteKit client: uses
- SvelteKit client → Query provider: provides
- Query provider → Query client context: sets context
- Query observables → Query client context: gets client
- Paginated list state → Query observables: queries pages
- Lists and navigation → Paginated list state: consumes list
- Streaming filters → Query observables: queries sources
- Service branding → Query observables: queries sources
- Streaming filters → Streaming preferences: reads preferences
- Service branding → Streaming preferences: reads country
- Streaming settings actions → Request modules: sends sync requests
- Streaming settings actions → Confirmation flow: requests confirmation
- Streaming settings actions → Streaming provider: redirects to connect
- Query observables → Request modules: uses query functions
- Analytics batching → HAL analytics service: sends batches
- Preview feature state → Safe browser storage: persists read state
- WebView session keys → Safe browser storage: defines storage key
- Review banners → Safe browser storage: uses dismissal state