Frontend System

Layered architecture, state layer, API layer, dan standar kualitas UI.

Layered Architecture

Aliran satu arah — tidak ada logika bisnis di komponen UI.

1
Presentation Layer
Route + layout + komponen visual. Hanya menerima props & memanggil hooks.
src/routes, src/components/ui, src/components/system
2
Feature Layer
Modul per fitur (storyboard, image, voice) dengan komponen & hook lokal.
src/features/*
3
Business Logic Layer
Hooks & use-case: orkestrasi pipeline, normalisasi, aturan domain.
src/hooks, src/lib/pipeline.ts, src/lib/agents
4
State Layer
Zustand store (client state) + TanStack Query (server state & cache).
src/stores/*
5
API Layer
Service per domain, query key factory, retry/timeout/error mapping.
src/services/api, src/services/http
6
Utility Layer
Helper murni, schema Zod, formatter, konfigurasi.
src/lib, src/config, src/types

Struktur Folder

Modular, siap dikerjakan banyak developer.

src/
├─ routes/            # App routing (TanStack Start file-based)
├─ components/
│  ├─ ui/             # Primitives (Radix + CVA variants)
│  ├─ system/         # Theme, notifications, error/empty states
│  └─ studio/         # Composite studio widgets
├─ features/          # Modul per fitur: components, hooks, schema
├─ hooks/             # Business logic hooks (reusable)
├─ stores/            # Zustand: theme, project, workflow, editor, settings
├─ services/
│  ├─ http/           # fetch client: retry, timeout, error mapping
│  └─ api/            # Domain services + query keys
├─ lib/               # Pipeline, agents, backend blueprint, utils
├─ types/             # Tipe lintas modul
├─ config/            # Konstanta aplikasi & registry route
├─ providers/         # ThemeProvider, QueryClientProvider
├─ assets/            # Gambar & media statis
└─ styles.css         # Design tokens (OKLCH) + utilities

State Layer

Zustand untuk client state, TanStack Query untuk server state.

Store	Scope	Persist
theme.store	mode, resolved	localStorage
notification.store	feed, unread	memory
workspace.store · project	current, recent	localStorage
workspace.store · workflow	phase, activeStage, log	memory
workspace.store · editor	selection, zoom, snap, panel	memory
workspace.store · settings	export, fps, bahasa, motion	localStorage

API Layer

Satu service per domain: request, validasi Zod, retry backoff, error mapping, loading state.

api.authapi.projectsapi.workflowapi.imageapi.videoapi.voiceapi.musicapi.subtitleapi.seoapi.thumbnailapi.analyticsapi.notifications

const { data, isPending } = useQuery({
  queryKey: queryKeys.projects.list({ page }),
  queryFn: ({ signal }) => api.projects.list({ page }, signal),
});

Reusable Components

Semua primitive mendukung tema terang & gelap serta keyboard navigation.

ButtonIconButtonCardGlassCardModalDialogDrawerTabsAccordionDropdownTooltipPopoverToastProgressBadgeAvatarBreadcrumbTableDataGridPaginationSearchFilterSelectCheckboxRadioSwitchSliderInputTextareaTimelineTreeViewFileUploadVideoPlayerAudioPlayerImageViewerSkeletonSpinnerEmptyStateErrorState

Performa

Target FCP cepat & TTI rendah.

Code splitting
Route-level automatic splitting + dynamic import panel berat.
Lazy media
Gambar 9:16 pakai loading="lazy" + aspect-ratio agar tanpa CLS.
Cache
TanStack Query staleTime 30s, gcTime 5m, retry eksponensial.
Virtualisasi
Daftar scene & aset panjang dirender bertahap.
Animasi
Transform/opacity saja; hormati prefers-reduced-motion.
Prefetch
Link preload on intent untuk navigasi antar studio.

Testing & Kualitas

TypeScript strict, SOLID, clean architecture.

Unitutils, schema Zod, store transitions
Componentprimitives & studio widgets (render + a11y role)
Integrationhook + API layer dengan fetch mock
E2Ealur narasi → storyboard → export
Visualsnapshot tema terang & gelap
A11ykeyboard nav, focus ring, kontras, ARIA

Live Playground

Store & notification layer berjalan nyata di halaman ini.

Notification layer

Editor store

Timeline zoom: 1.00x