YouTube Downloader Web App

A full-stack web application for downloading YouTube videos with a modern React frontend and a Node.js backend API powered by yt-dlp.

Features

• Video Information Retrieval: Fetch video metadata including title, thumbnail, duration, and available quality options.
• Flexible Downloads: Download videos in various qualities (360p, 480p, 720p, 1080p, Best Available up to 4K).
• Real-time Progress: Monitor download progress through Server-Sent Events (SSE).
• Automatic Cleanup: Downloaded files are automatically deleted after 10 minutes or on client disconnect.
• Responsive UI: Modern, dark/light theme toggleable interface built with React and Tailwind CSS.
• Caching: Video info is cached to improve performance and reduce API calls.

Tech Stack

Backend

• Node.js with Express.js
• yt-dlp for video downloading and metadata extraction
• CORS for cross-origin requests
• File system operations for temporary file management

Frontend

• React 19 with Vite for fast development and building
• Tailwind CSS for styling
• Radix UI components for accessible UI elements
• React Router for navigation
• Lucide React for icons
• Motion for animations

Prerequisites

• Node.js (v14 or higher)
• npm or yarn
• yt-dlp installed on your system (see installation instructions below)

Installing yt-dlp

Windows

winget install yt-dlp

macOS

brew install yt-dlp

Linux

sudo apt install yt-dlp  # Ubuntu/Debian
# or
sudo dnf install yt-dlp  # Fedora

Installation

1. Clone the repository:

git clone <repository-url>
cd youtubeDl

2. Install backend dependencies:

cd backend
npm install

3. Install frontend dependencies:

cd ../frontend
npm install

Usage

1. Start the backend server:

cd backend
npm run dev

The backend will run on http://localhost:5000

2. Start the frontend development server:

cd frontend
npm run dev

The frontend will run on http://localhost:5173 (default Vite port)

3. Open your browser and navigate to the frontend URL to use the application.

API Endpoints

POST /info

Fetch video information and available formats.

Request Body:

{
  "url": "https://www.youtube.com/watch?v=VIDEO_ID"
}

Response:

{
  "title": "Video Title",
  "thumbnail": "https://...",
  "duration": "10:30",
  "formats": [
    {
      "formatId": "bv*+ba/b",
      "quality": "Best Available (4K/2K)",
      "container": "mp4"
    },
    {
      "formatId": "bv*[height=1080]+ba/b[height=1080]",
      "quality": "1080p",
      "container": "mp4"
    }
    // ... more formats
  ]
}

GET /download

Download a video with progress updates via Server-Sent Events.

Query Parameters:

• url: YouTube video URL
• format: Format ID from the /info endpoint

Response: Server-Sent Events stream with progress updates, ending with a download link.

GET /file

Download the processed video file.

Query Parameters:

• path: Encoded filename from the download endpoint

Project Structure

youtubeDl/
├── backend/
│   ├── index.js          # Main Express server
│   ├── package.json      # Backend dependencies
│   └── downloads/        # Temporary download directory (auto-created)
├── frontend/
│   ├── src/
│   │   ├── App.jsx       # Main React app
│   │   ├── Hero.jsx      # Landing page hero section
│   │   ├── components/   # Reusable UI components
│   │   │   ├── Navbar.jsx
│   │   │   ├── Features.jsx
│   │   │   ├── HowItWorks.jsx
│   │   │   ├── FAQ.jsx
│   │   │   └── ui/       # Radix UI components
│   │   └── context/      # React contexts
│   ├── package.json      # Frontend dependencies
│   └── vite.config.js    # Vite configuration
└── readme.md             # This file

Development

Backend Scripts

• npm run dev: Start development server with nodemon

Frontend Scripts

• npm run dev: Start Vite development server
• npm run build: Build for production
• npm run preview: Preview production build
• npm run lint: Run ESLint

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

License

This project is licensed under the ISC License.

Disclaimer

This application is for educational purposes only. Please respect YouTube's Terms of Service and copyright laws when downloading content. The developers are not responsible for any misuse of this tool.