Skip to content

README.md

Latest commit

 

History

History
290 lines (218 loc) · 10.5 KB

README.md

File metadata and controls

290 lines (218 loc) · 10.5 KB
Raw

🎬 VideoTube - YouTube Clone

VideoTube is a full-stack web application inspired by YouTube, built with the MERN stack (MongoDB, Express.js, React, Node.js). It allows users to upload, watch, like, comment on videos, and subscribe to channels.

📋 Table of Contents

🚀 Features

  • 🔐 JWT Authentication - Secure user registration and login
  • 📤 Video Upload - Upload videos with thumbnails
  • ▶️ Video Streaming - Watch videos with responsive player
  • 👍 Like System - Like videos, comments, and tweets
  • 💬 Comments - Add, edit, and delete comments
  • 📊 Channel Analytics - View channel statistics and metrics
  • 📜 Subscriptions - Subscribe/unsubscribe to channels
  • 📝 Tweet System - Create and interact with tweet-like posts
  • ❤️ Playlists - Create and manage video playlists
  • 📱 Responsive Design - Works on desktop and mobile devices
  • ⚡ Performance Optimized - Fast loading with pagination

🛠️ Tech Stack

Frontend

  • React - UI framework
  • Tailwind CSS - Styling
  • Axios - HTTP client
  • React Router - Navigation
  • Context API - State management

Backend

  • Node.js - Runtime environment
  • Express.js - Web framework
  • MongoDB - Database
  • Mongoose - ODM
  • JWT - Authentication
  • Bcrypt - Password hashing
  • Multer - File uploads
  • Cloudinary - Media storage (optional)

Development Tools

  • Nodemon - Development server
  • Postman - API testing

📖 API Documentation

Base URL

http://localhost:5000/api/v1

All endpoints (except auth endpoints) require JWT authentication via Bearer token.

Authentication Endpoints

Method Endpoint Description Auth Required
POST /users/register Register new user No
POST /users/login Login user No
POST /users/logout Logout user Yes
POST /users/refresh-token Refresh access token No
GET /users/current-user Get current user Yes
POST /users/change-password Change password Yes
PATCH /users/update-account Update account Yes
PATCH /users/avatar Update avatar Yes
PATCH /users/cover-image Update cover image Yes
GET /users/c/:username Get channel profile No
GET /users/history Get watch history Yes
DELETE /users Delete account & videos Yes

Video Endpoints

Method Endpoint Description Auth Required
GET /videos Get all videos No
POST /videos/publish Upload video Yes
GET /videos/:videoId Get video details No
PATCH /videos/:videoId/edit Update video Yes
DELETE /videos/:videoId Delete video Yes
PATCH /videos/:videoId Toggle publish status Yes

Subscription Endpoints

Method Endpoint Description Auth Required
POST /subscriptions/:channelId Toggle subscription Yes
GET /subscriptions/:channelId Get subscribers Yes
GET /subscriptions Get subscribed channels Yes

Playlist Endpoints

Method Endpoint Description Auth Required
GET /playlists Get user playlists Yes
POST /playlists Create playlist Yes
GET /playlists/:playlistId Get playlist Yes
PATCH /playlists/:playlistId Update playlist Yes
DELETE /playlists/:playlistId Delete playlist Yes
PATCH /playlists/add/:playlistId/:videoId Add video to playlist Yes
PATCH /playlists/remove/:playlistId/:videoId Remove video from playlist Yes

Like Endpoints

Method Endpoint Description Auth Required
POST /likes/video/:videoId Toggle video like Yes
GET /likes/video/:videoId Get video likes count Yes
POST /likes/comment/:commentId Toggle comment like Yes
GET /likes/comment/:commentId Get comment likes count Yes
POST /likes/tweet/:tweetId Toggle tweet like Yes
GET /likes/tweet/:tweetId Get tweet likes count Yes
GET /likes Get user's liked videos Yes

Comment Endpoints

Method Endpoint Description Auth Required
GET /comments/:videoId Get video comments Yes
POST /comments/:videoId Add comment Yes
PATCH /comments/c/:commentId Update comment Yes
DELETE /comments/c/:commentId Delete comment Yes

Tweet Endpoints

Method Endpoint Description Auth Required
POST /tweets Create tweet Yes
GET /tweets/user/:username Get user tweets Yes
PATCH /tweets/:tweetId Update tweet Yes
DELETE /tweets/:tweetId Delete tweet Yes

Dashboard Endpoints

Method Endpoint Description Auth Required
GET /dashboard/stats/:userId Get channel stats Yes
GET /dashboard/videos/:userId Get channel videos Yes

Health Check

Method Endpoint Description Auth Required
GET /healthcheck Health check No

⚙️ Installation

Prerequisites

  • Node.js (v14 or higher)
  • MongoDB (local or Atlas)
  • npm or yarn

1. Clone the Repository

git clone https://github.com/Pranav8206/VideoTube.git
cd videotube

2. Backend Setup

cd backend
npm install

3. Frontend Setup

cd ../frontend
npm install

4. Environment Variables

Create a .env file in the backend directory:

PORT=5000
MONGODB_URI=mongodb://localhost:27017/videotube
JWT_SECRET=your_super_secret_jwt_key_here
JWT_REFRESH_SECRET=your_super_secret_refresh_key_here
CLOUDINARY_CLOUD_NAME=your_cloudinary_name
CLOUDINARY_API_KEY=your_cloudinary_api_key
CLOUDINARY_API_SECRET=your_cloudinary_api_secret
CORS_ORIGIN=http://localhost:5173

5. Start the Application

# Start backend (from backend directory)
npm run dev

# Start frontend (from frontend directory, in a new terminal)
npm start

The application will be available at:

🔧 Environment Variables

Variable Description Example
PORT Backend server port 5000
MONGODB_URI MongoDB connection string mongodb://localhost:27017/videotube
JWT_SECRET Secret key for JWT tokens your_jwt_secret
JWT_REFRESH_SECRET Secret key for refresh tokens your_refresh_secret
CLOUDINARY_* Cloudinary credentials for media storage (Optional)
CORS_ORIGIN Allowed origin for CORS http://localhost:5000

📁 Project Structure

videotube/
|
├── backend/
│   ├── controllers/     # Route controllers
│   ├── db/              # Database configuration
│   ├── middlewares/     # Custom middleware
│   ├── models/          # MongoDB models
│   ├── routes/          # API routes
│   ├── utils/           # Utility functions
│   └── app.js           # Express app setup
|
├── frontend/
│   ├── public/          # Static files
│   └── src/
│       ├── components/  # React components
│       ├── pages/       # Page components
│       ├── context/     # React context API
│       └── utils/       # Utility functions
│
└── README.md

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

  1. Fork the project
  2. Create your feature branch (git checkout -b feature/AmazingFeature)
  3. Commit your changes (git commit -m 'Add some AmazingFeature')
  4. Push to the branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

Please ensure your code follows the project's style guidelines and includes appropriate tests.

🙏 Acknowledgments

  • Inspired by YouTube
  • Built with the MERN stack
  • Icons from Lucide icons
  • UI components with Tailwind CSS

Note: This is a only portfolio project.