# mmsabit/cine-vault architecture

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

- Interactive diagram: https://gitdiagram.com/mmsabit/cine-vault
- Repository: https://github.com/mmsabit/cine-vault

## Overview

Cine Vault is a Next.js movie-discovery site. Visitors land on a home page with featured, upcoming, and currently playing movies, then can browse movie listings, open a movie detail page, or navigate to TV and cast sections. The sampled code confirms movie and genre requests to a TMDB-compatible API, plus detail retrieval; the TV, cast, listing, and hero-fetch implementations were not sampled, so their internal data flows are not shown.

Main entry points: [`src/Components/Navber.jsx`](https://github.com/mmsabit/cine-vault/blob/main/src/Components/Navber.jsx) (Navigation), [`src/app/page.js`](https://github.com/mmsabit/cine-vault/blob/main/src/app/page.js) (Home page), [`src/app/layout.js`](https://github.com/mmsabit/cine-vault/blob/main/src/app/layout.js) (App layout), [`src/Components/upcomingMovies/UcSection.jsx`](https://github.com/mmsabit/cine-vault/blob/main/src/Components/upcomingMovies/UcSection.jsx) (Upcoming section)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["Site shell"]
  node_layout["App layout<br/>[layout.js]"]
  node_navbar["Navigation<br/>[Navber.jsx]"]
  node_footer["Footer<br/>[Footer.jsx]"]
end

subgraph group_home["Home discovery"]
  node_home_page["Home page<br/>[page.js]"]
  node_hero["Featured hero<br/>[HeroCall.jsx]"]
  node_hero_slide["Hero slide<br/>[HeroSlide.jsx]"]
  node_upcoming["Upcoming section<br/>[UcSection.jsx]"]
  node_upcoming_carousel["Upcoming carousel<br/>[UcCarousel.jsx]"]
  node_upcoming_card["Upcoming card<br/>[UcCard.jsx]"]
  node_nowplaying["Now playing<br/>[NowPlaying.jsx]"]
  node_now_carousel["Now carousel<br/>[NowCarousel.jsx]"]
  node_now_card["Now card<br/>[NowCard.jsx]"]
end

subgraph group_movies["Movie browsing"]
  node_movies_page["Movie catalog<br/>[page.jsx]"]
  node_pagination["Pagination<br/>[Pagination.jsx]"]
  node_movie_detail["Movie detail<br/>[page.jsx]"]
end

subgraph group_other["Other sections"]
  node_tv_page["TV section<br/>[page.jsx]"]
  node_cast_page["Cast section<br/>[page.jsx]"]
end

node_visitor(("Visitor"))
node_tmdb{{"TMDB API"}}
node_tmdb_images{{"TMDB images"}}

node_visitor -->|"opens site"| node_layout
node_layout -->|"renders"| node_navbar
node_layout -->|"renders"| node_footer
node_layout -->|"renders route"| node_home_page
node_navbar -->|"links home"| node_home_page
node_navbar -->|"links movies"| node_movies_page
node_navbar -->|"links TV"| node_tv_page
node_navbar -->|"links cast"| node_cast_page
node_home_page -->|"renders"| node_hero
node_home_page -->|"renders"| node_upcoming
node_home_page -->|"renders"| node_nowplaying
node_hero --> node_hero_slide
node_upcoming -->|"passes movie data"| node_upcoming_carousel
node_upcoming_carousel --> node_upcoming_card
node_upcoming -->|"fetches upcoming and genres"| node_tmdb
node_upcoming_card -->|"loads posters"| node_tmdb_images
node_nowplaying -->|"passes movie data"| node_now_carousel
node_now_carousel --> node_now_card
node_nowplaying -->|"fetches current and genres"| node_tmdb
node_now_card -->|"loads posters"| node_tmdb_images
node_now_card -->|"links details"| node_movie_detail
node_movies_page --> node_pagination
node_pagination -->|"changes page"| node_movies_page
node_movie_detail -->|"fetches movie"| node_tmdb
node_movie_detail -->|"loads artwork"| node_tmdb_images

click node_layout "https://github.com/mmsabit/cine-vault/blob/main/src/app/layout.js"
click node_navbar "https://github.com/mmsabit/cine-vault/blob/main/src/Components/Navber.jsx"
click node_footer "https://github.com/mmsabit/cine-vault/blob/main/src/Components/Footer.jsx"
click node_home_page "https://github.com/mmsabit/cine-vault/blob/main/src/app/page.js"
click node_hero "https://github.com/mmsabit/cine-vault/blob/main/src/Components/HeroSection/HeroCall.jsx"
click node_hero_slide "https://github.com/mmsabit/cine-vault/blob/main/src/Components/HeroSection/HeroSlide.jsx"
click node_upcoming "https://github.com/mmsabit/cine-vault/blob/main/src/Components/upcomingMovies/UcSection.jsx"
click node_upcoming_carousel "https://github.com/mmsabit/cine-vault/blob/main/src/Components/upcomingMovies/UcCarousel.jsx"
click node_upcoming_card "https://github.com/mmsabit/cine-vault/blob/main/src/Components/upcomingMovies/UcCard.jsx"
click node_nowplaying "https://github.com/mmsabit/cine-vault/blob/main/src/Components/nowplaying/NowPlaying.jsx"
click node_now_carousel "https://github.com/mmsabit/cine-vault/blob/main/src/Components/nowplaying/NowCarousel.jsx"
click node_now_card "https://github.com/mmsabit/cine-vault/blob/main/src/Components/nowplaying/NowCard.jsx"
click node_movies_page "https://github.com/mmsabit/cine-vault/blob/main/src/app/movies/page.jsx"
click node_pagination "https://github.com/mmsabit/cine-vault/blob/main/src/app/movies/Pagination.jsx"
click node_movie_detail "https://github.com/mmsabit/cine-vault/blob/main/src/app/movies/%5Bmovieid%5D/page.jsx"
click node_tv_page "https://github.com/mmsabit/cine-vault/blob/main/src/app/tv/page.jsx"
click node_cast_page "https://github.com/mmsabit/cine-vault/blob/main/src/app/cast/page.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_layout,node_navbar,node_footer toneBlue
class node_home_page,node_hero,node_hero_slide,node_upcoming,node_upcoming_carousel,node_upcoming_card,node_nowplaying,node_now_carousel,node_now_card toneAmber
class node_movies_page,node_pagination,node_movie_detail,node_tmdb toneMint
class node_tv_page,node_cast_page toneRose
class node_visitor,node_tmdb_images toneIndigo
```

## Components

### Site shell

- [App layout](https://github.com/mmsabit/cine-vault/blob/main/src/app/layout.js): `src/app/layout.js`
- [Navigation](https://github.com/mmsabit/cine-vault/blob/main/src/Components/Navber.jsx): `src/Components/Navber.jsx`
- [Footer](https://github.com/mmsabit/cine-vault/blob/main/src/Components/Footer.jsx): `src/Components/Footer.jsx`

### Home discovery

- [Home page](https://github.com/mmsabit/cine-vault/blob/main/src/app/page.js): `src/app/page.js`
- [Featured hero](https://github.com/mmsabit/cine-vault/blob/main/src/Components/HeroSection/HeroCall.jsx): `src/Components/HeroSection/HeroCall.jsx`
- [Hero slide](https://github.com/mmsabit/cine-vault/blob/main/src/Components/HeroSection/HeroSlide.jsx): `src/Components/HeroSection/HeroSlide.jsx`
- [Upcoming section](https://github.com/mmsabit/cine-vault/blob/main/src/Components/upcomingMovies/UcSection.jsx): `src/Components/upcomingMovies/UcSection.jsx`
- [Upcoming carousel](https://github.com/mmsabit/cine-vault/blob/main/src/Components/upcomingMovies/UcCarousel.jsx): `src/Components/upcomingMovies/UcCarousel.jsx`
- [Upcoming card](https://github.com/mmsabit/cine-vault/blob/main/src/Components/upcomingMovies/UcCard.jsx): `src/Components/upcomingMovies/UcCard.jsx`
- [Now playing](https://github.com/mmsabit/cine-vault/blob/main/src/Components/nowplaying/NowPlaying.jsx): `src/Components/nowplaying/NowPlaying.jsx`
- [Now carousel](https://github.com/mmsabit/cine-vault/blob/main/src/Components/nowplaying/NowCarousel.jsx): `src/Components/nowplaying/NowCarousel.jsx`
- [Now card](https://github.com/mmsabit/cine-vault/blob/main/src/Components/nowplaying/NowCard.jsx): `src/Components/nowplaying/NowCard.jsx`

### Movie browsing

- [Movie catalog](https://github.com/mmsabit/cine-vault/blob/main/src/app/movies/page.jsx): `src/app/movies/page.jsx`
- [Pagination](https://github.com/mmsabit/cine-vault/blob/main/src/app/movies/Pagination.jsx): `src/app/movies/Pagination.jsx`
- [Movie detail](https://github.com/mmsabit/cine-vault/blob/main/src/app/movies/%5Bmovieid%5D/page.jsx): `src/app/movies/[movieid]/page.jsx`

### Other sections

- [TV section](https://github.com/mmsabit/cine-vault/blob/main/src/app/tv/page.jsx): `src/app/tv/page.jsx`
- [Cast section](https://github.com/mmsabit/cine-vault/blob/main/src/app/cast/page.jsx): `src/app/cast/page.jsx`

### Other components

- **Visitor**
- **TMDB API**
- **TMDB images**

## Connections

- Visitor → App layout: opens site
- App layout → Navigation: renders
- App layout → Footer: renders
- App layout → Home page: renders route
- Navigation → Home page: links home
- Navigation → Movie catalog: links movies
- Navigation → TV section: links TV
- Navigation → Cast section: links cast
- Home page → Featured hero: renders
- Home page → Upcoming section: renders
- Home page → Now playing: renders
- Featured hero → Hero slide
- Upcoming section → Upcoming carousel: passes movie data
- Upcoming carousel → Upcoming card
- Upcoming section → TMDB API: fetches upcoming and genres
- Upcoming card → TMDB images: loads posters
- Now playing → Now carousel: passes movie data
- Now carousel → Now card
- Now playing → TMDB API: fetches current and genres
- Now card → TMDB images: loads posters
- Now card → Movie detail: links details
- Movie catalog → Pagination
- Pagination → Movie catalog: changes page
- Movie detail → TMDB API: fetches movie
- Movie detail → TMDB images: loads artwork