Ship tracking platform
Client workLive vessel data on a 3D model: decks, cameras and nodes
- Role
- Engineer: 3D interface, dashboard, the GraphQL layer and telemetry intake
- Client
- under NDA
- Period
- 09.2021 — 09.2022, Godel Technologies Europe
- Stack
- React, Redux, TanStack Query, GraphQL, Apollo Client, TypeScript, Node.js, TimescaleDB, UDP, Docker, Jest, Playwright, GitHub Actions
The problem
A vessel sends telemetry continuously over UDP, with no acknowledgements and nothing for the client to request. That stream has to be taken in, stored, and shown to an operator so they can see the state of a particular node on a particular deck.
About the project
A real-time fleet monitoring system. Telemetry leaves the vessel over UDP: a Node backend parses the stream into TimescaleDB, and the front end reads it through GraphQL and Apollo Client. The interface is built around a 3D model of the ship assembled from the client's own models, switching between decks, cameras and nodes where they physically sit, readings from every available sensor. Alongside it, a map of the whole fleet and a dashboard for each vessel.
How it works
Outlined boxes are the parts I built
What I did
- —The 3D model of the ship as the primary interface: switching between decks, cameras on the decks that have them, readings from every available node.
- —Telemetry over UDP: the backend parses the stream into TimescaleDB and serves the front end over GraphQL, rather than a request per datagram.
- —A continuous feed from 50+ vessels at once, with every ship's position on a shared map.
- —Video from the onboard cameras viewed straight from the model, plus a dashboard for an individual vessel.
- —Apollo Client with a normalised cache, so a constant stream of updates did not repaint the whole interface.