# thephilippineartisan/tpa-website architecture

> Architecture diagram of the GitHub repository thephilippineartisan/tpa-website, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-10-01). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/thephilippineartisan/tpa-website
- Repository: https://github.com/thephilippineartisan/tpa-website

## Overview

This is a React-based news and media publishing site with a staff-facing admin portal. Public readers browse the home facades, latest posts, articles, media segments, releases, videos, and staff profiles; administrators manage editorial content and related media. Supabase is the shared data and authentication client, while image utilities compress files and use a presigning API for uploads. The tree and excerpts establish several routes and calls, but not all page-level data flows; those uncertain links are omitted.

Main entry points: [`frontend/src/App.jsx`](https://github.com/thephilippineartisan/tpa-website/blob/main/frontend/src/App.jsx) (Route application), [`frontend/src/supabaseClient.js`](https://github.com/thephilippineartisan/tpa-website/blob/main/frontend/src/supabaseClient.js) (Supabase client), [`frontend/src/AdminPortal/CreateArticlePage.jsx`](https://github.com/thephilippineartisan/tpa-website/blob/main/frontend/src/AdminPortal/CreateArticlePage.jsx) (Article editor), [`frontend/src/utils/imageUtils.js`](https://github.com/thephilippineartisan/tpa-website/blob/main/frontend/src/utils/imageUtils.js) (Image utilities)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_public["Reader experience"]
  node_app["Route application<br/>[App.jsx]"]
  node_home["Home facades<br/>[SecondFacade.jsx]"]
  node_latest["Latest posts<br/>[LatestPosts.jsx]"]
  node_article["Article view<br/>[ArticlePage.jsx]"]
  node_media["Media segments"]
  node_media_list["Segment lists"]
  node_fast_news["Fast news"]
  node_releases["Releases<br/>[ReleasesPage.jsx]"]
  node_staff["Staff directory"]
  node_about["About page<br/>[AboutPage.jsx]"]
  node_videos["Video page<br/>[VideosPage.jsx]"]
end

subgraph group_admin["Editorial administration"]
  node_admin_routes["Admin routes<br/>[App.jsx]"]
  node_article_editor["Article editor"]
  node_article_manage["Article management<br/>[ManageArticles.jsx]"]
  node_audit["Audit logs"]
  node_front_manage["Front-page management"]
  node_release_manage["Release management<br/>[ManageReleases.jsx]"]
  node_staff_manage["Staff management<br/>[ManageStaff.jsx]"]
  node_pubmat_manage["Pubmat management<br/>[ManagePubmats.jsx]"]
  node_video_manage["Video management<br/>[ManageVideos.jsx]"]
end

subgraph group_services["Data and media services"]
  node_supabase["Supabase client<br/>[supabaseClient.js]"]
  node_supabase_service[("Supabase")]
  node_image_utils["Image utilities<br/>[imageUtils.js]"]
  node_presign["Media presign API<br/>[presign.js]"]
  node_upload["Media upload API<br/>[upload.js]"]
  node_r2[("Object storage")]
end

subgraph group_shared["Shared domain logic"]
  node_article_utils["Article utilities<br/>[articleUtils.js]"]
  node_date_utils["Date utilities<br/>[dateUtils.js]"]
  node_slug_utils["Slug utilities<br/>[slugifyUtils.js]"]
end

node_reader(("Reader"))
node_admin_actor(("Administrator"))

node_reader -->|"opens"| node_app
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_latest
node_app -->|"routes to"| node_article
node_app -->|"routes to"| node_media
node_app -->|"routes to"| node_releases
node_app -->|"routes to"| node_staff
node_app -->|"routes to"| node_videos
node_app -->|"routes to"| node_about
node_admin_actor -->|"opens"| node_admin_routes
node_admin_routes -.->|"routes to"| node_article_editor
node_admin_routes -->|"routes to"| node_article_manage
node_admin_routes -->|"routes to"| node_audit
node_admin_routes -->|"routes to"| node_front_manage
node_admin_routes -->|"routes to"| node_release_manage
node_admin_routes -->|"routes to"| node_staff_manage
node_admin_routes -->|"routes to"| node_pubmat_manage
node_admin_routes -->|"routes to"| node_video_manage
node_media -->|"renders"| node_media_list
node_media -->|"renders"| node_fast_news
node_home -->|"renders"| node_media_list
node_home -->|"renders"| node_fast_news
node_latest -->|"uses"| node_article_utils
node_home -->|"uses"| node_article_utils
node_article_editor -->|"writes content"| node_supabase
node_article_manage -.->|"manages content"| node_supabase
node_audit -.->|"reads records"| node_supabase
node_front_manage -.->|"manages page"| node_supabase
node_release_manage -->|"writes releases"| node_supabase
node_release_manage -->|"uploads covers"| node_image_utils
node_supabase -->|"connects"| node_supabase_service
node_image_utils -->|"gets session"| node_supabase
node_image_utils -->|"requests URL"| node_presign
node_image_utils -.->|"proxies upload"| node_upload
node_presign -.->|"authorizes upload"| node_r2
node_upload -.->|"stores media"| node_r2
node_article_editor -->|"uploads media"| node_image_utils
node_article_editor -->|"creates slugs"| node_slug_utils
node_article_editor -->|"checks segment type"| node_article_utils
node_article_editor -->|"formats dates"| node_date_utils

click node_app "https://github.com/thephilippineartisan/tpa-website/blob/main/frontend/src/App.jsx"
click node_home "https://github.com/thephilippineartisan/tpa-website/blob/main/frontend/src/Pages/SecondFacade.jsx"
click node_latest "https://github.com/thephilippineartisan/tpa-website/blob/main/frontend/src/Pages/LatestPosts.jsx"
click node_article "https://github.com/thephilippineartisan/tpa-website/blob/main/frontend/src/Pages/ArticlePage.jsx"
click node_media "https://github.com/thephilippineartisan/tpa-website/blob/main/frontend/src/Pages/MediaSegmentArticle.jsx"
click node_media_list "https://github.com/thephilippineartisan/tpa-website/blob/main/frontend/src/Components/ListOfMediaSegments.jsx"
click node_fast_news "https://github.com/thephilippineartisan/tpa-website/blob/main/frontend/src/Components/VerticalFastNews.jsx"
click node_releases "https://github.com/thephilippineartisan/tpa-website/blob/main/frontend/src/Pages/ReleasesPage.jsx"
click node_staff "https://github.com/thephilippineartisan/tpa-website/blob/main/frontend/src/Pages/StaffDirectoryPage.jsx"
click node_about "https://github.com/thephilippineartisan/tpa-website/blob/main/frontend/src/Pages/AboutPage.jsx"
click node_videos "https://github.com/thephilippineartisan/tpa-website/blob/main/frontend/src/Pages/VideosPage.jsx"
click node_admin_routes "https://github.com/thephilippineartisan/tpa-website/blob/main/frontend/src/App.jsx"
click node_article_editor "https://github.com/thephilippineartisan/tpa-website/blob/main/frontend/src/AdminPortal/CreateArticlePage.jsx"
click node_article_manage "https://github.com/thephilippineartisan/tpa-website/blob/main/frontend/src/AdminPortal/ManageArticles.jsx"
click node_audit "https://github.com/thephilippineartisan/tpa-website/blob/main/frontend/src/AdminPortal/ManageAuditLogs.jsx"
click node_front_manage "https://github.com/thephilippineartisan/tpa-website/blob/main/frontend/src/AdminPortal/ManageFrontPage.jsx"
click node_release_manage "https://github.com/thephilippineartisan/tpa-website/blob/main/frontend/src/AdminPortal/ManageReleases.jsx"
click node_staff_manage "https://github.com/thephilippineartisan/tpa-website/blob/main/frontend/src/AdminPortal/ManageStaff.jsx"
click node_pubmat_manage "https://github.com/thephilippineartisan/tpa-website/blob/main/frontend/src/AdminPortal/ManagePubmats.jsx"
click node_video_manage "https://github.com/thephilippineartisan/tpa-website/blob/main/frontend/src/AdminPortal/ManageVideos.jsx"
click node_supabase "https://github.com/thephilippineartisan/tpa-website/blob/main/frontend/src/supabaseClient.js"
click node_image_utils "https://github.com/thephilippineartisan/tpa-website/blob/main/frontend/src/utils/imageUtils.js"
click node_presign "https://github.com/thephilippineartisan/tpa-website/blob/main/frontend/functions/api/media/presign.js"
click node_upload "https://github.com/thephilippineartisan/tpa-website/blob/main/frontend/functions/api/media/upload.js"
click node_article_utils "https://github.com/thephilippineartisan/tpa-website/blob/main/frontend/src/utils/articleUtils.js"
click node_date_utils "https://github.com/thephilippineartisan/tpa-website/blob/main/frontend/src/utils/dateUtils.js"
click node_slug_utils "https://github.com/thephilippineartisan/tpa-website/blob/main/frontend/src/utils/slugifyUtils.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_home,node_latest,node_article,node_media,node_media_list,node_fast_news,node_releases,node_staff,node_about,node_videos toneBlue
class node_admin_routes,node_article_editor,node_article_manage,node_audit,node_front_manage,node_release_manage,node_staff_manage,node_pubmat_manage,node_video_manage toneAmber
class node_supabase,node_supabase_service,node_image_utils,node_presign,node_upload,node_r2 toneMint
class node_article_utils,node_date_utils,node_slug_utils toneRose
class node_reader,node_admin_actor toneIndigo
```

## Components

### Reader experience

- [Route application](https://github.com/thephilippineartisan/tpa-website/blob/main/frontend/src/App.jsx): `frontend/src/App.jsx`
- [Home facades](https://github.com/thephilippineartisan/tpa-website/blob/main/frontend/src/Pages/SecondFacade.jsx): `frontend/src/Pages/SecondFacade.jsx`
- [Latest posts](https://github.com/thephilippineartisan/tpa-website/blob/main/frontend/src/Pages/LatestPosts.jsx): `frontend/src/Pages/LatestPosts.jsx`
- [Article view](https://github.com/thephilippineartisan/tpa-website/blob/main/frontend/src/Pages/ArticlePage.jsx): `frontend/src/Pages/ArticlePage.jsx`
- [Media segments](https://github.com/thephilippineartisan/tpa-website/blob/main/frontend/src/Pages/MediaSegmentArticle.jsx): `frontend/src/Pages/MediaSegmentArticle.jsx`
- [Segment lists](https://github.com/thephilippineartisan/tpa-website/blob/main/frontend/src/Components/ListOfMediaSegments.jsx): `frontend/src/Components/ListOfMediaSegments.jsx`
- [Fast news](https://github.com/thephilippineartisan/tpa-website/blob/main/frontend/src/Components/VerticalFastNews.jsx): `frontend/src/Components/VerticalFastNews.jsx`
- [Releases](https://github.com/thephilippineartisan/tpa-website/blob/main/frontend/src/Pages/ReleasesPage.jsx): `frontend/src/Pages/ReleasesPage.jsx`
- [Staff directory](https://github.com/thephilippineartisan/tpa-website/blob/main/frontend/src/Pages/StaffDirectoryPage.jsx): `frontend/src/Pages/StaffDirectoryPage.jsx`
- [About page](https://github.com/thephilippineartisan/tpa-website/blob/main/frontend/src/Pages/AboutPage.jsx): `frontend/src/Pages/AboutPage.jsx`
- [Video page](https://github.com/thephilippineartisan/tpa-website/blob/main/frontend/src/Pages/VideosPage.jsx): `frontend/src/Pages/VideosPage.jsx`

### Editorial administration

- [Admin routes](https://github.com/thephilippineartisan/tpa-website/blob/main/frontend/src/App.jsx): `frontend/src/App.jsx`
- [Article editor](https://github.com/thephilippineartisan/tpa-website/blob/main/frontend/src/AdminPortal/CreateArticlePage.jsx): `frontend/src/AdminPortal/CreateArticlePage.jsx`
- [Article management](https://github.com/thephilippineartisan/tpa-website/blob/main/frontend/src/AdminPortal/ManageArticles.jsx): `frontend/src/AdminPortal/ManageArticles.jsx`
- [Audit logs](https://github.com/thephilippineartisan/tpa-website/blob/main/frontend/src/AdminPortal/ManageAuditLogs.jsx): `frontend/src/AdminPortal/ManageAuditLogs.jsx`
- [Front-page management](https://github.com/thephilippineartisan/tpa-website/blob/main/frontend/src/AdminPortal/ManageFrontPage.jsx): `frontend/src/AdminPortal/ManageFrontPage.jsx`
- [Release management](https://github.com/thephilippineartisan/tpa-website/blob/main/frontend/src/AdminPortal/ManageReleases.jsx): `frontend/src/AdminPortal/ManageReleases.jsx`
- [Staff management](https://github.com/thephilippineartisan/tpa-website/blob/main/frontend/src/AdminPortal/ManageStaff.jsx): `frontend/src/AdminPortal/ManageStaff.jsx`
- [Pubmat management](https://github.com/thephilippineartisan/tpa-website/blob/main/frontend/src/AdminPortal/ManagePubmats.jsx): `frontend/src/AdminPortal/ManagePubmats.jsx`
- [Video management](https://github.com/thephilippineartisan/tpa-website/blob/main/frontend/src/AdminPortal/ManageVideos.jsx): `frontend/src/AdminPortal/ManageVideos.jsx`

### Data and media services

- [Supabase client](https://github.com/thephilippineartisan/tpa-website/blob/main/frontend/src/supabaseClient.js): `frontend/src/supabaseClient.js`
- **Supabase**
- [Image utilities](https://github.com/thephilippineartisan/tpa-website/blob/main/frontend/src/utils/imageUtils.js): `frontend/src/utils/imageUtils.js`
- [Media presign API](https://github.com/thephilippineartisan/tpa-website/blob/main/frontend/functions/api/media/presign.js): `frontend/functions/api/media/presign.js`
- [Media upload API](https://github.com/thephilippineartisan/tpa-website/blob/main/frontend/functions/api/media/upload.js): `frontend/functions/api/media/upload.js`
- **Object storage**

### Shared domain logic

- [Article utilities](https://github.com/thephilippineartisan/tpa-website/blob/main/frontend/src/utils/articleUtils.js): `frontend/src/utils/articleUtils.js`
- [Date utilities](https://github.com/thephilippineartisan/tpa-website/blob/main/frontend/src/utils/dateUtils.js): `frontend/src/utils/dateUtils.js`
- [Slug utilities](https://github.com/thephilippineartisan/tpa-website/blob/main/frontend/src/utils/slugifyUtils.js): `frontend/src/utils/slugifyUtils.js`

### Other components

- **Reader**
- **Administrator**

## Connections

- Reader → Route application: opens (evidence: `frontend/src/App.jsx`)
- Route application → Home facades: routes to (evidence: `frontend/src/App.jsx`)
- Route application → Latest posts: routes to (evidence: `frontend/src/App.jsx`)
- Route application → Article view: routes to (evidence: `frontend/src/App.jsx`)
- Route application → Media segments: routes to (evidence: `frontend/src/App.jsx`)
- Route application → Releases: routes to (evidence: `frontend/src/App.jsx`)
- Route application → Staff directory: routes to (evidence: `frontend/src/App.jsx`)
- Route application → Video page: routes to (evidence: `frontend/src/App.jsx`)
- Route application → About page: routes to (evidence: `frontend/src/App.jsx`)
- Administrator → Admin routes: opens (evidence: `frontend/src/App.jsx`)
- Admin routes → Article editor: routes to (evidence: `frontend/src/App.jsx`)
- Admin routes → Article management: routes to (evidence: `frontend/src/App.jsx`)
- Admin routes → Audit logs: routes to (evidence: `frontend/src/App.jsx`)
- Admin routes → Front-page management: routes to (evidence: `frontend/src/App.jsx`)
- Admin routes → Release management: routes to (evidence: `frontend/src/App.jsx`)
- Admin routes → Staff management: routes to (evidence: `frontend/src/App.jsx`)
- Admin routes → Pubmat management: routes to (evidence: `frontend/src/App.jsx`)
- Admin routes → Video management: routes to (evidence: `frontend/src/App.jsx`)
- Media segments → Segment lists: renders (evidence: `frontend/src/Pages/MediaSegmentArticle.jsx`)
- Media segments → Fast news: renders (evidence: `frontend/src/Pages/MediaSegmentArticle.jsx`)
- Home facades → Segment lists: renders (evidence: `frontend/src/Pages/SecondFacade.jsx`)
- Home facades → Fast news: renders (evidence: `frontend/src/Pages/SecondFacade.jsx`)
- Latest posts → Article utilities: uses (evidence: `frontend/src/Pages/LatestPosts.jsx`)
- Home facades → Article utilities: uses (evidence: `frontend/src/Pages/SecondFacade.jsx`)
- Article editor → Supabase client: writes content (evidence: `frontend/src/AdminPortal/CreateArticlePage.jsx`)
- Article management → Supabase client: manages content (evidence: `frontend/src/AdminPortal/ManageArticles.jsx`)
- Audit logs → Supabase client: reads records (evidence: `frontend/src/AdminPortal/ManageAuditLogs.jsx`)
- Front-page management → Supabase client: manages page (evidence: `frontend/src/AdminPortal/ManageFrontPage.jsx`)
- Release management → Supabase client: writes releases (evidence: `frontend/src/AdminPortal/ManageReleases.jsx`)
- Release management → Image utilities: uploads covers (evidence: `frontend/src/AdminPortal/ManageReleases.jsx`)
- Supabase client → Supabase: connects (evidence: `frontend/src/supabaseClient.js`)
- Image utilities → Supabase client: gets session (evidence: `frontend/src/utils/imageUtils.js`)
- Image utilities → Media presign API: requests URL (evidence: `frontend/src/utils/imageUtils.js`)
- Image utilities → Media upload API: proxies upload
- Media presign API → Object storage: authorizes upload
- Media upload API → Object storage: stores media
- Article editor → Image utilities: uploads media (evidence: `frontend/src/AdminPortal/CreateArticlePage.jsx`)
- Article editor → Slug utilities: creates slugs (evidence: `frontend/src/AdminPortal/CreateArticlePage.jsx`)
- Article editor → Article utilities: checks segment type (evidence: `frontend/src/AdminPortal/CreateArticlePage.jsx`)
- Article editor → Date utilities: formats dates (evidence: `frontend/src/AdminPortal/CreateArticlePage.jsx`)