From an Abandoned Angular Traceroute App to an Interactive Internet Route Lab

#devchallenge #githubchallenge #webdev #react

GitHub “Finish-Up-A-Thon” Challenge Submission

This is a submission for the GitHub Finish-Up-A-Thon Challenge

What I Built

Uni Route is an educational web app for learning how messages travel through the internet.

The idea started in 2021, while I was at university taking a computer networks class. I wanted a way to make traceroute easier to understand: instead of reading a long terminal output line by line, students could see the hops, latency, approximate geographic locations, and the path that a packet might take when reaching a domain or IP address.

The first version was built with Angular, based on the knowledge I had from my first work experience at the time. It supported two learning modes:

Local tracing: users could run tracert or traceroute on their own machine and paste the result.
Global tracing: users could use public looking glass providers to run traceroute from servers in different continents and compare how internet traffic changes depending on the origin.

After a few years, the project became abandoned. Some public traceroute providers stopped working, the IP information API no longer responded as expected, dependencies aged, and the UI felt more like a student prototype than a tool I could confidently share with other learners.

For this challenge, I revived it as a modern static web app and turned it into a more complete learning experience:

Rebuilt the active app with React, TypeScript, and Vite.
Preserved the legacy Angular version in the repository for historical reference.
Added a responsive and modern interface with shadcn/ui.
Replaced the old Google Maps / Angular Google Maps approach with mapcn + MapLibre.
Added latency charts with Recharts.
Added map playback, where the route is revealed hop by hop and the animation speed is scaled from latency so students can feel the difference between faster and slower hops.
Added parser support for Windows and Unix-like traceroute output.
Added IP classification before geolocation, so private, reserved, loopback, documentation, multicast, and other non-public ranges do not waste API calls.
Added modern geolocation fallback support with IPinfo, ipgeolocation.io, and ipapi.co.
Added English and Spanish i18n directly in the static app.
Added documentation, unit tests, GitHub Actions, and GitHub Pages deployment.

The goal is not to create a network diagnostic tool for experts. The goal is to help students and self-learners understand the journey: "When I send a message through the internet, what are some of the networks it may cross before it reaches the destination?"

Demo

Live app: https://botoom.github.io/route/

Repository: https://github.com/BOTOOM/route

Before: legacy Angular version

If the animation does not play in the DEV preview, open the GIF directly: legacy Angular demo.

After: modern Uni Route landing page

If the animation does not play in the DEV preview, open the GIF directly: modern React demo.

The Comeback Story

The original version solved a real learning problem, but it was frozen in time.

In 2021, using Angular made sense for me because it matched the tools I was learning professionally. But trying to upgrade that stack all the way from the old dependency versions to a 2026-ready application would have meant fighting years of breaking changes before even improving the product.

I had already tried to upgrade it once and hit the expected problem: old packages, deprecated services, broken APIs, and a lot of effort spent only to keep the same experience alive.

So this time I made a different decision: keep the educational purpose, keep the legacy code as history, but rebuild the active app from the ground up.

Before	After
Angular app from 2021	React + TypeScript + Vite static app
Old dependency tree	Modern pnpm-based project
Google Maps / Angular Google Maps	mapcn + MapLibre
Harder to maintain UI	Responsive shadcn/ui interface
Spanish-only user flow	English and Spanish language switcher
Deprecated or unreliable external services	Curated looking glass tools and geolocation fallback providers
Mostly text-based output interpretation	Tables, map, chart, and latency-based playback
Manual/old deployment style	GitHub Actions deployment to GitHub Pages
Abandoned university project	Shareable learning tool for students and self-learners

One of the biggest product decisions was not to execute traceroute directly from the browser. That would be amazing, but browsers intentionally do not allow web pages to run native network diagnostic commands on a user's operating system. Instead, Uni Route teaches the safe and realistic flow:

Copy the suggested command for Windows, Linux, or macOS.
Run it in your own terminal.
Paste the complete result into the app.
Explore the route visually.

For global routes, the app also avoids unreliable iframe embedding. Many public looking glass sites block embedding with security headers, and that is reasonable. Uni Route opens those tools externally, explains how to use them, and then normalizes the pasted result locally.

The most satisfying improvement is the map playback. A static line on a map is useful, but watching the path appear hop by hop makes the concept easier to teach. Latency becomes visible instead of just numeric: slower hops take longer in the animation, making the relationship between network delay and route progression more intuitive.

I also wanted the app to be responsible with geolocation APIs. Not every hop has a public IP, and not every IP should be sent to an external provider. The new version classifies private and reserved ranges first, then only calls a provider when a public IP can reasonably be geolocated. This makes the app more respectful of free-tier limits and more accurate about what it can and cannot know.

My Experience with GitHub Copilot

GitHub Copilot helped me treat the revival like a real migration instead of a quick redesign.

I used Copilot CLI as a coding partner to:

Audit the old project and decide whether an Angular upgrade or a full React rebuild made more sense.
Plan the migration around GitHub Pages constraints.
Move the legacy Angular app into a reference folder while creating a new active application.
Build a shared traceroute parsing domain for Windows and Unix-like outputs.
Add tests for parser behavior, private IP classification, geolocation states, and route playback timing.
Refactor repeated page logic into shared hooks and components.
Review the UI with Chrome DevTools across desktop and mobile sizes.
Improve contrast, copy, navigation, and user-facing explanations.
Add bilingual English/Spanish i18n without changing the GitHub Pages route structure.
Write documentation for setup, environment variables, local/global usage, and deployment.

Copilot was especially useful for the parts that required both memory and consistency. For example, when adding i18n, it helped identify hardcoded text across pages, shared components, domain helpers, map popups, chart labels, and error states. Instead of translating only the obvious UI, I refactored domain messages into structured codes so the parser does not return Spanish strings directly.

It also helped me avoid modernizing only the surface. The final project is not just "the same app with newer colors." It now has a clearer architecture, tests, deployment automation, better provider handling, safer API usage, and a more educational experience.

What I Learned

Finishing an old project is different from starting a new one.

When a project has personal history, it is tempting to preserve everything exactly as it was. But finishing it sometimes means protecting the original intention while letting go of the old implementation.

In this case, the intention was always the same: help people understand how internet communication travels across networks.

The implementation changed completely.

That made the project easier to maintain, easier to deploy, and more useful for the students and self-learners I originally wanted to help.

Transparency

The modern version keeps the legacy app in the repository for reference, but the active application is a full refactor built with React, TypeScript, Vite, shadcn/ui, mapcn, MapLibre, Recharts, Zod, Vitest, and GitHub Actions.

Map visualization uses MapLibre and map tiles with their required attributions. External looking glass services remain external resources, and Uni Route guides users to use them respectfully.