YouTube Clone (MERN Stack)

A full-featured YouTube clone built using the MERN stack (MongoDB, Express, React, Node.js) with features like video playback, authentication, data visualization, and a responsive, interactive UI.

---

Demo Login: username and password : sam16

Features

• Authentication

• Google OAuth 2.0 sign in/sign up

• Session management via JWT

• Video Playback

• Watch page with dynamic routing

• Related videos and recommendations

• Dynamic UI

• Color background extracted using color-thief

• Smooth animations via framer-motion

• Analytics Dashboard

• View-based and user-based stats using recharts

• Responsive Design

• Mobile-first layout with modern UI components

---

Tech Stack

Frontend

• React
• React Router
• Framer Motion
• Recharts
• Color Thief
• Axios
• Tailwind CSS

Backend

• Node.js
• Express
• MongoDB + Mongoose
• jsonwebtoken
• bcrypt
• Google OAuth

---

Environment Variables

Create .env.local files in both Frontend and Backend directories:

Frontend (Frontend/.env.local)

VITE_GOOGLE_CLIENT_ID=your-google-client-id
VITE_REDIRECT_URI=http://localhost:8000/api/v1/users/google/login
REACT_APP_GOOGLE_CLIENT_ID=your-google-client-id
VITE_API_URL=http://localhost:8000/api/v1
VITE_FRONTEND_BASE_URL=http://localhost:5173
VITE_REDIRECT_URI=http://localhost:8000/api/v1/users/google/login

Backend (Backend/.env)

PORT=8000
MONGO_URI=your-mongodb-uri
JWT_SECRET=your-secret-key
CLIENT_URL=http://localhost:5173
CORS_ORIGIN="http://localhost:5173"
ACCESS_TOKEN_SECRET=your-accesstokens
ACCESS_TOKEN_EXPIRY=1d
REFRESH_TOKEN_SECRET=your-refreshtokens
REFRESH_TOKEN_EXPIRY =10d
CLOUDINARY_CLOUD_NAME=cloudname
CLOUDINARY_API_KEY= yours
CLOUDINARY_SECRET_KEY=yours
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET="your-google-client-secret"
FRONTEND_ORIGIN=http://localhost:5173
NODE_ENV=development