# pxldigital/1eai-webtech-eindopdracht-rizzlers-matteo-dries-1 architecture

> Architecture diagram of the GitHub repository pxldigital/1eai-webtech-eindopdracht-rizzlers-matteo-dries-1, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-17). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/pxldigital/1eai-webtech-eindopdracht-rizzlers-matteo-dries-1
- Repository: https://github.com/pxldigital/1eai-webtech-eindopdracht-rizzlers-matteo-dries-1

## Overview

1. **Overall shape**
   FilmTracker is a small, request-driven **PHP monolith**: each major feature is exposed as its own `.php` entrypoint, with shared state coming from **PostgreSQL** and shared session/auth behavior across pages.

2. **Core runtime boundaries**
   The app runs on **Apache/PHP 8+** and uses a single database connection file (`db.php`) plus shared styling (`style.css`). There is no separate application server, queue, or background worker layer.

3. **Authentication and user boundary**
   `register.php`, `login.php`, and `logout.php` form the identity boundary. They create and use the logged-in user session that gates access to watchlist, reviews, stats, and export behavior.

4. **Film management subsystem**
   `search.php`, `watchlist.php`, and `film-detail.php` are the film-centric workflows. They let a user search movies/series via the **TMDB API**, add items to a personal watchlist, update status/rating/review, and view detailed film data.

5. **Statistics and reporting subsystem**
   `stats.php` is the analytics/reporting page. It aggregates watchlist data per user, renders charts in the browser, and also doubles as a lightweight **REST-style JSON endpoint** for external clients via `?api=1`.

6. **Export subsystem**
   `export.php` generates a **PDF export** of the user’s watchlist using the bundled **FPDF** library. This is the main “document generation” boundary in the repository.

7. **Persistence model**
   The data model is simple and centered on two tables: `users` and `watchlist`. `users` holds account identity and credentials; `watchlist` stores per-user film records including TMDB ID, title, poster, status, rating, review, and timestamps.

8. **Data flow for film search**
   A typical flow is: browser searches in `search.php` → PHP calls TMDB → results are shown client-side → selected film is inserted into `watchlist` in PostgreSQL. This is the main integration path between the external movie service and local persistence.

9. **Data flow for watchlist updates**
   `watchlist.php` acts as the user’s control panel for changing item state. Updates such as status changes, deletions, and rating/review edits are persisted server-side and usually reflected back through Ajax-driven UI updates.

10. **Client-side interaction layer**
   The front end uses **jQuery 3.7** for Ajax and DOM updates, plus custom JavaScript for features like debounce, star rating, and input escaping. `stats.php` also uses **Chart.js** to visualize aggregated data.

11. **External-device/API boundaries**
   The repo exposes two small integration points for non-browser clients:
   - `search.php` supports `action=remote_add` to add a film via POST
   - `stats.php?api=1&user_id=...` returns summary statistics as JSON  
   These are the only explicit API-style endpoints in an otherwise page-based app.

12. **Vendored dependency boundary**
   The `fpdf/` directory is a vendored third-party library, not core app logic. It contributes the PDF generation capability and should be treated as an external dependency boundary in any architecture diagram.

13. **Practical architecture summary**
   The cleanest diagram is: **browser/UI → PHP page/controller → shared session/db layer → PostgreSQL**, with side integrations to **TMDB** for film metadata and to **FPDF/Chart.js/jQuery** for export and interactive UI/reporting.

