Website Resort dengan Booking WhatsApp: Drini Park Resort
Website resort dan panel admin reservasi untuk Drini Park Resort, resort private pool di Pantai Drini, Gunungkidul, Yogyakarta. Saya merancang dan membangunnya sendiri: halaman kamar, paket pengalaman, galeri foto, form booking yang langsung terhubung ke WhatsApp, dan kalender ketersediaan kamar yang bisa dilihat tamu secara langsung. Di belakangnya ada panel admin untuk tim sales mengatur jatah kamar, harga paket, dan isi halaman tanpa menyentuh kode. Situs ini menjadi pintu masuk utama reservasi resort setiap hari.
Challenge
Seperti banyak hotel dan resort di Yogyakarta, reservasi Drini Park Resort berjalan lewat WhatsApp. Masalahnya, tamu tidak tahu tanggal mana yang masih tersedia, sehingga banyak percakapan berakhir dengan jawaban "kamar sudah penuh". Harga, isi paket, dan teks halaman juga tertanam di kode, jadi setiap perubahan kecil harus menunggu developer. Tim sales berjumlah empat orang dan sering login bersamaan. Mereka butuh sistem untuk mengatur ketersediaan lima tipe kamar sampai akhir 2027 tanpa saling menimpa, dan perubahan itu harus langsung terlihat di kalender booking website.
Approach
Website resort ini saya bangun dengan React dan TypeScript, lalu di-deploy ke Vercel agar cepat diakses dari HP. Data kamar, paket, dan teks homepage saya pindahkan ke database Supabase, dengan panel admin terpisah sebagai CMS yang bisa dipakai tim tanpa keahlian teknis. Kalender booking di website membaca jatah kamar langsung dari database. Tanggal yang penuh ditandai merah dan tidak bisa dipilih sebagai tanggal check-in. Kalau tamu tetap mengkliknya, muncul pesan sopan berisi tipe kamar lain yang masih tersedia. Setelah form diisi, website menyusun pesan WhatsApp otomatis berisi tanggal menginap, tipe kamar, dan jumlah tamu, jadi admin tidak perlu bertanya ulang. Di panel admin reservasi, sales bisa memilih banyak tanggal sekaligus dengan cara diseret, dan perubahan dari satu akun langsung muncul di akun lain tanpa refresh. Setiap perubahan tercatat di riwayat aktivitas. Panel ini juga bisa dipasang sebagai aplikasi di PC, Android, dan iPhone. Untuk SEO, setiap halaman punya judul dan deskripsi sendiri yang di-prerender, plus data terstruktur schema.org untuk hotel, rating Google, dan FAQ. Foto disimpan di Cloudflare R2 dan dikompres otomatis lewat Cloudinary. GA4 dan Microsoft Clarity mengukur perjalanan tamu dari pertama mengisi form booking sampai klik WhatsApp.
Outcome
Kalender booking menampilkan ketersediaan lima tipe kamar sampai Desember 2027, dan perubahan dari tim sales tampil di website tanpa deploy ulang. Data terstruktur schema.org lolos validator dengan 0 error dan 0 peringatan. Skor Lighthouse mobile naik dari 71 ke 75 untuk performa dan dari 90 ke 94 untuk aksesibilitas. Alur dari pengunjung website ke klik WhatsApp tercatat 10,4% dalam periode 28 hari di GA4. Galeri berisi lebih dari 100 foto properti asli yang dimuat dari CDN sendiri. Perubahan teks, harga, dan isi paket kini dikerjakan tim lewat panel admin, bukan lewat kode.
Skills
- Website Hotel & Resort
- Booking Engine WhatsApp
- Panel Admin / CMS
- React
- TypeScript
- Vite
- Tailwind CSS
- Supabase
- PostgreSQL
- Supabase Realtime
- Vercel
- Cloudflare R2
- Cloudinary
- SEO Teknis
- Schema.org
- Google Analytics 4
- Microsoft Clarity
- PWA
- UI/UX Design
- Copywriting
- Optimasi Kecepatan Website