What is Hopper?

Hopper is a traceroute visualizer and tool that handles performing traceroutes via hostnames and IP addresses. Hopper also offers the ability to save and import existing traceroutes for future comparisons.

Using a map and a list, each hop of a traceroute is visualized along with the round-trip time (RTT), the city, country, IP address of the hop, and the index (step) of the hop.

The tech behind Hopper

Hopper runs entirely on Next.js. The back-end handles the traceroute actions while the front-end communicates with an IP lookup API (IPAPI.co) to get information about an IP address and FlagsAPI to retrieve flag icons for each country.

The front-end also contains a customized version of Leaflet.js, a library that handles the map, markers, and controlling the zoom level of the map. Each marker shows the index of the hop.

Hopper also has a custom structure to save past traceroutes for much faster importing without doing the same traceroute twice. This is to preserve the data for future reference and to allow of comparison of results.

Next steps

Turning Hopper into a native desktop app using Electron or Tauri would prevent users from requiring the need to setup their environment to run the app.