A full-featured YouTube-like video sharing platform built with the MERN stack (MongoDB, Express, React, Node.js). Users can upload, watch, like, comment on videos, manage profiles, and more — with a modern, responsive UI and Cloudinary integration for media hosting.
This project was built as a capstone project for a 9-month Full Stack Development course by Internshala Training, based on the MERN stack.
- Authentication with JWT
- Video upload with Cloudinary
- Thumbnail + profile image uploads
- Search videos by title and category
- Video filtering (Trending, Subscriptions, Categories)
- Video recomendation based on tags
- Comment system with edit/delete
- Unique view tracking: user-based
- User profile edit/delete with media replacement
- Fully responsive design (mobile-first)
- 404 and error page handling
- Toast notifications for user feedback
- Lazy loading with React.lazy and Suspense for faster initial load
Frontend:
- React + Vite
- Redux Toolkit + Persist
- Tailwind CSS
- React Router
- Axios
- Context API
- React.lazy + Suspense (code splitting)
Backend:
- Node.js + Express
- MongoDB + Mongoose
- Cloudinary (video/image uploads)
- JWT (authentication)
- Move to the
backend/folder - Install dependencies
- Set up your
.envfile:
PORT=5000
MONGO_URL=your_mongodb_connection
JWT_SECRET=your_jwt_secret
CLOUDINARY_NAME=your_cloud_name
CLOUDINARY_KEY=your_api_key
CLOUDINARY_SECRET=your_api_secret
- Move to the
frontend/folder - Install dependencies
- Update
axiosInstance.jswith your backend base URL - update
.envfile
- Start both frontend and backend servers
- Register or sign in to your account
- Upload a video with a thumbnail (via Cloudinary)
- Explore features like:
- Search and filter videos
- Like/dislike and comment
- Edit/delete your own videos and comments
- Visit user channels
- Edit your profile (with avatar support)
Lazy loading ensures that only the components needed at the moment are loaded, improving initial load time and overall performance.
Built by Maithonkambou Abonmai