# matthcol/react202609_base architecture

> Architecture diagram of the GitHub repository matthcol/react202609_base, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-30). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/matthcol/react202609_base
- Repository: https://github.com/matthcol/react202609_base

## Overview

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: [`src/components/App.tsx`](https://github.com/matthcol/react202609_base/blob/main/src/components/App.tsx) (App screen), [`src/components/MovieManager.tsx`](https://github.com/matthcol/react202609_base/blob/main/src/components/MovieManager.tsx) (Local manager), [`src/components/globalmanager/GlobalMovieManager.tsx`](https://github.com/matthcol/react202609_base/blob/main/src/components/globalmanager/GlobalMovieManager.tsx) (Global manager), [`src/types/movie.ts`](https://github.com/matthcol/react202609_base/blob/main/src/types/movie.ts) (Movie type)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application shell"]
  node_entry["React entry<br/>[main.tsx]"]
  node_appscreen["App screen<br/>[App.tsx]"]
  node_headers["Headers<br/>[Headers.tsx]"]
  node_intro["Intro<br/>[Intro.tsx]"]
  node_collapsible["Collapsible<br/>[Collapsible.tsx]"]
end

subgraph group_catalog["Movie browsing"]
  node_localmanager["Local manager<br/>[MovieManager.tsx]"]
  node_moviecard["Movie card<br/>[MovieCard.tsx]"]
  node_globalmanager["Global manager"]
  node_globalcard["Global movie card"]
end

subgraph group_playlist["Playlist state"]
  node_localplaylist["Local playlist view<br/>[MoviePlaylist.tsx]"]
  node_reducerdemo["Reducer demo"]
  node_controls["Playlist controls"]
  node_globalplaylist["Global playlist"]
  node_context["Playlist context"]
  node_reducer["Playlist reducer"]
end

subgraph group_data["Movie data"]
  node_movie["Movie type<br/>[movie.ts]"]
  node_bundledmovies[("Bundled movies<br/>[movies.json]")]
  node_api["Movie API service<br/>[movieApiService.ts]"]
end

node_browser(("Browser user"))
node_jsonserver[("JSON Server")]

node_browser -->|"opens app"| node_entry
node_entry -->|"renders"| node_appscreen
node_entry -->|"provides state"| node_context
node_appscreen -->|"renders"| node_headers
node_appscreen -->|"renders"| node_intro
node_appscreen -->|"wraps views"| node_collapsible
node_appscreen -->|"renders"| node_localmanager
node_appscreen -->|"renders"| node_reducerdemo
node_appscreen -->|"renders"| node_globalmanager
node_localmanager -->|"loads"| node_bundledmovies
node_localmanager -->|"renders filtered"| node_moviecard
node_localmanager -->|"renders"| node_localplaylist
node_localmanager -->|"uses type"| node_movie
node_moviecard -->|"displays"| node_movie
node_globalmanager -->|"fetches page"| node_api
node_globalmanager -->|"renders"| node_globalplaylist
node_globalmanager -->|"renders filtered"| node_globalcard
node_globalmanager -->|"imports"| node_bundledmovies
node_globalcard -->|"renders"| node_controls
node_globalcard -->|"displays"| node_movie
node_globalplaylist -->|"reads and dispatches"| node_context
node_globalplaylist -->|"renders"| node_globalcard
node_controls -->|"dispatches actions"| node_context
node_context -->|"updates state"| node_reducer
node_reducerdemo -->|"dispatches actions"| node_reducer
node_reducer -->|"updates collection"| node_movie
node_api -->|"requests movies"| node_jsonserver
node_api -->|"returns movie data"| node_movie

click node_entry "https://github.com/matthcol/react202609_base/blob/main/src/main.tsx"
click node_appscreen "https://github.com/matthcol/react202609_base/blob/main/src/components/App.tsx"
click node_headers "https://github.com/matthcol/react202609_base/blob/main/src/components/Headers.tsx"
click node_intro "https://github.com/matthcol/react202609_base/blob/main/src/components/Intro.tsx"
click node_collapsible "https://github.com/matthcol/react202609_base/blob/main/src/components/Collapsible.tsx"
click node_localmanager "https://github.com/matthcol/react202609_base/blob/main/src/components/MovieManager.tsx"
click node_moviecard "https://github.com/matthcol/react202609_base/blob/main/src/components/MovieCard.tsx"
click node_localplaylist "https://github.com/matthcol/react202609_base/blob/main/src/components/MoviePlaylist.tsx"
click node_reducerdemo "https://github.com/matthcol/react202609_base/blob/main/src/components/MovieManagerReducer.tsx"
click node_globalmanager "https://github.com/matthcol/react202609_base/blob/main/src/components/globalmanager/GlobalMovieManager.tsx"
click node_globalcard "https://github.com/matthcol/react202609_base/blob/main/src/components/globalmanager/GlobalMovieCard.tsx"
click node_controls "https://github.com/matthcol/react202609_base/blob/main/src/components/globalmanager/GlobalMovieControls.tsx"
click node_globalplaylist "https://github.com/matthcol/react202609_base/blob/main/src/components/globalmanager/GlobalMoviePlaylist.tsx"
click node_context "https://github.com/matthcol/react202609_base/blob/main/src/contexts/MoviePlaylistContext.tsx"
click node_reducer "https://github.com/matthcol/react202609_base/blob/main/src/reducers/moviePlaylistReducer.ts"
click node_movie "https://github.com/matthcol/react202609_base/blob/main/src/types/movie.ts"
click node_bundledmovies "https://github.com/matthcol/react202609_base/blob/main/data/movies.json"
click node_api "https://github.com/matthcol/react202609_base/blob/main/src/services/movieApiService.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_entry,node_appscreen,node_headers,node_intro,node_collapsible,node_browser toneBlue
class node_localmanager,node_moviecard,node_globalmanager,node_globalcard,node_jsonserver toneAmber
class node_localplaylist,node_reducerdemo,node_controls,node_globalplaylist,node_context,node_reducer toneMint
class node_movie,node_bundledmovies,node_api toneRose
```

## Components

### Application shell

- [React entry](https://github.com/matthcol/react202609_base/blob/main/src/main.tsx): `src/main.tsx`
- [App screen](https://github.com/matthcol/react202609_base/blob/main/src/components/App.tsx): `src/components/App.tsx`
- [Headers](https://github.com/matthcol/react202609_base/blob/main/src/components/Headers.tsx): `src/components/Headers.tsx`
- [Intro](https://github.com/matthcol/react202609_base/blob/main/src/components/Intro.tsx): `src/components/Intro.tsx`
- [Collapsible](https://github.com/matthcol/react202609_base/blob/main/src/components/Collapsible.tsx): `src/components/Collapsible.tsx`

### Movie browsing

- [Local manager](https://github.com/matthcol/react202609_base/blob/main/src/components/MovieManager.tsx): `src/components/MovieManager.tsx`
- [Movie card](https://github.com/matthcol/react202609_base/blob/main/src/components/MovieCard.tsx): `src/components/MovieCard.tsx`
- [Global manager](https://github.com/matthcol/react202609_base/blob/main/src/components/globalmanager/GlobalMovieManager.tsx): `src/components/globalmanager/GlobalMovieManager.tsx`
- [Global movie card](https://github.com/matthcol/react202609_base/blob/main/src/components/globalmanager/GlobalMovieCard.tsx): `src/components/globalmanager/GlobalMovieCard.tsx`

### Playlist state

- [Local playlist view](https://github.com/matthcol/react202609_base/blob/main/src/components/MoviePlaylist.tsx): `src/components/MoviePlaylist.tsx`
- [Reducer demo](https://github.com/matthcol/react202609_base/blob/main/src/components/MovieManagerReducer.tsx): `src/components/MovieManagerReducer.tsx`
- [Playlist controls](https://github.com/matthcol/react202609_base/blob/main/src/components/globalmanager/GlobalMovieControls.tsx): `src/components/globalmanager/GlobalMovieControls.tsx`
- [Global playlist](https://github.com/matthcol/react202609_base/blob/main/src/components/globalmanager/GlobalMoviePlaylist.tsx): `src/components/globalmanager/GlobalMoviePlaylist.tsx`
- [Playlist context](https://github.com/matthcol/react202609_base/blob/main/src/contexts/MoviePlaylistContext.tsx): `src/contexts/MoviePlaylistContext.tsx`
- [Playlist reducer](https://github.com/matthcol/react202609_base/blob/main/src/reducers/moviePlaylistReducer.ts): `src/reducers/moviePlaylistReducer.ts`

### Movie data

- [Movie type](https://github.com/matthcol/react202609_base/blob/main/src/types/movie.ts): `src/types/movie.ts`
- [Bundled movies](https://github.com/matthcol/react202609_base/blob/main/data/movies.json): `data/movies.json`
- [Movie API service](https://github.com/matthcol/react202609_base/blob/main/src/services/movieApiService.ts): `src/services/movieApiService.ts`

### Other components

- **Browser user**
- **JSON Server**

## Connections

- Browser user → React entry: opens app (evidence: `src/main.tsx`)
- React entry → App screen: renders (evidence: `src/main.tsx`)
- React entry → Playlist context: provides state (evidence: `src/main.tsx`)
- App screen → Headers: renders (evidence: `src/components/App.tsx`)
- App screen → Intro: renders (evidence: `src/components/App.tsx`)
- App screen → Collapsible: wraps views (evidence: `src/components/App.tsx`)
- App screen → Local manager: renders (evidence: `src/components/App.tsx`)
- App screen → Reducer demo: renders (evidence: `src/components/App.tsx`)
- App screen → Global manager: renders (evidence: `src/components/App.tsx`)
- Local manager → Bundled movies: loads (evidence: `src/components/MovieManager.tsx`)
- Local manager → Movie card: renders filtered (evidence: `src/components/MovieManager.tsx`)
- Local manager → Local playlist view: renders (evidence: `src/components/MovieManager.tsx`)
- Local manager → Movie type: uses type (evidence: `src/components/MovieManager.tsx`)
- Movie card → Movie type: displays (evidence: `src/components/MovieCard.tsx`)
- Global manager → Movie API service: fetches page (evidence: `src/components/globalmanager/GlobalMovieManager.tsx`)
- Global manager → Global playlist: renders (evidence: `src/components/globalmanager/GlobalMovieManager.tsx`)
- Global manager → Global movie card: renders filtered (evidence: `src/components/globalmanager/GlobalMovieManager.tsx`)
- Global manager → Bundled movies: imports (evidence: `src/components/globalmanager/GlobalMovieManager.tsx`)
- Global movie card → Playlist controls: renders (evidence: `src/components/globalmanager/GlobalMovieCard.tsx`)
- Global movie card → Movie type: displays (evidence: `src/components/globalmanager/GlobalMovieCard.tsx`)
- Global playlist → Playlist context: reads and dispatches (evidence: `src/components/globalmanager/GlobalMoviePlaylist.tsx`)
- Global playlist → Global movie card: renders (evidence: `src/components/globalmanager/GlobalMoviePlaylist.tsx`)
- Playlist controls → Playlist context: dispatches actions (evidence: `src/components/globalmanager/GlobalMovieControls.tsx`)
- Playlist context → Playlist reducer: updates state (evidence: `src/contexts/MoviePlaylistContext.tsx`)
- Reducer demo → Playlist reducer: dispatches actions (evidence: `src/components/MovieManagerReducer.tsx`)
- Playlist reducer → Movie type: updates collection (evidence: `src/reducers/moviePlaylistReducer.ts`)
- Movie API service → JSON Server: requests movies (evidence: `Readme.md`)
- Movie API service → Movie type: returns movie data (evidence: `src/services/movieApiService.ts`)