Ahmed Codes

Building a Real-Time Freight Train Tracker with MERN and Socket.IO

By Ahmed Sulaimon • 2024-12-07

In this project, I led the development of a real-time train tracking application using the MERN stack, Leaflet.js, and Socket.IO. The goal was to provide users with live updates of train journeys on a map of the UK rail network, allowing them to search, view, and interact with rich data such as journey status, delays, and timing breakdowns.

Tech Stack Overview

  • MongoDB – Storing structured API responses for train routes and history
  • Express.js – API middleware for routing and authentication
  • React – Frontend UI for user interaction and dynamic state updates
  • Node.js – Backend runtime to power the server
  • Socket.IO – Real-time communication for live train location updates
  • Leaflet.js – Geospatial visualization on an interactive map
  • Train Data API – External API providing UK freight train schedules and live data

Core Features

  • Searchable Map Interface – Users can search by location (TIPLOC codes)
  • Live Train Tracking – Polylines represent each train’s journey in real-time
  • Colour-Coded Statuses – Blue (Active), Green (Terminated), Red (Cancelled)
  • Train Journey Popups – Timeline data displayed with headers
  • Real-Time Updates – Map updates without requiring a refresh
  • Accessibility First – Lighthouse scores pushed to 100%

The Development Process

We followed an Agile methodology with Kanban for planning and weekly stand-ups. As Scrum Master, I was responsible for:

  • Writing project specifications and user stories
  • Leading API integration and environment variable security
  • Implementing core features like polyline rendering and search filters

We also used the SHU development process, applying techniques like:

  • Persona creation
  • MoSCoW prioritization
  • Iterative sprint cycles with client feedback

Technical Highlights

1. Integrating Leaflet.js with MERN

We used Leaflet.js to visualize live train routes on a schematic map. Real-time data was streamed from the backend using Socket.IO and rendered using polylines.

L.polyline(trainCoords, {
  color: getPolylineColor(train.status)
}).addTo(map);

2. Secure API Access with Environment Variables

API keys were managed securely using .env files and ignored in Git using .gitignore, preventing accidental exposure.

3. Data Validation & UI Feedback

Robust handling of inconsistent API responses (e.g., missing fields) ensured the app remained stable. Popups were dynamically populated and adapted for incomplete journeys.

Feedback & Iteration

During the client demonstration, the following areas for improvement were identified:

  • Render only one train at a time per location to reduce visual clutter
  • Move the timeline into a sidebar instead of a popup
  • Enhance search by allowing filtering by date, origin, operator, or head code
  • Add a legend for polyline color meanings

We created a post-demo action plan to address these items in the next sprint.

What I’d Improve

If I were to approach this again, I’d:

  • Add a proper user feedback system for live support
  • Integrate more analytics for admin insights on usage patterns
  • Automate testing using tools like Jest or Cypress
  • Consider serverless architecture for scaling real-time features more efficiently

What I Learned

This project helped sharpen both my technical and soft skills:

  • Gained hands-on experience with Socket.IO and Leaflet.js
  • Learned how to securely handle external APIs
  • Enhanced my project leadership and communication skills
  • Understood how to balance real-time UI/UX with performance

Conclusion

The freight train tracker was a rich, collaborative project that tackled real-world challenges—like live data handling, security, and responsive UI. By combining modern tools and structured agile development, we delivered a functional and well-received application.