Overview Applications Tech Stack Gallery GitHub
Local-First  ·  Node.js  ·  Gemini AI  ·  Three.js

OceanOS Platform

A full-stack, real-time ocean health monitoring and conservation management system. Explore integrated dashboards, mobile tools, and 3D simulations.

Launch Applications View Source
7 Interactive Modules
5s Telemetry Update
0 Cloud Dependencies
AI Gemini Analytics
SCROLL
01 // The System

Comprehensive Marine Oversight.

OceanOS is an integrated, full-stack marine conservation system bringing together real-time telemetry, predictive simulation, and operational incentives into a unified workspace.

Powered by a local-first architecture, the platform pairs an Express.js backend with an in-memory sql.js database. Sensor telemetry and cleanup logs are broadcast in real-time using a WebSockets framework, enabling instantaneous client synchronization.

For Vercel production deployment, OceanOS utilizes a client-side **DB & WS Interceptor** that emulates backend operations directly within the browser, delivering complete, zero-dependency interactivity across all applications.

1

Unified 3D Simulation

Real-time rendering of ocean cleanup booms, autonomous drone patrols, and river plastics using WebGL.

2

Admin Command Center

Centralized monitoring dashboard displaying sensor charts, buoy pollution levels, and illegal vessel alerts.

3

FisherGuard App

A mobile tool designed for maritime workers to return nets, log plastic collection, and earn reward credits.

4

Google Gemini AI

Advanced LLM integration for analyzing marine debris types, identifying catches, and generating containment advice.

02 // Interactive Applications

Launch Modules.

Run any component of the OceanOS platform. Telemetry and records sync in real-time across tabs.

3D World
Three.js WebGL

Unified 3D Simulation

Visualize all operations in a single, connected 3D ocean world. Watch collection boats patrol, factories discharge pollution, and drones monitor MPA zones.

Launch Simulation
Control Room
WebSockets Chart.js

Admin Command Center

Analyze telemetry data through an administrative dashboard. Monitor live sensor feeds, track drone detection histories, and interact with Gemini AI.

Launch Command Center
Mobile Web
HTML5 Canvas REST API

FisherGuard Mobile

Sustainable fishing helper. Access live maps showing zone fish densities, report derelict plastic fishing nets, and identify catches using Gemini AI.

Launch FisherGuard
3D Simulation
Three.js AI Detection

Autonomous Drone Patrol

A standalone simulation showcasing autonomous UAV flight paths. Scans the water for plastic debris, logs marine life, and detects MPA fishing violations.

Launch Drone Patrol
3D Simulation
Three.js Alert Systems

Chemical Spill & Buoy Monitor

Simulates industrial shore outflows. Watch toxic dispersion plumes trigger localized warning buoys and send alarms to the command center.

Launch Spill Monitor
Vite Project
TypeScript Three.js

River Plastic Interceptor

Intercept plastic waste at the river source. Spawn floating plastic bottles, monitor collector net capacities, and adjust flow velocities in a 3D interface.

Launch Interceptor
Vite Project
TypeScript Three.js

Ocean Boom Cleanup

Simulates large-scale active recovery. Watch U-shaped boom structures harvest current-swept plastics, loaded into recycling transport vessels.

Launch Boom Cleanup
03 // Technology Stack

Engineered for Performance.

A modern web stack chosen for real-time interactivity, browser physics execution, and clean visuals.

Node.js + Express

Robust backend server providing REST APIs, file uploads for debris analysis, and monorepo static serving.

WebSockets (ws)

Bidirectional communication channel syncing sensor values and notification alerts across tabs instantly.

Three.js & WebGL

GPU-accelerated graphics engines driving realistic 3D waves, moving ships, and flowing rivers.

sql.js (WebAssembly)

SQLite database compiled to WebAssembly. Enables local database read/write queries without database setups.

Google Gemini AI

Gemini Flash 2.5 API integration performing image debris diagnostics and powering the operator assistant.

Vite & TypeScript

Modern tooling setup compiling TS files, organizing resources, and hot-reloading code fast during development.