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

• Framework: Next.js (App Router)
• Styling: Tailwind CSS v4 & Framer Motion for animations
• Database & Auth: Firebase v12 (Client & Admin SDKs)
• Twitch Connection: tmi.js
• Analytics: posthog-js & posthog-node

🚀 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.