ShareHeart.io
Real-time video wall platform for communities to collect, curate, and display video testimonies with instant synchronization.
What We Built
ShareHeart enables organizations to collect video stories from their community through a simple link. The platform handles the entire workflow: AI-assisted collection page generation, real-time video submission, approval workflows, and a synchronized display wall.
Built on Supabase realtime channels for low-latency updates, Node.js workers for automation, and optimized rendering pipelines to maintain stability under high concurrent load.
Campaign Management
Comprehensive interface for managing video campaigns with real-time updates. Organize collections, review submissions, and curate content with intuitive controls designed for speed and clarity.
Contextual Bottom Sheet
Adaptive bottom sheet component that provides contextual information and actions. Smooth animations and intuitive interactions guide users through the testimony capture process without disrupting workflow.
Video Recording Interface
Intuitive recording interface that guides users through the testimony capture process. Features script display, real-time preview, and seamless upload functionality for a smooth user experience.
Performance Metrics
Built for scale and reliability
Real-time Video Management
Comprehensive dashboard for managing collections, reviewing submissions, and curating content with an intuitive interface designed for speed and clarity.
The management interface provides real-time updates on video submissions, allowing administrators to review, approve, and organize content efficiently.
Built with performance in mind, the dashboard handles large volumes of submissions while maintaining a smooth, responsive user experience.
How the Submissions tab works
Approved stories appear on your wall, and Featured ones get highlighted for your team.
Sarah Chen
Marcus Johnson
Emily Rodriguez
David Kim
Jessica Wang
Alex Thompson
Question Generation
Intelligent interface for generating engaging prompts using AI. Helps creators craft compelling questions that inspire authentic video testimonies.
The AI-powered question generator helps creators craft engaging prompts that inspire authentic storytelling.
Simply describe your campaign goals, and the system generates relevant questions tailored to your community.
Video Recording
Intuitive recording interface that guides users through the testimony capture process. Clean, focused design reduces friction and encourages authentic storytelling.
The recording interface provides a distraction-free environment for capturing authentic video testimonies.
BottomSheet
Scroll-controlled bottom sheet that reveals campaign questions and instructions. Opens and closes based on scroll position, creating an immersive storytelling experience.
The bottom sheet component provides contextual information as users scroll through the page. It dynamically adjusts its position based on scroll progress, creating a smooth, engaging interaction.
Designed for mobile-first experiences with drag-to-close functionality and smooth spring animations.
Scroll to see bottom sheet
What's your story?
How you might answer
I've been working on ShareHeart for the past year, building a platform that helps communities collect and share video testimonies in real-time. It's been an incredible journey learning about real-time synchronization and user experience design.
Key Components
Interactive components built for real-time experiences
VideoWallHero
Main display wall component that renders testimonies in real-time with Supabase channel synchronization. Handles hundreds of concurrent viewers with sub-200ms latency.
Video Stories
Watch how our community answered:
What's your story?
📹 Share your own answer below
ShareDialog
Modal component for sharing collection links with copy-to-clipboard, QR code generation, and embed code functionality. Supports native share API for mobile devices.
Featured Stories Carousel
This is the production carousel from our admin app—built on real customer footage, hover activated controls, and status-aware badges so teams can curate their top stories in seconds.
Featured Story One
Curated highlight from our latest collection
Technical Implementation
Built on a foundation of real-time infrastructure and event-driven architecture.
ShareHeart leverages Supabase's realtime channels to maintain sub-200ms synchronization across hundreds of concurrent viewers. The architecture prioritizes reliability and performance at scale.
Node.js workers handle automation workflows, processing video submissions, generating AI prompts, and managing approval queues. This separation of concerns ensures the main application remains responsive.
Optimized rendering pipelines and intelligent caching strategies maintain stability under high concurrent load, proving that real-time platforms can be both powerful and performant.
Architecture
- •Supabase realtime channels for sub-200ms synchronization
- •Node.js workers orchestrate automation workflows
- •Optimized rendering and caching for stability
Features
- •AI-assisted collection page generation
- •Real-time video submission and processing
- •Advanced approval workflows with bulk actions
Reflection
Lessons learned from building at scale.
Building ShareHeart challenged our understanding of real-time synchronization at scale. Translating community engagement workflows into a technical system required balancing simplicity for end users with the complexity of maintaining state across hundreds of concurrent connections.
The project taught us that real-time platforms can be engineered for both reliability and user experience—proving that technical infrastructure and community storytelling can coexist seamlessly.
Building ShareHeart challenged our understanding of real-time synchronization at scale. Translating community engagement workflows into a technical system required balancing simplicity for end users with the complexity of maintaining state across hundreds of concurrent connections.
The project taught us that real-time platforms can be engineered for both reliability and user experience—proving that technical infrastructure and community storytelling can coexist seamlessly.
"Technical infrastructure and community storytelling can coexist seamlessly."