REACT 19 • AUDIO WAVEFORMS • SUPABASE
Kokeba: Voice Vocals & Vent Sharing Platform
A short-form, voice-first social web application designed for raw vocal expression, vent sharing, and spoken-word interactions with real-time waveform visualization and Google Gemini AI processing.
1. The Vision: Bringing Raw Spoken Voice to Social Media
Modern social media is saturated with hyper-edited visual content and text-heavy feeds. Kokeba was created as an antidote—a dedicated space for honest, unfiltered audio expression. Users record short voice clips, spoken reflections, vocal melodies, or daily vents, fostering intimacy and empathy that text comments cannot capture.
2. Architecture & Audio Processing
The frontend is engineered as a responsive, mobile-first Single Page Application with continuous vertical audio scrolling:
Data Pipeline:
MediaRecorder Web API → Blob Generation → Supabase Audio Bucket Upload → Wavesurfer.js Peak Extraction → Interactive Waveform Player
Key Engineering Features:
- Real-Time Waveform Rendering: Uses
wavesurfer.jsto generate interactive visual sound waves for each post, allowing users to scrub through audio tracks seamlessly. - Google Gemini AI Integration: Integrates
@google/genaito analyze spoken audio themes, provide transcription assists, and generate intelligent content tagging. - Fluid Gestures & Transitions: Leveraged
motion(Framer Motion) for smooth swipe gestures, modal dialogs, and audio player state changes. - Supabase Backend Security: Comprehensive Row Level Security (RLS) policies govern private feeds, user followers, comments, and storage access tokens.
3. Technical Challenges & Solutions
Challenge A: Audio Playback Collision in Infinite Feeds
When users scroll quickly through an audio feed, multiple audio streams could potentially play concurrently, causing overwhelming sound overlap.
Solution:
Built a centralized React Audio Context provider that maintains a single active playback channel. As soon as a user clicks play on any clip (or when a new card scrolls into full viewport view), all previous audio instances are immediately paused and memory-released.
Challenge B: Mobile Web Browser Audio Codec Fragmentation
Different mobile browsers (iOS Safari vs Android Chrome) handle MediaRecorder container formats differently (e.g. audio/webm vs audio/mp4).
Solution:
Configured MIME-type detection with graceful fallbacks to capture cross-platform compatible audio containers before streaming blobs to Supabase Storage.
4. Results & Live Availability
Kokeba is deployed and live at kokeba.vercel.app, serving as an active showcase of modern full-stack TypeScript, audio engineering, and reactive design.