# viktorbalko/goit-react-hw-05-movies architecture

> Architecture diagram of the GitHub repository viktorbalko/goit-react-hw-05-movies, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-08-01). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/viktorbalko/goit-react-hw-05-movies
- Repository: https://github.com/viktorbalko/goit-react-hw-05-movies

## Overview

#### Purpose and Runtime
This is a Create React App single-page cinema browser. The active implementation is under `src/`; `forCinema.ver.1/` is a separate earlier version retained in the repository. It runs in the browser on React/Node.js build tooling and is intended for static GitHub Pages hosting.

Entry bootstrap: `src/index.js` mounts the React tree and global styles from `src/index.css`. The application root is `src/components/App.jsx`.

#### Application Shell and Navigation
`src/components/App.jsx` is the top-level composition and likely owns route selection/navigation among trend, search, and detail views. Route-level screens are:
- `src/pages/CinemaTrends/CinemaTrends.jsx`
- `src/pages/CinemaSearch/CinemaSearch.jsx`
- `src/pages/CinemaDetails/CinemaDetails.jsx`

These pages form the primary UI state boundary: each turns URL/page intent into cinema API requests and passes resulting movie data to reusable presentation components.

#### Cinema Data Integration
`src/services/cinemaApi.js` centralizes the external cinema/movie API boundary, separating remote request construction and response handling from React pages. `src/services/Logo.js` likely supplies branding or image-related service data for UI use.

Primary control flow is: page mounts or receives search/detail parameters → invokes `cinemaApi` → manages loading/error/result state → renders catalog or detail subviews. External API availability and response shape are therefore material dependencies.

#### Discovery and Search Flows
The trends page obtains and displays a discoverable/trending movie collection through `src/pages/CinemaTrends/CinemaTrends.jsx`, using the shared catalog layer at `src/components/CinemaCatalog/CinemaCatalog.jsx`.

The search page at `src/pages/CinemaSearch/CinemaSearch.jsx` captures a query, requests matching cinema records via `src/services/cinemaApi.js`, and reuses catalog rendering. This creates a common collection-rendering boundary independent of how the movie list was sourced.

#### Detail Flow
`src/pages/CinemaDetails/CinemaDetails.jsx` is the detail orchestration point for a selected movie. Its view is assembled from focused data components:
- `src/components/CinemaCard/CinemaCard.jsx` for primary movie metadata/artwork
- `src/components/CinemaCast/CinemaCast.jsx` for cast data
- `src/components/CinemaReviews/CinemaReviews.jsx` for review data

This page is the fan-out boundary for movie-specific API resources and isolates each detail section from route/page concerns.

#### Presentation Components and Styling
`src/components/CinemaCatalog/CinemaCatalog.jsx` renders movie collections and delegates item presentation to `src/components/CinemaCard/CinemaCard.jsx`. CSS Modules colocated with catalog, card, trends, and details establish component-scoped styling, while `src/index.css` provides application-wide styling.

The historical version has its own independent root and API stack—`forCinema.ver.1/components/App.jsx`, `forCinema.ver.1/pages/Home/Home.jsx`, and `forCinema.ver.1/service/api.js`—and should not be coupled to the active `src/` architecture without explicit migration.

#### Delivery Infrastructure
`package.json` defines Node dependency/build execution, while public SPA assets live in `public/index.html` and `public/404.html`. `.github/workflows/deploy.yml` runs CI deployment on `main`, producing a static site published to GitHub Pages (`gh-pages`). GitHub Actions and GitHub Pages are the only explicit infrastructure services documented.

