Code Projects

YouTube Thumbnail Battle

May 20, 2025 ยท 5 min read

A game that tests your ability to identify high-performing YouTube thumbnails with view count guessing mechanics

YouTube Thumbnail Battle

This interactive game challenges players to develop an eye for viral content by guessing which YouTube thumbnail received more views. It uses the YouTube Data API to fetch real video data and helps content creators build intuition for effective thumbnail design.

Development Process

The game was developed using: 1. YouTube Data API Integration: Pulls real YouTube videos and their view counts for comparison. 2. Responsive User Interface: Clean, darkthemed design following my personal brand guidelines. 3. Custom Game Mechanics: Includes streak tracking, time pressure, and instant feedback.

Key Features

Real YouTube thumbnails from longform videos (no Shorts) Englishlanguage video filtering Countdown timer adding time pressure to decisions Streak tracking system with personal bests Fallback system with mock data if API limits are reached Mobileresponsive design that works on all devices Personalized feedback based on performance

Technical Details

The game leverages several web technologies: YouTube Data API for video fetching Custom CSS animations and transitions LocalStorage for saving user statistics ES6 JavaScript for game logic and API interaction

How to Play

1. Click "Start Game" to begin 2. Two YouTube thumbnails will appear choose which one you think has more views 3. Try to build the longest streak possible by guessing correctly 4. Beat your high score and develop your content creator instincts!

Back to Blog