Staycation — Vacation Booking Platform

Platform pemesanan penginapan liburan berarsitektur hibrida (Monolithic MERN) yang menyajikan antarmuka pencarian dan pemesanan Single Page Application (SPA) bagi pelanggan, serta panel kendali Server-Side Rendered (SSR) terintegrasi bagi pengelola. Mengakomodasi alur transaksi lengkap mulai dari penelusuran destinasi populer hingga alur checkout multi-step yang kompleks dengan manajemen state terpusat.

---

Ringkasan Proyek

• Kategori: Personal Project / Web Application (E-Commerce)
• Peran: Full-Stack Developer (solo execution)
• Tech Stack: React (Create React App), Redux, SCSS, Node.js, Express.js, MongoDB (Mongoose), Multer, EJS (Admin Panel), SB Admin 2, Axios

---

Latar Belakang / Ide Awal

Pemesanan penginapan atau vila sering kali membutuhkan alur penyelesaian transaksi yang panjang. Jika antarmuka dan User Experience (UX) yang disajikan rumit atau tidak responsif, calon pelanggan berpotensi tinggi membatalkan pesanan (drop-off) di tengah jalan. Proyek Staycation dikembangkan untuk menghadirkan pengalaman pengguna yang mulus, cepat, dan estetik bagi pelanggan saat menelusuri hingga menyelesaikan transaksi pemesanan.

Selain menyelesaikan masalah alur transaksi tersebut, proyek ini dibangun sebagai ruang eksplorasi teknis untuk menerapkan arsitektur MERN Stack hibrida — menggabungkan RESTful API untuk klien React SPA dengan dashboard administratif berbasis template engine (EJS) dalam satu layanan backend yang terintegrasi.

---

Keputusan & Trade-off Arsitektur

1. Arsitektur Hibrida (SPA API + SSR Admin Panel):
   Alih-alih memisahkan aplikasi menjadi tiga repositori independen (Frontend Klien, Frontend Admin, dan Backend API), sistem admin pada proyek ini di-render langsung oleh backend menggunakan EJS (dengan modul SB Admin 2). Sisi pelanggan menggunakan React SPA murni yang berkomunikasi via REST API.
   Trade-off: Arsitektur ini mempercepat waktu pengemasan (deployment) dan menyederhanakan manajemen server, meskipun struktur backend menjadi lebih monolitik karena mengelola view engine sekaligus JSON endpoints secara berdampingan.

2. Manajemen State Global Terpusat dengan Redux:
   Alur checkout terbagi ke dalam beberapa tahapan berbeda (Informasi Pemesan -> Unggah Bukti Pembayaran -> Konfirmasi). Redux digunakan untuk menjaga konsistensi dan persistensi data (state) antar-komponen stepper tanpa pemicuan prop drilling.
   Trade-off: Pengisian formulir bertahap menjadi sangat responsif dan data transaksi tidak hilang saat pengguna berpindah navigasi, meskipun membutuhkan penulisan boilerplate code Redux (actions & reducers) yang lebih banyak di awal.

3. Penanganan Unggahan Berkas Lokal (Multer Storage Engine):
   Untuk pengolahan berkas media (seperti bukti transfer dan foto fasilitas destinasi), sistem memanfaatkan disk storage engine dari Multer yang menyimpan berkas secara langsung pada sistem direktori lokal server (public/images).
   Trade-off: Pendekatan ini efektif memangkas biaya operasional dan kompleksitas konfigurasi cloud storage pihak ketiga, namun membutuhkan strategi penanganan pembersihan berkas lokal secara berkala agar kapasitas media server tidak penuh.

---

Fitur Utama Produk

1. Multi-Step Checkout Stepper
   Memecah alur reservasi yang kompleks menjadi antarmuka bertahap (stepper component) yang terstruktur, menuntun pelanggan secara intuitif dari pengisian data pemesan hingga pengunggahan bukti pembayaran.

2. Katalog Penginapan Interaktif & Animasi Mikro
   Menampilkan daftar destinasi populer (Most Picked & Categorized Properties) dengan dukungan animasi gulir responsif dan interaksi hover menggunakan SCSS kustom bergaya modern.

3. Admin Dashboard Terpusat
   Panel operasional lengkap bagi administrator untuk mengelola kategori properti, inventaris kamar, opsi rekening bank, hingga memverifikasi dan menyetujui transaksi pembayaran pengguna.

4. Kalkulator Estimasi Biaya Otomatis
   Menghitung total biaya menginap secara dinamis berdasarkan durasi malam yang dipilih pelanggan sebelum masuk ke alur pembayaran.

---

Tantangan Teknis & Solusi

• Penanganan Validasi Mongoose pada Form Multi-Langkah:
  Masalah: Terdapat potensi celah navigasi di frontend di mana pengguna dapat melompati langkah pengisian formulir, yang memicu pengiriman payload kosong ke backend dan menyebabkan uncaught exception error (500 Internal Server Error) akibat validasi ketat skema Mongoose.
  Solusi: Memperbaiki konfigurasi initial step dan pembatasan navigasi di komponen React untuk memaksakan alur linier, serta membungkus seluruh controller backend dengan blok try/catch agar memberikan respon status JSON error yang informatif tanpa mematikan layanan server.

• Konsistensi Autentikasi Sesi Admin:
  Masalah: Sesi login Administrator sering terputus secara tiba-tiba akibat konfigurasi batas kedaluwarsa cookie bawaan middleware session yang terlalu pendek.
  Solusi: Mengalokasikan ulang parameter maxAge pada middleware express-session di backend menjadi 24 jam demi menjamin kelancaran operasional pengelola saat mengolah data.

• Pengolahan Payload Multipart/Form-Data pada Alur Checkout:
  Masalah: Proses checkout akhir memerlukan pengiriman gabungan antara data teks (detail pesanan) dan data biner (file foto bukti transfer) secara simultan.
  Solusi: Mengonfigurasi middleware Multer pada REST API backend dan menyusun payload bertipe FormData di frontend via Axios untuk menangani pengiriman data campuran secara presisi.

---

Pembelajaran & Catatan Teknis

• Menguasai penanganan alur data campuran (text fields & binary files) bermetode multipart/form-data menggunakan Axios dan Multer.
• Mengubah dan menimpa (override) variabel inti SCSS dari framework UI untuk membangun sistem desain dan skema warna aplikasi yang konsisten.
• Mengatur konfigurasi keamanan REST API termasuk penanganan Cross-Origin Resource Sharing (CORS) antara domain frontend SPA dan backend.