Lompat ke konten

Garut, Indonesia / Full Stack Developer

Fikri Amrullah Full-stack developer
Kembali ke log
Booking App
Entri
LOG-001
Tahun
2026
Status
Published

HotelF

HoteF- Booking Hotel, Aplikasi pemesanan hotel berbasis web untuk mencari kamar dan memesan secara online dengan pembayaran real via Midtrans Snap. Sistem ini memisahkan peran user (tamu) dan admin (pengelola hotel), dengan alur pemesanan dari browsing kamar hingga konfirmasi pembayaran.

Next.js TypeScript Tailwind CSS PostgreSQL Midtrans
Thumbnail HotelF
Plate 01 Booking App
Next.js +4 Log
Fig. 01 — diagram alur sistem Booking App / 2026
01

Masalah

Proses pencarian dan pemesanan hotel membutuhkan informasi yang jelas mengenai pilihan kamar, detail kamar dan ketersediaan kamar. Terkadang customer memiliki masalah dalam transparansi data terkait kamar hotel, tidak hanya itu bagi pelaku bisnis, jika mendapatkan banyak pesanan, akan meningkatkan risiko terjadinya pemesanan ganda saat mencatat jadwal, hal ini menyebabkan dua pelanggan yang berbeda memesan kamar di waktu yang sama.

02

Pendekatan

Membangun aplikasi booking hotel dengan alur sistem yang dirancang agar pengguna dapat menjelajahi informasi kamar hotel, melihat informasi akomodasi, dan melanjutkan proses reservasi, sementara data hotel dan konten lainnya dikelola melalui sisi admin.

03

Yang dibangun

  • Booking kamar hotel via website
  • Pencarian dan filter data kamar
  • Autentikasi dan otorisasi admin dan customer
  • Dashboard admin untuk manajemen kamar hotel
  • Integrasi pembayaran dengan Midtrans
04

Catatan teknis

HALAMAN PUBLIK (TANPA LOGIN):
Home = Hero section, daftar kamar featured, CTA ke katalog
Rooms = Daftar kamar dengan pagination dan pencarian nama
Room Detail = Galeri gambar, harga/malam, deskripsi, fasilitas kamar, date-picker dengan tanggal terpesan/batal, form booking
About = Informasi hotel
Contact = Form kirim pesan ke database untuk dibaca admin
Login = Login Google OAuth (tanpa register manual)

USER (LOGIN REQUIRED)
Booking = Pilih tanggal inap, validasi zod, cek kamar kosong (overlap) dalam $transaction, harga di-snapshot dari DB
Checkout = Ringkasan reservasi + kwitansi, tombol bayar memanggil Snap (window.snap.pay)
My Reservation = Daftar reservasi dengan badge status, pagination, aksi Bayar/Lihat Detail
Reservation Detail = Kwitansi lengkap (ID, tamu, kamar, durasi, total, metode & status bayar)
Cancel = Batalkan reservasi yang belum lunas (status cancelled) dengan konfirmasi

ADMIN (ROLE ADMIN)
Dashboard = Statistik (total reservasi, kamar, pendapatan, pengguna) + tabel reservasi + search
Manage Room = CRUD kamar (nama, deskripsi, harga, kapasitas, gambar via Vercel Blob, multi-amenities), search + pagination
Manage Amenities = CRUD fasilitas — ditolak jika masih dipakai kamar
Manage Contact = Daftar pesan dari form contact, modal detail, hapus, search + pagination

05

Galeri

HotelF — gambar 1
HotelF — gambar 1
HotelF — gambar 2
HotelF — gambar 2
HotelF — gambar 3
HotelF — gambar 3
HotelF — gambar 4
HotelF — gambar 4
HotelF — gambar 5
HotelF — gambar 5
HotelF — gambar 6
HotelF — gambar 6

Entri lain

Project lain dengan tingkat detail yang sama.

01 2026
E-Commerce

Furniture Store

Aplikasi e-commerce furniture berbasis web untuk menjual produk furnitur secara online. Sistem ini memisahkan peran customer (pembeli) dan admin (pengelola toko), dengan alur belanja dari browsing produk hingga konfirmasi pesanan.

Laravel php Livewire MySql
Baca entri

Mari mulai dari masalahnya.

Kirim pesan

Konfirmasi

Konfirmasi tindakan

Tindakan ini tidak bisa dibatalkan. Lanjutkan?