A Blazor WebAssembly app showing real-time Helsinki city bike station availability, trend tracking, cycle lane overlay, and historical trip data.
Live: https://tmikuoste.github.io/HslBikeApp/
- Real-time bike station availability
- Interactive Leaflet.js map with colour-coded station markers
- Availability trend arrows (bikes rented/returned since last snapshot)
- Change indicators showing bikes rented/returned between refreshes
- Station detail panel with popular trip destinations
- Hourly availability graph showing typical bike counts throughout the day
- Helsinki cycle lane overlay from open WFS data
- Dark mode support (follows OS preference)
- Auto-refresh every 30 seconds + manual refresh
- Blazor WebAssembly — standalone, hosted as static files on GitHub Pages
- Leaflet.js — raw JS interop for map rendering (OSM tiles)
- HslBikeDataAggregator — REST backend (separate repo); provides stations, snapshots, hourly availability profiles, and popular destinations
- GitHub Actions — CI/CD
All data flows through a single configurable REST backend (AggregatorBaseUrl in wwwroot/appsettings.json). The frontend never calls upstream data sources directly. See docs/adr/001-azure-functions-backend.md for backend rationale.
Page load ──► REST backend (AggregatorBaseUrl)
├─ /api/stations ─► live availability
├─ /api/snapshots ─► trend arrows
├─ /api/stations/{id}/statistics ─► hourly profile + popular destinations
└─ /api/open-data ─► open data sources (e.g. venue fill levels)
- Clone the repo
- Optionally override
AggregatorBaseUrlfor local development by creatingsrc/HslBikeApp/wwwroot/appsettings.Development.json:{ "AggregatorBaseUrl": "https://your-local-or-dev-backend" }appsettings.Development.jsonis gitignored and overrides values fromappsettings.json. - Run locally:
dotnet run --project src/HslBikeApp
- Run tests:
dotnet test
HSL city bikes are seasonal. Outside the operating season, the upstream live station feed can legitimately return zero active stations. When that happens, the app shows an explicit status message instead of leaving the map blank without explanation.
- Live station data is sourced from HSL open data via the backend aggregator, available under CC BY 4.0. The app attributes the data to HSL and shows the live retrieval timestamp in the UI.
- Map tiles and map data come from OpenStreetMap. OpenStreetMap data is licensed under ODbL and is attributed in the map UI.
The source code in this repository is licensed under the MIT License.
src/HslBikeApp/ — Blazor WASM app
tests/HslBikeApp.Tests/ — xUnit + bUnit tests
.github/workflows/ — CI/CD
docs/adr/ — Architecture Decision Records