How I Built a YouTube Playlist Tool While Learning JavaScript

I am a software engineer by profession, and I mostly work with Python. I am very comfortable using Django for backend APIs and database designs. However, I always felt a little nervous about frontend development, especially JavaScript. I felt JavaScript was always a bit confusing.

The Reason I Started

To gain knowledge and get comfortable with the frontend, I decided to learn JavaScript properly. I heard many people recommending Akshay Saini and his "Namaste JavaScript" playlist on YouTube, so I thought to give it a try.

Namaste JavaScript series has 2 playlists and it is one of the best playlists to learn JavaScript. I would recommend you to watch this playlist if you want to gain deep knowledge of JavaScript.

Season 1: Covers the basic & essential topics

Season 2: Check out advanced concepts

I started watching the videos one by one in the Season 1 playlist. The content was very good and easy to understand, and I wanted to finish the whole playlist. To plan my schedule, I wanted to know the total duration of the playlist. But YouTube doesn't provide a way to get the total duration of a playlist (though this feature is available in YouTube Music playlists).

The Problem with Existing Tools

I searched on Google for "YouTube Playlist length." I found a few websites that showed the total time and speed calculations. However, I realized these tools were missing some practical features I really needed:

Remaining Time: After watching 10 videos, I wanted to know how much time is left for the remaining ones. Also, the last few videos in the playlist are usually the general ones, so I wanted to skip them. Existing tools only showed the total time, but I wanted to know the time for a specific range of videos.
Sorting: I wanted to sort videos to watch the shortest ones first or the most popular ones. There was no option for this.
Access to videos: Once I sorted the playlist, I wanted to open the videos directly from the website because I didn't want to search for the videos again on YouTube. There was no option for this.
Video Stats: I wanted to see the stats of the videos like likes count, views count, and comments count along with the thumbnail, so that I could get a rough idea about the video. There was no option for this as well.

Building My Own Solution

Since I am a developer, I decided to build a tool that solves these problems. I paused my learning and opened my code editor. I used Django because I know it well and can build backend logic fast.

I made a list of features that I wanted to include in this tool:

Total Duration: The basic length of the playlist.
Average Duration: The average video length in the playlist.
Speed Options: Time calculation for 1.25×, 1.5×, and 2× speeds.
Remaining Duration: You can select the videos you have watched, and it tells you the time left.
Advanced Sorting: Options to sort by Longest First, Shortest First, Most Liked, Most Viewed, Oldest First, and Newest First.
Direct Links: You can open the video directly from the table.
Stats: You can also see the stats of the videos like likes count, views count, and comments count.

Once I defined the features, I started building the tool. I used Django for the backend and wrote CSS & HTML with the help of AI. For the data, I used the official YouTube API. If you want to know how to set up and create a YouTube API key, check this video.

Designing the Backend & YouTube API Architecture

Under the hood, the YouTube Data API is surprisingly restrictive when it comes to batching. To calculate a playlist's total length, you cannot simply query a single playlist endpoint and retrieve a duration field. Instead, the process requires two distinct API calls:

Fetching the Playlist Items: We call playlistItems.list with the target playlistId. This returns a list of video IDs within that playlist, paginated up to 50 items per page.
Fetching the Video Metadata: Once we have the video IDs, we make a secondary call to videos.list requesting the contentDetails (which contains the duration) and statistics (which contains views, likes, and comment counts) fields.

To minimize API latency and quota consumption, I had to implement batching. Instead of querying each video's details one by one (which would quickly exhaust the daily quota), we batch the video IDs in groups of 50. For a playlist with 150 videos, this reduces the metadata queries from 150 individual calls to just 3 batch requests.

Parsing ISO 8601 Durations in Python

One of the most interesting technical hurdles was handling the video durations returned by the YouTube API. The API outputs durations in the ISO 8601 standard format—for example, PT1H23M45S representing 1 hour, 23 minutes, and 45 seconds, or PT15M33S for 15 minutes and 33 seconds.

In the Django backend, I wrote a custom parser using regular expressions to extract hours, minutes, and seconds, converting them all into a unified total seconds format:

import re

def parse_iso8601_duration(duration_str):
    pattern = re.compile(r'PT(?:(\d+)H)?(?:(\d+)M)?(?:(\d+)S)?')
    match = pattern.match(duration_str)
    if not match:
        return 0
    hours = int(match.group(1)) if match.group(1) else 0
    minutes = int(match.group(2)) if match.group(2) else 0
    seconds = int(match.group(3)) if match.group(3) else 0
    return (hours * 3600) + (minutes * 60) + seconds

Once converted to seconds, calculating the sum, average, and custom speed multipliers (like 1.25x or 1.5x) became simple arithmetic.

Implementing Caching to Mitigate Quota Limits

YouTube provides a free daily quota of 10,000 "units". A unit is a measure of resource usage (e.g., retrieving a playlist costs 1 unit, getting information about 50 videos costs 1 unit, etc.). While this limit is generous for a single user, launching a public web tool means multiple users requesting the same popular playlists could exhaust the quota within hours.

To solve this, I introduced a robust caching layer. When a user requests a playlist, the application checks if the parsed data already exists in our cache database (using Django's database/file cache framework). If the cached entry is less than 24 hours old, we serve it directly. If it is stale or missing, the backend fetches fresh data from the YouTube API and updates the cache. This caching strategy reduced API queries by over 70%, guaranteeing high availability without requesting an expensive quota increase from Google.

From Django to Next.js (YTP 2.0)

As the tool grew in popularity, I decided to migrate the entire project to Next.js (React and TypeScript). While Django was excellent for the initial prototype, Next.js allowed me to shift the user interface into a lightning-fast Single Page Application (SPA). Instead of page refreshes for sorting or video range selection, all filtering, range recalculations, and column sorting are done instantly in the browser. Next.js Route Handlers act as lightweight, serverless edge functions to query the YouTube API, offering better performance and near-zero server maintenance costs.

Note on API Limits: YouTube provides a free daily quota of 10,000 "units". A unit is a measure of resource usage (e.g., retrieving a playlist costs 1 unit, getting information about 50 videos costs 1 unit, etc.), so this generous limit is more than enough for hobby projects. If you want to see a detailed guide on how to monitor your usage and set up alerts, read our post on How to Deal with YouTube API Quota Limits. Here is the link to the official documentation page.

Conclusion

It took some effort, but I managed to build the tool exactly how I wanted it. Here is the link to the tool: YTP Length. Since then, I have been using this free tool whenever I learn something from a YouTube playlist. It's been used by many people now, and I'm getting feedback that it's very useful to them.

Note: If you want to know my learning strategy, then check out this blog post: How I Use YouTube Playlists to Learn Fast: My 3 Secret Steps.