Live Streaming Demo

A real-time interactive streaming platform with viewer and admin interfaces. Built as a portfolio flagship project showcasing modern web technologies and clean architecture.

✨ Features

Viewer Interface (/viewer)

• HLS Video Player - Stream playback with controls
• Live Reactions - 6 emoji reactions (❤️ 🎉 👏 🔥 💎 ✨) with floating animations
• Interactive Polls - Real-time voting with animated results
• System Messages - Auto-dismissing announcement banners
• Lower Third Overlay - Video overlay for speaker info/announcements
• Viewer Count - Live viewer statistics

Admin Panel (/admin)

• Stream Controls - Start/stop stream broadcasting
• Poll Management - Create polls with 2-4 options
• Message Broadcasting - Send system-wide announcements
• Overlay Controls - Toggle lower third with custom text
• Reaction Testing - Test each reaction emoji individually
• Cross-Tab Sync - Changes instantly reflect across all open tabs

🛠️ Tech Stack

• Framework: Next.js 16 (App Router) + TypeScript
• Styling: TailwindCSS v4 with glassmorphism effects
• State Management: Zustand with localStorage sync
• Video: HLS.js for adaptive streaming
• Animations: Framer Motion
• Design: Subtle purple color scheme with premium aesthetics (Figma Make plugin)
• Workflow: ChatGPT - wireframe exploration, Figma Make - design, Cursor - web development

🚀 Getting Started

Installation

npm install

Development

npm run dev

Open http://localhost:3000 to see the home page.

Routes

• / - Landing page with navigation
• /viewer - Viewer interface (audience view)
• /admin - Admin control panel (broadcaster view)

Testing Cross-Tab Sync

1. Open /admin in one browser tab
2. Open /viewer in another tab (or click "Open Viewer →")
3. Make changes in admin (start stream, create poll, etc.)
4. Watch them instantly appear in the viewer tab

📁 Project Structure

/app
  /viewer           # Viewer route & page
  /admin            # Admin route & page
/components
  /viewer           # Viewer-specific components
  /admin            # Admin-specific components
  /ui               # Shared UI components (future)
/store              # Zustand state management
/lib                # Utility functions

🎯 MVP Status

✅ Complete - All core features functional

• Video playback with HLS
• Real-time reactions with animations
• Interactive polls with voting
• System messages and overlays
• Cross-tab synchronization
• Responsive design (mobile-first)

🚧 Future Enhancements

Phase 1: User Experience

• Chat System - Real-time viewer chat with moderation
• Viewer Analytics - Detailed engagement metrics dashboard
• Multiple Streams - Support for multiple concurrent streams
• Stream Recording - Save and replay past streams

Phase 2: Advanced Features

• Product Cards - In-stream product showcases with buy links
• Speaker Cards - Display guest information during stream
• Timed Overlays - Schedule overlays to appear automatically
• Emoji Reactions History - View reaction trends and counts

Phase 3: Backend Integration

• Supabase Realtime - Replace localStorage with Supabase channels
• User Authentication - Viewer and admin login
• Database Persistence - Store polls, messages, and analytics
• Webhooks - Integrate with external services (Stripe, Mailchimp, etc.)

Phase 4: Platform Features

• Multi-language Support - i18n for global audience
• Accessibility - WCAG 2.1 AA compliance
• Mobile Apps - Native iOS and Android viewers
• API - REST/GraphQL API for third-party integrations

🎨 Design System

• Colors: Subtle purple/slate palette with glassmorphism
• Typography: System fonts with clean hierarchy
• Spacing: 4px base unit (4, 8, 12, 16, 24, 32, 48, 64)
• Effects: Backdrop blur, soft shadows, smooth transitions
• Responsive: Mobile-first, sidebar layout on desktop

📝 License

MIT

---

Portfolio Project - Built with ❤️ to showcase modern web development practices