How matthcol/react202609_base works
This React cinema application lets users browse and filter movies, build playlists, and view playlist duration. The main screen presents three variants: a local-state manager backed by bundled movie data, a reducer demonstration, and a global manager that fetches a page from the documented JSON Server API and shares playlist state through context. The graph follows documented and indexed component relationships; unsampled implementation details are not inferred.
Main entry points: App.tsx App screen · MovieManager.tsx Local manager · GlobalMovieManager.tsx Global manager · movie.ts Movie type
Components 20
Application shell
- React entry
src/main.tsx - App screen
src/components/App.tsx - Headers
src/components/Headers.tsx - Intro
src/components/Intro.tsx - Collapsible
src/components/Collapsible.tsx
Movie browsing
- Local manager
src/components/MovieManager.tsx - Movie card
src/components/MovieCard.tsx - Global manager
src/components/globalmanager/GlobalMovieManager.tsx - Global movie card
src/components/globalmanager/GlobalMovieCard.tsx
Playlist state
- Local playlist view
src/components/MoviePlaylist.tsx - Reducer demo
src/components/MovieManagerReducer.tsx - Playlist controls
src/components/globalmanager/GlobalMovieControls.tsx - Global playlist
src/components/globalmanager/GlobalMoviePlaylist.tsx - Playlist context
src/contexts/MoviePlaylistContext.tsx - Playlist reducer
src/reducers/moviePlaylistReducer.ts
Movie data
- Movie type
src/types/movie.ts - Bundled movies
data/movies.json - Movie API service
src/services/movieApiService.ts
Other components
- Browser user
- JSON Server
Connections 28
- Browser user → React entry: opens app
src/main.tsx - React entry → App screen: renders
src/main.tsx - React entry → Playlist context: provides state
src/main.tsx - App screen → Headers: renders
src/components/App.tsx - App screen → Intro: renders
src/components/App.tsx - App screen → Collapsible: wraps views
src/components/App.tsx - App screen → Local manager: renders
src/components/App.tsx - App screen → Reducer demo: renders
src/components/App.tsx - App screen → Global manager: renders
src/components/App.tsx - Local manager → Bundled movies: loads
src/components/MovieManager.tsx - Local manager → Movie card: renders filtered
src/components/MovieManager.tsx - Local manager → Local playlist view: renders
src/components/MovieManager.tsx - Local manager → Movie type: uses type
src/components/MovieManager.tsx - Movie card → Movie type: displays
src/components/MovieCard.tsx - Global manager → Movie API service: fetches page
src/components/globalmanager/GlobalMovieManager.tsx - Global manager → Global playlist: renders
src/components/globalmanager/GlobalMovieManager.tsx - Global manager → Global movie card: renders filtered
src/components/globalmanager/GlobalMovieManager.tsx - Global manager → Bundled movies: imports
src/components/globalmanager/GlobalMovieManager.tsx - Global movie card → Playlist controls: renders
src/components/globalmanager/GlobalMovieCard.tsx - Global movie card → Movie type: displays
src/components/globalmanager/GlobalMovieCard.tsx - Global playlist → Playlist context: reads and dispatches
src/components/globalmanager/GlobalMoviePlaylist.tsx - Global playlist → Global movie card: renders
src/components/globalmanager/GlobalMoviePlaylist.tsx - Playlist controls → Playlist context: dispatches actions
src/components/globalmanager/GlobalMovieControls.tsx - Playlist context → Playlist reducer: updates state
src/contexts/MoviePlaylistContext.tsx - Reducer demo → Playlist reducer: dispatches actions
src/components/MovieManagerReducer.tsx - Playlist reducer → Movie type: updates collection
src/reducers/moviePlaylistReducer.ts - Movie API service → JSON Server: requests movies
Readme.md - Movie API service → Movie type: returns movie data
src/services/movieApiService.ts