HeartWave
A real-time collaborative listening platform that enables multiple users to watch and listen to YouTube content together through synchronized playback, shared queues, live chat, and room-based collaboration.
Screenshots
Key Metrics
6-Character Invite Codes
Server-Authoritative
Synchronized Playback · Live Chat
Stripe Subscriptions
Socket.io
Clerk
Overview
HeartWave is a collaborative media platform that allows groups of users to listen to and watch YouTube content together in synchronized rooms. Users can create rooms, invite participants, manage shared queues, chat in real time, and experience synchronized playback regardless of location. :contentReference[oaicite:0]{index=0}
Problem
Traditional media consumption is often isolated, making it difficult for friends and communities to enjoy content together remotely. Building such a platform requires solving complex synchronization challenges caused by network latency and distributed client state.
Solution
Built a server-authoritative real-time platform that synchronizes playback across multiple users using dead-reckoning, drift correction algorithms, shared queues, and WebSocket-based communication to deliver a collaborative listening experience.
Architecture
Client-server architecture powered by React, Socket.io, Express, and MongoDB. Playback state is maintained on the server, synchronized through WebSocket events, and corrected using drift-detection logic. Authentication is managed by Clerk, while Stripe handles subscription billing and lifecycle events. :contentReference[oaicite:1]{index=1}
Challenges
- Designing synchronized playback without constant seeking.
- Managing server-authoritative room state.
- Implementing drift correction algorithms.
- Handling Socket.io reconnection and user recovery.
- Integrating Stripe webhook verification.
- Managing YouTube IFrame lifecycle events.
- Coordinating authentication between Clerk and Express.
Lessons Learned
- Distributed state synchronization.
- Real-time application architecture.
- WebSocket communication patterns.
- Server-authoritative system design.
- Stripe billing workflows.
- Authentication and authorization using Clerk.
- Webhook verification and raw-body handling.
- Scalability tradeoffs in real-time systems.
Future Improvements
- Backend YouTube search proxy.
- Redis-based room state management.
- Zod schema validation.
- API rate limiting.
- Enhanced host security controls.
- Real WebRTC voice communication.
- Host migration support.
- Docker deployment.
- CI/CD pipelines.
- Mobile PWA support.
- Spotify playlist integration.
- Analytics dashboard.