Metro Map

Who doesn't like WebSockets and the Metro?

Overview

I have always wondered what the live metro map of Brussels looks like, since the official live trackers only show one line in one direction.

This project serves as an introduction to JavaScript for me. I realised I need JavaScript to make interactive web experiences and thought it was a great project to learn interacting with the DOM.

Goals

Learning Objectives

  • Learn JavaScript
  • Working with WebSockets
  • Accessing and using third-party APIs

Practical Objectives

  • A live, real-time metro map of Brussels

Implementation Details

Backend Architecture

Built with the Bun framework. Connections to the live map are imlemented with WebSockets.

Frontend Design

Minimal frontend design is provided by direct DOM manipulation, changing the rendered SVG, based on information received through WebSockets.

Deployment Infrastructure

Deployment on a VPS served with a Bun HTTP server and routed with NGINX.

View on GitHub
Visit Deployment

Development Progress

Status

In Progress

Start Date

2025-10-06

Features

Official API integration Completed
Live updated metro map Completed
Flyout for metro timetable In Progress

Technology Stack

Languages

Backend

DevOps

Exploratory Avenues

Project Enhancements

  • Manage API fetches based on WebSocket connections.
  • Implement zoom and pan on the map.
  • Live toasts for metro notifications.

Follow-up Projects

  • Create a picture galery for metro stations.