Frontend
Frontend
Frontend Next.js 16 dengan pattern BFF — React 19, Tailwind v4, shadcn/ui, dan Google OAuth
Frontend
Frontend Yomu dibangun dengan Next.js 16.1.6 dan React 19.2.3, menggunakan TypeScript, Tailwind CSS v4, dan pustaka komponen shadcn/ui.
Architecture
Frontend mengikuti pattern Backend-for-Frontend (BFF). Semua panggilan API melewati route handler Next.js, yang bertindak sebagai proxy ke layanan backend. Browser tidak pernah melakukan panggilan API langsung ke backend Java atau Rust.
Teknologi
- Framework: Next.js 16.1.6
- React: 19.2.3
- TypeScript: Pengembangan type-safe
- Styling: Tailwind CSS v4 dengan CSS variables
- Komponen UI: shadcn/ui (55 komponen, gaya new-york)
- Ikon: lucide-react
- Formulir: React Hook Form + Zod v4
- Autentikasi: @react-oauth/google untuk Google OAuth
- Notifikasi: sonner
- Mode Output: Standalone (untuk build produksi yang dioptimalkan)
Struktur Rute
| Rute | Deskripsi | Status |
|---|---|---|
/auth/* | Halaman login dan registrasi | Sudah diimplementasikan |
/app | Area pengguna terproteksi | Rute terproteksi |
/admin | Dashboard admin | Rute terproteksi |
/bacaankuis/ | Pengalaman membaca + kuis | Sudah diimplementasikan |
/forums/ | Halaman diskusi | Sudah diimplementasikan |
/dashboard/clans | Manajemen klan | Stub kosong |
/dashboard/missions | Pelacakan misi | Stub kosong |
/dashboard/achievements | Pameran pencapaian | Stub kosong |
/dashboard/leaderboard | Tampilan leaderboard | Stub kosong |
/api/v1/* | Rute proxy BFF | Route handler |
Dependensi Utama
- shadcn/ui: 55+ komponen siap pakai menggunakan gaya desain new-york
- lucide-react: Pustaka ikon
- @react-oauth/google: Integrasi Google OAuth
- sonner: Notifikasi toast
- @hookform/resolvers: Validasi Zod untuk formulir
- zod: Validasi skema
Struktur Dokumentasi
bff-auth.mdx— Architecture BFF dan alur autentikasicomponents.mdx— Pustaka komponen UI dan komponen kustom