How fed-republic/tv-board works
TV Board is a Vue app for browsing TVmaze shows by genre, with rating-sorted dashboard rows as its main workflow. Readers can expand a genre, search the live API, open show details, and view bookmarked or liked shows; genre and search filters are shareable through the URL. The README documents index paging, session caching, device-local saved IDs, and theme preferences. The graph follows documented architecture and capabilities; some page-to-store wiring is inferred from that documentation because those source files were not sampled.
Main entry points: index.ts Router · shows.ts Show index store · endpoints.ts TVmaze endpoints · HomePage.vue Genre dashboard
Components 23
Show discovery
- Genre dashboard
src/pages/HomePage.vue - Search page
src/pages/SearchPage.vue - Show detail
src/pages/ShowDetailPage.vue - Saved shows
src/pages/SavedShowsPage.vue - Genre rows
src/components/show/GenreRow.vue - Search field
src/components/search/SearchField.vue
Shared state
- Search URL state
src/composables/useSearchQuery.ts - Search results
src/composables/useSearchResults.ts - Genre view
src/composables/useGenreView.ts - Genre filter
src/composables/useGenreFilter.ts - Show index store
src/stores/shows.ts - Saved IDs store
src/stores/saved.ts - Theme preference
src/composables/useTheme.ts
API and persistence
- TVmaze endpoints
src/services/tvmaze/endpoints.ts - HTTP client
src/services/http/client.ts - Response mapping
src/services/tvmaze/mappers.ts - Index cache
src/stores/shows-cache.ts
Other components
- Reader
- TVmaze API
- sessionStorage
- localStorage
Connections 25
- Reader → Router: navigates
- Router → Genre dashboard: dispatches
- Router → Search page: dispatches
- Router → Show detail: dispatches
- Router → Saved shows: dispatches
- App shell → Router: renders routes
- Genre dashboard → Show index store: loads index
- Genre dashboard → Genre rows: renders rows
- Genre rows → Genre view: expands genre
- Genre view → Router: updates query
- Search field → Search URL state: sets query
- Search URL state → Router: writes URL
- Search page → Search results: requests results
- Search results → TVmaze endpoints: searches shows
- Search results → Genre filter: narrows results
- Show index store → TVmaze endpoints: loads index
- TVmaze endpoints → HTTP client: requests JSON
- HTTP client → TVmaze API: fetches data
- TVmaze endpoints → Response mapping: maps responses
- Show index store → Index cache: caches index
- Index cache → sessionStorage: reads and writes
- Saved shows → Saved IDs store: loads saved IDs
- Saved shows → Show index store: resolves shows
- Saved IDs store → localStorage: reads and writes
- App shell → Theme preference: provides theme