Wedding Invitation Web — Platform Undangan Pernikahan Digital Berbasis Multi-Tenant

Overview

Wedding Invitation Web adalah platform SaaS untuk membuat undangan pernikahan digital yang elegan dan personal. Setiap undangan memiliki URL publik unik berbasis slug, opening screen animatif bergaya Islami, dan nama tamu yang dipersonalisasi otomatis dari link. Dilengkapi fitur RSVP interaktif, QR code per tamu, kirim undangan via WhatsApp, background music, wedding gift cashless, countdown timer, dan integrasi Google Maps. Tersedia dashboard untuk mengelola undangan, tamu, dan analytics kehadiran, dengan sistem role admin dan user biasa.

Key Features

• Multi-template undangan — 3 tema siap pakai: Emerald (hijau Islami), Midnight Gold (gelap elegan), Sage Garden (earthy natural), masing-masing dengan palet warna dan ornamen yang konsisten
• Opening screen animatif — halaman intro bergaya surat fisik dengan ornamen SVG arabesque, kaligrafi Bismillah, nama tamu yang dipersonalisasi, dan animasi buka undangan
• URL publik per undangan — setiap undangan diakses via slug unik (/[slug]?to=nama_tamu)
• RSVP interaktif — tamu mengisi konfirmasi hadir/tidak/mungkin + jumlah orang + ucapan, dengan deteksi pengiriman duplikat
• QR Code per tamu — generate QR code berisi URL undangan yang sudah ter-encode nama tamu, bisa didownload atau langsung dikirim via WhatsApp
• Kirim via WhatsApp — template pesan WA yang sudah diformat otomatis dengan nama tamu, nama mempelai, dan link undangan
• Wedding gift / cashless — input rekening bank dan e-wallet (BCA, Mandiri, BNI, BRI, BSI, GoPay, OVO, DANA, dll.) dengan fitur salin nomor rekening
• Background music — pemutar musik floating dengan auto-play dan animasi equalizer
• Countdown timer — hitungan mundur menuju hari H
• Integrasi Google Maps — link lokasi akad dan resepsi
• Manajemen tamu — CRUD tamu, bulk import via Excel, pagination
• Save the date — bagian khusus pengingat tanggal
• Adab Walimah — konten edukasi Islam tentang tata krama menghadiri walimah
• Dashboard analytics — ringkasan total undangan, total tamu, status RSVP (hadir/tidak/mungkin), total views
• Role-based access — user biasa vs admin, admin dapat melihat semua undangan dan kelola seluruh user
• Publish/Draft — undangan bisa disimpan sebagai draft atau dipublikasikan
• File upload — upload foto mempelai dan cover photo

Challenges

• Personalisasi tamu di URL publik — Setiap tamu harus mendapatkan tampilan undangan yang sudah berisi namanya tanpa login, hanya dari query string URL, sekaligus tetap aman dari manipulasi.
• Konsistensi tema lintas komponen — Tiga template berbeda (warna, mode gelap/terang, aksen) harus diterapkan secara konsisten ke semua section (opening, konten, RSVP, gift) tanpa duplikasi kode berlebihan.
• Auto-play audio di mobile — Browser modern (terutama Safari dan Chrome mobile) memblokir auto-play audio sebelum ada interaksi pengguna, padahal musik didesain untuk langsung berjalan saat undangan dibuka.
• QR code + pengiriman WhatsApp — Template pesan WA harus diformat dengan baik (markdown WA, nama tamu, link), dan QR code harus bisa didownload sebagai gambar PNG langsung dari browser.
• RSVP duplikat — Mencegah tamu yang sama mengirim RSVP lebih dari sekali tanpa sistem autentikasi, hanya berdasarkan guest_id yang dikirim via URL.
• Multi-role dashboard — Satu halaman dashboard yang menampilkan data dan aksi berbeda tergantung apakah user adalah admin atau user biasa, tanpa membuat dua halaman terpisah.

Solutions

• URL query string ?to= — Nama tamu diencode di URL sebagai query param, dibaca di sisi client oleh hook usePublicInvitation, lalu dipass ke komponen OpeningScreen untuk personalisasi. Guest ID dikirim juga via param untuk RSVP.
• Theme object pattern — Setiap template didefinisikan sebagai objek konstanta dengan properti warna lengkap (bg, accent, accentMuted, dll.), lalu diselect berdasarkan prop template. Semua komponen menerima prop theme dan accentColor untuk konsistensi.
• Interaksi pertama sebagai trigger — Music player menunggu event canplay lalu memanggil audio.play() setelah user melakukan interaksi pertama (klik tombol Buka Undangan), sehingga auto-play secara teknis terjadi setelah user
• qrcode library + Canvas API — QR code dirender ke <canvas> via QRCode.toCanvas(), lalu dikonversi ke data URL untuk tombol download. Template pesan WA dibuat dengan string template literal yang diencode via encodeURIComponent.
• Cek RSVP existing di server + UI guard — API mengembalikan data RSVP existing jika guest_id sudah pernah submit. Frontend mendeteksi existingRsvp prop dan langsung menampilkan status konfirmasi tanpa menampilkan form.
• Role check via Zustand store — useIsAdmin() selector membaca role dari auth store, lalu komponen DashboardPage merender <AdminOverview> atau <UserOverview> secara kondisional dalam satu file.

Lessons Learned

• App Router Next.js mengubah cara berpikir tentang data fetching — Pemisahan antara Server Component dan Client Component perlu dipertimbangkan sejak awal. Menaruh semua logika di client (use client) memang lebih mudah di awal, tapi melewatkan optimasi SSR
• TanStack Query + Axios adalah kombinasi solid untuk REST API — Caching, refetching, dan loading state menjadi sangat mudah dikelola tanpa boilerplate Redux
• Tailwind CSS v4 masih ada breaking change — Konfigurasi PostCSS berbeda dari v3, dan beberapa utility berubah. Penting membaca changelog sebelum upgrade.
• Mobile browser quirks tetap relevan — Auto-play audio, clipboard API, dan perilaku scroll di iOS Safari masih membutuhkan workaround khusus yang tidak dibutuhkan di desktop.
• Slug sebagai identifier publik lebih user-friendly — Menggunakan slug alih-alih ID database di URL publik membuat link undangan lebih bersih dan mudah dibagikan (/sarah-dan-ali vs /inv/abc123).
• Fitur Islami menambah nilai diferensiasi — Konten seperti Bismillah di opening, Adab Walimah, dan integrasi doa nikah bukan sekadar dekorasi — ini menjadi pembeda nyata yang relevan untuk target pasar undangan pernikahan Muslim di Indonesia.