← All projects

03 · Realtime · WebGL

Soul-Voyage

Real-time geospatial web experience

  • React
  • Firebase
  • WebSockets
  • WebGL Earth
  • Google OAuth 2.0

Overview

A real-time web application that combines live location data with an interactive 3D globe, updating every connected session the moment something changes.

The problem

Location sharing is usually a flat map that refreshes now and then. It doesn't feel shared or alive, and updates from one person don't reach everyone else instantly.

The solution

Soul-Voyage turns live location updates into a shared, interactive experience on a WebGL globe. Events flow over WebSockets, so every authenticated session sees changes as they happen.

Key features

01

Interactive 3D globe

Live locations rendered on a WebGL Earth you can spin and zoom.

02

Real-time updates

WebSocket events push changes to every open session instantly — no refreshing.

03

Cross-session sync

Event-driven synchronisation keeps every user's view consistent with shared, Firebase-backed state.

04

Secure sign-in

Google OAuth 2.0 authentication, so sessions belong to real, signed-in users.

How it's built

  1. FrontendReact app rendering the WebGL Earth globe.
  2. RealtimeWebSocket events for instant, cross-session updates.
  3. StateFirebase-backed shared state as the source of truth.
  4. AuthGoogle OAuth 2.0 sign-in.

Challenges

Keeping every view in sync

Several sessions update the same shared state, so events had to be ordered and applied consistently everywhere.

Smooth 3D in the browser

Rendering a live globe with WebGL while data streams in meant keeping updates light enough to stay smooth.

Outcome

A live, shared geographic experience in the browser — real-time data, a 3D globe, and authenticated sessions working together.