Hotel Apple Tree Residency: Next.js Booking Website & Admin

Hotel Apple Tree Residency is a boutique hotel. The platform has two parts: a search-friendly guest website where visitors browse rooms and reserve to pay on arrival, and an admin portal that sends those reservations to the front desk. It is built with Next.js, a Node.js and Express.js API, and a Supabase PostgreSQL database. I built the website, admin portal and API.

A small hotel needs to be found in search, let guests book without friction, and keep control of its rooms and rates, but it usually has no tech team. Guests who must pay online upfront often abandon the booking, and without a shared system two guests can be promised the same room.

• Room showcase

  category pages for Deluxe Rooms, Executive Suites and Family Rooms with amenities such as air conditioning, Wi-Fi, room service, a kitchenette and airport transfers, plus a gallery with a lightbox.

• Pay-at-hotel booking

  guests pick dates, guest count and room type and reserve without a payment gateway, then settle at reception.

• Location guide

  an interactive Google Map with nearby transit information.

• Front-desk console

  new reservations appear in the admin portal so staff can hold the room and prepare the invoice.

• Room management

  add room types, set bed setups and maximum guests, and mark rooms as occupied or under maintenance.

• Rooms page

  search results with a price-per-night slider, room type filters (deluxe, premium and executive suite), amenity filters such as free Wi-Fi and breakfast, sorting, and room cards with size, bed type, amenities and rate.

• Facilities and gallery

  a facilities page (free Wi-Fi, restaurant, room service, front desk and parking) and a photo gallery filtered by rooms, interiors, facilities, dining, exterior and nearby.

• Content management

  update seasonal tariffs, banners, food menus and photo galleries without editing code or redeploying.

• Booking lifecycle

  staff move each booking from Pending Arrival to Checked In (payment collected at the desk) to Completed, or to Cancelled or No Show.

• The guest site and admin portal run on Next.js on Vercel, using server rendering and static generation for fast, search-friendly pages. A separate Node.js and Express.js API on Render handles bookings, with middleware for request validation, rate limiting and consistent error responses.
• Data lives in Supabase PostgreSQL, modelled around room categories, individual rooms, reservations and admin accounts. Row Level Security and connection pooling are used.
• The admin area is protected with JWT sessions and role-based access, since it holds guest contact details and inventory controls.
• Keeping the API separate from the frontend means each can be deployed and scaled on its own.

Double bookings without an online payment hold: before a reservation is created, the API checks the requested dates against existing bookings in the database inside a transaction, using an overlap test (existing check-in before the requested check-out, and existing check-out after the requested check-in).

• 1

  Cold starts on Render

  a lean API startup and a keep-alive ping reduce the delay when a guest checks availability after a quiet period.

• 2

  Heavy hotel photos

  uploads generate WebP thumbnails before their details are saved, so pages stay light on mobile browsers.

A live hotel website where guests can browse rooms and reserve in a few steps without paying upfront, and where staff manage bookings, rooms, rates and content themselves.