# pwachara/life-outreach-church architecture

> Architecture diagram of the GitHub repository pwachara/life-outreach-church, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-19). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/pwachara/life-outreach-church
- Repository: https://github.com/pwachara/life-outreach-church

## Overview

1. This repo is a split SvelteKit + PocketBase application. The SvelteKit side provides the user-facing site and the custom admin dashboard, while PocketBase provides the backend API, authentication, database, file storage, and built-in admin/runtime.

2. The public-facing SvelteKit routes are centered around church content: a homepage, a videos listing page, and event detail pages under `src/routes/events/[id]`. These pages are likely read-only consumers of PocketBase collections.

3. The admin area is separated by route structure: `src/routes/(admin)/login` for sign-in, and `src/routes/dashboard` for the authenticated management UI. The dashboard contains CRUD flows for banners, events, and videos, plus a change-password screen.

4. Data access is centralized through `src/lib/pocketbase.js`, which is the main client boundary between the SvelteKit app and the backend. Route `+page.js` files likely load records from PocketBase and pass them into Svelte components for rendering and editing.

5. PocketBase is the system of record. The presence of `pocketbase.exe`, `pb_data/data.db`, and `pb_data/logs.db` indicates an embedded PocketBase runtime with SQLite storage. Uploaded media is persisted under `pb_data/storage`, so file assets are part of the backend state, not just the frontend build.

6. The data model is evolved through PocketBase migrations in `pb_migrations`. The migration names show three primary content collections: banners, events, and videos. That means the app’s architecture is content-management oriented rather than generic CRUD.

7. `pb_public` contains generated PocketBase web assets, including the built admin UI and immutable bundles. This is runtime/static output, not application source, and it supports the PocketBase server’s built-in browser interface.

8. The frontend is a standard SvelteKit app using Vite, Tailwind, and PostCSS. `src/app.html`, `src/app.css`, `src/routes`, and `src/lib` are the main source boundaries; `src/fonts` and `static/robots.txt` indicate additional asset and SEO handling.

9. Authentication and authorization are handled at the application boundary, not by a separate service. The login route and dashboard layout suggest the app gates admin pages in SvelteKit, while PocketBase likely supplies the auth session and user identity used by the admin UI.

10. Deployment is containerized and production-oriented. `Dockerfile`, `fly.toml`, and `.github/workflows/fly-deploy.yml` show the app is designed to run on Fly.io, probably as a single deployable unit that serves both the SvelteKit frontend and the PocketBase backend with persistent data volume attached.

11. From an architecture-diagram perspective, the key request flow is: browser → SvelteKit route/component → PocketBase client → PocketBase API/database/storage. For admin content updates, the same path writes back to PocketBase, which persists records in SQLite and files in the storage directory.

12. The important boundaries are: public site vs authenticated dashboard, frontend code vs PocketBase backend, and source code vs generated/runtime artifacts (`pb_public`, `pb_data`). Those boundaries are the main ones to show if you are drawing the system diagram.

