How patilravi/agent-tvshow-vue works
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: DashboardView.vue Discovery Dashboard · ShowDetailView.vue Show Detail Screen · index.ts Route Configuration · show.ts Show Domain Types
Components 18
Application Shell
- Vue Bootstrap
src/main.ts - Router View Shell
src/App.vue - Route Configuration
src/router/index.ts
Show Discovery
- Discovery Dashboard
src/views/DashboardView.vue - Genre Catalog
src/features/shows/composables/useGenreCatalog.ts - Genre Carousel
src/features/shows/components/GenreCarousel.vue - Show Card
src/features/shows/components/ShowCard.vue - Search Bar
src/features/search/components/SearchBar.vue - Show Search
src/features/search/composables/useShowSearch.ts
Show Details
- Show Detail Screen
src/views/ShowDetailView.vue - Not Found Screen
src/views/NotFoundView.vue - Summary Sanitizer
src/views/ShowDetailView.vue
Shared Models UI
- Show Domain Types
src/shared/types/show.ts - Rating Badge
src/shared/ui/RatingBadge.vue - Loading Skeleton
src/shared/ui/SkeletonLoader.vue
Other components
- Viewer
- TVMaze API
- DOMPurify
Connections 30
- Viewer → Route Configuration: opens routes
src/router/index.ts - Vue Bootstrap → Router View Shell: mounts app
src/main.ts - Vue Bootstrap → Route Configuration: installs router
src/main.ts - Router View Shell → Route Configuration: renders routes
src/App.vue - Route Configuration → Discovery Dashboard: routes dashboard
src/router/index.ts - Route Configuration → Show Detail Screen: routes show
src/router/index.ts - Route Configuration → Not Found Screen: routes fallback
src/router/index.ts - Discovery Dashboard → Genre Catalog: loads catalogue
src/views/DashboardView.vue - Discovery Dashboard → Show Search: searches shows
src/views/DashboardView.vue - Discovery Dashboard → Search Bar: renders search
src/views/DashboardView.vue - Discovery Dashboard → Genre Carousel: renders genres
src/views/DashboardView.vue - Discovery Dashboard → Show Card: renders results
src/views/DashboardView.vue - Discovery Dashboard → Loading Skeleton: shows loading
src/views/DashboardView.vue - Search Bar → Discovery Dashboard: emits input
src/features/search/components/SearchBar.vue - Genre Carousel → Show Card: renders shows
src/features/shows/components/GenreCarousel.vue - Show Card → Discovery Dashboard: emits selection
src/features/shows/components/ShowCard.vue - Discovery Dashboard → Show Detail Screen: navigates selection
src/views/DashboardView.vue - Genre Catalog → TVMaze API: fetches catalogue
src/features/shows/composables/useGenreCatalog.ts - Show Search → TVMaze API: fetches matches
src/features/search/composables/useShowSearch.ts - Show Detail Screen → TVMaze API: fetches show
src/views/ShowDetailView.vue - Genre Catalog → Show Domain Types: types catalogue
src/features/shows/composables/useGenreCatalog.ts - Show Search → Show Domain Types: types results
src/features/search/composables/useShowSearch.ts - Discovery Dashboard → Show Domain Types: types selection
src/views/DashboardView.vue - Show Detail Screen → Show Domain Types: types show
src/views/ShowDetailView.vue - Genre Carousel → Show Domain Types: uses buckets
src/features/shows/components/GenreCarousel.vue - Show Card → Show Domain Types: uses show
src/features/shows/components/ShowCard.vue - Show Card → Rating Badge: renders rating
src/features/shows/components/ShowCard.vue - Show Detail Screen → Rating Badge: renders rating
src/views/ShowDetailView.vue - Show Detail Screen → Summary Sanitizer: sanitizes summary
src/views/ShowDetailView.vue - Summary Sanitizer → DOMPurify: sanitizes HTML
README.md