StreamEarn - Live Streaming Platform with Earning Features

A modern live streaming platform where users can broadcast video/audio content and earn money through tips and donations.

🎥 Features

Core Features

• Live Video/Audio Streaming - Broadcast live content to your audience
• Real-time Viewer Count - See how many people are watching
• Earning System - Receive tips and donations during streams
• User Authentication - Google OAuth via Emergent Auth
• Payment Processing - Secure payments via Stripe
• User Profiles - Track earnings, streams, and transactions
• Stream Discovery - Browse live and available streams

User Roles

• Viewers - Watch streams, send tips
• Streamers - Create and broadcast streams, earn money

🛠️ Tech Stack

Backend

• FastAPI - Modern Python web framework
• MongoDB - NoSQL database
• Socket.IO - Real-time WebSocket communication
• Stripe - Payment processing
• Emergent Auth - Google OAuth integration

Frontend

• React 19 - UI framework
• Socket.IO Client - Real-time communication
• Axios - HTTP client
• Tailwind CSS - Styling
• WebRTC - Video/audio streaming

📋 Setup Instructions

Prerequisites

• MongoDB running on localhost:27017
• Node.js and Yarn installed
• Python 3.8+ installed

Environment Variables

Backend (.env)

MONGO_URL="mongodb://localhost:27017"
DB_NAME="test_database"
CORS_ORIGINS="*"
STRIPE_API_KEY=sk_test_emergent

Frontend (.env)

REACT_APP_BACKEND_URL=https://instant-view-7.preview.emergentagent.com
WDS_SOCKET_PORT=443
ENABLE_HEALTH_CHECK=false

Installation

1. Install Backend Dependencies

cd /app/backend
pip install -r requirements.txt

2. Install Frontend Dependencies

cd /app/frontend
yarn install

3. Start Services

sudo supervisorctl restart all

🚀 Usage Guide

For Viewers

1. Sign In

   • Visit the landing page
   • Click "Get Started with Google"
   • Authenticate with your Google account

2. Browse Streams

   • View live streams on the dashboard
   • Click on any live stream to watch

3. Send Tips

   • While watching a stream, click "Send Tip"
   • Choose or enter an amount (minimum $1)
   • Complete payment via Stripe

For Streamers

1. Become a Streamer

   • Sign in as a viewer
   • Click "Become a Streamer" on the dashboard

2. Create a Stream

   • Click "Create Stream" button
   • Enter stream title and description
   • Submit to create

3. Go Live

   • Navigate to your stream
   • Click "🔴 Go Live"
   • Allow camera and microphone access
   • Start broadcasting!

4. Manage Stream

   • View real-time viewer count
   • Monitor earnings
   • End stream when done

5. Track Earnings

   • Check balance in the navbar
   • View detailed transaction history in Profile

🏗️ Architecture

Database Collections

users

{
  user_id: "user_xxx",
  email: "user@example.com",
  name: "User Name",
  picture: "https://...",
  role: "viewer" | "streamer",
  balance: 0.0,
  total_earned: 0.0,
  created_at: ISODate
}

user_sessions

{
  user_id: "user_xxx",
  session_token: "token_xxx",
  expires_at: ISODate,
  created_at: ISODate
}

streams

{
  stream_id: "stream_xxx",
  streamer_id: "user_xxx",
  streamer_name: "Streamer Name",
  title: "Stream Title",
  description: "Description",
  status: "offline" | "live" | "ended",
  viewers: 0,
  total_earnings: 0.0,
  started_at: ISODate,
  ended_at: ISODate,
  created_at: ISODate
}

transactions

{
  transaction_id: "txn_xxx",
  from_user_id: "user_xxx",
  to_user_id: "user_xxx",
  stream_id: "stream_xxx",
  amount: 5.0,
  currency: "usd",
  type: "tip",
  status: "pending" | "completed" | "failed",
  stripe_session_id: "cs_xxx",
  payment_status: "paid",
  created_at: ISODate
}

