YouTube Clone

A full-stack YouTube-inspired video sharing platform built with the MERN stack. Supports authentication, video uploads, playlists, subscriptions, comments, likes, and watch history.

Overview

This is a MERN-based clone of YouTube, built to practice backend architecture, authentication, and file handling at a reasonably production-like level. It covers the core features you'd expect from a video platform: uploading and managing videos, playlists, subscriptions, likes, comments, and a personal watch history.

The backend follows a fairly standard controller/model/route split with JWT-based auth and Cloudinary for media storage. The frontend is a Vite + React app styled with Tailwind.

Features

Authentication — registration, login/logout, JWT access and refresh tokens, password hashing with bcrypt, protected routes.

User management — profile viewing/editing, avatar and cover image updates, channel pages, watch history.

Videos — upload, edit, delete, publish/unpublish, view individual videos, browse all videos.

Interaction — like videos and comments, add/edit/delete comments.

Playlists — create, update, delete, and manage videos within a playlist.

Channels — subscribe/unsubscribe, view subscriber and subscription lists.

Media storage — file uploads handled with Multer, stored on Cloudinary.

Tech Stack

Frontend: React, React Router, Axios, Tailwind CSS, Vite

Backend: Node.js, Express.js, MongoDB, Mongoose, JWT, Multer, Cloudinary, bcrypt, CORS

Project Structure

youtube-clone/
├── backend/
│   ├── src/
│   │   ├── controllers/
│   │   ├── db/
│   │   ├── middleware/
│   │   ├── models/
│   │   ├── routes/
│   │   ├── utils/
│   │   ├── app.js
│   │   └── index.js
│   ├── public/
│   ├── package.json
│   └── .env
├── frontend/
│   ├── src/
│   ├── public/
│   └── package.json
├── docs/
├── README.md
└── LICENSE

Installation

Clone the repo:

git clone https://github.com/yourusername/youtube-clone.git

Backend:

cd backend
npm install
npm run dev

Frontend:

cd frontend
npm install
npm run dev

Environment Variables

Create a .env file inside backend/:

PORT=8000

MONGODB_URI=

CORS_ORIGIN=http://localhost:5173

ACCESS_TOKEN_SECRET=
ACCESS_TOKEN_EXPIRY=

REFRESH_TOKEN_SECRET=
REFRESH_TOKEN_EXPIRY=

CLOUDINARY_CLOUD_NAME=
CLOUDINARY_API_KEY=
CLOUDINARY_API_SECRET=

API Modules

• Auth — register, login, logout, refresh token
• Users — current user, update profile/avatar/cover image, watch history
• Videos — upload, get, update, delete, publish
• Comments — add, edit, delete
• Playlists — create, update, delete
• Likes — like video, like comment
• Subscriptions — subscribe, unsubscribe

Security

JWT auth, bcrypt password hashing, HTTP-only cookies, protected routes, CORS configuration, and environment-based secrets.

Screenshots

Home

Video Page

Login

Upload Video

Dashboard

Future Improvements

• Docker and Kubernetes deployment
• AWS S3 for media storage
• Redis caching
• Swagger API docs
• WebSocket notifications
• Better video streaming (adaptive bitrate)
• Email verification
• Google OAuth login
• CI/CD pipeline
• Unit and integration tests

Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature/your-feature
3. Commit your changes: git commit -m "Add your feature"
4. Push the branch: git push origin feature/your-feature
5. Open a pull request

License

MIT

Author

Dharmik Dudhat

• GitHub: https://github.com/yourusername
• LinkedIn: https://linkedin.com/in/yourprofile