Extract YouTube Playlist Links Instantly: Open-Source Tool Built with Next.js 14

#nextjs #googlecloud #webdev #opensource

I recently built the YouTube Playlist Video Extractor—a modern web application that lets you extract all video links and metadata from any public YouTube playlist or video with just a few clicks. If you’ve ever struggled with copying individual YouTube video links for notes, research, or content curation, this tool is designed to streamline your workflow.

Why I Built It

As a student and developer, I often found myself opening dozens of videos from NPTEL and other educational playlists just to copy their links. This repetitive process was tedious and time-consuming. So, I created this open-source tool to solve that problem—now you can extract all video links, titles, thumbnails, and metadata in one go, with options to copy or export data for your notes or research.

Key Features

Playlist & Video Extraction: Extract all video URLs, titles, thumbnails, and metadata from YouTube playlists or individual videos.
Bulk Operations: Copy all links, titles, or combined data with a single click.
CSV Export: Export playlist data to CSV for external use.
Real-time Loading: Progressive video loading with live progress indicators.
Dual View Modes:
- Paginated View: Navigate videos page by page (5, 10, 15, 20, 30, or 50 videos per page).
- Real-time Stream: Load all videos progressively in one continuous view.
Responsive Design: Modern Tailwind CSS interface optimized for desktop and mobile.
Interactive UI: Toast notifications, loading spinners, and visual feedback.
Concurrent Processing: Parallel video fetching for improved performance.
Smart Caching: 1-hour cache for video metadata to reduce API calls.
Error Handling: Graceful handling of private, deleted, or unavailable videos.
TypeScript: Full type safety throughout the application.

Tech Stack

Frontend: React 18+ with Next.js 14 (App Router)
Backend: Next.js API Routes (serverless functions)
Database: MongoDB (for link history storage)
YouTube Integration: YouTube Data API v3 + ytdl-core
Styling: Tailwind CSS
Language: TypeScript
Caching: In-memory caching with Redis support

Quick Start

Clone the Repository

   git clone https://github.com/curiousbud/YouTube-Playlist-videos-link-Extractor.git
   cd YouTube-Playlist-videos-link-Extractor

Install Dependencies

   npm install

Set Up Environment Variables

   cp .env.example .env.local

Add your YouTube API key and MongoDB URI (optional) to .env.local.

Start Development Server

   npm run dev

Access Application Open your browser and navigate to http://localhost:3000.

Usage Guide

Paste a YouTube playlist or video URL.
Choose between paginated or real-time stream view modes.
Extract videos and use bulk copy or CSV export for your needs.

Project Structure

The application uses a clean, modular structure:

app/ for Next.js app directory
components/ for React components
lib/ for utility libraries (MongoDB, YouTube integration)
API endpoints for playlist and video processing

Deployment

Deploy to Vercel, Netlify, Railway, Render, AWS, Google Cloud, or Azure.
Add environment variables and you’re live!

Migration Notes

This project was migrated from Django/Python to the MERN stack, leveraging modern web standards and improved performance. The core functionality remains the same, with a more responsive and scalable architecture.

Contributing

Contributions are welcome! Fork the repository, create a feature branch, and submit a pull request. Follow TypeScript best practices and update documentation for new features.