Where Words Meet Their Match

The Spark of Inspiration

We envisioned a digital arena that captures the raw intensity of human expression—somewhere between the passionate debates of Reddit, the electric energy of live television, and the high-stakes drama of competitive gaming. Our goal was ambitious: create a platform where anyone can claim their moment in the spotlight, but only the most compelling voices survive the judgment of a live audience.

Enter Soapbox Rumble—a revolutionary multiplayer experience that transforms spoken opinions into thrilling 60-second battles for survival.

Identifying the Gap

While social media platforms excel at text-based discourse and video calls facilitate conversation, no existing platform gamifies live spoken expression with real-time audience participation. We recognized an opportunity to create:

  • A dynamic stage for authentic self-expression that goes beyond typed comments
  • Real-time democratic feedback that shapes the experience as it unfolds
  • A merit-based system where compelling content rises and weak performances face immediate consequences

The Soapbox Rumble Experience

Our real-time multiplayer web application creates an interactive arena where participants can join as either speakers or audience members. The core experience revolves around 60-second timed presentations where speakers must captivate their audience or face elimination through our signature "Cringe Meter" system.

Successful speakers earn their place in the Hall of Howls—our prestigious archive where the most compelling rants are preserved, celebrated, and shared with the community.

Technical Architecture & Features

Speaker Experience

  • Seamless voice capture using advanced browser microphone APIs
  • Visual countdown system featuring an animated progress ring
  • 60-second time limit that creates urgency and focus
  • Live audience feedback displayed in real-time

Audience Participation

  • Expressive reaction system with carefully curated emoji options (Tomato, Cringe, Upvote, Explain)
  • Real-time voting tallies that update instantaneously
  • Democratic influence over speaker survival through the Cringe Meter

The Cringe Meter Innovation

Our proprietary ejection system monitors audience sentiment and automatically removes speakers when negative reactions reach critical mass. Failed attempts trigger delightfully animated exits featuring trapdoors, explosions, and spotlight fadeouts powered by Lottie animations.

Hall of Howls Archive

Successfully completed rants are immortalized with:

  • Complete audio preservation with timestamp metadata
  • Automatic transcription for accessibility and searchability
  • Speaker attribution with nickname and avatar
  • Public sharing capabilities through unique permalinks
  • Searchable interface for discovering past performances

Flexible Participation Options

  • Text-to-speech integration via ElevenLabs for those preferring written expression
  • Anonymous participation with custom nicknames and avatars
  • Google Authentication for users wanting to build their reputation
  • Intelligent queue management with visual status indicators

Moderation & Safety

  • Administrative oversight with speaker management capabilities
  • Content flagging system to maintain community standards
  • Rate limiting to prevent abuse
  • Session integrity protection against disruptions

Technical Implementation

Real-Time Infrastructure

  • Supabase Realtime for instantaneous cross-client synchronization
  • WebRTC MediaRecorder API for high-quality audio capture
  • Advanced transcription via Whisper API and AssemblyAI
  • Cloud storage through Supabase for audio file management
  • AI-powered text-to-speech using ElevenLabs for enhanced accessibility

User Experience Design

  • Sophisticated dark theme optimized for extended viewing
  • Stage-inspired layout that emphasizes the performance aspect
  • Responsive design ensuring seamless mobile and desktop experiences
  • Intuitive reaction panel for effortless audience participation
  • Dynamic visual feedback including the signature glowing progress ring
  • Engaging archive interface with waveform visualizations and transcript cards

Engineering Challenges & Solutions

Millisecond-Precision Synchronization

Achieving real-time consistency across speaker timers, audience reactions, and the Cringe Meter required sophisticated state management and conflict resolution strategies.

Cross-Platform Audio Excellence

Browser microphone implementations vary significantly across platforms. We developed comprehensive fallback systems and permission handling to ensure universal compatibility.

Intelligent Transcription Pipeline

Raw audio transcription required extensive post-processing to deliver readable, contextually accurate text suitable for archival and sharing.

Balanced Gamification

Fine-tuning the Cringe Meter sensitivity proved crucial—we needed to maintain fairness while preserving the excitement of potential elimination.

Bulletproof Session Management

Robust error handling and recovery mechanisms ensure seamless experiences even during network interruptions or browser crashes.

Key Learnings & Innovations

Our development journey yielded valuable insights into:

  • Scalable multiplayer architecture with sophisticated real-time voting mechanisms
  • Voice-first platform design leveraging cutting-edge browser capabilities
  • Advanced pub/sub implementation using Supabase's real-time features
  • Performance-optimized UI development with React, Tailwind CSS, and Framer Motion
  • Strategic API integration balancing functionality with cost-effectiveness

Deployment Architecture

  • Frontend: React (Vite) with Tailwind CSS, deployed on Vercel
  • Backend Services: Supabase ecosystem (Authentication, Real-time, Storage, Database)
  • AI Integration: Whisper API for transcription, ElevenLabs for text-to-speech
  • Visual Effects: LottieFiles for premium animations
  • Security & Performance: Vercel routing with comprehensive environment protection

Vision & Impact

Soapbox Rumble represents more than a hackathon achievement—it's a bold reimagining of digital discourse. We've created a unique space where authentic expression meets community judgment, where compelling voices are amplified and weak content faces immediate accountability.

In a world saturated with passive content consumption, we've built an arena that demands participation, rewards authenticity, and celebrates the messy, beautiful chaos of human expression. Every session is unpredictable, every speaker faces real stakes, and every audience member holds genuine power.

This is democracy in action, entertainment redefined, and community building at its most dynamic. Welcome to the future of interactive expression—loud, unfiltered, and unapologetically real.

Built With

  • assemblyai
  • database
  • date-fns
  • elevenlabs-api
  • framer-motion
  • github
  • lottiefiles
  • mediarecorder-api
  • mic-recorder-to-mp3
  • preline
  • react
  • react-icons
  • realtime
  • storage)
  • supabase-(auth
  • supabase-edge-functions
  • tailwind-css
  • uuid
  • vercel
  • whisper-api
Share this project:

Updates