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

Open comments for this post

5h 20m 45s logged

Wanderpin - phase 3: real sharing, and the bug that ate an afternoon

This update gave Wanderpin proper short links, a saved-trips library, and a route optimizer. But the part I’ll remember is a 100 KB mystery.

Short links + a trip library

Sharing used to cram the whole trip into a giant #... URL. Now there’s a tiny Supabase backend: hit Share and you get a clean …/t/aB3xY9 link that anyone can open, no login. Reads come straight from the browser (a public read policy), and writes go through a serverless function with the secret key, so nobody can scribble on the database from the client. When someone opens a shared link, the route flies stop to stop and a little “Make your own” card invites them to start their own.

Click polish

Spinning the globe was dropping stray pins, because react-globe.gl fires a click even at the end of a drag. Added a pointer-distance guard (under ~5px = a real click). Clicking open ocean now offers an “Add anyway” instead of a useless pin, and there’s an “Optimize route” button that reorders stops with nearest-neighbour + 2-opt to cut total distance.

The bug: a 5-stop trip that was 400 KB

Share kept failing in the browser with a 413 (payload too large). But the function worked fine when I hit it with curl. Same 5-stop trip, totally different size.

I had the user dump their saved trip in the console. Five stops. 403,682 characters. Each stop had two mystery keys: __threeObjPoint and __threeObjLabel, ~100 KB each.

Turns out react-globe.gl mutates the data objects you hand it - it bolts the entire Three.js render object (meshes, geometry, materials) straight onto your data. I was passing my live trip array to the globe, so it was quietly fattening every stop by 100 KB, which then got saved to localStorage and sent on publish. The hash link looked fine only because it re-packs specific fields, so it never saw the junk.

Fix was two-fold: hand the globe throwaway copies so it scribbles on those instead of my real data, and sanitize trips to known fields on save/load (which also cleans up the bloated localStorage on next visit). Back to ~1 KB per trip.

Where it stands

Live at https://wanderpin-ecru.vercel.app/ - build a trip, optimize it, save it, share a short link, watch it fly.

Honest caveats: shared trips are snapshots (open a link, get a copy - not live collaboration), and the globe’s three.js bundle is still the heavy chunk (lazy-loaded, so it only hits the 3D view). Lesson logged: never trust a viz library not to mutate your state.

0
106

Comments 0

No comments yet. Be the first!