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.