Proyek ini adalah repositori bagian Frontend yang dilengkapi dengan halaman undangan (landing page) interaktif untuk tamu, animasi smooth scrolling, dan dashboard admin fungsional untuk mengelola informasi acara, musik latar (backsound), foto galeri, serta data RSVP secara real-time.
- Undangan Digital (Landing Page): Tampilan undangan yang elegan dan responsif.
- Pilihan Tema: Tersedia beberapa tema yang bisa disesuaikan (Elegant, Minimalist, dll) dari dashboard admin.
- RSVP Digital: Tamu dapat mengonfirmasi kehadiran serta mengirimkan ucapan secara langsung.
- Admin Dashboard: Panel khusus untuk mengatur konfigurasi pernikahan (nama mempelai, tanggal acara, alamat akad/resepsi, hadiah/rekening) dan melihat daftar RSVP.
- Kustomisasi Media: Upload foto pengantin, mengatur musik latar (backsound) kustom langsung dari dashboard.
Aplikasi web client-side (SPA) untuk tampilan undangan dan dashboard dibangun menggunakan:
- React.js dengan Vite sebagai bundler (kecepatan build tinggi).
- React Router untuk navigasi halaman (routing).
- Lucide React untuk ikon.
- Vanilla CSS untuk styling fleksibel dan animasi yang smooth (dikombinasikan dengan Lenis).
- CORS Proxy (Vercel Rewrites) untuk mengatasi masalah lintas domain.
Pastikan Anda sudah menginstal Node.js dan telah menjalankan backend API dari repositori Uleman Digital Backend di komputer Anda.
-
Hubungkan ke Backend Lokal: Buka file
vite.config.jsdan pastikan konfigurasitargetproxy mengarah ke port backend Anda (misal:http://localhost:5000). File.envcukup berisi:VITE_API_URL=/api -
Instalasi modul dan jalankan:
npm install npm run dev
-
Akses aplikasi melalui browser di
http://localhost:5173.
Arsitektur aplikasi ini menggunakan Vercel untuk Frontend dan Railway (atau platform Node.js sejenis) untuk Backend.
- Buat project baru di Railway.
- Hubungkan ke repositori Uleman Digital Backend Anda.
- Tambahkan Volume berjenis Persistent Storage yang di-mount ke path
/app/uploadsdan berikan database path environment variable agar data SQLite dan foto tidak hilang saat Railway restart. - Dapatkan domain publik backend Anda (Misal:
https://uleman-backend-production.up.railway.app).
Sebelum deploy Frontend, Anda harus menautkan frontend ini ke domain Backend production Anda. Buka codebase frontend dan edit dua file ini:
1. Edit file vercel.json
Ubah bagian destination URL dengan alamat backend Railway Anda:
{
"source": "/api/(.*)",
"destination": "https://ALAMAT_RAILWAY_ANDA/api/$1"
},
{
"source": "/uploads/(.*)",
"destination": "https://ALAMAT_RAILWAY_ANDA/uploads/$1"
}2. (Opsional) Edit vite.config.js
Jika Anda ingin mengetes frontend ini terkoneksi ke backend live sembari development lokal, ubah isian target dari localhost menjadi alamat https://ALAMAT_RAILWAY_ANDA.
- Buat project baru di Vercel.
- Impor / sambungkan ke repositori GitHub Uleman Digital (Frontend) ini.
- Masuk ke opsi Environment Variables, dan tambahkan:
- Key:
VITE_API_URL - Value:
/api(Catatan: Isian bernilai/apiini memicu Vercel Rewrites, sebuah arsitektur server proxy sehingga aplikasi terhindar dari error CORS secara otomatis).
- Key:
- Klik Deploy dan tunggu proses instalasi selesai.
- Selesai! Undangan digital Anda kini live.
Jika Anda menguji deployment atau menjalankan pertama kali dan database dalam keadaan kosong, kredensial bawaan (default) adalah:
- Username: admin
- Password: admin
Setelah berhasil login ke dashboard admin via /dashboard, segera ubah kredensial Anda demi keamanan, lalu Anda dapat langsung mengedit semua informasi acara atau mengganti foto.
Proyek ini bersifat Open-Source. Silakan fork repositori ini untuk kustomisasi lebih lanjut proyek pernikahan Anda.