# mathewsrosh10-create/movie-app architecture

> Architecture diagram of the GitHub repository mathewsrosh10-create/movie-app, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-10). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/mathewsrosh10-create/movie-app
- Repository: https://github.com/mathewsrosh10-create/movie-app

## Overview

CINEMATE is a React movie-and-series discovery app with account-backed watchlists. Users search titles and inspect metadata, then sign in to save titles and manage their watchlist; guests can keep a browser-local list. The README also documents Google OAuth and an OMDb-to-local-data fallback. The sampled files establish app routing, auth, and watchlist calls; Home’s implementation was not sampled, so search integrations are shown only where documented, with uncertain wiring marked dashed.

Main entry points: [`src/App.jsx`](https://github.com/mathewsrosh10-create/movie-app/blob/main/src/App.jsx) (App shell), [`src/lib/watchlistService.js`](https://github.com/mathewsrosh10-create/movie-app/blob/main/src/lib/watchlistService.js) (Watchlist operations), [`src/pages/Watchlist.jsx`](https://github.com/mathewsrosh10-create/movie-app/blob/main/src/pages/Watchlist.jsx) (Watchlist page), [`src/context/AuthContext.jsx`](https://github.com/mathewsrosh10-create/movie-app/blob/main/src/context/AuthContext.jsx) (Session and auth)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Discovery and navigation"]
  node_app["App shell<br/>[App.jsx]"]
  node_home["Search and details<br/>[Home.jsx]"]
  node_mock_data["Demo catalog<br/>[mockData.js]"]
end

subgraph group_identity["Authentication"]
  node_auth_modal["Auth dialog<br/>[AuthModal.jsx]"]
  node_auth_context["Session and auth<br/>[AuthContext.jsx]"]
end

subgraph group_watchlist["Watchlist management"]
  node_watchlist_page["Watchlist page<br/>[Watchlist.jsx]"]
  node_watchlist_control["Status controls"]
end

subgraph group_backend["Persistence and services"]
  node_watchlist_service["Watchlist operations"]
  node_supabase_client["Supabase client<br/>[supabaseClient.js]"]
end

node_user(("Viewer"))
node_supabase[("Supabase platform")]
node_omdb["OMDb API"]
node_browser_storage[("Browser local storage")]

node_user -->|"uses"| node_app
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_watchlist_page
node_app -->|"renders"| node_auth_modal
node_app -->|"reads session"| node_auth_context
node_app -->|"loads list"| node_watchlist_service
node_app -->|"reads and writes guest list"| node_browser_storage
node_auth_modal -->|"requests auth"| node_auth_context
node_auth_context -->|"uses"| node_supabase_client
node_supabase_client -.->|"connects"| node_supabase
node_watchlist_page -->|"reads session"| node_auth_context
node_watchlist_page -->|"loads and removes"| node_watchlist_service
node_watchlist_page -->|"renders"| node_watchlist_control
node_watchlist_control -->|"updates entries"| node_watchlist_service
node_watchlist_service -->|"queries"| node_supabase_client
node_watchlist_service -->|"reads and writes rows"| node_supabase
node_home -.->|"fetches metadata"| node_omdb
node_home -.->|"falls back to"| node_mock_data

click node_app "https://github.com/mathewsrosh10-create/movie-app/blob/main/src/App.jsx"
click node_home "https://github.com/mathewsrosh10-create/movie-app/blob/main/src/pages/Home.jsx"
click node_watchlist_page "https://github.com/mathewsrosh10-create/movie-app/blob/main/src/pages/Watchlist.jsx"
click node_mock_data "https://github.com/mathewsrosh10-create/movie-app/blob/main/src/mockData.js"
click node_auth_modal "https://github.com/mathewsrosh10-create/movie-app/blob/main/src/components/AuthModal.jsx"
click node_auth_context "https://github.com/mathewsrosh10-create/movie-app/blob/main/src/context/AuthContext.jsx"
click node_watchlist_control "https://github.com/mathewsrosh10-create/movie-app/blob/main/src/components/WatchlistControl.jsx"
click node_watchlist_service "https://github.com/mathewsrosh10-create/movie-app/blob/main/src/lib/watchlistService.js"
click node_supabase_client "https://github.com/mathewsrosh10-create/movie-app/blob/main/src/lib/supabaseClient.js"

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_app,node_home,node_mock_data,node_user toneBlue
class node_auth_modal,node_auth_context,node_supabase,node_browser_storage toneAmber
class node_watchlist_page,node_watchlist_control,node_omdb toneMint
class node_watchlist_service,node_supabase_client toneRose
```

## Components

### Discovery and navigation

- [App shell](https://github.com/mathewsrosh10-create/movie-app/blob/main/src/App.jsx): `src/App.jsx`
- [Search and details](https://github.com/mathewsrosh10-create/movie-app/blob/main/src/pages/Home.jsx): `src/pages/Home.jsx`
- [Demo catalog](https://github.com/mathewsrosh10-create/movie-app/blob/main/src/mockData.js): `src/mockData.js`

### Authentication

- [Auth dialog](https://github.com/mathewsrosh10-create/movie-app/blob/main/src/components/AuthModal.jsx): `src/components/AuthModal.jsx`
- [Session and auth](https://github.com/mathewsrosh10-create/movie-app/blob/main/src/context/AuthContext.jsx): `src/context/AuthContext.jsx`

### Watchlist management

- [Watchlist page](https://github.com/mathewsrosh10-create/movie-app/blob/main/src/pages/Watchlist.jsx): `src/pages/Watchlist.jsx`
- [Status controls](https://github.com/mathewsrosh10-create/movie-app/blob/main/src/components/WatchlistControl.jsx): `src/components/WatchlistControl.jsx`

### Persistence and services

- [Watchlist operations](https://github.com/mathewsrosh10-create/movie-app/blob/main/src/lib/watchlistService.js): `src/lib/watchlistService.js`
- [Supabase client](https://github.com/mathewsrosh10-create/movie-app/blob/main/src/lib/supabaseClient.js): `src/lib/supabaseClient.js`

### Other components

- **Viewer**
- **Supabase platform**
- **OMDb API**
- **Browser local storage**

## Connections

- Viewer → App shell: uses (evidence: `src/App.jsx`)
- App shell → Search and details: routes to (evidence: `src/App.jsx`)
- App shell → Watchlist page: routes to (evidence: `src/App.jsx`)
- App shell → Auth dialog: renders (evidence: `src/App.jsx`)
- App shell → Session and auth: reads session (evidence: `src/App.jsx`)
- App shell → Watchlist operations: loads list (evidence: `src/App.jsx`)
- App shell → Browser local storage: reads and writes guest list (evidence: `src/App.jsx`)
- Auth dialog → Session and auth: requests auth (evidence: `src/components/AuthModal.jsx`)
- Session and auth → Supabase client: uses (evidence: `src/context/AuthContext.jsx`)
- Supabase client → Supabase platform: connects (evidence: `README.md`)
- Watchlist page → Session and auth: reads session (evidence: `src/pages/Watchlist.jsx`)
- Watchlist page → Watchlist operations: loads and removes (evidence: `src/pages/Watchlist.jsx`)
- Watchlist page → Status controls: renders (evidence: `src/pages/Watchlist.jsx`)
- Status controls → Watchlist operations: updates entries (evidence: `src/components/WatchlistControl.jsx`)
- Watchlist operations → Supabase client: queries (evidence: `src/lib/watchlistService.js`)
- Watchlist operations → Supabase platform: reads and writes rows (evidence: `README.md`)
- Search and details → OMDb API: fetches metadata (evidence: `README.md`)
- Search and details → Demo catalog: falls back to (evidence: `README.md`)