How kzografos/trending-app works
ZenithFlix is a small streaming-catalog demo. The main workflow loads trending titles, lets visitors search and filter them, opens a title’s detail modal and video player, and saves playback progress for the Recently Watched row. A separate sign-in flow uses server actions and a signed, HTTP-only session cookie. The graph also preserves the documented review page. Relationships for unsampled modules are limited to those supported by the README or SOURCE INDEX; the review page’s internal behavior is not expanded.
Main entry points: Browse.tsx Browse coordinator · actions.ts Login actions · ContentModal.tsx Detail modal · useWatchHistory.ts History hook
Components 25
Catalog browsing
- Home page
src/app/page.tsx - Browse coordinator
src/components/browse/Browse.tsx - Trending loader
src/hooks/useTrending.ts - Content API client
src/lib/api.ts - Content route
src/app/api/content/route.ts - Mock catalog data
src/data/content.ts - Search and filters
src/lib/filterContent.ts - Browse toolbar
src/components/browse/BrowseToolbar.tsx - Trending row
src/components/browse/TrendingRow.tsx - Content tile
src/components/browse/ContentTile.tsx
Playback and history
- Detail modal
src/components/content-modal/ContentModal.tsx - Video player
src/components/content-modal/VideoPlayer.tsx - History hook
src/hooks/useWatchHistory.ts - History store
src/lib/watchHistoryStore.ts - Browser localStorage
- Recently watched
src/components/browse/HistoryRow.tsx
Sign-in and session
- Login page
src/app/login/page.tsx - Login form
src/app/login/LoginForm.tsx - Login actions
src/app/login/actions.ts - Login validation
src/lib/validateLogin.ts - JWT session
src/lib/session.ts - Account header
src/components/layout/Header.tsx
Review page
- Review page
src/app/review/page.tsx - ContentBrowser
src/app/review/ContentBrowser.tsx
Other components
- Visitor
Connections 26
- Visitor → Home page: opens
README.md - Home page → Browse coordinator: renders
src/app/page.tsx - Browse coordinator → Trending loader: loads via
src/components/browse/Browse.tsx - Trending loader → Content API client: fetches through
src/hooks/useTrending.ts - Content API client → Content route: requests
README.md - Content route → Mock catalog data: serves
src/app/api/content/route.ts - Browse coordinator → Search and filters: filters with
src/components/browse/Browse.tsx - Browse coordinator → Browse toolbar: renders
src/components/browse/Browse.tsx - Browse coordinator → Trending row: renders
src/components/browse/Browse.tsx - Trending row → Content tile: renders
src/components/browse/TrendingRow.tsx - Browse coordinator → Recently watched: renders
src/components/browse/Browse.tsx - Browse coordinator → Detail modal: renders
src/components/browse/Browse.tsx - Detail modal → Video player: renders
src/components/content-modal/ContentModal.tsx - Detail modal → History hook: records progress via
src/components/content-modal/ContentModal.tsx - Browse coordinator → History hook: reads history via
src/components/browse/Browse.tsx - History hook → History store: uses
src/hooks/useWatchHistory.ts - History store → Browser localStorage: reads and writes
src/lib/watchHistoryStore.ts - Visitor → Login page: opens
README.md - Login page → Login form: renders
src/app/login/page.tsx - Login form → Login actions: submits to
src/app/login/LoginForm.tsx - Login actions → Login validation: validates with
src/app/login/actions.ts - Login actions → JWT session: creates or deletes
src/app/login/actions.ts - Account header → JWT session: reads
src/components/layout/Header.tsx - Account header → Login actions: uses logout
src/components/layout/Header.tsx - Visitor → Review page: opens
README.md - Review page → ContentBrowser: renders
src/app/review/page.tsx