# jstmejosh/flickfinder architecture

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

## Overview

FlickFinder is a React movie-discovery app: visitors browse popular titles or search, open a movie’s detail page, and can return to browsing. The route layer selects the home, detail, or not-found view; the home and detail views request data through a shared TMDB Axios client. README capabilities such as responsive presentation are represented within those views, not as separate runtime modules. The sampled source confirms these routes and API requests; no separate movie-card or API module exists in the supplied tree.

Main entry points: [`src/axiosInstance.js`](https://github.com/jstmejosh/flickfinder/blob/main/src/axiosInstance.js) (TMDB client), [`src/Pages/Home.jsx`](https://github.com/jstmejosh/flickfinder/blob/main/src/Pages/Home.jsx) (Popular and search), [`src/Pages/MovieDetails.jsx`](https://github.com/jstmejosh/flickfinder/blob/main/src/Pages/MovieDetails.jsx) (Movie details), [`src/AppRouter.jsx`](https://github.com/jstmejosh/flickfinder/blob/main/src/AppRouter.jsx) (Route selection)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App entry"]
  node_main["React mount<br/>[main.jsx]"]
  node_appcomponent["App shell<br/>[App.jsx]"]
  node_router["Route selection<br/>[AppRouter.jsx]"]
end

subgraph group_browse["Movie discovery"]
  node_home["Popular and search<br/>[Home.jsx]"]
  node_navbar["Search navigation<br/>[NavBar.jsx]"]
  node_footer["Site footer<br/>[Footer.jsx]"]
end

subgraph group_details["Movie details"]
  node_movie["Movie details<br/>[MovieDetails.jsx]"]
  node_notfound["Not-found view<br/>[NotFound.jsx]"]
end

subgraph group_integration["API integration"]
  node_client["TMDB client<br/>[axiosInstance.js]"]
  node_tmdb["TMDB API"]
end

node_visitor(("Visitor"))
node_whatsapp["WhatsApp"]

node_visitor -->|"opens app"| node_main
node_main -->|"mounts"| node_appcomponent
node_appcomponent -->|"renders"| node_router
node_router -->|"routes home"| node_home
node_router -->|"routes detail"| node_movie
node_router -->|"routes not-found"| node_notfound
node_home -->|"renders"| node_navbar
node_home -->|"renders"| node_footer
node_movie -->|"renders"| node_navbar
node_movie -->|"renders"| node_footer
node_home -->|"requests movies"| node_client
node_movie -->|"requests detail"| node_client
node_client -->|"sends API requests"| node_tmdb
node_tmdb -->|"returns data"| node_client
node_client -->|"returns results"| node_home
node_client -->|"returns details"| node_movie
node_footer -.->|"opens chat"| node_whatsapp

click node_main "https://github.com/jstmejosh/flickfinder/blob/main/src/main.jsx"
click node_appcomponent "https://github.com/jstmejosh/flickfinder/blob/main/src/App.jsx"
click node_router "https://github.com/jstmejosh/flickfinder/blob/main/src/AppRouter.jsx"
click node_home "https://github.com/jstmejosh/flickfinder/blob/main/src/Pages/Home.jsx"
click node_navbar "https://github.com/jstmejosh/flickfinder/blob/main/src/components/NavBar.jsx"
click node_footer "https://github.com/jstmejosh/flickfinder/blob/main/src/components/Footer.jsx"
click node_movie "https://github.com/jstmejosh/flickfinder/blob/main/src/Pages/MovieDetails.jsx"
click node_notfound "https://github.com/jstmejosh/flickfinder/blob/main/src/Pages/NotFound.jsx"
click node_client "https://github.com/jstmejosh/flickfinder/blob/main/src/axiosInstance.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_main,node_appcomponent,node_router toneBlue
class node_home,node_navbar,node_footer toneAmber
class node_movie,node_notfound toneMint
class node_client,node_tmdb toneRose
class node_visitor,node_whatsapp toneIndigo
```

## Components

### App entry

- [React mount](https://github.com/jstmejosh/flickfinder/blob/main/src/main.jsx): `src/main.jsx`
- [App shell](https://github.com/jstmejosh/flickfinder/blob/main/src/App.jsx): `src/App.jsx`
- [Route selection](https://github.com/jstmejosh/flickfinder/blob/main/src/AppRouter.jsx): `src/AppRouter.jsx`

### Movie discovery

- [Popular and search](https://github.com/jstmejosh/flickfinder/blob/main/src/Pages/Home.jsx): `src/Pages/Home.jsx`
- [Search navigation](https://github.com/jstmejosh/flickfinder/blob/main/src/components/NavBar.jsx): `src/components/NavBar.jsx`
- [Site footer](https://github.com/jstmejosh/flickfinder/blob/main/src/components/Footer.jsx): `src/components/Footer.jsx`

### Movie details

- [Movie details](https://github.com/jstmejosh/flickfinder/blob/main/src/Pages/MovieDetails.jsx): `src/Pages/MovieDetails.jsx`
- [Not-found view](https://github.com/jstmejosh/flickfinder/blob/main/src/Pages/NotFound.jsx): `src/Pages/NotFound.jsx`

### API integration

- [TMDB client](https://github.com/jstmejosh/flickfinder/blob/main/src/axiosInstance.js): `src/axiosInstance.js`
- **TMDB API**

### Other components

- **Visitor**
- **WhatsApp**

## Connections

- Visitor → React mount: opens app
- React mount → App shell: mounts
- App shell → Route selection: renders
- Route selection → Popular and search: routes home
- Route selection → Movie details: routes detail
- Route selection → Not-found view: routes not-found
- Popular and search → Search navigation: renders
- Popular and search → Site footer: renders
- Movie details → Search navigation: renders
- Movie details → Site footer: renders
- Popular and search → TMDB client: requests movies
- Movie details → TMDB client: requests detail
- TMDB client → TMDB API: sends API requests
- TMDB API → TMDB client: returns data
- TMDB client → Popular and search: returns results
- TMDB client → Movie details: returns details
- Site footer → WhatsApp: opens chat