The Aster HouseThe Booking the OTA Doesn't Take

A concept storefront for a nine-room coastal house in St Ives: a real reservation engine, priced by season and weekend, running on the hotel's own page instead of a booking portal.

Client
The Aster House
Delivered
September 2026
Discipline
Websites
Type
Demo build

A demo build. The brand is fictional, the build is real and running.

A storefront for a fictional nine-room coastal house on the edge of St Ives, built around the question every independent hotel is quietly paying for: can the website take the reservation itself?

Most small hotel sites answer no. They show the rooms, then hand the guest to a booking portal that charges 15 to 20 percent of the stay and keeps the guest’s details afterwards. The Aster House answers yes. The reservation flow is not a decorative form: it is a working engine that knows what a stay costs, whether it can be sold, and what it may not sell.

The reservation engine

Every room carries a rack rate, and the nightly price moves from there: high summer adds 22 percent, shoulder summer 8, winter takes 18 off, and Friday and Saturday nights add 15, rounded to the nearest £5. The “from £…” on a room card is not typed by hand. It is the lowest number the tariff can actually reach, so a card and the quote it opens can never disagree with each other.

Availability is derived from a stable hash of the room and the date, never from Math.random, which would reshuffle the calendar on every reload. The same night returns the same answer for every visitor, weekends and high summer run fuller, and the nine rooms are held as four types with one, three, four and one units.

The rules are enforced, not printed in small type. An arrival cannot be in the past. A stay that covers a Friday or Saturday needs two nights. Stays cap at 21. A room is refused if the party is larger than it sleeps, or if a dog is coming and it is not one of the three Garden Rooms, the only ones that take dogs (at £25 a night). A confirmed booking gets a reference drawn from an alphabet with no characters that get misread down a phone line, and it persists: held nights come out of inventory, so a room you booked genuinely stops being offered to you for those dates, and cancelling it releases them again. If storage is unavailable, the flow degrades to the session rather than breaking.

The flow itself is four steps, dates then rooms then details then confirmation, opened from the nav, any room card, the mobile menu or the closing call to action, each one pre-filling whatever it already knows. There is deliberately no second date picker anywhere on the site. An availability strip in the header would duplicate step one field for field, and the two would drift apart the first time a rule changed.

Why this shape

Hospitality is a category where the site has to do the selling before it does the booking. The guest is choosing a feeling, so the page is editorial rather than a card grid: ivory ground, deep Atlantic green, terracotta used sparingly, hairline rules and asymmetric grids, full-bleed photography, and typography carrying most of the weight. Every image runs through one component that applies a single colour grade, which is what makes a mixed set read as one commissioned shoot, and the whole image manifest lives in one file, so a real shoot swaps in by editing a list of ids.

Mobile is not the desktop layout stacked. Three sections render genuinely different compositions below 900px, and the switch happens in the render tree, so neither version downloads the other’s images.

Stack

  • React and Vite, with no UI framework, no CSS framework and no animation library. Every transition is CSS, driven by one IntersectionObserver hook
  • A self-contained booking engine as the only place that knows a price or an availability
  • Cormorant Garamond and Manrope on a fluid clamp() scale, so there are no font-size breakpoints in the codebase
  • An eight-petal aster favicon whose geometry is defined once in a script that emits the SVG, the ICO, the Apple touch icon and the PWA icon with no dependencies
  • Full keyboard operation, a real modal dialog with focus trapping and return, validation tied to its control rather than shown as loose red text, and prefers-reduced-motion removing parallax, the hero push-in and every autoplay
  • Hotel structured data that declares the property fictional, so it cannot be mistaken for an operating business

Why this matters

A hotel site that only shows the rooms is paying a portal to finish the sentence, on every booking, forever. The engine here is the same shape any business with inventory and a calendar needs: a clinic with rooms and practitioners, a studio with equipment, a venue with dates. Price it once, in one place, enforce the rules where the guest can see them, and the booking arrives on your own domain with the guest’s details attached.

Want a project like this for your business?

Send one WhatsApp. We reply within an hour with an honest take on what we'd build for you and how long it takes.

Or see all work

I want thisLive demo