Skip to content

README.md

Latest commit

 

History

History
256 lines (198 loc) · 6.26 KB

README.md

File metadata and controls

256 lines (198 loc) · 6.26 KB

StreamFlow - Full Stack Video Platform

A modern video streaming platform with React frontend and Node.js backend.

🚀 Project Structure

streamflow/
├── Server/        # Backend (Node.js + Express + MongoDB)
├── client/        # Frontend (React + Vite)
└── package.json   # Root configuration

📋 Prerequisites

  • Node.js (v16 or higher)
  • MongoDB (local or cloud instance)
  • npm or yarn

⚡ Quick Start (Run Both)

The easiest way to run the application is from the root directory:

1. Install dependencies

# Install root dependencies
npm install

# Install backend dependencies
cd Server
npm install
cd ..

# Install frontend dependencies
cd client
npm install
cd ..

2. Configure Environment Variables

Make sure to set up the .env file in the Server/ directory as described in the Backend Setup section below.

3. Run the application

# Runs both backend and frontend concurrently
npm run dev

🔧 Backend Setup (Manual)

1. Navigate to backend directory

cd Server

2. Install dependencies

npm install

3. Configure environment variables

Create a .env file in the Server/ directory with the following variables:

PORT=8000
MONGODB_URI=your_mongodb_connection_string
CORS_ORIGIN=http://localhost:5173
ACCESS_TOKEN_SECRET=your_access_token_secret
ACCESS_TOKEN_EXPIRY=1d
REFRESH_TOKEN_SECRET=your_refresh_token_secret
REFRESH_TOKEN_EXPIRY=10d
CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret

4. Create public directory

mkdir public

5. Start the backend server

npm run dev

The backend will run on http://localhost:8000

🎨 Frontend Setup (Manual)

1. Navigate to frontend directory

cd client

2. Install dependencies

npm install

3. Start the development server

npm run dev

The frontend will run on http://localhost:5173

📱 Features

Authentication

  • ✅ User registration with avatar & cover image upload
  • ✅ Login with email or username
  • ✅ JWT-based authentication
  • ✅ Automatic token refresh
  • ✅ Secure HTTP-only cookies

User Management

  • ✅ View and edit profile
  • ✅ Update avatar and cover image
  • ✅ Change password
  • ✅ User dashboard with statistics

Video Features

  • ✅ Upload videos with thumbnails
  • ✅ Browse all videos with pagination
  • ✅ Search videos
  • ✅ Watch videos with custom player
  • ✅ Like/unlike videos
  • ✅ Edit and delete own videos
  • ✅ Toggle publish status
  • ✅ View count tracking

Comments System

  • ✅ Add comments to videos
  • ✅ View all comments
  • ✅ Edit and delete own comments
  • ✅ Like comments
  • ✅ Real-time comment display

Subscription System

  • ✅ Subscribe/unsubscribe to channels
  • ✅ View subscriber count
  • ✅ View subscribed channels
  • ✅ Subscriber list

Playlists

  • ✅ Create and manage playlists
  • ✅ Add/remove videos from playlists
  • ✅ Edit playlist details
  • ✅ View user playlists

Social Features (Tweets)

  • ✅ Create text posts
  • ✅ Edit and delete tweets
  • ✅ Like tweets
  • ✅ View user feed

🔄 Workflow Details

1. User Onboarding & Authentication

  • Registration: Users sign up with email and username. During registration, they must upload an avatar and optional cover image (stored via Cloudinary).
  • Security: Passwords are hashed using bcrypt. Access tokens (short-lived) and refresh tokens (long-lived) are managed via HTTP-Only cookies to prevent XSS attacks.

2. Video Management

  • Upload: Users can upload video files and thumbnails. The system automatically extracts metadata like duration.
  • Publishing Control: Videos have an isPublished toggle. Creators can draft videos and publish them when ready.
  • Dashboard: A personalized dashboard displays channel statistics including total views, total subcribers, and video performance.

3. Engagement & Community

  • Interactions: Every video supports likes and nested comments.
  • Subscriptions: Users can subscribe to channels to see their content in a dedicated feed.
  • Tweets: A community tab feature allowing creators to post text updates (Tweets) to interact with their audience without uploading video content.
  • History: The platform tracks watch history, allowing users to resume or revisit content.

UI/UX

  • ✅ Modern dark theme with gradient accents
  • ✅ Fully responsive design
  • ✅ Smooth animations and transitions
  • ✅ Glassmorphism effects
  • ✅ Protected routes

🔑 Key Technologies

Backend

  • Express.js - Web framework
  • MongoDB - Database
  • Mongoose - ODM
  • JWT - Authentication
  • Bcrypt - Password hashing
  • Cloudinary - Image hosting
  • Multer - File uploads

Frontend

  • React - UI library
  • Vite - Build tool
  • React Router - Navigation
  • Axios - HTTP client
  • Context API - State management

🐛 Troubleshooting

CORS Errors

Make sure CORS_ORIGIN in backend .env matches your frontend URL:

CORS_ORIGIN=http://localhost:5173

MongoDB Connection

Verify your MONGODB_URI is correct and MongoDB is running.

Port Conflicts

If port 8000 or 5173 is in use, you can change them:

  • Backend: Update PORT in .env
  • Frontend: Update port in vite.config.js

📝 API Endpoints

Authentication

  • POST /api/v1/users/register - Register new user
  • POST /api/v1/users/login - Login user
  • POST /api/v1/users/logout - Logout user
  • POST /api/v1/users/refresh-token - Refresh access token

User (Protected)

  • GET /api/v1/users/current-user - Get current user
  • PATCH /api/v1/users/update-account - Update profile
  • PATCH /api/v1/users/avatar - Update avatar
  • PATCH /api/v1/users/cover-image - Update cover image
  • POST /api/v1/users/change-password - Change password
  • GET /api/v1/users/c/:username - Get user channel profile
  • GET /api/v1/users/history - Get watch history

🔒 Security Features

  • ✅ Password hashing with bcrypt
  • ✅ HTTP-only cookies for tokens
  • ✅ JWT token expiration
  • ✅ Automatic token refresh
  • ✅ Protected API routes
  • ✅ CORS configuration
  • ✅ Input validation

👨‍💻 Author

Mridul Bansal

📄 License

ISC

Made with ❤️ using React and Node.js