IP Address Tracker

A Frontend Mentor challenge: look up any IP address or domain and see its location on a map.

React Router 7 (SSR), TypeScript, Tailwind and Leaflet, with geolocation from the IPify API.

Running it

Needs Node 20+ and a free IPify API key.

npm install
cp .env.example .env    # add your IPIFY_API_KEY
npm run dev

IPIFY_API_URL is an optional override, used by the e2e suite to point at a stub.

npm run typecheck
npm run test:coverage   # unit tests
npm run test:e2e        # Playwright, including a JavaScript-disabled run
npm run build

How it's put together

Everything with logic in it lives in app/lib/ as plain functions taking their dependencies as arguments — query validation, the IPify client, visitor IP from proxy headers. The route's loader is two lines and just delegates, which is what makes the domain layer testable without rendering anything.

A few decisions worth calling out:

• The URL is the state. Search is a GET form, so results are shareable, survive the back button, and work with scripts disabled.
• Invalid input returns a message and a 400 rather than throwing — a typo should re-render the form, not hit the error boundary.
• Leaflet is imported inside an effect, since it touches window on load and would break SSR. With JS off it can't run, so the same tiles are server-rendered as plain <img> tags with the marker over them.
• The API key stays server-side, in a .server.ts module.

Testing

app/lib/ is at 100% coverage, enforced in vitest.config.ts, including the failure paths. Playwright covers desktop, mobile and a JavaScript-disabled run against a stub API. Components aren't unit tested — the paths worth covering are covered end to end, and the brief asks for a timeboxed submission.

Credits

Design by Frontend Mentor. Tiles by CARTO, data from OpenStreetMap contributors.