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