You are browsing as a guest. Sign up (or log in) to start making projects!

Open comments for this post

5h 0m 49s logged

Wanderpin - the globe looked dumb on a 20 km hop, so I taught it to zoom

This batch turns a Wanderpin trip from a thing on your screen into a thing you can send to a friend - with a real link preview, an embeddable globe, and a reel that finally looks good on short hops.

Share a journey, for real

Hit Share and you get a public link (/t/slug) in a box, plus Copy, the native share sheet, and WhatsApp / Instagram / X buttons. The interesting part is what happens when someone opens that link:

  • /t/:slug is server-rendered (api/share.ts) and serves a dynamically generated Open Graph image (api/og.tsx via @vercel/og) - so pasting a Wanderpin link into a chat unfurls into a proper preview card instead of a blank rectangle.
  • There’s an embeddable globe too: /embed/:slug renders just the spinning globe (a tiny route check in main.tsx swaps the whole app for EmbedView), and the share dialog hands you the <iframe> snippet.
  • Shared trips auto-expire after 7 days via a pg_cron job, so the table stays small and old links quietly die.

The reel got smarter - 3D for the short hops

The globe fly-through looks flat when two stops are 20 km apart - the arc is a stub and the camera barely moves. So now the Play reel checks each leg: anything under 200 km crosses into the 3D map (terrain + buildings) with a zoom picked from the distance, longer legs stay as globe arcs. It asks once before playing, and video recording stays globe-only so captures never go blank.

What bit me

  • Instagram has no web “share a link” intent (unlike WhatsApp/X). So the IG button copies the link and opens Instagram - the native share sheet handles it properly on phones.
  • The slug kept vanishing from the URL. A shared trip was calling replaceState("/") the instant it loaded, so /t/slug disappeared mid-playback and you couldn’t re-share what you were watching. Moved that reset onto the “Create yourslongs.
  • The reel switch reused the globe↔3D handoff plumbing, and the type-checker caught a flyTo signature mismatch before it shipped - the map handle wants { zoom }, not a bare number.

Where it stands

It all builds clean, Try it: https://wanderpin-ecru.vercel.app/

0
1

Comments 0

No comments yet. Be the first!