Arsitektur Frontend

Ringkasan

Frontend publik menggunakan Inertia.js v3 + Svelte 5, admin panel pakai Filament v5 (server-rendered). Semua kode Svelte mengikuti atomic design dengan layering stores→services→api.

Stack

Teknologi	Versi	Tujuan
Svelte	5	Component framework (runes)
Inertia.js	3	Server-driven SPA
Tailwind CSS	4	Styling
Lucide	Latest	Ikon
Vitest	Latest	Unit test
Playwright	Latest	E2E

---

Struktur Folder

resources/js/
├── components/landing/
│   ├── atoms/       # Button, Input, Badge, Modal, dll.
│   ├── molecules/   # Card, Navigation, Pagination, dll.
│   └── organisms/   # Form, HeroHeader, MockupPreview, dll.
├── layouts/         # Svelte layouts
├── lib/             # i18n, styles, utils, state.ts
├── modules/         # Modul fitur (stores, services, api)
└── pages/           # Inertia page components

---

Store Pattern

Component (subscribe + call action)
    ↓
Store (StateContainer — manage state)
    ↓
Service (pure functions — business logic)
    ↓
API (HTTP fetch)

Struktur Modul

module/
├── Index.svelte        # Entry point
├── api/                # Fetch functions
├── parts/              # Sub-components
├── services/           # Business logic
├── stores/             # State management
├── types/              # TypeScript interfaces
└── __tests__/          # Tests

---

File Penting

File	Tujuan
resources/js/app.ts	Entry point + Inertia setup
resources/js/lib/i18n.svelte.ts	i18n + fungsi t()
resources/js/lib/state.ts	StateContainer<TData>
vite.config.ts	Konfigurasi Vite + Inertia