viktorbalko/goit-react-hw-05-movies

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.