# ismagold67/desafio-verzel architecture

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

- Interactive diagram: https://gitdiagram.com/ismagold67/desafio-verzel
- Repository: https://github.com/ismagold67/desafio-verzel

## Overview

This is a full-stack movie search and favorites app. A user searches from the React page; the Django API proxies search and detail requests to TMDB, while favorites are stored as shareable lists. The UI can reload its own list from a browser-stored list ID, toggle favorites, and copy a link that opens the shared-list page. The graph includes documented shared-list behavior, though that page’s implementation was not sampled; its exact path is taken from the tree. Backend routing and persistence paths are also included based on the tree and README.

Main entry points: [`frontend/src/pages/SearchPage.jsx`](https://github.com/ismagold67/desafio-verzel/blob/main/frontend/src/pages/SearchPage.jsx) (Search page), [`backend/api/views.py`](https://github.com/ismagold67/desafio-verzel/blob/main/backend/api/views.py) (API views), [`backend/api/urls.py`](https://github.com/ismagold67/desafio-verzel/blob/main/backend/api/urls.py) (API routing), [`frontend/src/main.jsx`](https://github.com/ismagold67/desafio-verzel/blob/main/frontend/src/main.jsx) (Page router)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["React application"]
  node_router["Page router<br/>[main.jsx]"]
  node_search_page["Search page<br/>[SearchPage.jsx]"]
  node_search_bar["Search input<br/>[SearchBar.jsx]"]
  node_movie_list["Movie list<br/>[MovieList.jsx]"]
  node_movie_card["Movie card<br/>[MovieCard.jsx]"]
  node_movie_modal["Movie details<br/>[MovieModal.jsx]"]
  node_header["App header<br/>[Header.jsx]"]
  node_favorites_page["Shared favorites<br/>[FavoritesPage.jsx]"]
end

subgraph group_backend["Django API"]
  node_api_routes["API routing<br/>[urls.py]"]
  node_api_views["API views<br/>[views.py]"]
  node_serializers["API serializers<br/>[serializers.py]"]
end

subgraph group_movie_data["Movie data"]
  node_tmdb["TMDB API"]
end

subgraph group_favorite_data["Favorite lists"]
  node_models["Favorite models<br/>[models.py]"]
  node_favorite_db[("Favorites database<br/>[settings.py]")]
end

node_user(("Movie viewer"))
node_browser_storage[("Browser localStorage")]

node_user -->|"opens app"| node_router
node_router -->|"routes /"| node_search_page
node_router -->|"routes shared link"| node_favorites_page
node_search_page -->|"renders"| node_header
node_search_page -->|"renders"| node_search_bar
node_search_page -->|"renders results"| node_movie_list
node_movie_list -->|"renders cards"| node_movie_card
node_movie_card -->|"selects or toggles"| node_search_page
node_search_page -->|"renders details"| node_movie_modal
node_search_bar -->|"submits query"| node_search_page
node_search_page -->|"reads and writes list ID"| node_browser_storage
node_search_page -->|"requests search and details"| node_api_routes
node_search_page -->|"manages favorites"| node_api_routes
node_favorites_page -->|"loads shared list"| node_api_routes
node_api_routes -->|"dispatches requests"| node_api_views
node_api_views -->|"requests search or details"| node_tmdb
node_api_views -->|"reads and changes lists"| node_models
node_api_views -->|"serializes responses"| node_serializers
node_models -->|"reads and writes"| node_favorite_db
node_search_page -->|"copies share link"| node_user

click node_router "https://github.com/ismagold67/desafio-verzel/blob/main/frontend/src/main.jsx"
click node_search_page "https://github.com/ismagold67/desafio-verzel/blob/main/frontend/src/pages/SearchPage.jsx"
click node_search_bar "https://github.com/ismagold67/desafio-verzel/blob/main/frontend/src/components/SearchBar/SearchBar.jsx"
click node_movie_list "https://github.com/ismagold67/desafio-verzel/blob/main/frontend/src/components/MovieList/MovieList.jsx"
click node_movie_card "https://github.com/ismagold67/desafio-verzel/blob/main/frontend/src/components/MovieCard/MovieCard.jsx"
click node_movie_modal "https://github.com/ismagold67/desafio-verzel/blob/main/frontend/src/components/MovieModal/MovieModal.jsx"
click node_header "https://github.com/ismagold67/desafio-verzel/blob/main/frontend/src/components/Header/Header.jsx"
click node_favorites_page "https://github.com/ismagold67/desafio-verzel/blob/main/frontend/src/pages/FavoritesPage.jsx"
click node_api_routes "https://github.com/ismagold67/desafio-verzel/blob/main/backend/api/urls.py"
click node_api_views "https://github.com/ismagold67/desafio-verzel/blob/main/backend/api/views.py"
click node_serializers "https://github.com/ismagold67/desafio-verzel/blob/main/backend/api/serializers.py"
click node_models "https://github.com/ismagold67/desafio-verzel/blob/main/backend/api/models.py"
click node_favorite_db "https://github.com/ismagold67/desafio-verzel/blob/main/backend/config/settings.py"

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_router,node_search_page,node_search_bar,node_movie_list,node_movie_card,node_movie_modal,node_header,node_favorites_page,node_user toneBlue
class node_api_routes,node_api_views,node_serializers,node_browser_storage toneAmber
class node_tmdb toneMint
class node_models,node_favorite_db toneRose
```

## Components

### React application

- [Page router](https://github.com/ismagold67/desafio-verzel/blob/main/frontend/src/main.jsx): `frontend/src/main.jsx`
- [Search page](https://github.com/ismagold67/desafio-verzel/blob/main/frontend/src/pages/SearchPage.jsx): `frontend/src/pages/SearchPage.jsx`
- [Search input](https://github.com/ismagold67/desafio-verzel/blob/main/frontend/src/components/SearchBar/SearchBar.jsx): `frontend/src/components/SearchBar/SearchBar.jsx`
- [Movie list](https://github.com/ismagold67/desafio-verzel/blob/main/frontend/src/components/MovieList/MovieList.jsx): `frontend/src/components/MovieList/MovieList.jsx`
- [Movie card](https://github.com/ismagold67/desafio-verzel/blob/main/frontend/src/components/MovieCard/MovieCard.jsx): `frontend/src/components/MovieCard/MovieCard.jsx`
- [Movie details](https://github.com/ismagold67/desafio-verzel/blob/main/frontend/src/components/MovieModal/MovieModal.jsx): `frontend/src/components/MovieModal/MovieModal.jsx`
- [App header](https://github.com/ismagold67/desafio-verzel/blob/main/frontend/src/components/Header/Header.jsx): `frontend/src/components/Header/Header.jsx`
- [Shared favorites](https://github.com/ismagold67/desafio-verzel/blob/main/frontend/src/pages/FavoritesPage.jsx): `frontend/src/pages/FavoritesPage.jsx`

### Django API

- [API routing](https://github.com/ismagold67/desafio-verzel/blob/main/backend/api/urls.py): `backend/api/urls.py`
- [API views](https://github.com/ismagold67/desafio-verzel/blob/main/backend/api/views.py): `backend/api/views.py`
- [API serializers](https://github.com/ismagold67/desafio-verzel/blob/main/backend/api/serializers.py): `backend/api/serializers.py`

### Movie data

- **TMDB API**

### Favorite lists

- [Favorite models](https://github.com/ismagold67/desafio-verzel/blob/main/backend/api/models.py): `backend/api/models.py`
- [Favorites database](https://github.com/ismagold67/desafio-verzel/blob/main/backend/config/settings.py): `backend/config/settings.py`

### Other components

- **Movie viewer**
- **Browser localStorage**

## Connections

- Movie viewer → Page router: opens app
- Page router → Search page: routes /
- Page router → Shared favorites: routes shared link
- Search page → App header: renders
- Search page → Search input: renders
- Search page → Movie list: renders results
- Movie list → Movie card: renders cards
- Movie card → Search page: selects or toggles
- Search page → Movie details: renders details
- Search input → Search page: submits query
- Search page → Browser localStorage: reads and writes list ID
- Search page → API routing: requests search and details
- Search page → API routing: manages favorites
- Shared favorites → API routing: loads shared list
- API routing → API views: dispatches requests
- API views → TMDB API: requests search or details
- API views → Favorite models: reads and changes lists
- API views → API serializers: serializes responses
- Favorite models → Favorites database: reads and writes
- Search page → Movie viewer: copies share link