Aplikasi Computer-Based Test (CBT) modern berbasis web yang dibangun menggunakan Next.js (App Router) dan Tailwind CSS. Sistem ini dirancang untuk memfasilitasi administrasi ujian online yang aman, cepat, dan interaktif dengan fitur Proctoring, Certificate Builder, Group Analytics, serta Impor Peserta massal.
- Form masuk yang modern dan aman dengan verifikasi hak akses role-based (Super Admin / Peserta).
- Sistem notifikasi responsif dengan efek neon interaktif.
- Portal Peserta: Halaman beranda yang menampilkan daftar ujian aktif, riwayat ujian, skor kelulusan, dan tautan unduh sertifikat.
- Admin Panel: Pusat manajemen statistik yang menampilkan jumlah soal, kategori, sesi ujian aktif, tingkat kelulusan, grafik komparasi performa grup, dan log pelanggaran peserta.
- Bank Soal: Mendukung pembuatan soal pilihan ganda (dengan kunci jawaban dan bobot skor) serta soal esai.
- Kategori Soal: Pengelompokan soal berdasarkan materi atau bidang studi.
- Konfigurasi waktu pengerjaan (durasi menit), masa aktif ujian, dan nilai KKM kelulusan.
- Mode Rilis Sertifikat: Pilihan rilis sertifikat otomatis setelah lulus KKM atau rilis manual oleh administrator.
- Administrator dapat memilih salah satu dari 3 desain sertifikat digital kelulusan:
- Formal & Klasik (Classic): Bingkai emas-biru formal ganda yang elegan.
- Minimalis & Bersih (Modern): Garis aksen toska modern yang bersih.
- Kreatif & Dinamis (Creative): Gradasi warna ungu-biru yang kekinian.
- Sertifikat digital dinamis ini dapat diunduh/dicetak langsung oleh peserta yang lulus.
- Modul untuk mengelola data peserta dan pembagian grup/kelas.
- Fitur impor data peserta secara massal menggunakan file spreadsheet Excel (
.xlsx).
- Sistem proteksi pengerjaan ujian yang memantau perpindahan tab browser atau aplikasi peserta.
- Pelanggaran dicatat secara real-time ke server proctoring log.
- Bagan bar chart interaktif di dashboard admin yang menampilkan perbandingan rata-rata skor kelulusan antar kelas/grup peserta.
Halaman masuk bagi peserta dan administrator CBT dengan validasi state-based.
Beranda peserta ujian untuk melihat jadwal ujian aktif yang siap dikerjakan.
Dashboard pusat kendali administrator yang menyajikan data statistik dan visualisasi data performa.
Halaman manajemen untuk membuat, mengedit, dan mengelompokkan bidang materi studi.
Halaman penulisan soal ujian pilihan ganda dan esai beserta bobot nilai masing-masing.
Halaman pengaturan sesi ujian lengkap dengan pilihan rilis sertifikat dan kustomisasi template desain.
Halaman pengelolaan daftar peserta ujian beserta fitur tambah, hapus, dan impor via Excel.
Pratinjau sertifikat digital kelulusan peserta yang dicetak berdasarkan template pilihan administrator.
- Frontend core: React.js 18 & Next.js 14 (App Router)
- Styling: Tailwind CSS (untuk layouting & desain responsif)
- State Management: Zustand
- Icons: Lucide React
- HTTP Client: Axios (terintegrasi dengan JWT authentication & dynamic interceptors)
Pastikan Anda sudah menginstal:
- Node.js (Versi 18 ke atas disarankan)
- Package Manager npm, yarn, pnpm, atau bun.
Jalankan perintah berikut di terminal repositori frontend:
npm installBuat file .env.local pada direktori root dan arahkan backend API url:
NEXT_PUBLIC_API_URL=http://localhost:8000/api/v1Jalankan server lokal:
npm run devBuka browser dan akses http://localhost:3000 untuk melihat hasilnya.
Untuk mengompilasi dan mengoptimalkan aplikasi untuk mode produksi:
npm run build
npm run start