Main entry points: [`src/lib/pocketbase.js`](https://github.com/pwachara/life-outreach-church/blob/main/src/lib/pocketbase.js) (PocketBase client), [`pocketbase.exe`](https://github.com/pwachara/life-outreach-church/blob/main/pocketbase.exe) (PocketBase API), [`Dockerfile`](https://github.com/pwachara/life-outreach-church/tree/main/Dockerfile) (Container image), [`src/routes/+page.svelte`](https://github.com/pwachara/life-outreach-church/blob/main/src/routes/+page.svelte) (Public site)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["SvelteKit app"]
  node_public_site["Public site<br/>svelte routes<br/>[+page.svelte]"]
  node_videos_page["Videos page<br/>svelte route<br/>[+page.svelte]"]
  node_event_page["Event detail<br/>svelte route<br/>[+page.svelte]"]
  node_admin_login["Admin login<br/>svelte route<br/>[+page.svelte]"]
  node_dashboard_shell["Dashboard shell<br/>admin layout<br/>[+layout.svelte]"]
  node_content_crud["Content CRUD<br/>admin routes<br/>[+page.svelte]"]
  node_change_password["Password change<br/>admin route<br/>[+page.svelte]"]
  node_pb_client["PocketBase client<br/>data boundary<br/>[pocketbase.js]"]
  node_loaders["Route loaders<br/>data loading<br/>[+page.js]"]
end

subgraph group_backend["PocketBase runtime"]
  node_pocketbase_api[("PocketBase API<br/>backend api<br/>[pocketbase.exe]")]
  node_sqlite_db[("SQLite data<br/>storage<br/>[data.db]")]
  node_file_storage[("Media storage<br/>blob store")]
  node_admin_runtime["Admin runtime<br/>generated ui<br/>[index.html]"]
  node_migrations["Migrations<br/>schema evolution"]
  node_pb_types["Generated types<br/>type defs<br/>[types.d.ts]"]
end

subgraph group_delivery["Deployment"]
  node_docker["Container image<br/>deploy"]
  node_fly["Fly config<br/>deploy<br/>[fly.toml]"]
  node_workflow["Deploy workflow<br/>ci<br/>[fly-deploy.yml]"]
end

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

node_browser -->|"read"| node_public_site
node_browser -->|"browse"| node_videos_page
node_browser -->|"view"| node_event_page
node_browser -->|"sign in"| node_admin_login
node_browser -->|"manage"| node_dashboard_shell
node_public_site -->|"fetch data"| node_pb_client
node_videos_page -->|"fetch data"| node_pb_client
node_event_page -->|"fetch data"| node_pb_client
node_admin_login -->|"auth"| node_pb_client
node_dashboard_shell -->|"session"| node_pb_client
node_content_crud -->|"write data"| node_pb_client
node_change_password -->|"update auth"| node_pb_client
node_loaders -->|"load records"| node_pb_client
node_pb_client -->|"requests"| node_pocketbase_api
node_pocketbase_api -->|"persist"| node_sqlite_db
node_pocketbase_api -->|"store files"| node_file_storage
node_migrations -.->|"evolve schema"| node_sqlite_db
node_admin_runtime -->|"serve admin"| node_pocketbase_api
node_docker -.->|"bundle"| node_public_site
node_docker -.->|"run"| node_pocketbase_api
node_fly -.->|"deploy"| node_docker
node_workflow -.->|"publish"| node_fly
node_pb_types -.->|"types"| node_pb_client

click node_public_site "https://github.com/pwachara/life-outreach-church/blob/main/src/routes/+page.svelte"
click node_videos_page "https://github.com/pwachara/life-outreach-church/blob/main/src/routes/videos/+page.svelte"
click node_event_page "https://github.com/pwachara/life-outreach-church/blob/main/src/routes/events/[id]/+page.svelte"
click node_admin_login "https://github.com/pwachara/life-outreach-church/blob/main/src/routes/(admin)/login/+page.svelte"
click node_dashboard_shell "https://github.com/pwachara/life-outreach-church/blob/main/src/routes/dashboard/+layout.svelte"
click node_content_crud "https://github.com/pwachara/life-outreach-church/blob/main/src/routes/dashboard/banners/+page.svelte"
click node_change_password "https://github.com/pwachara/life-outreach-church/blob/main/src/routes/dashboard/change-password/+page.svelte"
click node_pb_client "https://github.com/pwachara/life-outreach-church/blob/main/src/lib/pocketbase.js"
click node_loaders "https://github.com/pwachara/life-outreach-church/blob/main/src/routes/+page.js"
click node_pocketbase_api "https://github.com/pwachara/life-outreach-church/blob/main/pocketbase.exe"
click node_sqlite_db "https://github.com/pwachara/life-outreach-church/blob/main/pb_data/data.db"
click node_file_storage "https://github.com/pwachara/life-outreach-church/tree/main/pb_data/storage"
click node_admin_runtime "https://github.com/pwachara/life-outreach-church/blob/main/pb_public/index.html"
click node_migrations "https://github.com/pwachara/life-outreach-church/blob/main/pb_migrations/1721533215_created_videos.js"
click node_pb_types "https://github.com/pwachara/life-outreach-church/blob/main/pb_data/types.d.ts"
click node_docker "https://github.com/pwachara/life-outreach-church/tree/main/Dockerfile"
click node_fly "https://github.com/pwachara/life-outreach-church/blob/main/fly.toml"
click node_workflow "https://github.com/pwachara/life-outreach-church/blob/main/.github/workflows/fly-deploy.yml"

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_public_site,node_videos_page,node_event_page,node_admin_login,node_dashboard_shell,node_content_crud,node_change_password,node_pb_client,node_loaders toneBlue
class node_pocketbase_api,node_sqlite_db,node_file_storage,node_admin_runtime,node_migrations,node_pb_types toneAmber
class node_docker,node_fly,node_workflow toneMint
class node_browser toneNeutral
```

## Components

### SvelteKit app

User-facing site and authenticated admin UI

- [Public site](https://github.com/pwachara/life-outreach-church/blob/main/src/routes/+page.svelte): svelte routes · Homepage and content browsing routes · `src/routes/+page.svelte`
- [Videos page](https://github.com/pwachara/life-outreach-church/blob/main/src/routes/videos/+page.svelte): svelte route · Public videos listing · `src/routes/videos/+page.svelte`
- [Event detail](https://github.com/pwachara/life-outreach-church/blob/main/src/routes/events/[id]/+page.svelte): svelte route · Public event detail view · `src/routes/events/[id]/+page.svelte`
- [Admin login](https://github.com/pwachara/life-outreach-church/blob/main/src/routes/(admin)/login/+page.svelte): svelte route · Authenticated sign-in entry · `src/routes/(admin)/login/+page.svelte`
- [Dashboard shell](https://github.com/pwachara/life-outreach-church/blob/main/src/routes/dashboard/+layout.svelte): admin layout · Authenticated management layout and access boundary · `src/routes/dashboard/+layout.svelte`
- [Content CRUD](https://github.com/pwachara/life-outreach-church/blob/main/src/routes/dashboard/banners/+page.svelte): admin routes · Banner, event, and video management screens · `src/routes/dashboard/banners/+page.svelte`
- [Password change](https://github.com/pwachara/life-outreach-church/blob/main/src/routes/dashboard/change-password/+page.svelte): admin route · Account password update screen · `src/routes/dashboard/change-password/+page.svelte`
- [PocketBase client](https://github.com/pwachara/life-outreach-church/blob/main/src/lib/pocketbase.js): data boundary · Shared frontend client for API access · `src/lib/pocketbase.js`
- [Route loaders](https://github.com/pwachara/life-outreach-church/blob/main/src/routes/+page.js): data loading · +page.js data fetch and mutation preparation · `src/routes/+page.js`

### PocketBase runtime

Embedded backend, data, storage, and generated admin assets

- [PocketBase API](https://github.com/pwachara/life-outreach-church/blob/main/pocketbase.exe): backend api · Auth, records, and file operations · `pocketbase.exe`
- [SQLite data](https://github.com/pwachara/life-outreach-church/blob/main/pb_data/data.db): storage · PocketBase record persistence · `pb_data/data.db`
- [Media storage](https://github.com/pwachara/life-outreach-church/tree/main/pb_data/storage): blob store · Uploaded files and images · `pb_data/storage`
- [Admin runtime](https://github.com/pwachara/life-outreach-church/blob/main/pb_public/index.html): generated ui · Built PocketBase browser admin assets · `pb_public/index.html`
- [Migrations](https://github.com/pwachara/life-outreach-church/blob/main/pb_migrations/1721533215_created_videos.js): schema evolution · Collection and schema changes for banners, events, and videos · `pb_migrations/1721533215_created_videos.js`
- [Generated types](https://github.com/pwachara/life-outreach-church/blob/main/pb_data/types.d.ts): type defs · PocketBase-generated TypeScript declarations · `pb_data/types.d.ts`

### Deployment

Container and Fly.io release setup

- [Container image](https://github.com/pwachara/life-outreach-church/tree/main/Dockerfile): deploy · Production container build · `Dockerfile`
- [Fly config](https://github.com/pwachara/life-outreach-church/blob/main/fly.toml): deploy · Fly.io deployment configuration · `fly.toml`
- [Deploy workflow](https://github.com/pwachara/life-outreach-church/blob/main/.github/workflows/fly-deploy.yml): ci · Automated Fly deployment pipeline · `.github/workflows/fly-deploy.yml`

### Other components

- **Browser**: client · End users and admins accessing the app

## Connections

- Browser → Public site: read · Visitors load the public homepage
- Browser → Videos page: browse · Visitors open the videos listing
- Browser → Event detail: view · Visitors open event details
- Browser → Admin login: sign in · Admins authenticate through the login route
- Browser → Dashboard shell: manage · Authenticated users enter the dashboard
- Public site → PocketBase client: fetch data · Public routes load content from PocketBase
- Videos page → PocketBase client: fetch data · Videos listing reads content records
- Event detail → PocketBase client: fetch data · Event detail reads a single record
- Admin login → PocketBase client: auth · Login exchanges credentials with PocketBase
- Dashboard shell → PocketBase client: session · Dashboard uses shared backend client and session state
- Content CRUD → PocketBase client: write data · CRUD screens create and update content records
- Password change → PocketBase client: update auth · Password change submits authenticated account updates
- Route loaders → PocketBase client: load records · Route loaders prepare data from PocketBase
- PocketBase client → PocketBase API: requests · Frontend talks to the embedded backend API
- PocketBase API → SQLite data: persist · Records are stored in SQLite
- PocketBase API → Media storage: store files · Uploads are written to backend storage
- Migrations → SQLite data: evolve schema · Migrations define and update collections
- Admin runtime → PocketBase API: serve admin · PocketBase serves its built-in admin interface
- Container image → Public site: bundle · Container packages the SvelteKit app
- Container image → PocketBase API: run · Container includes the PocketBase executable
- Fly config → Container image: deploy · Fly runs the containerized app
- Deploy workflow → Fly config: publish · CI automates Fly deployment
- Generated types → PocketBase client: types · Generated types support the shared client boundary