Nextgen Event Management System | Platform Manajemen Event
Nextgen Event adalah sistem manajemen event berbasis web yang dibangun secara full-stack — mulai dari SPA (Single Page Application) untuk portal peserta dan admin, hingga REST API backend dengan penyimpanan berbasis MongoDB. Project ini dirancang untuk menangani kompetisi multi-kategori dengan skema area/regional, manajemen roster tim yang dinamis, sistem reward & voucher, dan berbagai fitur event-operasional lainnya.
Project ini merupakan platform production yang aktif digunakan untuk event kompetisi nyata di berbagai kota di Indonesia.
Fitur Utama
Portal Peserta (Attendee Portal)
Login & autentikasi peserta dengan sistem token JWT
Tampilan daftar event berdasarkan area/region yang dipilih
Pendaftaran dan pengelolaan data tim secara mandiri
Upload dokumen: roster pemain, surat rekomendasi sekolah, logo tim, foto jersey, dan bukti transfer
Manajemen anggota tim dengan filter status (aktif, cadangan, dll.)
QR Code personal untuk absensi kehadiran
Sistem Absensi QR Code
QR Code generator unik per peserta
QR Code scanner berbasis kamera langsung di browser (tanpa install app)
Tracking kehadiran otomatis saat scan berhasil
Admin Panel (Authenticated)
Master data: event, area, kategori, member, scanner
Manajemen transaksi: event & kehadiran
RBAC (Role-Based Access Control) — pengaturan hak akses per role
Laporan & ekspor data (Excel, PDF)
Settings dan konfigurasi sistem
Fitur Khusus Regional
Logika kondisional berdasarkan area: peserta dari Jawa Tengah atau Kalimantan wajib upload bukti transfer, sementara area lain upload surat rekomendasi sekolah
Kategori khusus "Dance" dengan form data tim yang berbeda
Tantangan Teknis & Solusi
1. Pengelolaan State yang Kompleks Dengan banyaknya flow berbeda (portal peserta, admin, doorprize display, redeem), dibutuhkan manajemen state yang terstruktur. Solusinya menggunakan Vuex dengan modul terpisah dan vuex-persist agar state tetap konsisten meski halaman di-refresh.
2. Upload Multi-File dengan Preview Instan Form roster tim membutuhkan upload berbagai jenis file (gambar & PDF) sekaligus dengan preview langsung. Diimplementasikan dengan URL.createObjectURL() untuk preview instan sebelum upload, validasi format & ukuran file di sisi client, dan pengiriman via multipart/form-data ke API.
3. Backend Modular Backend dibangun di atas fondasi headless CMS, dengan addon-addon custom per domain bisnis (Customer, Point, Reward, Voucher, Trigger, Portal). Setiap addon punya route API-nya sendiri, membuat kode tetap modular dan mudah di-maintain.
Apa yang Saya Pelajari
Membangun SPA skala besar dengan Vue 2 Options API yang terstruktur dan mudah di-maintain oleh tim
Mendesain sistem upload file yang aman, efisien, dan user-friendly dengan preview real-time
Integrasi headless CMS (Cockpit) dengan custom addon PHP untuk kebutuhan bisnis yang sangat spesifik
Implementasi RBAC yang fleksibel untuk berbagai peran pengguna dalam satu event
Menangani logika kondisional yang kompleks berdasarkan data kontekstual (area, kategori event) tanpa membuat kode menjadi spaghetti
Penutup
Nextgen Event Management System membuktikan bahwa platform event yang kompleks bisa dibangun secara lean — tanpa framework berat di backend — namun tetap powerful, scalable, dan andal untuk event nyata. Dari QR scanner di pintu masuk, roster tim online semuanya terhubung dalam satu ekosistem yang solid.