DEV Community

Pindrop
Pindrop

Posted on

Building an interactive Palworld map with Next.js, Leaflet and Supabase

As a solo developer I wanted a fast, mobile-friendly interactive map for Palworld that didn't bury me in ads. The result is Pindrop, and here are a few of the technical decisions behind it.

Rendering 1000+ markers without jank

The interactive map 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.

A breeding calculator as a pure function

Palworld's breeding combos are deterministic, so the breeding calculator is just a lookup over a precomputed table rather than a backend call. That keeps it instant and fully cacheable.

Stack

  • Next.js (App Router) for SSR + static generation
  • Leaflet for the map layer
  • Supabase for the small amount of dynamic data
  • Vercel for hosting and edge caching

If you play Palworld, the guides section collects the breeding, location and boss notes I kept losing track of. Feedback from other devs welcome — especially on the clustering approach.

Top comments (0)