The latest articles on DEV Community by Pindrop (@pindropgg). https://dev.to/pindropgg https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3974336%2Fa86b59e9-6595-472e-b498-f99cc573b62b.png https://dev.to/pindropgg en Pindrop Fri, 19 Jun 2026 12:49:19 +0000 https://dev.to/pindropgg/building-an-interactive-palworld-map-with-nextjs-leaflet-and-supabase-24p2 https://dev.to/pindropgg/building-an-interactive-palworld-map-with-nextjs-leaflet-and-supabase-24p2 <p>As a solo developer I wanted a fast, mobile-friendly interactive map for Palworld that didn't bury me in ads. The result is <a href="https://pindrop.gg/" rel="noopener noreferrer">Pindrop</a>, and here are a few of the technical decisions behind it.</p> <h2> Rendering 1000+ markers without jank </h2> <p>The <a href="https://pindrop.gg/palworld/map" rel="noopener noreferrer">interactive map</a> uses Leaflet with a custom marker-clustering layer. Markers are served as static JSON from the edge and hydrated client-side, so the first paint is server-rendered and the heavy marker work happens after.</p> <h2> A breeding calculator as a pure function </h2> <p>Palworld's breeding combos are deterministic, so the <a href="https://pindrop.gg/palworld/breeding-calculator" rel="noopener noreferrer">breeding calculator</a> is just a lookup over a precomputed table rather than a backend call. That keeps it instant and fully cacheable.</p> <h2> Stack </h2> <ul> <li> <strong>Next.js (App Router)</strong> for SSR + static generation</li> <li> <strong>Leaflet</strong> for the map layer</li> <li> <strong>Supabase</strong> for the small amount of dynamic data</li> <li> <strong>Vercel</strong> for hosting and edge caching</li> </ul> <p>If you play Palworld, the <a href="https://pindrop.gg/palworld/guides" rel="noopener noreferrer">guides section</a> collects the breeding, location and boss notes I kept losing track of. Feedback from other devs welcome — especially on the clustering approach.</p> nextjs showdev sideprojects webdev