Main entry points: [`stats.php`](https://github.com/pxldigital/1eai-webtech-eindopdracht-rizzlers-matteo-dries-1/blob/master/stats.php) (Stats), [`style.css`](https://github.com/pxldigital/1eai-webtech-eindopdracht-rizzlers-matteo-dries-1/blob/master/style.css) (Styles), [`search.php`](https://github.com/pxldigital/1eai-webtech-eindopdracht-rizzlers-matteo-dries-1/blob/master/search.php) (Search), [`export.php`](https://github.com/pxldigital/1eai-webtech-eindopdracht-rizzlers-matteo-dries-1/blob/master/export.php) (Export PDF)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ui["Page layer"]
  node_index_php["Home<br/>entrypoint<br/>[index.php]"]
  node_register_php["Register<br/>auth page<br/>[register.php]"]
  node_login_php["Login<br/>auth page<br/>[login.php]"]
  node_logout_php["Logout<br/>auth page<br/>[logout.php]"]
  node_search_php["Search<br/>film workflow<br/>[search.php]"]
  node_watchlist_php["Watchlist<br/>film workflow<br/>[watchlist.php]"]
  node_film_detail_php["Film detail<br/>film view<br/>[film-detail.php]"]
  node_stats_php["Stats<br/>reporting<br/>[stats.php]"]
  node_export_php["Export PDF<br/>document export<br/>[export.php]"]
end

subgraph group_core["App core"]
  node_style_css["Styles<br/>ui asset<br/>[style.css]"]
  node_db_php[("DB layer<br/>shared backend<br/>[db.php]")]
  node_session_auth{{"Session auth<br/>shared state"}}
end

subgraph group_data["Persistence"]
  node_watchlist_model[("Watchlist data<br/>domain model")]
  node_users_table[("Users table")]
  node_watchlist_table[("Watchlist table")]
  node_postgresql[("PostgreSQL<br/>database")]
end

subgraph group_ext["External services"]
  node_tmdb_api{{"TMDB API<br/>external api"}}
  node_jquery["jQuery<br/>client lib"]
  node_chartjs["Chart.js<br/>client lib"]
  node_fpdf_lib["FPDF<br/>pdf library<br/>[fpdf.php]"]
end

node_browser(("Browser<br/>client"))

node_browser -->|"open"| node_index_php
node_browser -->|"submit"| node_register_php
node_browser -->|"submit"| node_login_php
node_browser -->|"submit"| node_logout_php
node_browser -->|"search/add"| node_search_php
node_browser -->|"manage"| node_watchlist_php
node_browser -->|"view"| node_film_detail_php
node_browser -->|"inspect"| node_stats_php
node_browser -->|"download"| node_export_php
node_register_php -->|"persist user"| node_db_php
node_login_php -->|"check creds"| node_db_php
node_logout_php -->|"clear"| node_session_auth
node_search_php -->|"query"| node_tmdb_api
node_search_php -->|"insert"| node_watchlist_table
node_watchlist_php -->|"update"| node_watchlist_table
node_film_detail_php -->|"fetch"| node_tmdb_api
node_stats_php -->|"aggregate"| node_watchlist_table
node_stats_php -->|"render"| node_chartjs
node_stats_php -->|"query"| node_postgresql
node_export_php -->|"generate"| node_fpdf_lib
node_export_php -->|"read"| node_watchlist_table
node_db_php -->|"connect"| node_postgresql
node_watchlist_model -->|"belongs to"| node_users_table
node_watchlist_model -->|"stored in"| node_watchlist_table
node_session_auth -->|"establishes"| node_login_php
node_session_auth -->|"guards"| node_watchlist_php
node_session_auth -->|"guards"| node_stats_php
node_session_auth -->|"guards"| node_export_php
node_style_css -->|"styles"| node_index_php
node_style_css -->|"styles"| node_search_php
node_style_css -->|"styles"| node_watchlist_php
node_style_css -->|"styles"| node_stats_php

click node_index_php "https://github.com/pxldigital/1eai-webtech-eindopdracht-rizzlers-matteo-dries-1/blob/master/index.php"
click node_register_php "https://github.com/pxldigital/1eai-webtech-eindopdracht-rizzlers-matteo-dries-1/blob/master/register.php"
click node_login_php "https://github.com/pxldigital/1eai-webtech-eindopdracht-rizzlers-matteo-dries-1/blob/master/login.php"
click node_logout_php "https://github.com/pxldigital/1eai-webtech-eindopdracht-rizzlers-matteo-dries-1/blob/master/logout.php"
click node_search_php "https://github.com/pxldigital/1eai-webtech-eindopdracht-rizzlers-matteo-dries-1/blob/master/search.php"
click node_watchlist_php "https://github.com/pxldigital/1eai-webtech-eindopdracht-rizzlers-matteo-dries-1/blob/master/watchlist.php"
click node_film_detail_php "https://github.com/pxldigital/1eai-webtech-eindopdracht-rizzlers-matteo-dries-1/blob/master/film-detail.php"
click node_stats_php "https://github.com/pxldigital/1eai-webtech-eindopdracht-rizzlers-matteo-dries-1/blob/master/stats.php"
click node_export_php "https://github.com/pxldigital/1eai-webtech-eindopdracht-rizzlers-matteo-dries-1/blob/master/export.php"
click node_style_css "https://github.com/pxldigital/1eai-webtech-eindopdracht-rizzlers-matteo-dries-1/blob/master/style.css"
click node_db_php "https://github.com/pxldigital/1eai-webtech-eindopdracht-rizzlers-matteo-dries-1/blob/master/db.php"
click node_fpdf_lib "https://github.com/pxldigital/1eai-webtech-eindopdracht-rizzlers-matteo-dries-1/blob/master/fpdf/fpdf.php"

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_index_php,node_register_php,node_login_php,node_logout_php,node_search_php,node_watchlist_php,node_film_detail_php,node_stats_php,node_export_php toneBlue
class node_style_css,node_db_php,node_session_auth toneAmber
class node_watchlist_model,node_users_table,node_watchlist_table,node_postgresql toneMint
class node_tmdb_api,node_jquery,node_chartjs,node_fpdf_lib toneRose
class node_browser toneNeutral
```

## Components

### Page layer

Browser-facing PHP entrypoints and client-side interaction surfaces.

- [Home](https://github.com/pxldigital/1eai-webtech-eindopdracht-rizzlers-matteo-dries-1/blob/master/index.php): entrypoint · Landing page for the app. · `index.php`
- [Register](https://github.com/pxldigital/1eai-webtech-eindopdracht-rizzlers-matteo-dries-1/blob/master/register.php): auth page · Creates new user accounts and initializes identity state. · `register.php`
- [Login](https://github.com/pxldigital/1eai-webtech-eindopdracht-rizzlers-matteo-dries-1/blob/master/login.php): auth page · Authenticates users and establishes the session. · `login.php`
- [Logout](https://github.com/pxldigital/1eai-webtech-eindopdracht-rizzlers-matteo-dries-1/blob/master/logout.php): auth page · Ends the current user session. · `logout.php`
- [Search](https://github.com/pxldigital/1eai-webtech-eindopdracht-rizzlers-matteo-dries-1/blob/master/search.php): film workflow · Searches TMDB and adds selected titles to the watchlist. · `search.php`
- [Watchlist](https://github.com/pxldigital/1eai-webtech-eindopdracht-rizzlers-matteo-dries-1/blob/master/watchlist.php): film workflow · Lets users review and update saved films. · `watchlist.php`
- [Film detail](https://github.com/pxldigital/1eai-webtech-eindopdracht-rizzlers-matteo-dries-1/blob/master/film-detail.php): film view · Shows detailed information for a film record. · `film-detail.php`
- [Stats](https://github.com/pxldigital/1eai-webtech-eindopdracht-rizzlers-matteo-dries-1/blob/master/stats.php): reporting · Aggregates watchlist data and serves chart data and JSON summaries. · `stats.php`
- [Export PDF](https://github.com/pxldigital/1eai-webtech-eindopdracht-rizzlers-matteo-dries-1/blob/master/export.php): document export · Generates a PDF export of the user's watchlist. · `export.php`

### App core

Shared runtime, session, and data access logic used across pages.

- [Styles](https://github.com/pxldigital/1eai-webtech-eindopdracht-rizzlers-matteo-dries-1/blob/master/style.css): ui asset · Shared stylesheet used across pages. · `style.css`
- [DB layer](https://github.com/pxldigital/1eai-webtech-eindopdracht-rizzlers-matteo-dries-1/blob/master/db.php): shared backend · Central database connection and shared persistence access. · `db.php`
- **Session auth**: shared state · Logged-in user session and access control behavior shared across pages.

### Persistence

Local PostgreSQL-backed tables and the data they store.

- **Watchlist data**: domain model · Per-user film records with status, rating, review, and timestamps.
- **Users table**: table · Stores account identity and credentials.
- **Watchlist table**: table · Stores saved films and per-user metadata.
- **PostgreSQL**: database · Primary persistent datastore for users and watchlist records.

### External services

Third-party APIs and vendored libraries integrated by the app.

- **TMDB API**: external api · Remote movie metadata source used by search and detail flows.
- **jQuery**: client lib · Provides Ajax requests and DOM updates in the browser.
- **Chart.js**: client lib · Renders statistics visualizations in the stats page.
- [FPDF](https://github.com/pxldigital/1eai-webtech-eindopdracht-rizzlers-matteo-dries-1/blob/master/fpdf/fpdf.php): pdf library · Vendored library used to generate PDF exports. · `fpdf/fpdf.php`

### Other components

- **Browser**: client · User-facing UI that loads pages, submits forms, and triggers Ajax updates.

## Connections

- Browser → Home: open · User loads the landing page.
- Browser → Register: submit · User creates an account.
- Browser → Login: submit · User signs in.
- Browser → Logout: submit · User ends the session.
- Browser → Search: search/add · User searches films and adds selected results.
- Browser → Watchlist: manage · User edits saved films.
- Browser → Film detail: view · User opens a detailed film page.
- Browser → Stats: inspect · User views aggregated stats and charts.
- Browser → Export PDF: download · User requests a PDF export.
- Register → DB layer: persist user · Stores new account data.
- Login → DB layer: check creds · Verifies login against stored users.
- Logout → Session auth: clear · Ends the authenticated session.
- Search → TMDB API: query · Fetches movie metadata from TMDB.
- Search → Watchlist table: insert · Adds selected titles to the user's watchlist.
- Watchlist → Watchlist table: update · Edits status, rating, review, and deletions.
- Film detail → TMDB API: fetch · Loads remote film details.
- Stats → Watchlist table: aggregate · Summarizes watchlist data per user.
- Stats → Chart.js: render · Draws charts in the browser.
- Stats → PostgreSQL: query · Reads stored records for statistics and API output.
- Export PDF → FPDF: generate · Builds the PDF document.
- Export PDF → Watchlist table: read · Collects items to export.
- DB layer → PostgreSQL: connect · Provides the shared database connection.
- Watchlist data → Users table: belongs to · Watchlist records are scoped to a user.
- Watchlist data → Watchlist table: stored in · Film records live in the watchlist table.
- Session auth → Login: establishes · Login creates the authenticated session.
- Session auth → Watchlist: guards · Authenticated session gates watchlist access.
- Session auth → Stats: guards · Authenticated session gates stats access.
- Session auth → Export PDF: guards · Authenticated session gates export access.
- Styles → Home: styles · Shared visual styling for the app pages.
- Styles → Search: styles · Shared visual styling for the app pages.
- Styles → Watchlist: styles · Shared visual styling for the app pages.
- Styles → Stats: styles · Shared visual styling for the app pages.