# rosemond-kay/alx-capstone-project architecture

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

- Interactive diagram: https://gitdiagram.com/rosemond-kay/alx-capstone-project
- Repository: https://github.com/rosemond-kay/alx-capstone-project

## Overview

RoseBinge is a React movie-discovery app. Users browse featured and trending titles, filter by category, search with suggestions and recent searches, open movie details, and maintain a watchlist. The sampled App and SearchPage code shows the main data calls and UI ownership; the README documents responsive layouts and graceful API/empty-result handling. Some paths and component behavior are represented from the tree and README rather than inspected source.

Main entry points: [`src/App.jsx`](https://github.com/rosemond-kay/alx-capstone-project/blob/main/src/App.jsx) (App state and views), [`src/components/MovieCard.jsx`](https://github.com/rosemond-kay/alx-capstone-project/blob/main/src/components/MovieCard.jsx) (Movie card), [`src/omdbapi.js`](https://github.com/rosemond-kay/alx-capstone-project/blob/main/src/omdbapi.js) (OMDb service), [`src/components/MovieDetailsModal.jsx`](https://github.com/rosemond-kay/alx-capstone-project/blob/main/src/components/MovieDetailsModal.jsx) (Movie details modal)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["App shell"]
  node_react_mount["React mount<br/>[main.jsx]"]
  node_app["App state and views<br/>[App.jsx]"]
  node_navigation["Navigation<br/>[Navigation.jsx]"]
  node_mobile_nav["Mobile navigation"]
  node_watchlist["Watchlist view and state<br/>[App.jsx]"]
end

subgraph group_discovery["Movie discovery"]
  node_hero["Featured hero<br/>[HeroSection.jsx]"]
  node_categories["Category tabs<br/>[CategoryTabs.jsx]"]
  node_movie_list["Movie lists<br/>[MovieList.jsx]"]
  node_movie_card["Movie card<br/>[MovieCard.jsx]"]
  node_search_page["Search and suggestions<br/>[SearchPage.jsx]"]
  node_search_history["Recent search state<br/>[SearchPage.jsx]"]
  node_details["Movie details modal"]
end

subgraph group_data["Movie data"]
  node_omdb_service["OMDb service<br/>[omdbapi.js]"]
  node_omdb(("OMDb API"))
end

subgraph group_presentation["Shared presentation"]
  node_ui_primitives["UI primitives<br/>[Button.jsx]"]
  node_badges_cards["Badges and cards<br/>[Badge.jsx]"]
  node_poster_fallback["Poster fallback"]
end

node_viewer(("Viewer"))

node_viewer -->|"opens app"| node_react_mount
node_react_mount -->|"renders"| node_app
node_app -->|"renders"| node_navigation
node_app -->|"renders"| node_mobile_nav
node_app -->|"renders featured"| node_hero
node_app -->|"renders filters"| node_categories
node_app -->|"renders results"| node_movie_list
node_movie_list -->|"renders movies"| node_movie_card
node_app -->|"renders watchlist"| node_movie_card
node_app -->|"renders search view"| node_search_page
node_search_page -->|"reads and updates"| node_search_history
node_app -->|"renders selection"| node_details
node_navigation -->|"changes view and search"| node_app
node_categories -->|"selects category"| node_app
node_hero -->|"selects movie"| node_app
node_movie_card -->|"selects movie"| node_app
node_details -->|"updates watchlist"| node_app
node_app -->|"updates and displays"| node_watchlist
node_app -->|"fetches featured and categories"| node_omdb_service
node_search_page -->|"searches title"| node_omdb_service
node_omdb_service -->|"requests movie data"| node_omdb
node_omdb_service -->|"caches and transforms"| node_omdb_service
node_hero -->|"uses buttons"| node_ui_primitives
node_details -->|"uses buttons"| node_ui_primitives
node_movie_card -->|"uses display parts"| node_badges_cards
node_details -->|"uses badges"| node_badges_cards
node_movie_card -->|"loads poster"| node_poster_fallback

click node_react_mount "https://github.com/rosemond-kay/alx-capstone-project/blob/main/src/main.jsx"
click node_app "https://github.com/rosemond-kay/alx-capstone-project/blob/main/src/App.jsx"
click node_navigation "https://github.com/rosemond-kay/alx-capstone-project/blob/main/src/components/Navigation.jsx"
click node_mobile_nav "https://github.com/rosemond-kay/alx-capstone-project/blob/main/src/components/MobileBottomNav.jsx"
click node_hero "https://github.com/rosemond-kay/alx-capstone-project/blob/main/src/components/HeroSection.jsx"
click node_categories "https://github.com/rosemond-kay/alx-capstone-project/blob/main/src/components/CategoryTabs.jsx"
click node_movie_list "https://github.com/rosemond-kay/alx-capstone-project/blob/main/src/components/MovieList.jsx"
click node_movie_card "https://github.com/rosemond-kay/alx-capstone-project/blob/main/src/components/MovieCard.jsx"
click node_search_page "https://github.com/rosemond-kay/alx-capstone-project/blob/main/src/components/SearchPage.jsx"
click node_search_history "https://github.com/rosemond-kay/alx-capstone-project/blob/main/src/components/SearchPage.jsx"
click node_details "https://github.com/rosemond-kay/alx-capstone-project/blob/main/src/components/MovieDetailsModal.jsx"
click node_watchlist "https://github.com/rosemond-kay/alx-capstone-project/blob/main/src/App.jsx"
click node_omdb_service "https://github.com/rosemond-kay/alx-capstone-project/blob/main/src/omdbapi.js"
click node_ui_primitives "https://github.com/rosemond-kay/alx-capstone-project/blob/main/src/components/Button.jsx"
click node_badges_cards "https://github.com/rosemond-kay/alx-capstone-project/blob/main/src/components/Badge.jsx"
click node_poster_fallback "https://github.com/rosemond-kay/alx-capstone-project/blob/main/src/components/ImageWithFallback.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_react_mount,node_app,node_navigation,node_mobile_nav,node_watchlist,node_viewer toneBlue
class node_hero,node_categories,node_movie_list,node_movie_card,node_search_page,node_search_history,node_details toneAmber
class node_omdb_service,node_omdb toneMint
class node_ui_primitives,node_badges_cards,node_poster_fallback toneRose
```

## Components

### App shell

- [React mount](https://github.com/rosemond-kay/alx-capstone-project/blob/main/src/main.jsx): `src/main.jsx`
- [App state and views](https://github.com/rosemond-kay/alx-capstone-project/blob/main/src/App.jsx): `src/App.jsx`
- [Navigation](https://github.com/rosemond-kay/alx-capstone-project/blob/main/src/components/Navigation.jsx): `src/components/Navigation.jsx`
- [Mobile navigation](https://github.com/rosemond-kay/alx-capstone-project/blob/main/src/components/MobileBottomNav.jsx): `src/components/MobileBottomNav.jsx`
- [Watchlist view and state](https://github.com/rosemond-kay/alx-capstone-project/blob/main/src/App.jsx): `src/App.jsx`

### Movie discovery

- [Featured hero](https://github.com/rosemond-kay/alx-capstone-project/blob/main/src/components/HeroSection.jsx): `src/components/HeroSection.jsx`
- [Category tabs](https://github.com/rosemond-kay/alx-capstone-project/blob/main/src/components/CategoryTabs.jsx): `src/components/CategoryTabs.jsx`
- [Movie lists](https://github.com/rosemond-kay/alx-capstone-project/blob/main/src/components/MovieList.jsx): `src/components/MovieList.jsx`
- [Movie card](https://github.com/rosemond-kay/alx-capstone-project/blob/main/src/components/MovieCard.jsx): `src/components/MovieCard.jsx`
- [Search and suggestions](https://github.com/rosemond-kay/alx-capstone-project/blob/main/src/components/SearchPage.jsx): `src/components/SearchPage.jsx`
- [Recent search state](https://github.com/rosemond-kay/alx-capstone-project/blob/main/src/components/SearchPage.jsx): `src/components/SearchPage.jsx`
- [Movie details modal](https://github.com/rosemond-kay/alx-capstone-project/blob/main/src/components/MovieDetailsModal.jsx): `src/components/MovieDetailsModal.jsx`

### Movie data

- [OMDb service](https://github.com/rosemond-kay/alx-capstone-project/blob/main/src/omdbapi.js): `src/omdbapi.js`
- **OMDb API**

### Shared presentation

- [UI primitives](https://github.com/rosemond-kay/alx-capstone-project/blob/main/src/components/Button.jsx): `src/components/Button.jsx`
- [Badges and cards](https://github.com/rosemond-kay/alx-capstone-project/blob/main/src/components/Badge.jsx): `src/components/Badge.jsx`
- [Poster fallback](https://github.com/rosemond-kay/alx-capstone-project/blob/main/src/components/ImageWithFallback.jsx): `src/components/ImageWithFallback.jsx`

### Other components

- **Viewer**

## Connections

- Viewer → React mount: opens app
- React mount → App state and views: renders
- App state and views → Navigation: renders
- App state and views → Mobile navigation: renders
- App state and views → Featured hero: renders featured
- App state and views → Category tabs: renders filters
- App state and views → Movie lists: renders results
- Movie lists → Movie card: renders movies
- App state and views → Movie card: renders watchlist
- App state and views → Search and suggestions: renders search view
- Search and suggestions → Recent search state: reads and updates
- App state and views → Movie details modal: renders selection
- Navigation → App state and views: changes view and search
- Category tabs → App state and views: selects category
- Featured hero → App state and views: selects movie
- Movie card → App state and views: selects movie
- Movie details modal → App state and views: updates watchlist
- App state and views → Watchlist view and state: updates and displays
- App state and views → OMDb service: fetches featured and categories
- Search and suggestions → OMDb service: searches title
- OMDb service → OMDb API: requests movie data
- OMDb service → OMDb service: caches and transforms
- Featured hero → UI primitives: uses buttons
- Movie details modal → UI primitives: uses buttons
- Movie card → Badges and cards: uses display parts
- Movie details modal → Badges and cards: uses badges
- Movie card → Poster fallback: loads poster