VidTube — Full-Stack Video Platform

A comprehensive, high-performance YouTube clone built with modern web technologies.
Explore Live Site » · Explore Repository » · Report Bug

📖 Overview

VidTube is a robust, full-stack video hosting and streaming platform inspired by YouTube. It goes beyond a simple UI clone by implementing complex backend architecture, secure video uploading, robust state management, and a highly responsive user interface.

Built using React (Vite) on the frontend and powered by a scalable Node.js/MongoDB backend, this project demonstrates the ability to architect complex, data-intensive applications featuring real-time interactions, media processing, and seamless user experiences.

---

✨ Core Features & Platform Showcase

🎬 Video Streaming & Playback

A custom, highly optimized video player interface. It handles seamless playback, metadata fetching, and dynamic sidebar recommendations.

 

💬 Community & Engagement

Fully functional commenting system allowing users to engage with creators, drop feedback, and participate in community discussions.

🗂️ Content Curation & Playlists

Users can organize their favorite videos into custom playlists. Features deep dive views into specific playlists and algorithmic curations.

 

📈 Trending & Navigation

A sleek sidebar and responsive navigation bar allow users to explore trending videos and manage their subscriptions effortlessly.

 

👤 Creator Tools & Profile Management

Empowering creators with secure video upload modals and comprehensive profile management tools.

 

🕒 Watch History

A dedicated dashboard tracking user activity and watch history for seamless viewing resumption.

---

🏗️ Technical Architecture

Category	Technology	Description
Frontend Framework	React + Vite	Lightning-fast development environment and optimized production builds.
Styling	Tailwind CSS	Rapid UI development with utility classes for a fully responsive design.
State Management	Redux Toolkit	Predictable state container for managing complex application states (auth, video data).
Routing	React Router	Dynamic client-side routing for seamless page transitions.
Backend Integration	REST API	Consumes a custom Node.js backend handling JWT auth, multer uploads, and MongoDB aggregation pipelines.

---

⚙️ Running Locally

1. Clone & Install

git clone https://github.com/Adityas3111N/03youtube.git
cd 03youtube/frontend
npm install

2. Environment Setup

Create a .env file at the root based on .env.sample.

VITE_API_BASE_URL="http://localhost:8000/api/v1"

3. Start Development Server

npm run dev

Open http://localhost:5173 with your browser to see the application.

---

👨‍💻 Author

Aditya Singh

• LinkedIn: Aditya Singh
• GitHub: @Adityas3111N
• Email: singhaditya4333@gmail.com

"Building scalable streaming platforms with modern architecture."