01
/05
Youtube Playlist Calculator
The Background
A responsive Single Page Application that calculates the total duration of a YouTube playlist using the YouTube Data API. Supports time conversion to minutes, hours, and ISO 8601 format, with a focus on usability and clean interface design.
This project was born out of a personal frustration—I often found myself trying to estimate how much time I’d need to binge-watch educational YouTube playlists, especially crash courses for beginners. Surprisingly, YouTube doesn’t display total playlist durations, which seems intentional—perhaps to keep viewers engaged and unaware of how much time they’re investing. Realizing this gap, I decided to build a solution for myself—a simple, focused tool to calculate playlist durations and help others manage their time better.
The Palette
The aim of this project was to demonstrate how a simple concept can still capture a user's attention through thoughtful design. By closely mimicking YouTube's own UI patterns, the application builds an illusion of credibility, making the experience feel familiar and trustworthy. This approach reinforces usability while showcasing how minimal features, when presented effectively, can deliver real value.
Imperial red
BD0009
Red
AF0009
Black
000000
The Process
1
API Implementation
Researched how to use the YouTube Data API to compute the total duration of all videos in a playlist.
2
UI Design
Designed the interface to closely resemble YouTube's UI in order to create a familiar experience and establish an illusion of credibility.
3
Tools Research
Explored new technologies such as React’s useActionState, Tailwind CSS v4.0, and Vite as part of the project's learning objectives.
4
Development
Handled development edge cases, such as validating YouTube playlist URLs to prevent unnecessary or invalid API requests.
5
Deployment
To align with the project’s goal of exploring new tools, the application was deployed using Vercel for seamless CI/CD integration.
The Gallery
