Escape-w-Sonder

Start page
Survey
Personality Analysis
Plan the trip
Trip Mystery bag
Trip details
Trip details
Match with others and/or invite friends

Inspiration

Sonder already runs weekly mystery side quests for students at UWaterloo and Laurier: you fill out a short survey, get matched with a small group of people who share your energy, and open a blind box every Tuesday at 9pm to find out what you're doing that week. 250+ students, 30+ completed events, and one insight that drives everything: the problem isn't a lack of events. It's a lack of low-pressure social initiation. Students are surrounded by people, but they don't know what to do, who to go with, or how to start.

Then Stay22 showed up at Hack the 6ix with a challenge that was basically a dare: "Anyone can build a hotel search. You're not anyone. Build literally anything except another booking carousel."

So we asked: what if the blind box wasn't a Tuesday night, but a whole weekend? What if hotel data wasn't something you search, but the payoff of a personality quiz? That's Sonder Escape: mystery weekend trips, matched to who you actually are.

What it does

Escape-w-Sonder turns a 40-second survey into a fully planned mystery weekend:

A 10-question visual personality survey (sliders, binary choices, opposing cards) across dimensions like introvert/extrovert, planner/spontaneous, nature/city, and comfort/adventure.
You pick your blob (Sonder's mascot avatar) and get your travel personality archetype: The Chaos Tourist, The Cozy Wanderer, The Curious Connector, and friends.
A fill-in-the-blank sentence builds your trip: "I want a [spontaneous] weekend with [new people] who are [adventurous]. My budget is [$300-400], my vibe is [cafés & art], and I want the trip to feel [relaxing]."
A staged loading sequence ("Calculating the ideal chaos-to-comfort ratio…") builds up to a mystery destination reveal: Montréal, Toronto, or Niagara Falls, chosen deterministically from your answers.
The trip page shows a real stay pulled live from the Stay22 API (with two alternatives), a personalized 2-day itinerary, and a transparent per-person cost breakdown.
The unhinged part: a "worth knowing" stat that converts the real nightly rate into a monthly equivalent and compares it against actual local rent. "At this rate, living here full-time would run ~$6,390/mo. Good thing it's just a weekend."
Friends mode gives you empty friend slots and a shareable invite link. Compatible-people mode matches you with three students by personality distance, with a compatibility % and two concrete reasons you'd get along.
Every trip is a self-contained shareable URL. Anyone who opens it sees the full read-only invite page and can join. No account, no login, no backend.

How we built it

The whole point was that Escape should feel like a feature inside Sonder, not a hackathon app wearing its logo. So we started by inventorying the real Sonder repo and porting its actual design system: the exact color tokens (#dcff73 on near-black, cream, warm tan), Cormorant Garamond headlines, the polaroid-and-tape scrapbook props, the blob avatars, the survey shell with its progress bar and section icons, and the hero page layout, line for line.

The stack:

Next.js 15 (App Router) + TypeScript + Tailwind v4 + Framer Motion, matching Sonder's own stack.
Deterministic personality scoring: each archetype is a centroid in 10-dimensional answer space, and we pick the nearest one. No ML, fully explainable, retunable by editing one object.
Destination rules: a small scoring function over the survey answers and sentence-picker choices. Nature-leaning and budget-tight sends you to Niagara; nightlife and splurge sends you to Toronto; cafés & art sends you to Montréal.
Stay22 integration: a server-side route calls GET /v2/accommodations with the destination, next weekend's dates, group size, and budget range. The API key never touches the client, booking links carry our affiliate ID so bookings pay real commission, and a same-shape static fallback means the demo can never die on stage.
Stateless sharing: the entire trip (answers + preferences + profile) is JSON-encoded into a base64url string in the URL. The trip and invite pages decode it and re-derive the archetype, destination, itinerary, and costs on every load. One source of truth, zero database.
Compatible-people matching runs the same distance function against seeded student profiles, and generates match reasons from the dimensions where you're most similar.
Playwright end-to-end tests drive the full flow in a real browser, both modes, desktop and mobile.

Challenges we ran into

Stay22's docs described suppliers as an array. The live API returns it as an object keyed by provider name. Every request was silently falling back to mock data until we logged the raw response and rewrote the mapper. Lesson: the response you get is the spec.
Our .env.local was created with an invisible leading space in the filename (" .env.local"), so Next.js never loaded the API key. We spent a while suspecting the key, the network, and the sandbox before a byte-level directory listing exposed it.
Sonder's holographic card effect uses an absolutely positioned ::before overlay. Our new flat buttons rendered underneath it and were completely unclickable. The E2E test caught it ("holo-card intercepts pointer events") before a human ever did.
Making it look like Sonder instead of looking AI-generated took a full second pass: we rebuilt the landing and survey pages against screenshots of the real product, down to the mono [ 01 ] polaroid labels and the glassy pill buttons.
Address-based hotel search sometimes returns properties 30km from the city core, because geocoding radius is generous. We documented the lat/lng fix rather than gold-plating it during the hackathon.

Accomplishments that we're proud of

Real, live inventory: all three destinations return actual bookable properties from Booking.com through Stay22, with real thumbnails, real prices, and commission-attributed booking links. The demo isn't the finish line, it could earn money by next weekend.
A whole trip fits in a URL. Share a link, and the recipient's browser reconstructs the entire escape deterministically. It's the cheapest possible "collaborative" travel product, and it genuinely works.
The rent-vs-escape stat reframes hotel data instead of listing it, which is exactly what the prize brief asked for, using a number we'd already fetched.
It's indistinguishable from a real Sonder feature. Same tokens, same blob, same voice ("count me in :D"), same survey components. Judges who've seen Sonder assume it shipped.
One polished happy path, tested end-to-end in a real browser, in both friends and compatible-people modes, with zero console errors.

What we learned

Read the actual API response before trusting the docs. One JSON.stringify of the first result saved the whole integration.
Deterministic logic beats ML for a demo every time: it's debuggable at 3am, it's explainable to judges, and the same inputs always produce the same reveal.
A design system is copyable if you steal the tokens, not the vibes. Porting Sonder's real CSS variables and assets got us 90% of the way; the last 10% was rebuilding two pages against screenshots.
A filename with a leading space can cost you an hour. Check the bytes.
Encoding state into the URL is a shockingly powerful pattern for prototypes: shareability, persistence, and deep-linking for free, with no infrastructure.

What's next for Escape-w-Sonder

Real date selection and live availability instead of defaulting to next weekend.
Tighter geo-targeting with lat/lng + radius so every stay is walkable to the itinerary.
Group cost-splitting through Stay22 booking links, so one person books and everyone pays their share.
Real matching: Sonder already has survey responses and match scores for 250+ students, so compatible-people mode can graduate from seeded profiles to the real graph.
More destinations as Sonder expands past Waterloo, using the same deterministic rules.
Ship it inside the actual Sonder app in time for reading week, when every student group chat has someone saying "we should go somewhere" and nobody planning it.