A full-stack YouTube clone application built with the MERN stack (MongoDB, Express.js, React.js, Node.js) that replicates core YouTube functionalities.
• View Live Demo • View GitHub Repository • Sample Video Demo
- 🔐 User authentication (Register/Login)
- 🔑 Google OAuth integration
- 👤 User profile management
- 🎨 Customizable user avatars
- ✍️ Create and manage channels
- 📝 Edit channel details
- 🎯 Channel analytics
- 👥 Subscribe/Unsubscribe functionality
- 📤 Upload videos
- 🎬 Video playback
- 📊 View count tracking
- 👍 Like/Dislike functionality
- 💬 Comment system
- 🏷️ Category-based filtering
- 🔍 Search functionality
- 📱 Fully responsive design
- 🌙 Intuitive user interface
- ⚡ Fast loading times
- 🎯 Category-based navigation
- 🔄 Real-time updates
- ⚛️ React.js
- 🎨 Tailwind CSS
- 🔄 Redux Toolkit
- 🛣️ React Router
- 📦 Vite
- 🖥️ Node.js
- 🚂 Express.js
- 🗄️ MongoDB
- 🔐 JWT Authentication
- 📦 Mongoose
- 🔄 Git & GitHub
- 📦 npm
- 🎨 Shadcn UI
- 🖼️ React Icons
-
Clone the repository
git clone https://github.com/yourusername/youtube-clone.git cd youtube-clone -
Install dependencies for both client and server
# Install client dependencies cd client npm install # Install server dependencies cd ../server npm install
-
Set up environment variables
Create .env files in both client and server directories:
Client (.env):
VITE_API_BASE_URL=http://localhost:8080/api VITE_GOOGLE_CLIENT_ID=your_google_client_id
Server (.env):
MONGODB_URI=your_mongodb_uri JWT_SECRET=your_jwt_secret PORT=8080
-
Start the development servers
In the client directory:
npm run dev
In the server directory:
npm run dev
The application is fully responsive and optimized for:
- 📱 Mobile devices
- 💻 Tablets
- 🖥️ Desktop screens
- 📺 Large screens
- Traditional email/password registration and login
- Google OAuth integration
- JWT-based authentication
- Secure cookie handling
- Protected routes implementation
- Upload with progress tracking
- Automatic thumbnail generation
- Video processing
- View count tracking
- Like/Dislike system
- Comment system
- Real-time notifications
- Channel subscriptions
- Video sharing
- Video search
- Category filtering
- Trending videos section
- Recommended videos
- Redux Toolkit for global state
- Context API for theme and sidebar state
- Local storage for user preferences
- JWT for authentication state
- Video quality selection
- Playlist creation
- Watch later functionality
- Video download option
- Dark mode toggle
Contributions are welcome! Please read our contributing guidelines to get started.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Utkrisht Yogi - GitHub Profile
- Inspiration from YouTube
- Icons from React Icons
- UI Components from Shadcn UI
- All contributors and supporters
Made with ❤️ and JavaScript