Quick summary
StayLane is a working marketplace. The search pill is four real segments — destination text, a two-month range calendar, guest steppers — writing one shared search state that filters the grid live and follows you into every listing’s booking widget. Each of the 32 stays carries five real photographs through a card carousel, a wishlist heart, ratings and a nightly price that re-quotes to a stay total the moment dates exist. The full /rooms route stacks a gallery mosaic, amenity checklist, schematic map, host card and a sticky booking widget that prints an itemised receipt — and on a phone the widget folds into a fixed bar with the whole flow one tap away.
Who this template is for
This build is for anyone shipping a booking-shaped product — stays, spaces, rentals, experiences — who wants the search, grid and checkout-adjacent mechanics solved and honest before their own inventory arrives.
- Founders building a marketplace — the pill, ribbon, grid and booking widget are the four instruments every one of them needs, wired here end to end
- React developers who want a worked example of shared search state: one context feeding a filtering grid, deep-linkable query strings, and a booking widget that agrees with the card that opened it
- Anyone studying the Airbnb interface pattern — the four-segment pill, the category ribbon, the sticky receipt — in code plain enough to read in an evening
What problem this template solves
Most product front ends you can actually read are either a framework tutorial with three fake rows in it, or a real app whose logic is buried under a build pipeline. This build is neither.
- Interface clones stop at the layout — the mechanics that make the product work are left as an exercise
- Real state rules are the hard part, and they are exactly what a screenshot cannot show you
- A build behind a bundler is a build you cannot read: the file you open is not the code that runs
What you get with this template
A Vite workspace with three routed views, fifteen info pages, 32 stays and 160 baked photographs — npm install, npm run dev, and the marketplace is running.
- The sticky chrome: brand bar, four-segment search pill with destination popover, two-month range calendar and guest steppers, and a 21-category ribbon — the pill collapses to a summary on scroll and re-expands on touch
- The 32-stay corpus across six continents, each with five real photographs on a card carousel, wishlist heart, rating and a nightly price that re-quotes to a stay total the moment dates exist
- The full /rooms/:id route — gallery mosaic, amenity checklist and modal, schematic map, host card, and the sticky booking widget with its itemised receipt, plus the fixed mobile booking bar
Page sections overview
| Section | Purpose |
|---|---|
| The Search Pill | Four segments, one state, really filters. |
| Honest Receipts | Line items that sum to the printed total. |
| The Grid | One to six columns, continuously. |
| No Dead Ends | Every button answers on the click. |
| Real Photography | 160 Pexels originals, baked to WebP. |
Design & branding system
The design brief was the calm confidence of the booking pattern — executed in tokens, not screenshots.
- A warm white ground with one coral accent that always means act — primary buttons, active states and the saved heart all draw from the same token
- Inter end to end with tabular numerals in every receipt, so a re-quote changes the digits without the lines breathing
- Hairline borders and soft shadows do the separating; the only hard colour on a resting page is the photography
Mobile & speed optimization
The desktop chrome recomposes in stages rather than collapsing.
- The pill collapses to a three-part summary as the page scrolls and re-expands the moment any part of it is touched
- Below 960px the booking column drops under the content and un-sticks; below 744px the tools fold away and a fixed bar pins the price and a check-availability button, opening the full widget as a sheet
- The category ribbon stays swipeable on its own axis with the chevrons retired on touch — they would only cover categories
How this template helps you convert
A working product beats a mockup. The page is arranged so a visitor can use the thing before deciding anything.
- Visitors interact immediately — the live build is on the page, with no signup or install in the way
- Every mechanic is inspectable, which turns a curious visitor into someone who wants the brief behind it
- The one-time prompt unlock is a concrete next step while the product is still open in the tab
Other information about this template
A few notes before you build on this one.
- 58 unit tests hold the date, pricing and filter logic — the DST anchor, the rounding contract and the guest guards are all pinned by assertions, not by hope
- The Pexels fetch pipeline ships with the workspace (bring your own free key), but the manifest and all 160 WebP files are already baked — the app makes zero photo-API calls at runtime
- The demo is honest about being a demo: signing in stores nothing and says so, messages are not actually sent, and the footer says it is a design study
- vercel.json and a scoped .htaccess are both included, so the build deploys to either hosting style unchanged
Receipts you can print
dates are anchored to local noon so a night count can never lose an hour to DST, the weekly discount lands before the percentage lines, and every percentage line rounds individually off the discounted subtotal — so the lines shown always sum to the total shown. Capacity and date-order guards argue back before the maths runs. 58 unit tests hold the date, pricing and filter logic.
No dead ends
every button answers on the click — share copies the link and says so, save flips a brand-filled heart and toasts, the underlined review and location stats scroll to their sections, all fifteen footer links open real pages with real copy, and the auth, locale and host-message modals resolve honestly as demos. The 160 photographs are Pexels originals baked to two WebP widths with gradient placeholders, credited in the footer.
Screenshots
Captured from the live build, section by section. This is the template as it actually renders, not a mock-up.
