Semina — Event Management & Ticketing Platform

Platform manajemen acara (event management) komprehensif yang menghubungkan penyelenggara acara (organizer) dengan peserta (participant). Mengadopsi arsitektur multi-client dalam satu monorepo: Content Management System (CMS) berbasis React SPA bagi penyelenggara untuk mengelola acara dan tiket, serta landing page berbasis Next.js SSR yang cepat dan SEO-friendly untuk penelusuran dan checkout peserta.

---

Ringkasan Proyek

• Kategori: Personal Project / Full-Stack Application
• Peran: Full-Stack Developer
• Tech Stack: MongoDB, Mongoose, Express.js (Node.js), React.js (SPA), Next.js (SSR), Redux, Tailwind CSS / Custom CSS, JWT Authentication

---

Latar Belakang / Ide Awal

Pengelolaan acara yang melibatkan banyak peserta sering kali terhambat oleh proses administrasi yang manual — mulai dari publikasi jadwal, alokasi tipe tiket, hingga verifikasi transaksi pembayaran. Penyelenggara membutuhkan dashboard terpusat yang responsif untuk mengolah data secara intensif, sementara calon peserta membutuhkan antarmuka publik yang cepat, mudah ditemukan di mesin pencari (SEO-optimized), dan mulus saat melakukan pemesanan.

Proyek Semina dibangun sebagai solusi operasional end-to-end sekaligus ruang eksplorasi teknis untuk menerapkan arsitektur multi-client (B2B & B2C) dalam satu ekosistem:

1. Memisahkan antarmuka menjadi dua aplikasi khusus: React SPA untuk dashboard internal/CMS, dan Next.js SSR untuk landing page publik demi visibilitas SEO yang optimal.
2. Membangun RESTful API terpusat dengan otentikasi berbasis peran (Role-Based Access Control) untuk mengamankan isolasi data antar-penyelenggara (tenant isolation).

---

Keputusan & Trade-off Arsitektur

1. Pemisahan Klien (React SPA vs Next.js SSR):
   Alih-alih menyatukan seluruh antarmuka dalam satu kerangka kerja, frontend dipisah menjadi dua aplikasi independen. CMS internal menggunakan React SPA karena fokus pada interaksi data yang cepat tanpa memerlukan indeksasi mesin pencari. Sebaliknya, landing page publik menggunakan Server-Side Rendering (SSR) Next.js agar informasi acara terindeks dengan baik oleh mesin pencari dan memuat cepat saat diakses pengguna baru.
   Trade-off: Memisahkan klien meningkatkan overhead pengaturan konfigurasi awal dan deployment, namun memberikan performa dan arsitektur yang paling sesuai untuk masing-masing tipe pengguna.

2. Manajemen Monorepo Terstruktur:
   Seluruh layanan (backend API, CMS React, dan landing page Next.js) dikelola dalam satu repositori utama (monorepo).
   Trade-off: Membutuhkan isolasi dependensi (node_modules) yang cermat di tiap direktori, namun sangat memudahkan pelacakan riwayat perubahan kode (version control) dan sinkronisasi perubahan kontrak API secara langsung.

3. Normalisasi Entitas Media & Gambar:
   Gambar (seperti banner acara dan penjelas) tidak disimpan sebagai teks statis di dalam dokumen acara, melainkan dipisahkan ke dalam koleksi media khusus yang menyimpan public_id dan url.
   Trade-off: Memungkinkan reusabilitas aset media dan efisiensi ukuran dokumen MongoDB, namun membutuhkan query relasi (Mongoose populate) saat menyajikan data acara secara utuh.

---

Fitur Utama Produk

1. Interactive CMS Dashboard (Organizer & Admin)
   Panel manajemen berbasis React untuk mengelola draf acara, kategori, alokasi tiket, hingga memantau arus transaksi masuk secara terpusat dengan navigasi responsif.

2. SEO-Optimized Public Landing Page (Participant)
   Halaman eksplorasi acara berbasis Next.js SSR yang cepat dan ramah mesin pencari, menampilkan acara unggulan, filter kategori, rincian waktu, lokasi, serta deskripsi lengkap.

3. Integrated Event Checkout & Payment Flow
   Alur pembelian tiket (gratis maupun berbayar) yang terstruktur, di mana peserta dapat mengisi data diri dan memilih metode pembayaran yang terkonfigurasi pada database.

4. Role-Based Access Control (RBAC) & Tenant Isolation
   Pengamanan rute API menggunakan JSON Web Token (JWT). Sistem memverifikasi peran pengguna (Admin, Organizer, Participant) untuk memastikan penyelenggara hanya dapat mengakses dan mengolah data acara miliknya sendiri.

---

Tantangan Teknis & Solusi

• Isu Hidrasi & Asynchrony Router pada Next.js Checkout:
  Masalah: Pada halaman checkout peserta, data awal acara sering gagal dimuat (undefined) saat first render karena objek router.query pada Next.js belum terhidrasi sempurna saat proses client-side mounting.
  Solusi: Mengimplementasikan useEffect yang memantau status kesiapan komponen (router.isReady) dan perubahan parameter router.query, memastikan pemanggilan API checkout hanya berjalan setelah parameter ID acara tervalidasi secara asynchronous.

• Penanganan Inkompatibilitas Query Populate Mongoose:
  Masalah: Fitur preview gambar pada form edit CMS gagal menampilkan gambar karena kueri populate dari backend membatasi field yang dikembalikan hanya pada _id dan name.
  Solusi: Memperbarui kueri controller di backend dengan secara eksplisit menyertakan field URL (select: "_id name url"), sehingga payload JSON yang dikirimkan ke frontend membawa path gambar yang valid untuk di-render.

---

Pembelajaran & Catatan Teknis

• Mengarsitekturkan sistem MERN Stack skala menengah berbasis multi-client yang terhubung secara konsisten ke satu REST API backend sentral.
• Memahami konsep hydration lifecycle serta penanganan data dinamis (server-side vs client-side) pada kerangka kerja Next.js.
• Menjaga konsistensi struktur payload JSON antara formulir frontend dan skema validasi backend (schema validator).