Ember & Ice
A booking platform that reads live availability, books any session in a few taps on a phone and writes it into the reservation system.
A fictional urban sauna and cold plunge bathhouse · Next.js 16 App Router
The brief.
Written for this demo, the way briefs reach us. Ember & Ice is a fictional company.
Bookings reach us by phone, by message and through a widget that does not know when a private suite is already taken. On busy evenings we double-book, and nobody can say how full tomorrow is. We want guests to book any session on their phone in a few taps, see only what is actually free, and have every booking land in the reservation system the front desk works from.
- 01Live availability for every session, suite and ritual.
- 02A booking made in a few taps on a phone.
- 03Bookings, guests and payments in the reservation system, with confirmations sent on their own.
The pages and journeys in the build.
- [01]A booking engineExperience, day and time, guests and extras, details and payment in one flow. A summary follows the guest: beside the steps on a computer, in a bar at the bottom on a phone.
- [02]Live availabilityEvery time shows its price and the places left. While a guest is choosing, places booked by others count down on the page.
- [03]Confirmation with a QR codeA reference, a QR code for the desk, a calendar file, directions and what to bring.
- [04]Manage a bookingFound by reference and email, then moved to another time, cancelled up to 24 hours before or sent again.
- [05]Timetable, memberships and gift cardsThe week of guided rituals by sauna master and type, three memberships with a join flow, and gift cards with a live preview.
How it works underneath.
- 01One availability sourceEvery page reads times and places from one function standing in for the reservation system, so the home page, the timetable, the booking engine and the server agree.
- 02Checked again at confirmationThe server works out the places and the price again. A time that has filled comes back with the three nearest times that can take the group, and the guest keeps their details. In this demo a time down to its last place is always taken just before confirming, so the recovery can be tried.
- 03Made on the phoneThe QR code and the calendar file are generated in the browser. Card numbers are checked there too and never sent: only the card type and the last four digits go with the booking.
- 04The systems behind a bookingEach booking is written to the reservation system, the payment captured or marked due at the desk, the guest updated in the CRM, the confirmation sent and a reminder scheduled. The live feed shows each step.
- 05Consent before measurementBooking steps are measured only if the guest allows it. The booking is made either way.
The decisions, and the reason for each.
- 01Phone firstMost bookings start on a phone, often the same evening, so every step fits one hand and one screen.
- 02Places left, not just free or fullShowing how many places remain helps a guest pick a quieter time.
- 03A last check before confirmingTwo guests can choose the same last place; the final check keeps the reservation system right.
- 04Choices kept in the linkThe experience, day, time and guests stay in the address, so a time can be shared with a friend or opened again later.
- 05One flow for every experienceSessions, suites, rituals and workshops share one flow, so guests and staff learn it once.
Where each part sends what a visitor did.
The parts the X-ray marks inside the demo. Open the demo notes on any page and choose X-ray to see them in place.
- 1ExperienceEach experience carries its own capacity: shared sessions count places, the Private suite books the whole room.// ReservationsOn Book →
- 2Available timesRead from the reservation system for the chosen day, with the price and the places left on every time.// ReservationsOn Book →
- 3Confirm bookingChecked again on the server, then written to the reservation system with the payment, the guest record in the CRM, the confirmation and the reminder.// Reservations, Payments and CRMOn Book, at payment →
- 4Add to calendarA calendar file made on the guest's phone, with the times in UTC and the reference and directions inside.// CalendarOn Booking confirmed →
- 5Find a bookingLooks the booking up by reference and email, the two things only the guest has. From there it can be moved, cancelled or sent again.// ReservationsOn Manage booking →
- 6Cookie choiceDecides whether booking steps are measured. The booking is made either way.// ConsentOn every page →
Three things to do in the demo.
Built with Next.js 16 App Router, React 19, TypeScript, Tailwind CSS 4, Motion, Zod in the browser and on the server, QR codes in the browser.
Let's talk about what you are building.
A discovery session maps where visitors drop out and which systems the site should feed.