Zettabit Technologies Logo

Hotel Booking Website

Client

Oriental Palace Hotel

Technologies Used

  • Typescript
  • Node.js
  • Astro
  • SolidJS
  • MySQL
  • S3

Case Study

Overview

A local boutique hotel wanted to create their own booking website with some custom features to suit their style of business. The hotel is highly affected by seasonal traffic and gets overloaded at certain points in the year, so they wanted some specific controls in their admin suite to be able to anticipate and manage that traffic. This included limiting the number of rooms that can be booked based on the number of guests, disabling the guest's ability to book without paying if they're booking a longer stay or many rooms, generating and applying single use discount coupons, and allowing the hotel to override the ability to book without paying and limit the number of rooms available in anticipation of high traffic days.

Approach

The hotel already had an informational static website, but it was largely dysfunctional and had not been updated in years, so I chose to start fresh. I spent some time with the hotel's general manager and staff and had them walk me through how they use their current property management system, how they handle bookings on Booking.com and Expedia and what the problems were with their current setup. Once I had a good idea of what they wanted, I sketched out a rough system design for the project, as well as chose the frameworks and technologies I'd use for it.

I had not worked with Astro for long at that point, but it seemed perfect for the job - the hotel needed a largely static site with a couple of dynamic features - room bookings and the admin control panel. I've also been using SolidJS for a while and really liking its fine-grained reactivity, and Astro would allow me to use it for the dynamic parts of the job. Digital Ocean was my choice of host as the total cost for a website of this size would be fairly cheap there and the client appreciated the predictable cost model. That quickly locked in the rest of my choices - AstroDB made it simple to connect to a MySQL database and Digital Ocean Spaces would be a great store for room CMS data.

For integrating a payment processor, I went with Telr, a UAE-based company with the most modern integration API I could find. The setup on their end took a while, but once they had us ready to go, integrating the API was a breeze, with most of the same utilities you'd expect from a US-based payment processor.

Result

The final website is a hybrid static/dynamic website, with a simple node server dealing out the dynamic pages of the site. The website has a simple booking functionality that displays what rooms are available given a guest's check-in and check-out dates and allows thme to either pay now, redirecting them to the Telr payment processing page, or to pay at the hotel. The admin panel is robust, giving the admin total control over room pricing, availability, overrides and much more.

Images

Screenshot of the hotel's homepage Screenshot of the hotel's search page showing a date selector and guest range Screenshot of the hotel's booking page showing a list of rooms and an inline cart with a room added into the cart Screenshot of the hotel's checkout page showing a form for inputting user details