ryantpham.com
Full-Stack Software Engineering · Graduate Capstone (CPSC 597)

Naval Intelligence PlatformReal-Time Maritime Situational Awareness

Full-stack fleet-monitoring system providing real-time situational awareness of vessels via Automated Identification System (AIS).

1. Overview

Maritime operations centers depend on aggregating live vessel positions and environmental conditions into a single situational picture — but commercial platforms like MarineTraffic are closed-source and expensive, while building from raw feeds means stitching together unstable government APIs. The Naval Intelligence Platform solves this with a focused, engineering-rigorous full-stack build: live AIS vessel tracking, marine & atmospheric weather overlays, system health monitoring, and fleet analytics — a surveillance interface modeled on what defense contractors use for maritime operations.

Graduate capstone project (CPSC 597), Cal State Fullerton — Ryan Pham, advised by Ning Chen, Ph.D.

Built solo across four milestones — core vessel tracking, environmental intelligence, system operations monitoring, and fleet analytics — all completed on schedule. Beyond the coursework, this project is a direct demonstration of the real-time data processing, multi-source API integration, and event-driven architecture patterns used in fleet health monitoring and systems engineering roles at defense contractors.

2. Architecture

A client-server architecture built around a persistent WebSocket connection and a polling REST layer — the backend maintains live upstream connections so the frontend never has to.

System architecture diagram: external data sources (CARTO, Open-Meteo, AISStream.io) flow into a Node.js/Express backend, which the React/Leaflet frontend polls.
External sources → Node.js/Express backend (WebSocket ingest, REST + cache) → React/Leaflet frontend.

Live Ingest, Polled Delivery

The backend holds a persistent WebSocket to AISStream.io and merges every position update into an in-memory vessel registry keyed by MMSI. The frontend polls a REST endpoint every 30 seconds — simple, stateless, and horizontally scalable, since the backend never has to track connected browser clients.

Differential Marker Updates

Each poll diffs the new vessel snapshot against existing map markers by MMSI — updating position/heading in place, removing vessels that dropped off, and only creating new markers for new arrivals. This eliminates the flicker and layout thrashing of clearing and redrawing ~1,400 markers every cycle.

Lazy, Cached Weather Fetching

Weather data is fetched server-side and cached for one hour, with wave and wind requests run in parallel via Promise.allSettled so either can fail independently. The client only requests it the first time a weather layer is toggled on — multiple users share one cached fetch, and server-to-server calls sidestep CORS entirely.

Resilient by Design

Automatic WebSocket reconnection on unexpected drops, a guarded startup that prevents duplicate connections, and a 150-entry circular log buffer feeding a live system-health dashboard — the same operational visibility patterns used in real command-center monitoring tools.

3. Platform Showcase

Four milestones, one command interface — live vessel tracking, environmental overlays, operational health monitoring, and fleet-wide analytics.

GitHub commit comment: interactive Leaflet map with light and dark tile modes, first milestone work product.
Milestone 1 — Base Map React + Leaflet geographical map with a live light/dark mode toggle.
GitHub commit comment: Node.js/Express WebSocket server ingesting AISStream.io data, with a live vessel data table showing MMSI, ship name, coordinates, speed, and heading.
Live AIS Ingestion WebSocket feed from AISStream.io, REST endpoint, sortable vessel data table with CSV export.
GitHub commit comment: Filter Vessels panel with vessel category, movement status, speed range, destination, navigational status, and region controls.
Milestone 2 — Fleet Filtering Six independent filter controls, persisted across refresh cycles.
GitHub commit comment: real-time weather overlays showing a wave height heatmap and a wind direction vector map.
Weather Overlays Wave height heatmap and wind direction vectors from Open-Meteo, cached server-side.
GitHub commit comment: System Information dashboard showing AIS Stream and Weather API status, live vessel count by category, and a live log feed.
Milestone 3 — System Health Live API status, vessel counts by category, and a real-time log feed.
GitHub commit comment: Fleet Analytics dashboard with overview cards and bar charts for fleet composition, speed distribution, navigational status, and regional distribution.
Fleet Analytics Ten live-computed statistics: composition, speed distribution, nav-status breakdown, regional spread.

4. Document Preview

The full 32-page final report, rendered as a scrolling two-page spread — scroll within the frame to read the whole document, or jump to the full PDF downloads below.

Naval Intelligence Platform — Final Report
32 pages
Loading document…

5. Full Documents

The complete graduate capstone deliverables: the full written report (architecture, implementation, and lessons learned across all four milestones) and the final presentation deck.