STUDI KASUS / Website layanan
MUA Ranni
Website makeup artist dengan portofolio, jadwal, booking WhatsApp, dan panel admin.
- Peran
- Full-Stack Developer
- Teknologi
- React · Next.js · TypeScript · Tailwind CSS · Supabase · PostgreSQL · Drizzle ORM
- Tahun
- 2026
Ringkasan
MUA Ranni adalah website layanan makeup dengan galeri portofolio, informasi harga, kalender ketersediaan, dan formulir booking WhatsApp. Pemilik layanan dapat memperbarui kontennya melalui panel admin.
Kebutuhan
Calon pelanggan perlu melihat hasil riasan, membaca pilihan layanan, memeriksa jadwal, lalu menyampaikan detail acara. Pemilik layanan juga perlu memperbarui profil, harga, foto, dan jadwal tanpa mengubah kode.
Peran dan kontribusi
Saya mengerjakan halaman publik dan panel admin, termasuk galeri, layanan, kalender ketersediaan, dan formulir booking.
- Membangun galeri, halaman layanan, dan kalender dengan React dan Next.js.
- Menyusun formulir yang meneruskan detail acara ke WhatsApp.
- Mengembangkan panel admin untuk profil, layanan, harga, portofolio, jadwal, dan testimoni.
- Menyiapkan autentikasi dan penyimpanan dengan Supabase, serta akses data PostgreSQL melalui Drizzle ORM.
Implementasi
Halaman menggunakan TypeScript dan Tailwind CSS. Pengunjung dapat memfilter galeri berdasarkan kategori dan membuka foto. Pada formulir booking, jenis layanan, tanggal, lokasi, dan detail acara dirangkai menjadi pesan WhatsApp. Konfirmasi booking tetap dilakukan melalui percakapan.
Supabase memverifikasi identitas admin. Hanya email yang diizinkan yang dapat mengakses panel, dan pemeriksaan izin dilakukan pada halaman serta Server Action sebelum data dibaca atau diubah.
Kalender menampilkan ketersediaan jadwal kepada pengunjung, sementara catatan internal hanya dapat dibaca admin. Data layanan, harga, dan portofolio tersimpan di database.
Tantangan teknis
Detail booking. Pilihan layanan dan informasi acara perlu tetap terbawa saat pengunjung membuka formulir dan melanjutkan ke WhatsApp. Saya menyusun pesan dari data formulir agar detail tersebut ikut terkirim.
Validasi acara. Formulir memeriksa tanggal yang sudah lewat dan format tautan Google Maps sebelum menyusun pesan booking.
Akses publik dan admin. Pengunjung dapat membaca informasi layanan dan jadwal. Perubahan konten dan catatan internal dibatasi untuk admin yang terverifikasi.
Hasil
Website dapat digunakan untuk melihat layanan, memeriksa ketersediaan, dan mengirim detail booking melalui WhatsApp. Harga, foto, dan jadwal dapat diperbarui dari panel admin.
Demo publik tersedia melalui tombol Lihat Demo.