Business · Booking & hospitality · Personal build
Fernhollow
A boutique cabin and forest-lodge booking site concept: browse stays, pick dates, and book in three steps, with accounts, gift cards, and a full trip-planning flow.
The challenge
Booking flows are one of the harder e-commerce patterns to get right client-side: date logic, gift-card balances that actually deduct correctly, account state, and printable confirmations all need to behave consistently, now across nearly 30 pages.
The approach
Built the full booking flow (stay browsing, date search, checkout, gift cards, a local-only demo account system, and printable confirmations) entirely in hand-written JavaScript, then went back and pushed it further: real solar-position math, the Web Audio API, and the browser's own speech engine, instead of reaching for a paid API on a static site.
Design
A warm, editorial hospitality look (serif typography, a soft header-to-hero blend on every page) with printables that get a real branded letterhead rather than a stripped-down browser printout.
Development
Plain HTML, Tailwind CSS, and vanilla JavaScript. Gift card balances genuinely deduct at checkout and persist; contact and gift-code emails send for real via Web3Forms; accounts are an honestly-labeled local-only demo system, not real authentication.
Recently shipped: ten upgrades, no paid API
The rule going in was simple: nothing that would normally need a paid key (weather, a real AI model, narration audio) on a site with no backend to hide a key on. So each one got substituted with something computed honestly instead, and labeled as such rather than dressed up to look real.
- A golden-hour countdown to the next sunrise or sunset, computed from each stay's real coordinates with an actual solar-position formula, not decoration.
- An ambient soundscape, wind through canopy, soft chimes, synthesized live with the Web Audio API, no audio files hosted anywhere.
- A voice-guided photo walkthrough using the browser's own speechSynthesis, and a draggable AI concierge that matches real requests against the real stay catalogue with keyword rules, clearly labeled as rule-based, not a live language model.
- A procedural night-sky overlay and an animated flight-path map connecting every stay's real coordinates with soft dashed arcs.
- A gift registry and an experiences add-on cart, both with full create, edit, and delete, not a form that only works once.
- A full responsive pass across phones, tablets, and small laptops, including a header breakpoint gap that broke specifically at iPad-Pro-landscape width.
- An Accessibility page, semantic keyboard-navigable markup, print styles for confirmations, a proper 404, and a sitemap.
What I solved
- A gift-card system where balances actually deduct and persist correctly across bookings, not just a one-time redeemed flag.
- Real email delivery for the contact form and gift-code sending, via Web3Forms.
- A redesigned mobile menu with multiple ways to close it, and consistent header/hero styling rolled out across all pages.
- Dedicated Accessibility, Compare Stays, and Experiences pages.
Result
It's live at justixxprime.github.io/fernhollow-booking-website. No backend, which is exactly why the gift-card math had to be right, there's nowhere for a bug to hide when it's all sitting in the browser.
Everything in the box
Nearly 30 pages, so here's what's actually on the site:
Core booking experience
- Browse and search stays with filters, full photo galleries with a lightbox, and side-by-side comparison of two or three stays
- A trip planner for grouping multiple stays into one trip, a "Find Your Stay" quiz, and star-rating written reviews
- Saved/bookmarked stays, "manage a booking" lookup, a host dashboard demo, gift codes, and a rewards program with points and tiers
Ten "no paid API" cinematic upgrades
- A rule-based AI concierge chat that matches real requests against the stay catalogue, and is draggable and remembers its position
- A golden-hour sunrise/sunset countdown computed with a real solar-position formula, per stay's actual coordinates
- An ambient soundscape synthesized live with the Web Audio API, a constellation night-sky overlay, and a speech-narrated photo walkthrough
- A price heat calendar, a flight-path route map connecting every real stay location, and a time-of-day mood hero on the homepage
Newer pages
- Experiences (six bookable add-ons), a gift registry for group gifting, a sustainability page, a press kit, and a cinematic journal feature story
Site-wide polish
- Dark/light theme toggle, full responsive pass across phones, tablets, and small laptops, and print styles for booking confirmations
- A dedicated accessibility page, a real 404 page, and a proper sitemap
Under the hood
- The gift and contact flows run on Web3Forms, with the gift-card generation logic (unique codes, expiry, redemption tracking) handled entirely client-side, since there's no backend on this build at all.
- Genuine astronomy, computed, not faked. The golden-hour countdown and the homepage's time-of-day mood hero both run real solar-position math against each stay's actual coordinates, rather than calling a paid weather API this static site was never going to ship a key for.
- Sound and speech generated live in the browser, using the Web Audio API for the ambient soundscape and the browser's own speechSynthesis for the voice-guided photo walkthrough, so neither feature needed a single audio file hosted anywhere.
Screens
