Investigations

Underground Hotel Finder

TypeScript August 2025

London Underground hotel finder ranking Premier Inn hotels by commute time, price, and walkability with interactive maps.

I kept wasting hours on hotel booking sites before London work trips — tabbing between maps, manually checking tube routes, trying to figure out which Premier Inn actually gave me the shortest commute for the money. So I built the tool I wished existed: enter your workplace postcode, and it instantly ranks all 48 Premier Inn hotels in London by a combined score of journey time, nightly price, and walking distance to the nearest station.

Under the hood, the interesting problem is graph traversal across a real transport network. The app models the entire London Underground as a graph — 273 stations, every line, every connection — and computes shortest-path commute times from each hotel's nearest station to your workplace station. That routing, combined with a weighted scoring algorithm that balances travel time against cost and walkability, is what turns a simple map into something genuinely useful for decision-making.

The frontend renders all of this on an interactive map with two modes: a Leaflet street map with real geography, and a custom Canvas-rendered tube diagram. Every hotel gets a colour-coded price badge so you can visually scan for deals without reading a table. Click any hotel and you get the full journey breakdown — walk to station, tube segments, walk from exit to your office — plus a direct booking link. The whole UI follows Atomic Design principles with a full Storybook component library, so every piece is documented and reusable.

The stack is React 18 with TypeScript and Tailwind on the frontend, backed by a Go service using gqlgen for GraphQL. I also explored Amadeus API integration and mapped out monetisation strategies — this started as a personal itch to scratch, but the architecture and feature set are genuinely product-grade.

What this project demonstrates

Interactive map with all 273 tube stations and GPS-traced routes
Combined scoring: journey time + price + walking distance
Dual map modes: Leaflet street map and Canvas tube map
48 Premier Inn hotels with live price badges
Atomic Design + Storybook component library
Go/gqlgen GraphQL backend

Technologies

ReactLeafletMapsGraphQLGoCanvas

© 2026 Jonathan Leahy · v0.8.5