Main entry points: [`src/pages/CinemaDetails/CinemaDetails.jsx`](https://github.com/viktorbalko/goit-react-hw-05-movies/blob/main/src/pages/CinemaDetails/CinemaDetails.jsx) (Details page), [`src/components/App.jsx`](https://github.com/viktorbalko/goit-react-hw-05-movies/blob/main/src/components/App.jsx) (Application shell), [`src/services/cinemaApi.js`](https://github.com/viktorbalko/goit-react-hw-05-movies/blob/main/src/services/cinemaApi.js) (Cinema API client), [`src/index.js`](https://github.com/viktorbalko/goit-react-hw-05-movies/blob/main/src/index.js) (React bootstrap)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_active["Active SPA"]
  node_browser(("Browser<br/>runtime"))
  node_bootstrap["React bootstrap<br/>entry<br/>[index.js]"]
  node_global_styles["Global styles<br/>[index.css]"]
  node_app["Application shell<br/>React root<br/>[App.jsx]"]
  node_trends["Trends page<br/>route screen<br/>[CinemaTrends.jsx]"]
  node_search["Search page<br/>route screen<br/>[CinemaSearch.jsx]"]
  node_details["Details page<br/>route screen<br/>[CinemaDetails.jsx]"]
  node_api{{"Cinema API client<br/>[cinemaApi.js]"}}
  node_catalog["Movie catalog<br/>presentation<br/>[CinemaCatalog.jsx]"]
  node_card["Movie card<br/>presentation<br/>[CinemaCard.jsx]"]
  node_cast["Cast section<br/>presentation<br/>[CinemaCast.jsx]"]
  node_reviews["Reviews section<br/>presentation<br/>[CinemaReviews.jsx]"]
end

subgraph group_delivery["Delivery"]
  node_node_build["Node build<br/>build definition<br/>[package.json]"]
  node_public_assets["SPA public assets<br/>static assets<br/>[index.html]"]
  node_deploy{{"GitHub Actions deploy<br/>CI workflow<br/>[deploy.yml]"}}
  node_github_pages{{"GitHub Pages<br/>static hosting"}}
end

subgraph group_legacy["Historical Version"]
  node_legacy_app["Legacy app root<br/>React root<br/>[App.jsx]"]
  node_legacy_home["Legacy home<br/>page<br/>[Home.jsx]"]
  node_legacy_api{{"Legacy API client<br/>[api.js]"}}
end

node_external_api{{"External movie API<br/>external service"}}

node_browser -->|"loads"| node_bootstrap
node_bootstrap -->|"imports"| node_global_styles
node_bootstrap -->|"mounts"| node_app
node_app -->|"selects view"| node_trends
node_app -->|"selects view"| node_search
node_app -->|"selects view"| node_details
node_trends -->|"loads trends"| node_api
node_search -->|"searches"| node_api
node_details -->|"loads movie resources"| node_api
node_api -->|"requests"| node_external_api
node_trends -->|"renders collection"| node_catalog
node_search -->|"renders results"| node_catalog
node_catalog -->|"renders items"| node_card
node_details -->|"renders metadata"| node_card
node_details -->|"renders cast"| node_cast
node_details -->|"renders reviews"| node_reviews
node_node_build -->|"build definition"| node_deploy
node_public_assets -->|"published assets"| node_deploy
node_deploy -->|"publishes"| node_github_pages
node_legacy_app -->|"composes"| node_legacy_home
node_legacy_home -->|"requests data"| node_legacy_api

click node_bootstrap "https://github.com/viktorbalko/goit-react-hw-05-movies/blob/main/src/index.js"
click node_global_styles "https://github.com/viktorbalko/goit-react-hw-05-movies/blob/main/src/index.css"
click node_app "https://github.com/viktorbalko/goit-react-hw-05-movies/blob/main/src/components/App.jsx"
click node_trends "https://github.com/viktorbalko/goit-react-hw-05-movies/blob/main/src/pages/CinemaTrends/CinemaTrends.jsx"
click node_search "https://github.com/viktorbalko/goit-react-hw-05-movies/blob/main/src/pages/CinemaSearch/CinemaSearch.jsx"
click node_details "https://github.com/viktorbalko/goit-react-hw-05-movies/blob/main/src/pages/CinemaDetails/CinemaDetails.jsx"
click node_api "https://github.com/viktorbalko/goit-react-hw-05-movies/blob/main/src/services/cinemaApi.js"
click node_catalog "https://github.com/viktorbalko/goit-react-hw-05-movies/blob/main/src/components/CinemaCatalog/CinemaCatalog.jsx"
click node_card "https://github.com/viktorbalko/goit-react-hw-05-movies/blob/main/src/components/CinemaCard/CinemaCard.jsx"
click node_cast "https://github.com/viktorbalko/goit-react-hw-05-movies/blob/main/src/components/CinemaCast/CinemaCast.jsx"
click node_reviews "https://github.com/viktorbalko/goit-react-hw-05-movies/blob/main/src/components/CinemaReviews/CinemaReviews.jsx"
click node_node_build "https://github.com/viktorbalko/goit-react-hw-05-movies/blob/main/package.json"
click node_public_assets "https://github.com/viktorbalko/goit-react-hw-05-movies/blob/main/public/index.html"
click node_deploy "https://github.com/viktorbalko/goit-react-hw-05-movies/blob/main/.github/workflows/deploy.yml"
click node_legacy_app "https://github.com/viktorbalko/goit-react-hw-05-movies/blob/main/forCinema.ver.1/components/App.jsx"
click node_legacy_home "https://github.com/viktorbalko/goit-react-hw-05-movies/blob/main/forCinema.ver.1/pages/Home/Home.jsx"
click node_legacy_api "https://github.com/viktorbalko/goit-react-hw-05-movies/blob/main/forCinema.ver.1/service/api.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_browser,node_bootstrap,node_global_styles,node_app,node_trends,node_search,node_details,node_api,node_catalog,node_card,node_cast,node_reviews toneBlue
class node_node_build,node_public_assets,node_deploy,node_github_pages toneAmber
class node_legacy_app,node_legacy_home,node_legacy_api toneMint
class node_external_api toneNeutral
```

## Components

### Active SPA

Browser application under src/.

- **Browser**: runtime
- [React bootstrap](https://github.com/viktorbalko/goit-react-hw-05-movies/blob/main/src/index.js): entry · Mounts the React tree and global styles. · `src/index.js`
- [Global styles](https://github.com/viktorbalko/goit-react-hw-05-movies/blob/main/src/index.css): styles · `src/index.css`
- [Application shell](https://github.com/viktorbalko/goit-react-hw-05-movies/blob/main/src/components/App.jsx): React root · Composes navigation and route-level views. · `src/components/App.jsx`
- [Trends page](https://github.com/viktorbalko/goit-react-hw-05-movies/blob/main/src/pages/CinemaTrends/CinemaTrends.jsx): route screen · Loads a discoverable movie collection. · `src/pages/CinemaTrends/CinemaTrends.jsx`
- [Search page](https://github.com/viktorbalko/goit-react-hw-05-movies/blob/main/src/pages/CinemaSearch/CinemaSearch.jsx): route screen · Captures queries and loads matching movies. · `src/pages/CinemaSearch/CinemaSearch.jsx`
- [Details page](https://github.com/viktorbalko/goit-react-hw-05-movies/blob/main/src/pages/CinemaDetails/CinemaDetails.jsx): route screen · Orchestrates movie-specific resources. · `src/pages/CinemaDetails/CinemaDetails.jsx`
- [Cinema API client](https://github.com/viktorbalko/goit-react-hw-05-movies/blob/main/src/services/cinemaApi.js): service · Centralizes remote request and response handling. · `src/services/cinemaApi.js`
- [Movie catalog](https://github.com/viktorbalko/goit-react-hw-05-movies/blob/main/src/components/CinemaCatalog/CinemaCatalog.jsx): presentation · Shared collection rendering boundary. · `src/components/CinemaCatalog/CinemaCatalog.jsx`
- [Movie card](https://github.com/viktorbalko/goit-react-hw-05-movies/blob/main/src/components/CinemaCard/CinemaCard.jsx): presentation · Renders primary movie metadata and artwork. · `src/components/CinemaCard/CinemaCard.jsx`
- [Cast section](https://github.com/viktorbalko/goit-react-hw-05-movies/blob/main/src/components/CinemaCast/CinemaCast.jsx): presentation · `src/components/CinemaCast/CinemaCast.jsx`
- [Reviews section](https://github.com/viktorbalko/goit-react-hw-05-movies/blob/main/src/components/CinemaReviews/CinemaReviews.jsx): presentation · `src/components/CinemaReviews/CinemaReviews.jsx`

### Delivery

Static GitHub Pages deployment.

- [Node build](https://github.com/viktorbalko/goit-react-hw-05-movies/blob/main/package.json): build definition · Defines dependencies and build execution. · `package.json`
- [SPA public assets](https://github.com/viktorbalko/goit-react-hw-05-movies/blob/main/public/index.html): static assets · Contains the application and fallback HTML. · `public/index.html`
- [GitHub Actions deploy](https://github.com/viktorbalko/goit-react-hw-05-movies/blob/main/.github/workflows/deploy.yml): CI workflow · Builds on main and publishes the static site. · `.github/workflows/deploy.yml`
- **GitHub Pages**: static hosting

### Historical Version

Independent earlier implementation.

- [Legacy app root](https://github.com/viktorbalko/goit-react-hw-05-movies/blob/main/forCinema.ver.1/components/App.jsx): React root · Separate earlier implementation; not coupled to src/. · `forCinema.ver.1/components/App.jsx`
- [Legacy home](https://github.com/viktorbalko/goit-react-hw-05-movies/blob/main/forCinema.ver.1/pages/Home/Home.jsx): page · `forCinema.ver.1/pages/Home/Home.jsx`
- [Legacy API client](https://github.com/viktorbalko/goit-react-hw-05-movies/blob/main/forCinema.ver.1/service/api.js): service · `forCinema.ver.1/service/api.js`

### Other components

- **External movie API**: external service · Availability and response shape are material dependencies.

## Connections

- Browser → React bootstrap: loads
- React bootstrap → Global styles: imports
- React bootstrap → Application shell: mounts
- Application shell → Trends page: selects view
- Application shell → Search page: selects view
- Application shell → Details page: selects view
- Trends page → Cinema API client: loads trends
- Search page → Cinema API client: searches
- Details page → Cinema API client: loads movie resources
- Cinema API client → External movie API: requests
- Trends page → Movie catalog: renders collection
- Search page → Movie catalog: renders results
- Movie catalog → Movie card: renders items
- Details page → Movie card: renders metadata
- Details page → Cast section: renders cast
- Details page → Reviews section: renders reviews
- Node build → GitHub Actions deploy: build definition
- SPA public assets → GitHub Actions deploy: published assets
- GitHub Actions deploy → GitHub Pages: publishes
- Legacy app root → Legacy home: composes
- Legacy home → Legacy API client: requests data