Skip to content
Mahavir

← All work

Whimstay

2024 · Whimstay (whimstay.com) · Front-end engineer — NextJS UI, calendar & maps experiences

View live ↗

Front-end
NextJS
Search
Calendar + Maps
Language
TypeScript
Live
whimstay.com

Highlights

  • Built the NextJS front-end for Whimstay's stay-booking experience
  • Custom calendar control for date-range search — availability, selection, and pricing state kept in sync
  • Interactive map control — browse stays by location with performant marker handling
  • Calendar and map state share one URL, so every search is linkable and shareable

Overview

Whimstay is a platform for finding and booking stays. I built the NextJS front-end, and the two pieces that define the product experience are the two hardest UI problems in travel: a calendar control for date-range search and a map control for exploring stays by location.

Travel UIs live or die on these two controls — they’re where users spend their time, where state gets complicated, and where slow or janky rendering kills a booking flow.

The challenge

  • Date-range search is deceptively hard — selection, availability, minimum stays, and pricing all have to stay consistent across the calendar, the map, and the results.
  • Maps are a performance problem — hundreds of properties on screen at once, and every pan or zoom is a chance to drop frames.
  • The two controls have to agree — pick dates on the calendar, the map reacts; drag the map, the results and pricing update. One source of truth, no stale state.

What I built

Calendar control

A custom date-range calendar for search and booking: range selection, availability awareness, and pricing that updates with the chosen dates. Built to stay fast and responsive while the underlying data refreshes.

Map control

An interactive map for browsing stays geographically — performant rendering with many properties on screen, smooth pan/zoom, and selection that ties each marker back to its listing.

One shared search state

Calendar, map, and results all read from a single shared state that syncs to the URL. Every search is linkable and shareable — send someone a URL and they land in exactly the same view.

Why it matters

Travel booking is a frontend-performance and state-management problem dressed up as a website. This project is a showcase of the kind of front-end engineering I enjoy most: rich, interactive controls with real complexity behind them, shipped in NextJS with everything in TypeScript.

My role

Front-end engineer on the NextJS application — the calendar control, the map control, and the shared search-state architecture that keeps them consistent.