# nicolaykopaas/t17-project2 architecture

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

- Interactive diagram: https://gitdiagram.com/nicolaykopaas/t17-project2
- Repository: https://github.com/nicolaykopaas/t17-project2

## Overview

Filmsøk is a film-and-series discovery app: users search and filter a large catalog, browse paginated results, open title details, add reviews, and maintain a personal list. The React client sends GraphQL operations through Apollo to a Yoga API; resolvers validate and dispatch catalog work to SQL-backed search and mutations. Request context supplies user identity and batched lookups, while artwork resolution can use TMDB. The README documents server-side sorting/filtering and cursor pagination; some frontend and backend modules were not sampled, so their internal wiring is left unspecified.

Main entry points: [`backend/src/resolvers/index.ts`](https://github.com/nicolaykopaas/t17-project2/blob/main/backend/src/resolvers/index.ts) (Query and mutations), [`frontend/src/routes.tsx`](https://github.com/nicolaykopaas/t17-project2/blob/main/frontend/src/routes.tsx) (Page routing), [`frontend/src/main.tsx`](https://github.com/nicolaykopaas/t17-project2/blob/main/frontend/src/main.tsx) (App entry), [`frontend/src/pages/TitlePage.tsx`](https://github.com/nicolaykopaas/t17-project2/blob/main/frontend/src/pages/TitlePage.tsx) (Title details)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Web client"]
  node_entry["App entry<br/>[main.tsx]"]
  node_routes["Page routing<br/>[routes.tsx]"]
  node_browse["Search and browse<br/>[HomePage.tsx]"]
  node_search_ui["Search controls"]
  node_title_page["Title details<br/>[TitlePage.tsx]"]
  node_reviews_ui["Review form<br/>[ReviewForm.tsx]"]
  node_list_page["Personal list<br/>[MyListPage.tsx]"]
  node_operations["GraphQL operations<br/>[operations.ts]"]
  node_apollo["Apollo transport<br/>[client.ts]"]
end

subgraph group_api["GraphQL API"]
  node_yoga["GraphQL server<br/>[app.ts]"]
  node_schema["Schema definition<br/>[schema.ts]"]
  node_resolvers["Query and mutations<br/>[index.ts]"]
  node_request_context["Request context<br/>[context.ts]"]
end

subgraph group_domain["Catalog services"]
  node_validation["Input validation<br/>[validation.ts]"]
  node_catalog_search["Catalog search<br/>[search.ts]"]
  node_cursor["Cursor pagination<br/>[keyset.ts]"]
  node_artwork["Artwork service<br/>[artwork.ts]"]
end

subgraph group_state["Data and integrations"]
  node_postgres[("PostgreSQL")]
  node_tmdb["TMDB"]
end

node_visitor(("Film seeker"))

node_visitor -->|"uses app"| node_entry
node_entry -->|"installs router"| node_routes
node_routes -->|"routes to"| node_browse
node_routes -->|"routes to"| node_title_page
node_routes -->|"routes to"| node_list_page
node_browse -.->|"renders"| node_search_ui
node_entry -->|"provides client"| node_apollo
node_title_page -->|"runs title query"| node_operations
node_reviews_ui -->|"runs review mutation"| node_operations
node_title_page -->|"renders"| node_reviews_ui
node_apollo -->|"sends GraphQL"| node_yoga
node_yoga -->|"serves schema"| node_schema
node_yoga -->|"builds per request"| node_request_context
node_schema -.->|"binds resolvers"| node_resolvers
node_resolvers -->|"validates inputs"| node_validation
node_resolvers -->|"dispatches search"| node_catalog_search
node_catalog_search -->|"queries catalog"| node_postgres
node_catalog_search -->|"encodes cursors"| node_cursor
node_resolvers -->|"writes reviews and list"| node_postgres
node_request_context -->|"batches lookups"| node_postgres
node_resolvers -->|"resolves image URLs"| node_artwork
node_artwork -->|"caches artwork"| node_postgres
node_artwork -.->|"fetches artwork"| node_tmdb

click node_entry "https://github.com/nicolaykopaas/t17-project2/blob/main/frontend/src/main.tsx"
click node_routes "https://github.com/nicolaykopaas/t17-project2/blob/main/frontend/src/routes.tsx"
click node_browse "https://github.com/nicolaykopaas/t17-project2/blob/main/frontend/src/pages/HomePage.tsx"
click node_search_ui "https://github.com/nicolaykopaas/t17-project2/tree/main/frontend/src/components"
click node_title_page "https://github.com/nicolaykopaas/t17-project2/blob/main/frontend/src/pages/TitlePage.tsx"
click node_reviews_ui "https://github.com/nicolaykopaas/t17-project2/blob/main/frontend/src/components/ReviewForm.tsx"
click node_list_page "https://github.com/nicolaykopaas/t17-project2/blob/main/frontend/src/pages/MyListPage.tsx"
click node_operations "https://github.com/nicolaykopaas/t17-project2/blob/main/frontend/src/graphql/operations.ts"
click node_apollo "https://github.com/nicolaykopaas/t17-project2/blob/main/frontend/src/apollo/client.ts"
click node_yoga "https://github.com/nicolaykopaas/t17-project2/blob/main/backend/src/app.ts"
click node_schema "https://github.com/nicolaykopaas/t17-project2/blob/main/backend/src/schema.ts"
click node_resolvers "https://github.com/nicolaykopaas/t17-project2/blob/main/backend/src/resolvers/index.ts"
click node_request_context "https://github.com/nicolaykopaas/t17-project2/blob/main/backend/src/context.ts"
click node_validation "https://github.com/nicolaykopaas/t17-project2/blob/main/backend/src/validation.ts"
click node_catalog_search "https://github.com/nicolaykopaas/t17-project2/blob/main/backend/src/search.ts"
click node_cursor "https://github.com/nicolaykopaas/t17-project2/blob/main/backend/src/keyset.ts"
click node_artwork "https://github.com/nicolaykopaas/t17-project2/blob/main/backend/src/artwork.ts"

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_entry,node_routes,node_browse,node_search_ui,node_title_page,node_reviews_ui,node_list_page,node_operations,node_apollo toneBlue
class node_yoga,node_schema,node_resolvers,node_request_context toneAmber
class node_validation,node_catalog_search,node_cursor,node_artwork toneMint
class node_postgres,node_tmdb toneRose
class node_visitor toneIndigo
```

## Components

### Web client

- [App entry](https://github.com/nicolaykopaas/t17-project2/blob/main/frontend/src/main.tsx): `frontend/src/main.tsx`
- [Page routing](https://github.com/nicolaykopaas/t17-project2/blob/main/frontend/src/routes.tsx): `frontend/src/routes.tsx`
- [Search and browse](https://github.com/nicolaykopaas/t17-project2/blob/main/frontend/src/pages/HomePage.tsx): `frontend/src/pages/HomePage.tsx`
- [Search controls](https://github.com/nicolaykopaas/t17-project2/tree/main/frontend/src/components): `frontend/src/components`
- [Title details](https://github.com/nicolaykopaas/t17-project2/blob/main/frontend/src/pages/TitlePage.tsx): `frontend/src/pages/TitlePage.tsx`
- [Review form](https://github.com/nicolaykopaas/t17-project2/blob/main/frontend/src/components/ReviewForm.tsx): `frontend/src/components/ReviewForm.tsx`
- [Personal list](https://github.com/nicolaykopaas/t17-project2/blob/main/frontend/src/pages/MyListPage.tsx): `frontend/src/pages/MyListPage.tsx`
- [GraphQL operations](https://github.com/nicolaykopaas/t17-project2/blob/main/frontend/src/graphql/operations.ts): `frontend/src/graphql/operations.ts`
- [Apollo transport](https://github.com/nicolaykopaas/t17-project2/blob/main/frontend/src/apollo/client.ts): `frontend/src/apollo/client.ts`

### GraphQL API

- [GraphQL server](https://github.com/nicolaykopaas/t17-project2/blob/main/backend/src/app.ts): `backend/src/app.ts`
- [Schema definition](https://github.com/nicolaykopaas/t17-project2/blob/main/backend/src/schema.ts): `backend/src/schema.ts`
- [Query and mutations](https://github.com/nicolaykopaas/t17-project2/blob/main/backend/src/resolvers/index.ts): `backend/src/resolvers/index.ts`
- [Request context](https://github.com/nicolaykopaas/t17-project2/blob/main/backend/src/context.ts): `backend/src/context.ts`

### Catalog services

- [Input validation](https://github.com/nicolaykopaas/t17-project2/blob/main/backend/src/validation.ts): `backend/src/validation.ts`
- [Catalog search](https://github.com/nicolaykopaas/t17-project2/blob/main/backend/src/search.ts): `backend/src/search.ts`
- [Cursor pagination](https://github.com/nicolaykopaas/t17-project2/blob/main/backend/src/keyset.ts): `backend/src/keyset.ts`
- [Artwork service](https://github.com/nicolaykopaas/t17-project2/blob/main/backend/src/artwork.ts): `backend/src/artwork.ts`

### Data and integrations

- **PostgreSQL**
- **TMDB**

### Other components

- **Film seeker**

## Connections

- Film seeker → App entry: uses app (evidence: `frontend/src/main.tsx`)
- App entry → Page routing: installs router (evidence: `frontend/src/main.tsx`)
- Page routing → Search and browse: routes to (evidence: `frontend/src/routes.tsx`)
- Page routing → Title details: routes to (evidence: `frontend/src/routes.tsx`)
- Page routing → Personal list: routes to (evidence: `frontend/src/routes.tsx`)
- Search and browse → Search controls: renders
- App entry → Apollo transport: provides client (evidence: `frontend/src/main.tsx`)
- Title details → GraphQL operations: runs title query (evidence: `frontend/src/pages/TitlePage.tsx`)
- Review form → GraphQL operations: runs review mutation (evidence: `frontend/src/components/ReviewForm.tsx`)
- Title details → Review form: renders (evidence: `frontend/src/pages/TitlePage.tsx`)
- Apollo transport → GraphQL server: sends GraphQL (evidence: `frontend/src/apollo/client.ts`)
- GraphQL server → Schema definition: serves schema (evidence: `backend/src/app.ts`)
- GraphQL server → Request context: builds per request (evidence: `backend/src/app.ts`)
- Schema definition → Query and mutations: binds resolvers
- Query and mutations → Input validation: validates inputs (evidence: `backend/src/resolvers/index.ts`)
- Query and mutations → Catalog search: dispatches search (evidence: `backend/src/resolvers/index.ts`)
- Catalog search → PostgreSQL: queries catalog (evidence: `backend/src/search.ts`)
- Catalog search → Cursor pagination: encodes cursors (evidence: `backend/src/search.ts`)
- Query and mutations → PostgreSQL: writes reviews and list (evidence: `backend/src/resolvers/index.ts`)
- Request context → PostgreSQL: batches lookups (evidence: `backend/src/context.ts`)
- Query and mutations → Artwork service: resolves image URLs (evidence: `backend/src/resolvers/index.ts`)
- Artwork service → PostgreSQL: caches artwork (evidence: `backend/src/artwork.ts`)
- Artwork service → TMDB: fetches artwork