London Underground Hotel Finder

Find the perfect hotel near your London Underground commute. Search by workplace postcode and instantly see the best-value Premier Inn hotels ranked by commute time, price, and walkability.

Features

• Interactive map with 273 London Underground stations, all tube lines with accurate GPS-traced routes, and 48 Premier Inn hotels with live price badges
• Commute search — enter your workplace postcode and get hotels ranked by a combined score of journey time, nightly price, and walking distance to the nearest station
• Journey time filter — slider to set your maximum commute (short / medium / long)
• Price range filter — colour-coded budget, mid-range, and premium categories displayed directly on the map
• Star rating filter — narrow results to your preferred quality level
• Hotel detail panel — see nearest stations, walking times, commute breakdown, and a direct link to book on Premier Inn
• Dual map modes — toggle between a Leaflet street map and a custom Canvas-rendered tube map
• Responsive — works on desktop and mobile

Quick Start

# Install dependencies
npm install

# Start the development server
npm run dev

The app will be available at http://localhost:3000 (or the next available port).

Full-stack development (with backend)

./dev-all.sh       # starts frontend + backend with hot reload
./stop-dev.sh      # stops all services

Tech Stack

Project Structure

src/
├── components/
│   ├── ui/            # shadcn/ui primitives (Button, Card, Input…)
│   ├── atoms/         # PriceBadge, StationSelector
│   ├── molecules/     # HotelListItem, SearchBar, FloatingControls
│   ├── organisms/     # Composed sections
│   └── pages/         # Full page layouts
├── data/              # Station, hotel, pricing, and track-geometry JSON
├── services/          # Routing, postcode lookup, hotel API
├── utils/             # Distance calc, pricing, map helpers
├── hooks/             # Custom React hooks
├── types/             # TypeScript interfaces
└── stories/           # Storybook stories

Documentation

User Guide — detailed walkthrough of every feature with screenshots.

Scripts

npm run dev              # Vite dev server
npm run build            # Production build
npm run lint             # ESLint
npm run typecheck        # TypeScript checking
npm run storybook        # Storybook on port 6006
npm run build-storybook  # Static Storybook export

Licence

Private — all rights reserved.