StreamCast Pro
StreamCast Pro is a professional-grade Next.js application designed to enhance live streaming experiences with interactive overlays, automated chatbot features, and KaraFun integration. Originally built for Twitch broadcasters, it provides real-time chat displays, dynamic karaoke song queues, and secure broadcaster management dashboards.
✨ Features
- Twitch Chat Overlay: Beautiful, customizable real-time Twitch chat overlays using
tmi.js.
- KaraFun Integration: Connects with KaraFun to seamlessly display "Now Playing" popups and upcoming song queues directly on stream.
- Broadcaster Dashboard: Secure backend for managing stream settings, overlay URLs, and Mod Links.
- Real-time Configuration: Uses Firebase Firestore and Realtime Database for instant overlay updates without requiring browser refreshes in OBS.
- Discord Notifications: Automated webhook alerts for newly registered broadcasters awaiting approval.
- Telemetry & Analytics: Comprehensive frontend and backend usage tracking via PostHog, safely wrapped to protect API performance.
🛠️ Technology Stack
🚀 Getting Started
Prerequisites
Node.js (v18+) and npm, yarn, or pnpm.
Installation
Clone the repository and install dependencies:
npm install
Environment Variables
Create a .env.local file in the root directory. You will need to provide the following keys to use all features:
# Firebase Client (Public)
NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_auth_domain
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_storage_bucket
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id
NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=your_measurement_id
# Firebase Admin (Secret)
FIREBASE_PROJECT_ID=your_project_id
FIREBASE_CLIENT_EMAIL=your_client_email
FIREBASE_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\nYourKeyHere\n-----END PRIVATE KEY-----\n"
# API & Telemetry (Secret)
DISCORD_WEBHOOK_URL=your_discord_webhook_url
NEXT_PUBLIC_POSTHOG_KEY=your_posthog_key
NEXT_PUBLIC_POSTHOG_HOST=https://eu.i.posthog.com
# Encrypts the stored Twitch OAuth token at rest (AES-256-GCM, see
# src/lib/tokenCrypto.js). Must decode to exactly 32 bytes - generate with:
# node -e "console.log(require('crypto').randomBytes(32).toString('base64'))"
TWITCH_TOKEN_ENCRYPTION_KEY=your_base64_32_byte_key
Running Locally
Run the development server:
npm run dev
Open http://localhost:3000 with your browser to see the result.
🔒 Security
- All sensitive keys (like
FIREBASE_PRIVATE_KEY) are kept fully server-side within the Next.js API Routes.
- API endpoints are securely gated using a combination of Firebase Authentication and secure Token verification utilizing
crypto.timingSafeEqual.
- Application gracefully degrades functionality (returning 404s/503s) if third-party hooks are offline.
