How amanpathak-devops/netflix-clone-k8s-end-to-end-project works
This repository tree covers the React/Vite Netflix-style frontend, not the infrastructure and CI/CD components described elsewhere in the README. Its user workflow is to enter the app, browse movie and genre collections, open a title’s details and related titles, then watch a video. The source excerpts show app initialization, TMDB query construction, and detail-modal behavior; other page and integration relationships are only represented where documented, so unsampled links are omitted or marked unverified.
Main entry points: DetailModal.tsx Title detail modal · main.tsx React entry · index.tsx Route setup · discover.ts Discovery queries
Components 23
App shell
- React entry
Application-Code/src/main.tsx - Route setup
Application-Code/src/routes/index.tsx - Navigation header
Application-Code/src/components/layouts/MainHeader.tsx - Dark theme
Application-Code/src/theme/palette.ts - Shared UI components
Application-Code/src/components
Browse and discover
- Home page
Application-Code/src/pages/HomePage.tsx - Genre explore
Application-Code/src/pages/GenreExplore.tsx - Search control
Application-Code/src/components/SearchBox.tsx - Video carousel
Application-Code/src/components/slick-slider/SlickSlider.tsx - Video cards
Application-Code/src/components/VideoItemWithHover.tsx - Pagination helper
Application-Code/src/hoc/withPagination.tsx - Discovery queries
Application-Code/src/store/slices/discover.ts - TMDB API base
Application-Code/src/store/slices/apiSlice.ts - Genre data types
Application-Code/src/types/Genre.ts
Title details
- Detail modal state
Application-Code/src/providers/DetailModalProvider.tsx - Title detail modal
Application-Code/src/components/DetailModal.tsx - Similar titles
Application-Code/src/components/SimilarVideoCard.tsx - Movie data types
Application-Code/src/types/Movie.ts
Video playback
- Watch page
Application-Code/src/pages/WatchPage.tsx - Video.js player
Application-Code/src/components/watch/VideoJSPlayer.tsx - Player controls
Application-Code/src/components/watch/PlayerControlButton.tsx
Other components
- Viewer
- TMDB service
Connections 18
- Viewer → React entry: opens app
- React entry → Route setup: mounts routes
Application-Code/src/main.tsx - React entry → Dark theme: configures theme
Application-Code/src/main.tsx - React entry → Discovery queries: starts configuration query
Application-Code/src/main.tsx - Navigation header → Search control: renders
Application-Code/src/components/layouts/MainHeader.tsx - Video carousel → Video cards: renders
Application-Code/src/components/slick-slider/SlickSlider.tsx - Video carousel → Genre explore: links to genre
Application-Code/src/components/slick-slider/SlickSlider.tsx - Discovery queries → TMDB API base: injects queries
Application-Code/src/store/slices/discover.ts - TMDB API base → TMDB service: requests data
- Title detail modal → Discovery queries: requests similar titles
Application-Code/src/components/DetailModal.tsx - Title detail modal → Detail modal state: reads modal state
Application-Code/src/components/DetailModal.tsx - Title detail modal → Similar titles: renders results
Application-Code/src/components/DetailModal.tsx - Title detail modal → Video.js player: renders preview
Application-Code/src/components/DetailModal.tsx - Watch page → Video.js player: uses player
- Video.js player → Player controls: uses controls
- Route setup → Home page: routes to
- Route setup → Genre explore: routes to
- Route setup → Watch page: routes to