API Endpoints

Authentication

• POST /api/auth/session - Exchange session_id for user data
• GET /api/auth/me - Get current user
• POST /api/auth/logout - Logout

User

• GET /api/user/profile - Get user profile with stats
• POST /api/user/become-streamer - Upgrade to streamer

Streams

• POST /api/streams - Create new stream
• GET /api/streams/live - Get all live streams
• GET /api/streams/all - Get all streams
• GET /api/streams/{stream_id} - Get stream by ID
• POST /api/streams/{stream_id}/start - Start streaming
• POST /api/streams/{stream_id}/stop - Stop streaming

Payments

• POST /api/payments/tip/checkout - Create tip checkout session
• GET /api/payments/status/{session_id} - Check payment status
• POST /api/webhook/stripe - Stripe webhook handler

Socket.IO Events

Client → Server

• join_stream - Join a stream room
• leave_stream - Leave a stream room
• webrtc_offer - Send WebRTC offer
• webrtc_answer - Send WebRTC answer
• webrtc_ice_candidate - Send ICE candidate

Server → Client

• stream_started - Stream went live
• stream_ended - Stream ended
• viewer_count - Updated viewer count
• tip_received - New tip notification
• webrtc_offer - Forward WebRTC offer
• webrtc_answer - Forward WebRTC answer
• webrtc_ice_candidate - Forward ICE candidate

🔒 Security

Authentication

• Google OAuth via Emergent Auth
• HTTPOnly cookies for session management
• 7-day session expiration
• Server-side session validation

Payments

• Stripe for secure payment processing
• Server-side amount validation (prevent frontend manipulation)
• Transaction status tracking
• Webhook verification

WebRTC

• Peer-to-peer video streaming
• Socket.IO for signaling
• STUN/TURN server support ready

🎨 Design Features

• Dark theme - Modern, eye-friendly interface
• Responsive design - Works on all devices
• Real-time updates - Live viewer counts and notifications
• Smooth animations - Professional UI transitions
• Gradient accents - Beautiful purple/pink gradient theme

📱 User Experience

Landing Page

• Hero section with clear value proposition
• Feature highlights
• Single CTA button for Google sign-in

Dashboard

• User balance prominently displayed
• Quick access to profile and logout
• Role-specific sections (streamer/viewer)
• Live stream discovery grid

Streaming Interface

• Clean video player
• Stream controls
• Real-time stats sidebar
• Viewer interaction

Viewer Experience

• Immersive watch page
• Easy tipping interface
• Stream information sidebar
• Real-time viewer count

🚧 Future Enhancements

• Chat functionality
• Stream recording and replay
• Subscription tiers
• Advanced analytics
• Mobile app
• Stream scheduling
• Multi-streaming
• Emotes and reactions
• Follower system
• Notifications

🐛 Troubleshooting

Backend Issues

# Check backend logs
tail -f /var/log/supervisor/backend.err.log

# Restart backend
sudo supervisorctl restart backend

Frontend Issues

# Check frontend logs
tail -f /var/log/supervisor/frontend.err.log

# Clear cache and restart
cd /app/frontend
rm -rf node_modules/.cache
sudo supervisorctl restart frontend

Database Issues

# Check MongoDB status
sudo supervisorctl status mongodb

# Check database collections
mongosh --eval "use('test_database'); db.getCollectionNames()"

Payment Issues

• Ensure STRIPE_API_KEY is set in backend/.env
• Check Stripe webhook URL is accessible
• Verify payment status polling is working

Streaming Issues

• Ensure camera/microphone permissions are granted
• Check browser WebRTC support
• Verify Socket.IO connection

📄 License

This project is created for demonstration and educational purposes.

🙏 Acknowledgments

• Emergent Platform for authentication and infrastructure
• Stripe for payment processing
• Socket.IO for real-time communication
• WebRTC for video streaming

---

Built with ❤️ using FastAPI + React + MongoDB