# patilravi/agent-tvshow-vue architecture

> Architecture diagram of the GitHub repository patilravi/agent-tvshow-vue, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-10-01). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/patilravi/agent-tvshow-vue
- Repository: https://github.com/patilravi/agent-tvshow-vue

## Overview

TV Show Discovery is a Vue single-page app for browsing TVMaze shows by genre, searching the catalogue, and opening routed show details. Users begin on the dashboard: catalogue and search composables fetch and shape TVMaze data, which the dashboard presents through genre carousels or selectable result cards; selecting a show routes to its detail page. Search is debounced and abortable, with its query preserved in the URL. The README also documents summary sanitization and loading/error and fallback behavior. Edges reflect shown calls and documented integrations; unsampled component behavior is not inferred.

Main entry points: [`src/views/DashboardView.vue`](https://github.com/patilravi/agent-tvshow-vue/blob/main/src/views/DashboardView.vue) (Discovery Dashboard), [`src/views/ShowDetailView.vue`](https://github.com/patilravi/agent-tvshow-vue/blob/main/src/views/ShowDetailView.vue) (Show Detail Screen), [`src/router/index.ts`](https://github.com/patilravi/agent-tvshow-vue/blob/main/src/router/index.ts) (Route Configuration), [`src/shared/types/show.ts`](https://github.com/patilravi/agent-tvshow-vue/blob/main/src/shared/types/show.ts) (Show Domain Types)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application Shell"]
  node_bootstrap["Vue Bootstrap<br/>[main.ts]"]
  node_shell["Router View Shell<br/>[App.vue]"]
  node_routing["Route Configuration<br/>[index.ts]"]
end

subgraph group_discovery["Show Discovery"]
  node_dashboard["Discovery Dashboard<br/>[DashboardView.vue]"]
  node_catalog["Genre Catalog<br/>[useGenreCatalog.ts]"]
  node_genreview["Genre Carousel<br/>[GenreCarousel.vue]"]
  node_card["Show Card<br/>[ShowCard.vue]"]
  node_searchbar["Search Bar<br/>[SearchBar.vue]"]
  node_search["Show Search<br/>[useShowSearch.ts]"]
end

subgraph group_details["Show Details"]
  node_detail["Show Detail Screen<br/>[ShowDetailView.vue]"]
  node_notfound["Not Found Screen<br/>[NotFoundView.vue]"]
  node_sanitizer["Summary Sanitizer<br/>[ShowDetailView.vue]"]
end

subgraph group_shared["Shared Models UI"]
  node_models["Show Domain Types<br/>[show.ts]"]
  node_rating["Rating Badge<br/>[RatingBadge.vue]"]
  node_skeleton["Loading Skeleton<br/>[SkeletonLoader.vue]"]
end

node_user(("Viewer"))
node_tvmaze{{"TVMaze API"}}
node_dompurify{{"DOMPurify"}}

node_user -->|"opens routes"| node_routing
node_bootstrap -->|"mounts app"| node_shell
node_bootstrap -->|"installs router"| node_routing
node_shell -->|"renders routes"| node_routing
node_routing -->|"routes dashboard"| node_dashboard
node_routing -->|"routes show"| node_detail
node_routing -->|"routes fallback"| node_notfound
node_dashboard -->|"loads catalogue"| node_catalog
node_dashboard -->|"searches shows"| node_search
node_dashboard -->|"renders search"| node_searchbar
node_dashboard -->|"renders genres"| node_genreview
node_dashboard -->|"renders results"| node_card
node_dashboard -->|"shows loading"| node_skeleton
node_searchbar -->|"emits input"| node_dashboard
node_genreview -->|"renders shows"| node_card
node_card -->|"emits selection"| node_dashboard
node_dashboard -->|"navigates selection"| node_detail
node_catalog -->|"fetches catalogue"| node_tvmaze
node_search -->|"fetches matches"| node_tvmaze
node_detail -->|"fetches show"| node_tvmaze
node_catalog -->|"types catalogue"| node_models
node_search -->|"types results"| node_models
node_dashboard -->|"types selection"| node_models
node_detail -->|"types show"| node_models
node_genreview -->|"uses buckets"| node_models
node_card -->|"uses show"| node_models
node_card -->|"renders rating"| node_rating
node_detail -->|"renders rating"| node_rating
node_detail -->|"sanitizes summary"| node_sanitizer
node_sanitizer -.->|"sanitizes HTML"| node_dompurify

click node_bootstrap "https://github.com/patilravi/agent-tvshow-vue/blob/main/src/main.ts"
click node_shell "https://github.com/patilravi/agent-tvshow-vue/blob/main/src/App.vue"
click node_routing "https://github.com/patilravi/agent-tvshow-vue/blob/main/src/router/index.ts"
click node_dashboard "https://github.com/patilravi/agent-tvshow-vue/blob/main/src/views/DashboardView.vue"
click node_catalog "https://github.com/patilravi/agent-tvshow-vue/blob/main/src/features/shows/composables/useGenreCatalog.ts"
click node_genreview "https://github.com/patilravi/agent-tvshow-vue/blob/main/src/features/shows/components/GenreCarousel.vue"
click node_card "https://github.com/patilravi/agent-tvshow-vue/blob/main/src/features/shows/components/ShowCard.vue"
click node_searchbar "https://github.com/patilravi/agent-tvshow-vue/blob/main/src/features/search/components/SearchBar.vue"
click node_search "https://github.com/patilravi/agent-tvshow-vue/blob/main/src/features/search/composables/useShowSearch.ts"
click node_detail "https://github.com/patilravi/agent-tvshow-vue/blob/main/src/views/ShowDetailView.vue"
click node_notfound "https://github.com/patilravi/agent-tvshow-vue/blob/main/src/views/NotFoundView.vue"
click node_sanitizer "https://github.com/patilravi/agent-tvshow-vue/blob/main/src/views/ShowDetailView.vue"
click node_models "https://github.com/patilravi/agent-tvshow-vue/blob/main/src/shared/types/show.ts"
click node_rating "https://github.com/patilravi/agent-tvshow-vue/blob/main/src/shared/ui/RatingBadge.vue"
click node_skeleton "https://github.com/patilravi/agent-tvshow-vue/blob/main/src/shared/ui/SkeletonLoader.vue"

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_bootstrap,node_shell,node_routing,node_user toneBlue
class node_dashboard,node_catalog,node_genreview,node_card,node_searchbar,node_search toneAmber
class node_detail,node_notfound,node_sanitizer,node_tvmaze toneMint
class node_models,node_rating,node_skeleton toneRose
class node_dompurify toneIndigo
```

## Components

### Application Shell

- [Vue Bootstrap](https://github.com/patilravi/agent-tvshow-vue/blob/main/src/main.ts): `src/main.ts`
- [Router View Shell](https://github.com/patilravi/agent-tvshow-vue/blob/main/src/App.vue): `src/App.vue`
- [Route Configuration](https://github.com/patilravi/agent-tvshow-vue/blob/main/src/router/index.ts): `src/router/index.ts`

### Show Discovery

- [Discovery Dashboard](https://github.com/patilravi/agent-tvshow-vue/blob/main/src/views/DashboardView.vue): `src/views/DashboardView.vue`
- [Genre Catalog](https://github.com/patilravi/agent-tvshow-vue/blob/main/src/features/shows/composables/useGenreCatalog.ts): `src/features/shows/composables/useGenreCatalog.ts`
- [Genre Carousel](https://github.com/patilravi/agent-tvshow-vue/blob/main/src/features/shows/components/GenreCarousel.vue): `src/features/shows/components/GenreCarousel.vue`
- [Show Card](https://github.com/patilravi/agent-tvshow-vue/blob/main/src/features/shows/components/ShowCard.vue): `src/features/shows/components/ShowCard.vue`
- [Search Bar](https://github.com/patilravi/agent-tvshow-vue/blob/main/src/features/search/components/SearchBar.vue): `src/features/search/components/SearchBar.vue`
- [Show Search](https://github.com/patilravi/agent-tvshow-vue/blob/main/src/features/search/composables/useShowSearch.ts): `src/features/search/composables/useShowSearch.ts`

### Show Details

- [Show Detail Screen](https://github.com/patilravi/agent-tvshow-vue/blob/main/src/views/ShowDetailView.vue): `src/views/ShowDetailView.vue`
- [Not Found Screen](https://github.com/patilravi/agent-tvshow-vue/blob/main/src/views/NotFoundView.vue): `src/views/NotFoundView.vue`
- [Summary Sanitizer](https://github.com/patilravi/agent-tvshow-vue/blob/main/src/views/ShowDetailView.vue): `src/views/ShowDetailView.vue`

### Shared Models UI

- [Show Domain Types](https://github.com/patilravi/agent-tvshow-vue/blob/main/src/shared/types/show.ts): `src/shared/types/show.ts`
- [Rating Badge](https://github.com/patilravi/agent-tvshow-vue/blob/main/src/shared/ui/RatingBadge.vue): `src/shared/ui/RatingBadge.vue`
- [Loading Skeleton](https://github.com/patilravi/agent-tvshow-vue/blob/main/src/shared/ui/SkeletonLoader.vue): `src/shared/ui/SkeletonLoader.vue`

### Other components

- **Viewer**
- **TVMaze API**
- **DOMPurify**

## Connections

- Viewer → Route Configuration: opens routes (evidence: `src/router/index.ts`)
- Vue Bootstrap → Router View Shell: mounts app (evidence: `src/main.ts`)
- Vue Bootstrap → Route Configuration: installs router (evidence: `src/main.ts`)
- Router View Shell → Route Configuration: renders routes (evidence: `src/App.vue`)
- Route Configuration → Discovery Dashboard: routes dashboard (evidence: `src/router/index.ts`)
- Route Configuration → Show Detail Screen: routes show (evidence: `src/router/index.ts`)
- Route Configuration → Not Found Screen: routes fallback (evidence: `src/router/index.ts`)
- Discovery Dashboard → Genre Catalog: loads catalogue (evidence: `src/views/DashboardView.vue`)
- Discovery Dashboard → Show Search: searches shows (evidence: `src/views/DashboardView.vue`)
- Discovery Dashboard → Search Bar: renders search (evidence: `src/views/DashboardView.vue`)
- Discovery Dashboard → Genre Carousel: renders genres (evidence: `src/views/DashboardView.vue`)
- Discovery Dashboard → Show Card: renders results (evidence: `src/views/DashboardView.vue`)
- Discovery Dashboard → Loading Skeleton: shows loading (evidence: `src/views/DashboardView.vue`)
- Search Bar → Discovery Dashboard: emits input (evidence: `src/features/search/components/SearchBar.vue`)
- Genre Carousel → Show Card: renders shows (evidence: `src/features/shows/components/GenreCarousel.vue`)
- Show Card → Discovery Dashboard: emits selection (evidence: `src/features/shows/components/ShowCard.vue`)
- Discovery Dashboard → Show Detail Screen: navigates selection (evidence: `src/views/DashboardView.vue`)
- Genre Catalog → TVMaze API: fetches catalogue (evidence: `src/features/shows/composables/useGenreCatalog.ts`)
- Show Search → TVMaze API: fetches matches (evidence: `src/features/search/composables/useShowSearch.ts`)
- Show Detail Screen → TVMaze API: fetches show (evidence: `src/views/ShowDetailView.vue`)
- Genre Catalog → Show Domain Types: types catalogue (evidence: `src/features/shows/composables/useGenreCatalog.ts`)
- Show Search → Show Domain Types: types results (evidence: `src/features/search/composables/useShowSearch.ts`)
- Discovery Dashboard → Show Domain Types: types selection (evidence: `src/views/DashboardView.vue`)
- Show Detail Screen → Show Domain Types: types show (evidence: `src/views/ShowDetailView.vue`)
- Genre Carousel → Show Domain Types: uses buckets (evidence: `src/features/shows/components/GenreCarousel.vue`)
- Show Card → Show Domain Types: uses show (evidence: `src/features/shows/components/ShowCard.vue`)
- Show Card → Rating Badge: renders rating (evidence: `src/features/shows/components/ShowCard.vue`)
- Show Detail Screen → Rating Badge: renders rating (evidence: `src/views/ShowDetailView.vue`)
- Show Detail Screen → Summary Sanitizer: sanitizes summary (evidence: `src/views/ShowDetailView.vue`)
- Summary Sanitizer → DOMPurify: sanitizes HTML (evidence: `README.md`)