How thephilippineartisan/tpa-website works
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: App.jsx Route application · supabaseClient.js Supabase client · CreateArticlePage.jsx Article editor · imageUtils.js Image utilities
Components 31
Reader experience
- Route application
frontend/src/App.jsx - Home facades
frontend/src/Pages/SecondFacade.jsx - Latest posts
frontend/src/Pages/LatestPosts.jsx - Article view
frontend/src/Pages/ArticlePage.jsx - Media segments
frontend/src/Pages/MediaSegmentArticle.jsx - Segment lists
frontend/src/Components/ListOfMediaSegments.jsx - Fast news
frontend/src/Components/VerticalFastNews.jsx - Releases
frontend/src/Pages/ReleasesPage.jsx - Staff directory
frontend/src/Pages/StaffDirectoryPage.jsx - About page
frontend/src/Pages/AboutPage.jsx - Video page
frontend/src/Pages/VideosPage.jsx
Editorial administration
- Admin routes
frontend/src/App.jsx - Article editor
frontend/src/AdminPortal/CreateArticlePage.jsx - Article management
frontend/src/AdminPortal/ManageArticles.jsx - Audit logs
frontend/src/AdminPortal/ManageAuditLogs.jsx - Front-page management
frontend/src/AdminPortal/ManageFrontPage.jsx - Release management
frontend/src/AdminPortal/ManageReleases.jsx - Staff management
frontend/src/AdminPortal/ManageStaff.jsx - Pubmat management
frontend/src/AdminPortal/ManagePubmats.jsx - Video management
frontend/src/AdminPortal/ManageVideos.jsx
Data and media services
- Supabase client
frontend/src/supabaseClient.js - Supabase
- Image utilities
frontend/src/utils/imageUtils.js - Media presign API
frontend/functions/api/media/presign.js - Media upload API
frontend/functions/api/media/upload.js - Object storage
Shared domain logic
- Article utilities
frontend/src/utils/articleUtils.js - Date utilities
frontend/src/utils/dateUtils.js - Slug utilities
frontend/src/utils/slugifyUtils.js
Other components
- Reader
- Administrator
Connections 40
- Reader → Route application: opens
frontend/src/App.jsx - Route application → Home facades: routes to
frontend/src/App.jsx - Route application → Latest posts: routes to
frontend/src/App.jsx - Route application → Article view: routes to
frontend/src/App.jsx - Route application → Media segments: routes to
frontend/src/App.jsx - Route application → Releases: routes to
frontend/src/App.jsx - Route application → Staff directory: routes to
frontend/src/App.jsx - Route application → Video page: routes to
frontend/src/App.jsx - Route application → About page: routes to
frontend/src/App.jsx - Administrator → Admin routes: opens
frontend/src/App.jsx - Admin routes → Article editor: routes to
frontend/src/App.jsx - Admin routes → Article management: routes to
frontend/src/App.jsx - Admin routes → Audit logs: routes to
frontend/src/App.jsx - Admin routes → Front-page management: routes to
frontend/src/App.jsx - Admin routes → Release management: routes to
frontend/src/App.jsx - Admin routes → Staff management: routes to
frontend/src/App.jsx - Admin routes → Pubmat management: routes to
frontend/src/App.jsx - Admin routes → Video management: routes to
frontend/src/App.jsx - Media segments → Segment lists: renders
frontend/src/Pages/MediaSegmentArticle.jsx - Media segments → Fast news: renders
frontend/src/Pages/MediaSegmentArticle.jsx - Home facades → Segment lists: renders
frontend/src/Pages/SecondFacade.jsx - Home facades → Fast news: renders
frontend/src/Pages/SecondFacade.jsx - Latest posts → Article utilities: uses
frontend/src/Pages/LatestPosts.jsx - Home facades → Article utilities: uses
frontend/src/Pages/SecondFacade.jsx - Article editor → Supabase client: writes content
frontend/src/AdminPortal/CreateArticlePage.jsx - Article management → Supabase client: manages content
frontend/src/AdminPortal/ManageArticles.jsx - Audit logs → Supabase client: reads records
frontend/src/AdminPortal/ManageAuditLogs.jsx - Front-page management → Supabase client: manages page
frontend/src/AdminPortal/ManageFrontPage.jsx - Release management → Supabase client: writes releases
frontend/src/AdminPortal/ManageReleases.jsx - Release management → Image utilities: uploads covers
frontend/src/AdminPortal/ManageReleases.jsx - Supabase client → Supabase: connects
frontend/src/supabaseClient.js - Image utilities → Supabase client: gets session
frontend/src/utils/imageUtils.js - Image utilities → Media presign API: requests URL
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
frontend/src/AdminPortal/CreateArticlePage.jsx - Article editor → Slug utilities: creates slugs
frontend/src/AdminPortal/CreateArticlePage.jsx - Article editor → Article utilities: checks segment type
frontend/src/AdminPortal/CreateArticlePage.jsx - Article editor → Date utilities: formats dates
frontend/src/AdminPortal/CreateArticlePage.jsx