A modern video streaming platform built with Next.js 16, Supabase, and Livepeer.

• Video Upload & Streaming: Upload videos with automatic HLS transcoding
• Live Streaming: RTMP streaming with Livepeer integration
• User Authentication: Secure sign up/sign in with Supabase Auth
• Channel Management: Create and customize your channel
• Comments & Interactions: Engage with likes, comments, and subscriptions
• Analytics Dashboard: Track views, watch time, and engagement
• Content Moderation: Admin tools, reporting, and audit logs
• Legal Compliance: GDPR-compliant with cookie consent, age verification, and legal pages
• Responsive Design: Mobile-first design with dark mode support

• Framework: Next.js 16 (App Router)
• Database: Supabase (PostgreSQL)
• Storage: Supabase Storage with CDN
• Live Streaming: Livepeer
• Styling: Tailwind CSS 4
• UI Components: Radix UI
• Video Player: HLS.js
• Testing: Vitest (unit), Playwright (E2E)
• CI/CD: GitHub Actions

• Node.js 20+
• npm or yarn
• Supabase account
• Livepeer account (for live streaming)

1. Clone the repository:

   git clone <repository-url>
   cd streamhub

2. Install dependencies:

   npm install

3. Set up environment variables:

   cp .env.example .env.local

4. Fill in your environment variables in .env.local:

   • NEXT_PUBLIC_SUPABASE_URL: Your Supabase project URL
   • NEXT_PUBLIC_SUPABASE_ANON_KEY: Your Supabase anon key
   • SUPABASE_SERVICE_ROLE_KEY: Your Supabase service role key
   • LIVEPEER_API_KEY: Your Livepeer API key

5. Set up the database:

   • Go to your Supabase project
   • Run the migrations in supabase/migrations/ in order
   • Run the storage setup script: supabase/setup-storage.sql

6. Start the development server:

   npm run dev

7. Open http://localhost:3000 in your browser

streamhub/
├── src/
│   ├── app/              # Next.js app router pages
│   ├── components/       # React components
│   └── lib/             # Utilities and server actions
├── supabase/
│   ├── migrations/       # Database migrations
│   └── functions/        # Edge functions
├── e2e/                  # E2E tests (Playwright)
├── tests/                # Unit tests (Vitest)
└── public/              # Static assets

# Unit tests
npm run test

# Unit tests with UI
npm run test:ui

# E2E tests
npm run test:e2e

# E2E tests with UI
npm run test:e2e:ui

npm run build

Note: The project uses Next.js 15 to avoid Turbopack WASM binding issues present in Next.js 16 on certain deployment platforms.

# Run linter
npm run lint

# Format code
npm run format

See DEPLOYMENT.md for complete deployment instructions including:

• Supabase project setup
• Storage bucket configuration
• Database migrations
• Edge function deployment
• Environment variable configuration
• bolt.new deployment steps

See ENV_VARS.md for detailed documentation of all environment variables.

Required variables:

• NEXT_PUBLIC_SUPABASE_URL
• NEXT_PUBLIC_SUPABASE_ANON_KEY
• SUPABASE_SERVICE_ROLE_KEY
• LIVEPEER_API_KEY
• NEXT_PUBLIC_APP_URL

• DEPLOYMENT.md - Complete deployment guide
• ENV_VARS.md - Environment variables reference
• TESTING.md - Testing guide
• supabase/storage-headers.md - Storage and caching configuration

• Drag & drop upload interface
• Resumable uploads with tus-js-client
• Automatic HLS transcoding
• Thumbnail generation
• Metadata management (title, description, tags)
• Visibility controls (public, unlisted, private)
• Age restriction support

• RTMP stream creation
• Stream key management
• Live chat
• Viewer count
• Stream analytics

• Email/password authentication
• User profiles with avatars
• Channel creation and customization
• Subscriber management

• Video search
• Tag-based filtering
• Recommended videos
• Channel browsing
• Trending content

• Video view tracking
• Watch time analytics
• Engagement metrics
• Channel analytics
• Admin dashboard

• User reporting system
• Comment moderation
• Video flagging
• Admin review dashboard
• Audit logging

• Terms of Service
• Privacy Policy
• Community Guidelines
• Cookie consent banner
• GDPR compliance
• Age verification gate

1. Create a feature branch
2. Make your changes
3. Add tests
4. Run linter and tests
5. Submit a pull request

• Row Level Security (RLS) enabled on all tables
• Service role key kept server-side only
• Storage buckets with proper policies
• Input validation and sanitization
• Content security policies
• Rate limiting (planned)

• HLS adaptive streaming
• CDN-friendly cache headers
• Image optimization
• Code splitting
• Server-side rendering
• Static page generation where possible

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)
• Mobile browsers (iOS Safari, Chrome Android)

• Next.js 16 Turbopack WASM binding issues (using webpack for builds)
• Middleware deprecation warning (will migrate to proxy in future)

• Mobile apps (iOS, Android)
• Advanced analytics
• Monetization features
• Multi-language support
• Advanced video editing
• Collaborative features
• API for third-party integrations

[Your License Here]

For issues and questions:

• Check DEPLOYMENT.md troubleshooting section
• Contact support team

• Next.js team
• Supabase team
• Livepeer team
• Open source community