# kbdevs12/portofolio-cms architecture

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

- Interactive diagram: https://gitdiagram.com/kbdevs12/portofolio-cms
- Repository: https://github.com/kbdevs12/portofolio-cms

## Overview

This repository implements a portfolio CMS backend: administrators sign in, manage projects and project aspects, and external clients can retrieve profile, experience, and project data through read-only API endpoints. The main flow is browser request → Elysia routing → authenticated admin handling or public API → Supabase; admin handlers render server-side pages or write project data. The README describes a generic Elysia template, so the product capabilities here are inferred from the sampled application source. Unsampled setup and storage details are represented only where their paths and use are explicit.

Main entry points: [`src/controllers/admin.tsx`](https://github.com/kbdevs12/portofolio-cms/blob/main/src/controllers/admin.tsx) (Admin Routes), [`src/index.ts`](https://github.com/kbdevs12/portofolio-cms/blob/main/src/index.ts) (Elysia Server), [`src/views/layout/DashboardLayout.tsx`](https://github.com/kbdevs12/portofolio-cms/blob/main/src/views/layout/DashboardLayout.tsx) (Dashboard Layout), [`src/views/Dashboard.tsx`](https://github.com/kbdevs12/portofolio-cms/blob/main/src/views/Dashboard.tsx) (Dashboard Page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["HTTP Runtime"]
  node_server["Elysia Server<br/>[index.ts]"]
  node_setup["Shared Setup<br/>[setup.ts]"]
  node_static["Static Assets"]
  node_api_routes["Read API<br/>[api.ts]"]
end

subgraph group_admin["Admin Workflows"]
  node_admin_routes["Admin Routes<br/>[admin.tsx]"]
  node_auth["Password Verification<br/>[auth.ts]"]
end

subgraph group_data["Data Access"]
  node_supabase_client["Supabase Client<br/>[supabase.ts]"]
  node_supabase_store[("Supabase Store")]
end

subgraph group_presentation["Server UI"]
  node_login["Login Page<br/>[Login.tsx]"]
  node_dashboard["Dashboard Page<br/>[Dashboard.tsx]"]
  node_project_list["Project List<br/>[ProjectList.tsx]"]
  node_project_form["Project Form<br/>[ProjectForm.tsx]"]
  node_project_aspects["Project Aspects<br/>[ProjectAspect.tsx]"]
  node_dashboard_layout["Dashboard Layout"]
  node_sidebar["Admin Sidebar<br/>[Sidebar.tsx]"]
  node_header["Admin Header<br/>[Header.tsx]"]
  node_layout["Page Layout<br/>[Layout.tsx]"]
  node_dashboard_widgets["Dashboard Widgets<br/>[StatCard.tsx]"]
  node_date_format["Date Formatting<br/>[dayFormat.ts]"]
end

node_admin_user(("Administrator"))
node_api_client(("API Client"))

node_admin_user -->|"sends requests"| node_server
node_api_client -->|"requests data"| node_server
node_server -->|"installs"| node_setup
node_server -->|"serves assets"| node_static
node_server -->|"dispatches"| node_api_routes
node_server -->|"dispatches"| node_admin_routes
node_admin_routes -->|"installs"| node_setup
node_api_routes -->|"queries"| node_supabase_client
node_admin_routes -->|"queries and writes"| node_supabase_client
node_supabase_client -->|"accesses"| node_supabase_store
node_admin_routes -->|"verifies password"| node_auth
node_admin_routes -->|"renders"| node_login
node_admin_routes -->|"renders"| node_dashboard
node_admin_routes -->|"renders"| node_project_list
node_admin_routes -->|"renders"| node_project_form
node_admin_routes -->|"renders"| node_project_aspects
node_admin_routes -->|"wraps pages"| node_dashboard_layout
node_dashboard_layout -->|"wraps content"| node_layout
node_dashboard_layout -->|"renders"| node_sidebar
node_dashboard_layout -->|"renders"| node_header
node_dashboard -->|"renders"| node_dashboard_widgets
node_dashboard -->|"formats date"| node_date_format
node_login -->|"wraps content"| node_layout

click node_server "https://github.com/kbdevs12/portofolio-cms/blob/main/src/index.ts"
click node_setup "https://github.com/kbdevs12/portofolio-cms/blob/main/src/setup.ts"
click node_static "https://github.com/kbdevs12/portofolio-cms/tree/main/public"
click node_admin_routes "https://github.com/kbdevs12/portofolio-cms/blob/main/src/controllers/admin.tsx"
click node_api_routes "https://github.com/kbdevs12/portofolio-cms/blob/main/src/controllers/api.ts"
click node_auth "https://github.com/kbdevs12/portofolio-cms/blob/main/src/lib/auth.ts"
click node_supabase_client "https://github.com/kbdevs12/portofolio-cms/blob/main/src/db/supabase.ts"
click node_login "https://github.com/kbdevs12/portofolio-cms/blob/main/src/views/Login.tsx"
click node_dashboard "https://github.com/kbdevs12/portofolio-cms/blob/main/src/views/Dashboard.tsx"
click node_project_list "https://github.com/kbdevs12/portofolio-cms/blob/main/src/views/project/ProjectList.tsx"
click node_project_form "https://github.com/kbdevs12/portofolio-cms/blob/main/src/views/project/ProjectForm.tsx"
click node_project_aspects "https://github.com/kbdevs12/portofolio-cms/blob/main/src/views/project/ProjectAspect.tsx"
click node_dashboard_layout "https://github.com/kbdevs12/portofolio-cms/blob/main/src/views/layout/DashboardLayout.tsx"
click node_sidebar "https://github.com/kbdevs12/portofolio-cms/blob/main/src/components/Sidebar.tsx"
click node_header "https://github.com/kbdevs12/portofolio-cms/blob/main/src/components/Header.tsx"
click node_layout "https://github.com/kbdevs12/portofolio-cms/blob/main/src/views/Layout.tsx"
click node_dashboard_widgets "https://github.com/kbdevs12/portofolio-cms/blob/main/src/components/StatCard.tsx"
click node_date_format "https://github.com/kbdevs12/portofolio-cms/blob/main/src/util/dayFormat.ts"

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_server,node_setup,node_static,node_api_routes,node_api_client toneBlue
class node_admin_routes,node_auth toneAmber
class node_supabase_client,node_supabase_store toneMint
class node_login,node_dashboard,node_project_list,node_project_form,node_project_aspects,node_dashboard_layout,node_sidebar,node_header,node_layout,node_dashboard_widgets,node_date_format toneRose
class node_admin_user toneIndigo
```

## Components

### HTTP Runtime

- [Elysia Server](https://github.com/kbdevs12/portofolio-cms/blob/main/src/index.ts): `src/index.ts`
- [Shared Setup](https://github.com/kbdevs12/portofolio-cms/blob/main/src/setup.ts): `src/setup.ts`
- [Static Assets](https://github.com/kbdevs12/portofolio-cms/tree/main/public): `public`
- [Read API](https://github.com/kbdevs12/portofolio-cms/blob/main/src/controllers/api.ts): `src/controllers/api.ts`

### Admin Workflows

- [Admin Routes](https://github.com/kbdevs12/portofolio-cms/blob/main/src/controllers/admin.tsx): `src/controllers/admin.tsx`
- [Password Verification](https://github.com/kbdevs12/portofolio-cms/blob/main/src/lib/auth.ts): `src/lib/auth.ts`

### Data Access

- [Supabase Client](https://github.com/kbdevs12/portofolio-cms/blob/main/src/db/supabase.ts): `src/db/supabase.ts`
- **Supabase Store**

### Server UI

- [Login Page](https://github.com/kbdevs12/portofolio-cms/blob/main/src/views/Login.tsx): `src/views/Login.tsx`
- [Dashboard Page](https://github.com/kbdevs12/portofolio-cms/blob/main/src/views/Dashboard.tsx): `src/views/Dashboard.tsx`
- [Project List](https://github.com/kbdevs12/portofolio-cms/blob/main/src/views/project/ProjectList.tsx): `src/views/project/ProjectList.tsx`
- [Project Form](https://github.com/kbdevs12/portofolio-cms/blob/main/src/views/project/ProjectForm.tsx): `src/views/project/ProjectForm.tsx`
- [Project Aspects](https://github.com/kbdevs12/portofolio-cms/blob/main/src/views/project/ProjectAspect.tsx): `src/views/project/ProjectAspect.tsx`
- [Dashboard Layout](https://github.com/kbdevs12/portofolio-cms/blob/main/src/views/layout/DashboardLayout.tsx): `src/views/layout/DashboardLayout.tsx`
- [Admin Sidebar](https://github.com/kbdevs12/portofolio-cms/blob/main/src/components/Sidebar.tsx): `src/components/Sidebar.tsx`
- [Admin Header](https://github.com/kbdevs12/portofolio-cms/blob/main/src/components/Header.tsx): `src/components/Header.tsx`
- [Page Layout](https://github.com/kbdevs12/portofolio-cms/blob/main/src/views/Layout.tsx): `src/views/Layout.tsx`
- [Dashboard Widgets](https://github.com/kbdevs12/portofolio-cms/blob/main/src/components/StatCard.tsx): `src/components/StatCard.tsx`
- [Date Formatting](https://github.com/kbdevs12/portofolio-cms/blob/main/src/util/dayFormat.ts): `src/util/dayFormat.ts`

### Other components

- **Administrator**
- **API Client**

## Connections

- Administrator → Elysia Server: sends requests
- API Client → Elysia Server: requests data
- Elysia Server → Shared Setup: installs
- Elysia Server → Static Assets: serves assets
- Elysia Server → Read API: dispatches
- Elysia Server → Admin Routes: dispatches
- Admin Routes → Shared Setup: installs
- Read API → Supabase Client: queries
- Admin Routes → Supabase Client: queries and writes
- Supabase Client → Supabase Store: accesses
- Admin Routes → Password Verification: verifies password
- Admin Routes → Login Page: renders
- Admin Routes → Dashboard Page: renders
- Admin Routes → Project List: renders
- Admin Routes → Project Form: renders
- Admin Routes → Project Aspects: renders
- Admin Routes → Dashboard Layout: wraps pages
- Dashboard Layout → Page Layout: wraps content
- Dashboard Layout → Admin Sidebar: renders
- Dashboard Layout → Admin Header: renders
- Dashboard Page → Dashboard Widgets: renders
- Dashboard Page → Date Formatting: formats date
- Login Page → Page Layout: wraps content