Meldri — Lakeside Camping & Cabins
FeaturedConcept design for a lakeside campsite — a hand-drawn site plan you book directly from, season-aware availability, and a basket that claims specific berths by name instead of a vague category.
- TypeScript
- React.js
- TailwindCSS
- TanStack
- Vite
- Vercel

On this page
Meldri — the actual patch of ground, not a category
A concept design exploring how a lakeside campsite should let guests choose where they sleep
This is a portfolio concept piece, not a live client engagement. Meldri is eighteen berths on the reed shore of Dūmezers, a smoke-lake in Latgale — four lake houses, six van plots, eight tent pitches. We built it to test one idea: every campsite booking form in existence sells you a category, and you find out which patch of ground you actually got when you arrive.
What the design solves
"One tent pitch, three nights" is how the listing sites model a campsite, because a category is easy to store in a database. But nobody chooses a campsite that way. People want the pitch under the birches, or the house at the end of the pier, or the plot furthest from the road — and the difference between them is the entire reason they picked a lake over a hotel.
So here the map is the booking surface. A hand-drawn plan of the shore carries one pressable marker per berth, each one named — Gulbis, Gārnis, Dzērve, Zīriņš — with filter chips that keep their own free-of-total counts and a panel giving the selected berth's price, its distance to the sauna and the water, and its verdict for the dates you have set. You can claim several at once, so a group books its own cluster of pitches rather than four separate reservations that may not end up adjacent. Below it, all eighteen by name in a list grouped by zone — the map's accessible twin, and the path most phones will take.
The plan also knows the calendar. Change the arrival month and it redraws: the shore meadow closes from November to April because it floods in the thaw, the van track runs April to October, the houses stay open all year — and anything that closes for your new dates leaves the basket with them rather than failing quietly at checkout. Availability is computed from overlap on ISO date strings and never from a Date object, so it cannot drift by a day for a reader in another timezone. The guest book is three ruled register entries, each tied to a real berth by a "Show on map" link that selects it, takes the kind filter along, and glides back to the plan. There is no score out of ten anywhere on the page.
Note
Design system highlights
- Young Serif and Albert Sans — a routed wooden sign at the shore rather than a printed card; the register is deliberately unlike our hotel concept's Petrona so two hospitality pages never read as one template in two colours
- First light on a misted lake — committed spruce green on a green-tinted cool near-white, explicitly refusing the cream-and-sand default, with one amber dawn signal that only ever means this one is yours
- A focus token that fixed the whole page — because
outline-offsetdraws outside the control, every inverted-fill button was painting its focus ring in the page ground's own colour, measured at 1.0:1;--meldri-ringnow switches to ink on light surfaces and reed on every dark one - Commission drawn as an absence — the eighteen percent the platforms take is a hatched void in the bar rather than a second colour, because the two candidate greys measured 1.38:1 against each other and a hatch needs no contrast to read
- Motion that does not idle — the drifting mist and the shimmer only run while their own sections are on screen, so two viewport-sized composited layers are not held for the whole session
Stack
- TanStack Start with React 19, with an SSR-safe
useMediaQuerybuilt onuseSyncExternalStoreso the small-screen fallback list renders identically on server and client - Tailwind v4
@themetokens scoped to this mockup - Radix primitives and react-day-picker under a hand-built calendar, popover, stepper and dialog set shared with our hotel concept
- Deployed on Vercel
Want this for your campsite or glamping site?
The whole system — the site plan, the season logic, the multi-berth basket, the three-step stay dialog, the extras and the commission comparison — is built and themeable. We can draw your actual shoreline, put your own plots and cabins on it, wire up the booking, and ship a production site in around two to three weeks. Start a conversation →