Arsitektur Web Portal & SvelteKit 5

Dokumentasi arsitektur frontend dan backend portal terpadu berbasis SvelteKit 5, Tailwind CSS v4, dan Shadcn UI.

1. Arsitektur Single Unified Server

Sistem mengeliminasi fragmentasi server dengan menggabungkan penyajian antarmuka frontend (SSR & SPA) serta endpoint REST API ke dalam satu proses tunggal Node.js:

TEXT

Browser Client (Port 8088)
    │
    ▼
[ Express.js Core Engine ] (server.js)
    ├── /api/docs/*        ────> JSON Document Database (CRUD & Search)
    ├── /api/ai/*          ────> Local AI Engine & Fuse.js RAG
    ├── /api/apps          ────> 7 Enterprise App Manifests
    └── /* (Semua Rute Lain) ────> SvelteKit SSR Handler (frontend/build)

2. Reaktivitas Svelte 5 Runes

Antarmuka dibangun dengan sistem reaktivitas modern Svelte 5 yang jauh lebih cepat, hemat memori, dan deklaratif:

$state(initial): Mendeklarasikan state reaktif lokal yang dapat dimutasi secara langsung.
$derived(expression): Nilai terkomputasi otomatis yang hanya dihitung ulang bila dependensi berubah.
$effect(() => { ... }): Efek samping yang tersinkronisasi dengan siklus hidup DOM browser.
$props(): Menerima properti komponen dari parent dengan static type check TypeScript.

3. Komponen Antarmuka & Desain

Shadcn-Svelte: Menggunakan komponen UI berbasis primitif aksesibel (bits-ui), termasuk Card, Button, Input, Badge, Dialog, dan Tabs.
Tailwind CSS v4: Mesin styling ultra-cepat tanpa konfigurasi JavaScript kompleks, mendukung dark/light mode otomatis.
Lucide Icons: Ikon SVG ringkas dan konsisten di seluruh antarmuka portal.