# ah-alkhalaf/familienbaum architecture

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

- Interactive diagram: https://gitdiagram.com/ah-alkhalaf/familienbaum
- Repository: https://github.com/ah-alkhalaf/familienbaum

## Overview

Familienstammbaum is a web app for viewing and administering a family tree. Visitors load an interactive D3 visualization; administrators authenticate to add or edit people, move or delete branches, set the founder, export data, and—when super-admin—manage accounts. The browser’s main module coordinates the API, authentication, UI helpers, and renderer. Express handles requests and reads/writes family and user records through GitHub’s contents API. The excerpts show these principal calls; finer server internals are omitted where the partial excerpt does not establish them.

Main entry points: [`public/main.js`](https://github.com/ah-alkhalaf/familienbaum/blob/main/public/main.js) (App coordinator), [`public/modules/api.js`](https://github.com/ah-alkhalaf/familienbaum/blob/main/public/modules/api.js) (HTTP API client), [`public/modules/auth.js`](https://github.com/ah-alkhalaf/familienbaum/blob/main/public/modules/auth.js) (Auth client), [`server.js`](https://github.com/ah-alkhalaf/familienbaum/blob/main/server.js) (Family routes)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_browser["Browser application"]
  node_main["App coordinator<br/>[main.js]"]
  node_client_api["HTTP API client<br/>[api.js]"]
  node_auth_client["Auth client<br/>[auth.js]"]
  node_ui["Admin UI helpers<br/>[ui.js]"]
end

subgraph group_family["Family tree"]
  node_tree_view["Tree visualization<br/>[tree.js]"]
  node_family_routes["Family routes<br/>[server.js]"]
end

subgraph group_identity["Authentication and users"]
  node_auth_routes["Auth routes<br/>[server.js]"]
  node_user_admin["User management<br/>[server.js]"]
end

subgraph group_persistence["Persistence"]
  node_family_records[("Family records<br/>[family.json]")]
  node_user_records[("User records<br/>[users.json]")]
  node_github_store["GitHub contents API"]
end

node_visitor(("Visitor"))
node_admin(("Administrator"))

node_visitor -->|"opens app"| node_main
node_admin -->|"uses admin panel"| node_main
node_main -->|"checks auth"| node_auth_client
node_main -->|"initializes UI"| node_ui
node_main -->|"requests data"| node_client_api
node_main -->|"renders tree"| node_tree_view
node_main -->|"populates dropdowns"| node_ui
node_auth_client -->|"sends auth requests"| node_auth_routes
node_client_api -->|"sends family requests"| node_family_routes
node_client_api -->|"sends user requests"| node_user_admin
node_family_routes -->|"loads and saves"| node_github_store
node_user_admin -->|"loads and saves"| node_github_store
node_github_store -.->|"stores family data"| node_family_records
node_github_store -.->|"stores user data"| node_user_records

click node_main "https://github.com/ah-alkhalaf/familienbaum/blob/main/public/main.js"
click node_client_api "https://github.com/ah-alkhalaf/familienbaum/blob/main/public/modules/api.js"
click node_auth_client "https://github.com/ah-alkhalaf/familienbaum/blob/main/public/modules/auth.js"
click node_ui "https://github.com/ah-alkhalaf/familienbaum/blob/main/public/modules/ui.js"
click node_tree_view "https://github.com/ah-alkhalaf/familienbaum/blob/main/public/modules/tree.js"
click node_family_routes "https://github.com/ah-alkhalaf/familienbaum/blob/main/server.js"
click node_family_records "https://github.com/ah-alkhalaf/familienbaum/blob/main/family.json"
click node_auth_routes "https://github.com/ah-alkhalaf/familienbaum/blob/main/server.js"
click node_user_admin "https://github.com/ah-alkhalaf/familienbaum/blob/main/server.js"
click node_user_records "https://github.com/ah-alkhalaf/familienbaum/blob/main/users.json"

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_client_api,node_auth_client,node_ui toneBlue
class node_tree_view,node_family_routes toneAmber
class node_auth_routes,node_user_admin toneMint
class node_family_records,node_user_records,node_github_store toneRose
class node_visitor,node_admin toneIndigo
```

## Components

### Browser application

- [App coordinator](https://github.com/ah-alkhalaf/familienbaum/blob/main/public/main.js): `public/main.js`
- [HTTP API client](https://github.com/ah-alkhalaf/familienbaum/blob/main/public/modules/api.js): `public/modules/api.js`
- [Auth client](https://github.com/ah-alkhalaf/familienbaum/blob/main/public/modules/auth.js): `public/modules/auth.js`
- [Admin UI helpers](https://github.com/ah-alkhalaf/familienbaum/blob/main/public/modules/ui.js): `public/modules/ui.js`

### Family tree

- [Tree visualization](https://github.com/ah-alkhalaf/familienbaum/blob/main/public/modules/tree.js): `public/modules/tree.js`
- [Family routes](https://github.com/ah-alkhalaf/familienbaum/blob/main/server.js): `server.js`

### Authentication and users

- [Auth routes](https://github.com/ah-alkhalaf/familienbaum/blob/main/server.js): `server.js`
- [User management](https://github.com/ah-alkhalaf/familienbaum/blob/main/server.js): `server.js`

### Persistence

- [Family records](https://github.com/ah-alkhalaf/familienbaum/blob/main/family.json): `family.json`
- [User records](https://github.com/ah-alkhalaf/familienbaum/blob/main/users.json): `users.json`
- **GitHub contents API**

### Other components

- **Visitor**
- **Administrator**

## Connections

- Visitor → App coordinator: opens app (evidence: `README.md`)
- Administrator → App coordinator: uses admin panel (evidence: `README.md`)
- App coordinator → Auth client: checks auth (evidence: `public/main.js`)
- App coordinator → Admin UI helpers: initializes UI (evidence: `public/main.js`)
- App coordinator → HTTP API client: requests data (evidence: `public/main.js`)
- App coordinator → Tree visualization: renders tree (evidence: `public/main.js`)
- App coordinator → Admin UI helpers: populates dropdowns (evidence: `public/main.js`)
- Auth client → Auth routes: sends auth requests (evidence: `public/modules/auth.js`)
- HTTP API client → Family routes: sends family requests (evidence: `public/modules/api.js`)
- HTTP API client → User management: sends user requests (evidence: `public/modules/api.js`)
- Family routes → GitHub contents API: loads and saves (evidence: `server.js`)
- User management → GitHub contents API: loads and saves (evidence: `server.js`)
- GitHub contents API → Family records: stores family data (evidence: `README.md`)
- GitHub contents API → User records: stores user data