Arsitektur Frontend

Frontend SI Rekrutmen BKI SKARIGA merupakan Single Page Application (SPA) berbasis React 19, TypeScript 6, dan dibundel menggunakan Vite 8 dengan runtime Bun 1.3+.

Teknologi Utama

• Framework / Runtime: React 19, TypeScript 6, Vite 8, Bun
• Styling: Tailwind CSS v4 (src/index.css), Geist font, Shadcn UI / Radix primitives
• State Management: Redux Toolkit (authSlice.ts), Sanctum Bearer token di localStorage
• Routing: React Router v7 (src/route.tsx), ProtectedRoute
• Form & Validasi: React Hook Form + Zod
• Tabel & Data: TanStack React Table (DataTable)
• Rich Text: TipTap Editor suite
• Testing: Vitest

Pola Modul Fitur (Feature Modularization)

Fitur dikelompokkan berdasarkan peran pengguna (src/features/{role}/{feature}/):

src/features/
├── auth/           # Login, Forgot Password, Reset Password, ProtectedRoute
├── student/        # Dashboard, E-Portfolio, Lowongan Kerja, Lamaran Saya, Tracer Study
├── hrd/            # Dashboard, Lowongan, Review Pelamar, Jadwal Tes, Hasil Seleksi, Penempatan
└── admin/          # Dashboard, Siswa, Alumni, DUDI, Jurusan, Departemen, Seleksi, Laporan, Users

Setiap fitur memiliki struktur file teratur:

• {feature}.api.ts: Pemanggilan endpoint backend via Axios client.
• {feature}.schema.ts: Schema validasi Zod dan inferensi tipe TypeScript.
• {feature}.form.ts: Custom hook form (useForm + default values + payload builders).
• {feature}-page.tsx: Komponen halaman utama (container).
• {feature}-table.tsx: Definisi kolom dan aksi tabel.
• {feature}-form.tsx: Komponen presentasional form.

Standar UI Motion

Transisi dan animasi antarmuka mengikuti spesifikasi /ui-motion:

• Animasikan properti hardware-accelerated: transform dan opacity.
• Token kurva easing cubic-bezier kustom:
  • --ease-out: cubic-bezier(0.23, 1, 0.32, 1) untuk dialog, dropdown, popover.
  • --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1) untuk sheet drawer.
  • --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1) untuk pergerakan elemen on-screen.
• Durasi responsif: tombol aktif 100-150ms, dropdown 150-180ms, modal 200-250ms, pergantian halaman 160ms (.page-enter).
• Proteksi aksesibilitas melalui @media (prefers-reduced-motion: reduce).