# akhanal222/watchmovie architecture

> Architecture diagram of the GitHub repository akhanal222/watchmovie, 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/akhanal222/watchmovie
- Repository: https://github.com/akhanal222/watchmovie
- Video tour (about a minute): https://gitdiagram.com/akhanal222/watchmovie/video

## Overview

Watchly lets users discover movies, inspect details, and maintain a personal watchlist, with account registration and login. The documented client/server design and sampled route/controller code support the backend request paths shown; frontend component-to-API wiring is not sampled, so those links are omitted. The README identifies PostgreSQL and TMDB integrations; storage helpers and model paths are included where supported by the tree, but unsampled query behavior is not expanded.

Main entry points: [`frontend/src/App.jsx`](https://github.com/akhanal222/watchmovie/blob/main/frontend/src/App.jsx) (React app), [`models/db.js`](https://github.com/akhanal222/watchmovie/blob/main/models/db.js) (Database client), [`server.js`](https://github.com/akhanal222/watchmovie/blob/main/server.js) (Express server), [`routes/watchlistRoutes.js`](https://github.com/akhanal222/watchmovie/blob/main/routes/watchlistRoutes.js) (Watchlist routes)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Web client"]
  node_app["React app<br/>[App.jsx]"]
  node_search["Movie search<br/>[MovieSearch.jsx]"]
  node_detail["Movie details<br/>[MovieDetail.jsx]"]
  node_card["Movie card<br/>[MovieCard.jsx]"]
  node_watchlist_ui["Watchlist view<br/>[Watchlist.jsx]"]
  node_watch_button["Add to list"]
  node_login_ui["Login<br/>[Login.jsx]"]
  node_register_ui["Registration<br/>[Register.jsx]"]
  node_navbar["Navigation<br/>[Navbar.jsx]"]
end

subgraph group_api["API services"]
  node_server["Express server<br/>[server.js]"]
  node_tmdb_routes["Movie routes<br/>[tmdbRoutes.js]"]
  node_tmdb_controller["Movie discovery<br/>[tmdbController.js]"]
  node_auth_routes["Auth routes<br/>[authRoutes.js]"]
  node_auth_controller["Account auth<br/>[authController.js]"]
  node_auth_middleware["JWT guard<br/>[authMiddleware.js]"]
  node_watch_routes["Watchlist routes<br/>[watchlistRoutes.js]"]
  node_watch_controller["Watchlist service"]
end

subgraph group_data["Persistence"]
  node_auth_model["Account queries<br/>[authModel.js]"]
  node_watch_model["Watchlist queries<br/>[watchlistModels.js]"]
  node_movie_model["Movie queries<br/>[movieModels.js]"]
  node_db["Database client<br/>[db.js]"]
end

node_user(("Movie fan"))
node_tmdb{{"TMDB API"}}
node_postgres[("PostgreSQL")]

node_user -->|"uses"| node_app
node_app -->|"routes to"| node_search
node_app -->|"routes to"| node_detail
node_app -->|"routes to"| node_watchlist_ui
node_app -->|"routes to"| node_login_ui
node_app -->|"routes to"| node_register_ui
node_app -->|"renders"| node_navbar
node_server -->|"mounts"| node_tmdb_routes
node_server -->|"mounts"| node_watch_routes
node_server -->|"mounts"| node_auth_routes
node_tmdb_routes -->|"dispatches"| node_tmdb_controller
node_tmdb_controller -->|"requests data"| node_tmdb
node_auth_routes -->|"dispatches"| node_auth_controller
node_auth_controller -->|"queries"| node_auth_model
node_watch_routes -->|"guards"| node_auth_middleware
node_watch_routes -->|"dispatches"| node_watch_controller
node_watch_controller -->|"queries"| node_watch_model
node_auth_model -->|"uses"| node_db
node_watch_model -->|"uses"| node_db
node_movie_model -->|"uses"| node_db
node_db -->|"connects"| node_postgres

click node_app "https://github.com/akhanal222/watchmovie/blob/main/frontend/src/App.jsx"
click node_search "https://github.com/akhanal222/watchmovie/blob/main/frontend/src/components/MovieSearch.jsx"
click node_detail "https://github.com/akhanal222/watchmovie/blob/main/frontend/src/components/MovieDetail.jsx"
click node_card "https://github.com/akhanal222/watchmovie/blob/main/frontend/src/components/MovieCard.jsx"
click node_watchlist_ui "https://github.com/akhanal222/watchmovie/blob/main/frontend/src/components/Watchlist.jsx"
click node_watch_button "https://github.com/akhanal222/watchmovie/blob/main/frontend/src/components/AddToWatchlistButton.jsx"
click node_login_ui "https://github.com/akhanal222/watchmovie/blob/main/frontend/src/components/Login.jsx"
click node_register_ui "https://github.com/akhanal222/watchmovie/blob/main/frontend/src/components/Register.jsx"
click node_navbar "https://github.com/akhanal222/watchmovie/blob/main/frontend/src/components/Navbar.jsx"
click node_server "https://github.com/akhanal222/watchmovie/blob/main/server.js"
click node_tmdb_routes "https://github.com/akhanal222/watchmovie/blob/main/routes/tmdbRoutes.js"
click node_tmdb_controller "https://github.com/akhanal222/watchmovie/blob/main/controllers/tmdbController.js"
click node_auth_routes "https://github.com/akhanal222/watchmovie/blob/main/routes/authRoutes.js"
click node_auth_controller "https://github.com/akhanal222/watchmovie/blob/main/controllers/authController.js"
click node_auth_middleware "https://github.com/akhanal222/watchmovie/blob/main/middleware/authMiddleware.js"
click node_watch_routes "https://github.com/akhanal222/watchmovie/blob/main/routes/watchlistRoutes.js"
click node_watch_controller "https://github.com/akhanal222/watchmovie/blob/main/controllers/watchlistController.js"
click node_auth_model "https://github.com/akhanal222/watchmovie/blob/main/models/authModel.js"
click node_watch_model "https://github.com/akhanal222/watchmovie/blob/main/models/watchlistModels.js"
click node_movie_model "https://github.com/akhanal222/watchmovie/blob/main/models/movieModels.js"
click node_db "https://github.com/akhanal222/watchmovie/blob/main/models/db.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_app,node_search,node_detail,node_card,node_watchlist_ui,node_watch_button,node_login_ui,node_register_ui,node_navbar toneBlue
class node_server,node_tmdb_routes,node_tmdb_controller,node_auth_routes,node_auth_controller,node_auth_middleware,node_watch_routes,node_watch_controller,node_postgres toneAmber
class node_auth_model,node_watch_model,node_movie_model,node_db,node_tmdb toneMint
class node_user toneIndigo
```

## Components

### Web client

- [React app](https://github.com/akhanal222/watchmovie/blob/main/frontend/src/App.jsx): `frontend/src/App.jsx`
- [Movie search](https://github.com/akhanal222/watchmovie/blob/main/frontend/src/components/MovieSearch.jsx): `frontend/src/components/MovieSearch.jsx`
- [Movie details](https://github.com/akhanal222/watchmovie/blob/main/frontend/src/components/MovieDetail.jsx): `frontend/src/components/MovieDetail.jsx`
- [Movie card](https://github.com/akhanal222/watchmovie/blob/main/frontend/src/components/MovieCard.jsx): `frontend/src/components/MovieCard.jsx`
- [Watchlist view](https://github.com/akhanal222/watchmovie/blob/main/frontend/src/components/Watchlist.jsx): `frontend/src/components/Watchlist.jsx`
- [Add to list](https://github.com/akhanal222/watchmovie/blob/main/frontend/src/components/AddToWatchlistButton.jsx): `frontend/src/components/AddToWatchlistButton.jsx`
- [Login](https://github.com/akhanal222/watchmovie/blob/main/frontend/src/components/Login.jsx): `frontend/src/components/Login.jsx`
- [Registration](https://github.com/akhanal222/watchmovie/blob/main/frontend/src/components/Register.jsx): `frontend/src/components/Register.jsx`
- [Navigation](https://github.com/akhanal222/watchmovie/blob/main/frontend/src/components/Navbar.jsx): `frontend/src/components/Navbar.jsx`

### API services

- [Express server](https://github.com/akhanal222/watchmovie/blob/main/server.js): `server.js`
- [Movie routes](https://github.com/akhanal222/watchmovie/blob/main/routes/tmdbRoutes.js): `routes/tmdbRoutes.js`
- [Movie discovery](https://github.com/akhanal222/watchmovie/blob/main/controllers/tmdbController.js): `controllers/tmdbController.js`
- [Auth routes](https://github.com/akhanal222/watchmovie/blob/main/routes/authRoutes.js): `routes/authRoutes.js`
- [Account auth](https://github.com/akhanal222/watchmovie/blob/main/controllers/authController.js): `controllers/authController.js`
- [JWT guard](https://github.com/akhanal222/watchmovie/blob/main/middleware/authMiddleware.js): `middleware/authMiddleware.js`
- [Watchlist routes](https://github.com/akhanal222/watchmovie/blob/main/routes/watchlistRoutes.js): `routes/watchlistRoutes.js`
- [Watchlist service](https://github.com/akhanal222/watchmovie/blob/main/controllers/watchlistController.js): `controllers/watchlistController.js`

### Persistence

- [Account queries](https://github.com/akhanal222/watchmovie/blob/main/models/authModel.js): `models/authModel.js`
- [Watchlist queries](https://github.com/akhanal222/watchmovie/blob/main/models/watchlistModels.js): `models/watchlistModels.js`
- [Movie queries](https://github.com/akhanal222/watchmovie/blob/main/models/movieModels.js): `models/movieModels.js`
- [Database client](https://github.com/akhanal222/watchmovie/blob/main/models/db.js): `models/db.js`

### Other components

- **Movie fan**
- **TMDB API**
- **PostgreSQL**

## Connections

- Movie fan → React app: uses
- React app → Movie search: routes to
- React app → Movie details: routes to
- React app → Watchlist view: routes to
- React app → Login: routes to
- React app → Registration: routes to
- React app → Navigation: renders
- Express server → Movie routes: mounts
- Express server → Watchlist routes: mounts
- Express server → Auth routes: mounts
- Movie routes → Movie discovery: dispatches
- Movie discovery → TMDB API: requests data
- Auth routes → Account auth: dispatches
- Account auth → Account queries: queries
- Watchlist routes → JWT guard: guards
- Watchlist routes → Watchlist service: dispatches
- Watchlist service → Watchlist queries: queries
- Account queries → Database client: uses
- Watchlist queries → Database client: uses
- Movie queries → Database client: uses
- Database client → PostgreSQL: connects