# yaserhasan/reflix architecture

> Architecture diagram of the GitHub repository yaserhasan/reflix, 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/yaserhasan/reflix
- Repository: https://github.com/yaserhasan/reflix

## Overview

REFLIX is a client-side movie-rental app. Users browse and search a movie catalog, open a movie’s details, and rent or return it; they can also switch users and view their rented movies. `App` owns the in-memory catalog, active user, search state, and rental-budget updates, then routes data and callbacks to the page components. The README only documents Create React App setup, so it does not establish additional product capabilities. Relationships below follow the shown imports and calls; source for some listed components was not excerpted, so those links are omitted.

Main entry points: [`src/App.jsx`](https://github.com/yaserhasan/reflix/blob/main/src/App.jsx) (App State and Routes), [`src/components/Layout/Layout.jsx`](https://github.com/yaserhasan/reflix/blob/main/src/components/Layout/Layout.jsx) (Page Layout), [`src/pages/Homepage/Homepage.jsx`](https://github.com/yaserhasan/reflix/blob/main/src/pages/Homepage/Homepage.jsx) (Homepage), [`src/pages/MovieDetailsPage/MovieDetailsPage.jsx`](https://github.com/yaserhasan/reflix/blob/main/src/pages/MovieDetailsPage/MovieDetailsPage.jsx) (Movie Details)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_routing["Routing and State"]
  node_app["App State and Routes<br/>[App.jsx]"]
  node_route_guard["Protected Route<br/>[ProtectedRoute.jsx]"]
  node_movie_data["Mock Movie and User Data<br/>[mock_data.js]"]
end

subgraph group_pages["Product Pages"]
  node_homepage["Homepage<br/>[Homepage.jsx]"]
  node_details["Movie Details"]
  node_rented["Rented Movies Page"]
  node_switch_user["Switch User Page<br/>[SwitchUserPage.jsx]"]
end

subgraph group_presentation["Shared Presentation"]
  node_layout["Page Layout<br/>[Layout.jsx]"]
  node_header["Header<br/>[Header.jsx]"]
  node_account_menu["Account Dropdown"]
  node_button["Button<br/>[Button.jsx]"]
  node_footer["Footer<br/>[Footer.jsx]"]
  node_global_styles["Global Styles<br/>[GlobalStyles.js]"]
end

subgraph group_catalog["Catalog Components"]
  node_container["Container<br/>[Container.js]"]
  node_movies_list["Movies List and Search<br/>[MoviesList.jsx]"]
  node_movie_card["Movie Card<br/>[Movie.jsx]"]
end

node_visitor(("Visitor"))

node_visitor -.->|"uses"| node_app
node_app -->|"initializes state"| node_movie_data
node_app -->|"routes data"| node_homepage
node_app -->|"guards route"| node_route_guard
node_app -->|"routes data"| node_rented
node_app -->|"routes callbacks"| node_details
node_app -->|"routes data"| node_switch_user
node_app -->|"renders"| node_global_styles
node_homepage -->|"renders"| node_layout
node_homepage -->|"renders"| node_container
node_homepage -->|"renders"| node_movies_list
node_rented -->|"renders"| node_layout
node_rented -->|"renders"| node_container
node_rented -->|"renders"| node_movies_list
node_details -->|"renders"| node_layout
node_details -->|"renders"| node_button
node_details -->|"renders styled list"| node_movies_list
node_switch_user -->|"renders"| node_layout
node_switch_user -->|"renders"| node_container
node_layout -->|"renders"| node_header
node_layout -->|"renders"| node_footer
node_header -->|"renders"| node_account_menu
node_header -->|"renders"| node_button
node_movies_list -->|"renders"| node_movie_card

click node_app "https://github.com/yaserhasan/reflix/blob/main/src/App.jsx"
click node_route_guard "https://github.com/yaserhasan/reflix/blob/main/src/ProtectedRoute.jsx"
click node_movie_data "https://github.com/yaserhasan/reflix/blob/main/src/mock_data.js"
click node_homepage "https://github.com/yaserhasan/reflix/blob/main/src/pages/Homepage/Homepage.jsx"
click node_details "https://github.com/yaserhasan/reflix/blob/main/src/pages/MovieDetailsPage/MovieDetailsPage.jsx"
click node_rented "https://github.com/yaserhasan/reflix/blob/main/src/pages/RentedMoviesPage/RentedMoviesPage.jsx"
click node_switch_user "https://github.com/yaserhasan/reflix/blob/main/src/pages/SwitchUserPage/SwitchUserPage.jsx"
click node_layout "https://github.com/yaserhasan/reflix/blob/main/src/components/Layout/Layout.jsx"
click node_header "https://github.com/yaserhasan/reflix/blob/main/src/components/Header/Header.jsx"
click node_account_menu "https://github.com/yaserhasan/reflix/blob/main/src/components/Header/components/AccountDropDown/AccountDropDown.jsx"
click node_button "https://github.com/yaserhasan/reflix/blob/main/src/components/Button/Button.jsx"
click node_footer "https://github.com/yaserhasan/reflix/blob/main/src/components/Footer/Footer.jsx"
click node_global_styles "https://github.com/yaserhasan/reflix/blob/main/src/GlobalStyles.js"
click node_container "https://github.com/yaserhasan/reflix/blob/main/src/components/Container/Container.js"
click node_movies_list "https://github.com/yaserhasan/reflix/blob/main/src/components/MoviesList/MoviesList.jsx"
click node_movie_card "https://github.com/yaserhasan/reflix/blob/main/src/components/Movie/Movie.jsx"

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_route_guard,node_movie_data toneBlue
class node_homepage,node_details,node_rented,node_switch_user toneAmber
class node_layout,node_header,node_account_menu,node_button,node_footer,node_global_styles toneMint
class node_container,node_movies_list,node_movie_card toneRose
class node_visitor toneIndigo
```

## Components

### Routing and State

- [App State and Routes](https://github.com/yaserhasan/reflix/blob/main/src/App.jsx): `src/App.jsx`
- [Protected Route](https://github.com/yaserhasan/reflix/blob/main/src/ProtectedRoute.jsx): `src/ProtectedRoute.jsx`
- [Mock Movie and User Data](https://github.com/yaserhasan/reflix/blob/main/src/mock_data.js): `src/mock_data.js`

### Product Pages

- [Homepage](https://github.com/yaserhasan/reflix/blob/main/src/pages/Homepage/Homepage.jsx): `src/pages/Homepage/Homepage.jsx`
- [Movie Details](https://github.com/yaserhasan/reflix/blob/main/src/pages/MovieDetailsPage/MovieDetailsPage.jsx): `src/pages/MovieDetailsPage/MovieDetailsPage.jsx`
- [Rented Movies Page](https://github.com/yaserhasan/reflix/blob/main/src/pages/RentedMoviesPage/RentedMoviesPage.jsx): `src/pages/RentedMoviesPage/RentedMoviesPage.jsx`
- [Switch User Page](https://github.com/yaserhasan/reflix/blob/main/src/pages/SwitchUserPage/SwitchUserPage.jsx): `src/pages/SwitchUserPage/SwitchUserPage.jsx`

### Shared Presentation

- [Page Layout](https://github.com/yaserhasan/reflix/blob/main/src/components/Layout/Layout.jsx): `src/components/Layout/Layout.jsx`
- [Header](https://github.com/yaserhasan/reflix/blob/main/src/components/Header/Header.jsx): `src/components/Header/Header.jsx`
- [Account Dropdown](https://github.com/yaserhasan/reflix/blob/main/src/components/Header/components/AccountDropDown/AccountDropDown.jsx): `src/components/Header/components/AccountDropDown/AccountDropDown.jsx`
- [Button](https://github.com/yaserhasan/reflix/blob/main/src/components/Button/Button.jsx): `src/components/Button/Button.jsx`
- [Footer](https://github.com/yaserhasan/reflix/blob/main/src/components/Footer/Footer.jsx): `src/components/Footer/Footer.jsx`
- [Global Styles](https://github.com/yaserhasan/reflix/blob/main/src/GlobalStyles.js): `src/GlobalStyles.js`

### Catalog Components

- [Container](https://github.com/yaserhasan/reflix/blob/main/src/components/Container/Container.js): `src/components/Container/Container.js`
- [Movies List and Search](https://github.com/yaserhasan/reflix/blob/main/src/components/MoviesList/MoviesList.jsx): `src/components/MoviesList/MoviesList.jsx`
- [Movie Card](https://github.com/yaserhasan/reflix/blob/main/src/components/Movie/Movie.jsx): `src/components/Movie/Movie.jsx`

### Other components

- **Visitor**

## Connections

- Visitor → App State and Routes: uses
- App State and Routes → Mock Movie and User Data: initializes state (evidence: `src/App.jsx`)
- App State and Routes → Homepage: routes data (evidence: `src/App.jsx`)
- App State and Routes → Protected Route: guards route (evidence: `src/App.jsx`)
- App State and Routes → Rented Movies Page: routes data (evidence: `src/App.jsx`)
- App State and Routes → Movie Details: routes callbacks (evidence: `src/App.jsx`)
- App State and Routes → Switch User Page: routes data (evidence: `src/App.jsx`)
- App State and Routes → Global Styles: renders (evidence: `src/App.jsx`)
- Homepage → Page Layout: renders (evidence: `src/pages/Homepage/Homepage.jsx`)
- Homepage → Container: renders (evidence: `src/pages/Homepage/Homepage.jsx`)
- Homepage → Movies List and Search: renders (evidence: `src/pages/Homepage/Homepage.jsx`)
- Rented Movies Page → Page Layout: renders (evidence: `src/pages/RentedMoviesPage/RentedMoviesPage.jsx`)
- Rented Movies Page → Container: renders (evidence: `src/pages/RentedMoviesPage/RentedMoviesPage.jsx`)
- Rented Movies Page → Movies List and Search: renders (evidence: `src/pages/RentedMoviesPage/RentedMoviesPage.jsx`)
- Movie Details → Page Layout: renders (evidence: `src/pages/MovieDetailsPage/MovieDetailsPage.jsx`)
- Movie Details → Button: renders (evidence: `src/pages/MovieDetailsPage/MovieDetailsPage.jsx`)
- Movie Details → Movies List and Search: renders styled list
- Switch User Page → Page Layout: renders (evidence: `src/pages/SwitchUserPage/SwitchUserPage.jsx`)
- Switch User Page → Container: renders (evidence: `src/pages/SwitchUserPage/SwitchUserPage.jsx`)
- Page Layout → Header: renders (evidence: `src/components/Layout/Layout.jsx`)
- Page Layout → Footer: renders (evidence: `src/components/Layout/Layout.jsx`)
- Header → Account Dropdown: renders (evidence: `src/components/Header/Header.jsx`)
- Header → Button: renders (evidence: `src/components/Header/Header.jsx`)
- Movies List and Search → Movie Card: renders (evidence: `src/components/MoviesList/MoviesList.jsx`)