🌐 GlobeCast: The Real-Time World Radio Experience

Inspiration

The world is vast, and so are the voices within it. I wanted to create something that would allow anyone, anywhere, to tap into the pulse of the planet—through live radio. Inspired by the nostalgic magic of tuning across radio waves, I envisioned a modern, immersive version: a 3D globe interface where users could listen to real-time radio stations from every country, with one tap.

What pushed this idea forward was the desire to break language barriers and encourage cultural curiosity. I wanted people to not just hear foreign voices—but to understand them, through real-time translation and transcriptions.

What I Learned

Building this project taught me several technical and UX principles:

• How to integrate a massive, open-source API (Radio Browser) for global data
• Optimizing frontend rendering for performance, especially when plotting thousands of pins in real-time on a 3D globe
• Working with WebGL and 3D libraries like react-globe.gl and Three.js
• Implementing lazy loading and on-demand stream fetching to reduce latency
• How to ensure cross-device UI fluidity (responsive design for desktop and mobile)
• Balancing minimal UI with maximum functionality

How I Built It

• Frontend: React + TypeScript, TailwindCSS for styling, react-globe.gl for the interactive globe
• APIs:
  
  • Station metadata from Radio Browser API
    
  • Translation (planned): Whisper API or Web Speech API for live transcription
    
• Architecture:
  • All stations (~5000+) are fetched at load and plotted instantly
  • Stream audio is only fetched when the user clicks a station
  • Each clicked station triggers on-demand detail retrieval using its UUID
  • Globe, audio, translation, and future chat systems are modular and decoupled

Challenges

• Performance Bottlenecks: Rendering thousands of radio stations with real-time interaction required careful memory and render-cycle optimization
• CORS & Stream Failures: Some radio stations had invalid or geo-blocked URLs, which had to be filtered
• Translation: Implementing real-time transcription and translation with speed and accuracy is challenging and still evolving
• Maintaining Minimalism: It was a constant balance between adding rich features and keeping the UI globally accessible and fast

Future Plans

• Integrate a real-time group chat for each station
• Add auto-detection of local stations based on user location
• Implement Whisper-based transcription and multilingual translation toggle
• Deploy with global CDN optimization for lowest latency

// Sample station fetch
fetch('https://de1.api.radio-browser.info/json/stations?limit=5000&hidebroken=true')
  .then(res => res.json())
  .then(data => plotStationsOnGlobe(data));

Built With

• bolt.new