A modern live streaming platform with real-time chat functionality, built with Next.js 15, featuring HLS video streaming and interactive chat capabilities.
- 🎬 Live Video Streaming - HLS video player with Video.js integration and professional controls
- 💬 Real-time Chat - Interactive chat system with Firebase Realtime Database
- 🔐 User Authentication - Secure authentication with Clerk (sign-in/sign-up)
- 🎨 Modern UI - Beautiful interface built with Material-UI and Tailwind CSS
- 📱 Responsive Design - Optimized for desktop and mobile devices
- ⚡ Fast Performance - Built with Next.js 15 and Turbopack for optimal speed
- 🔄 Real-time Updates - Live chat and streaming updates
- 🛠️ Admin Panel - Debug tools and chat management for administrators
- 📊 Analytics - Firebase Analytics integration for user insights
- Frontend: Next.js 15, React 19, TypeScript
- UI Framework: Material-UI (MUI), Tailwind CSS
- Authentication: Clerk
- Database: Firebase Realtime Database
- Video Player: Video.js
- State Management: Zustand
- Styling: Emotion, Tailwind CSS
- Node.js 18+
- npm, yarn, pnpm, or bun
- Firebase project setup
- Clerk account for authentication
-
Clone the repository
git clone https://github.com/koniz-dev/stream-pulse.git cd stream-pulse -
Install dependencies
npm install # or yarn install # or pnpm install
-
Environment Setup
Create a
.env.localfile in the root directory:# Clerk Authentication NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key CLERK_SECRET_KEY=your_clerk_secret_key # Firebase Client Configuration NEXT_PUBLIC_FIREBASE_API_KEY=your_firebase_api_key NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_firebase_auth_domain NEXT_PUBLIC_FIREBASE_DATABASE_URL=https://your-project-id-default-rtdb.firebaseio.com NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_firebase_project_id NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_firebase_storage_bucket NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_firebase_messaging_sender_id NEXT_PUBLIC_FIREBASE_APP_ID=your_firebase_app_id NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=your_firebase_measurement_id # Firebase Admin SDK (Service Account) FIREBASE_PROJECT_ID=your_firebase_project_id FIREBASE_PRIVATE_KEY_ID=your_firebase_private_key_id FIREBASE_PRIVATE_KEY=your_firebase_private_key FIREBASE_CLIENT_EMAIL=your_firebase_client_email FIREBASE_CLIENT_ID=your_firebase_client_id FIREBASE_AUTH_URI=https://accounts.google.com/o/oauth2/auth FIREBASE_TOKEN_URI=https://oauth2.googleapis.com/token FIREBASE_AUTH_PROVIDER_X509_CERT_URL=https://www.googleapis.com/oauth2/v1/certs FIREBASE_CLIENT_X509_CERT_URL=https://www.googleapis.com/robot/v1/metadata/x509/your-service-account%40your-project.iam.gserviceaccount.com FIREBASE_UNIVERSE_DOMAIN=googleapis.com
-
Run the development server
npm run dev # or yarn dev # or pnpm dev # or bun dev
-
Open your browser
Navigate to http://localhost:3000 to see the application.
stream-pulse/
├── app/ # Next.js App Router
│ ├── (auth)/ # Authentication routes
│ │ └── (routes)/ # Sign-in/Sign-up pages
│ ├── about/ # About page
│ ├── admin/ # Admin panel
│ │ ├── chat/ # Chat management
│ │ └── debug/ # Debug tools
│ ├── api/ # API routes
│ │ └── auth/ # Authentication API
│ ├── layout.tsx # Root layout
│ └── page.tsx # Home page
├── components/ # React components
│ ├── common/ # Shared components
│ ├── features/ # Feature-specific components
│ │ ├── chat/ # Chat functionality
│ │ └── video/ # Video player
│ ├── ui/ # UI components
│ └── index.ts # Component exports
├── hooks/ # Custom React hooks
│ └── useFirebaseAuth.ts # Firebase authentication hook
├── lib/ # Utility libraries
│ ├── firebase.ts # Firebase configuration
│ └── logger.ts # Logging utility
├── providers/ # Context providers
│ ├── ThemeProvider.tsx # Theme context
│ └── index.ts # Provider exports
├── stores/ # Zustand stores
│ ├── adminChatStore.ts # Admin chat state
│ ├── chatStore.ts # Chat state
│ ├── userStore.ts # User state
│ ├── videoStore.ts # Video state
│ └── index.ts # Store exports
├── types/ # TypeScript type definitions
│ ├── chat.ts # Chat types
│ ├── user.ts # User types
│ ├── video.ts # Video types
│ └── index.ts # Type exports
├── middleware.ts # Clerk middleware
├── next.config.ts # Next.js configuration
├── package.json # Dependencies
└── public/ # Static assets
npm run dev- Start development server with Turbopacknpm run build- Build the application for productionnpm run start- Start the production servernpm run lint- Run ESLint for code quality
- Create a Firebase project at Firebase Console
- Enable Authentication and Realtime Database
- Add your web app and copy the configuration
- Generate a service account key for Admin SDK:
- Go to Project Settings > Service Accounts
- Click "Generate new private key"
- Download the JSON file
- Extract all values from the JSON file to your
.env.local
- Update your
.env.localfile with the Firebase credentials
Note: The Firebase Admin SDK requires all service account fields from the downloaded JSON file, not just the basic ones.
- Create a Clerk account at Clerk Dashboard
- Create a new application
- Copy the publishable key and secret key
- Update your
.env.localfile with the Clerk credentials
- Push your code to GitHub
- Connect your repository to Vercel
- Add your environment variables in Vercel dashboard
- Deploy automatically on every push
The application can be deployed on any platform that supports Next.js:
- Netlify: Connect your GitHub repository
- Railway: Deploy with one-click
- DigitalOcean App Platform: Container-based deployment
- AWS Amplify: Full-stack deployment
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- koniz-dev - Initial work - koniz-dev
- Next.js for the amazing React framework
- Material-UI for the beautiful UI components
- Video.js for the video player
- Clerk for authentication
- Firebase for real-time database and authentication