The ClipCrafter project aimed to improve the user experience of project cards by displaying actual YouTube video titles and thumbnails. Initially, project cards only showed generic titles like "YouTube video (VIDEO_ID)" without thumbnails. Storing this information directly would have required database migrations and backfills.
However, the team found a way to achieve this without infrastructure changes. For video titles, they utilized YouTube's free oEmbed API, which provides video metadata including the title. This API call is made during project creation, and if it fails, a fallback title with the video ID is used. The fetched title is then stored with the project.
For thumbnails, they leveraged YouTube's predictable thumbnail URL pattern, which only requires the video ID. The video ID is extracted either from the stored YouTube URL for new projects or from the title format for older projects. This approach dynamically generates thumbnail URLs for existing and new projects.
The YouTube thumbnail domain was added to the application's configuration to allow displaying remote images. The project card component was updated to conditionally render a thumbnail if a valid source is found. This solution avoids database migrations, backfill scripts, and the need for API keys.
The article concludes by highlighting a broader pattern: before implementing new infrastructure, consider if the required data can be derived from existing database entries, free platform APIs, or predictable URL structures. This approach can significantly improve user experience with minimal development effort.
dev.to
dev.to
