I've built a platform to store and track YouTube channels

3 months ago 2

A complete YouTube clone with video upload, viewing, and commenting features.

XandTube/ ├── backend/ # Node.js/Express API ├── frontend/ # React interface ├── videos/ # Video storage └── docs/ # API documentation

🔐 Authentication System (NEW!)

✅ User registration and login
✅ JWT authentication
✅ Route protection
✅ Profile management

📥 YouTube Video Download (NEW!)

✅ Individual video downloads
✅ Complete playlist downloads
✅ Individual video progress in playlists
✅ Quality selection (Best, 1080p, 720p, 480p)
✅ Real-time progress (WebSocket + Polling)
✅ Visual interface with colored progress bars
✅ Visual states: Waiting, Starting, Downloading, Completed, Error
✅ Robust YT-DLP integration

✅ REST API for videos, channels and comments
✅ Video upload system
✅ SQLite database with Sequelize
✅ Complete relational models
✅ WebSocket for download progress
✅ CORS enabled for frontend

✅ YouTube-like interface
✅ Modern login and registration screens
✅ Video download page
✅ Integrated video player
✅ Channel system
✅ Comment system
✅ CRACO configured (resolves webpack errors)

Node.js 16+
npm or yarn
YT-DLP (for video downloads):
FFmpeg (for video processing):
# Windows: winget install ffmpeg # macOS: brew install ffmpeg # Linux: sudo apt install ffmpeg

# Run backend and frontend simultaneously npm start # OR npm run dev # Or run separately: npm run backend # Backend on port 3001 (development mode) npm run frontend # Frontend on port 3000 npm run backend:prod # Backend in production mode

✅ Installation Verification

# Test YT-DLP cd backend npm run test:download # Test playlist progress (with example) npm run test:playlist # Check API health curl http://localhost:3001/api/health

Individual Video Progress

Visual Interface: Each playlist video has its own progress bar
Colored States:
- 🟡 Starting (orange)
- 🔵 Downloading (blue)
- 🟢 Completed (green)
- 🔴 Error (red)
- ⚫ Waiting (gray)
Real Time: WebSocket + polling for instant updates
Detailed Information: Percentage progress and individual status

Check the complete documentation in Postman (link in documentation section).

GET /api/videos - List videos
POST /api/videos - Video upload
GET /api/videos/:id - Get specific video
GET /api/channels - List channels
POST /api/channels - Create channel
GET /api/comments/:videoId - Video comments
POST /api/comments - Add comment

XandTube/ ├── backend/ # Node.js/Express API │ ├── config/ # Database configurations │ ├── models/ # Sequelize models │ ├── routes/ # API routes │ ├── services/ # Services (YT-DLP, Downloads) │ ├── middleware/ # Authentication middlewares │ ├── utils/ # Utilities │ └── scripts/ # Test scripts ├── frontend/ # React interface │ ├── src/ │ │ ├── components/ # Reusable components │ │ ├── pages/ # Application pages │ │ ├── services/ # APIs and utilities │ │ └── utils/ # Helpers and formatters │ └── public/ # Static files ├── videos/ # Video storage │ ├── downloads/ # Downloaded videos (.keep included) │ └── metadata/ # Metadata (.keep included) ├── docs/ # API documentation ├── .gitignore # Ignores node_modules, videos, etc. └── package.json # Root project scripts