Project Overview

A comprehensive self-hosted web application designed to solve the limitations of YouTube’s native “Watch Later” playlist when dealing with large collections (800+ videos). Built with modern full-stack technologies and production-grade practices.

The Challenge

YouTube’s ‘Watch Later’ playlist becomes increasingly difficult to manage with large video collections:

  • No Duration-based Sorting: Unable to sort videos by length for efficient viewing
  • Poor Queue Management: Lack of proper progression and queue optimization
  • No Single-page Workflow: Constant navigation disrupts viewing experience
  • Limited Statistics: No insights into viewing patterns or playlist analytics
  • Performance Issues: Slow loading and poor responsiveness with large playlists

The Solution

Developed a modern single-page application addressing all these limitations:

Core Features

  • 🎬 Unified Video Player: Single-page design with embedded YouTube player and queue sidebar
  • 📊 Real-time Statistics: Modal overlay showing total videos, duration, channels, and weekly averages
  • ⏱️ Duration-based Sorting: Automatic queue sorting by video length (shortest first)
  • 🔄 Dynamic Queue Management: Real-time queue updates as videos are watched or skipped
  • 💾 Backup & Restore System: Automated hourly backups with frontend management interface

Technical Implementation

Frontend Architecture

  • Vue.js 3: Modern reactive framework with Composition API
  • TypeScript: Full type safety across the application
  • Single-page Design: Modal-based interface for optimal user experience
  • Component Architecture: Modular, reusable Vue components
  • State Management: Centralized application state with reactive updates

Backend Infrastructure

  • Node.js/Express: RESTful API with TypeScript
  • PostgreSQL: Robust data persistence with proper schema design
  • Docker: Containerized deployment for development and production
  • API Design: Well-structured endpoints for data management and video operations

Key Features

Core Video Management

  • 🎬 Unified Video Player: Single-page design with embedded YouTube player and queue sidebar
  • 📊 Real-time Statistics: Modal overlay showing total videos, duration, channels, and weekly averages
  • ⏱️ Duration-based Sorting: Automatic queue sorting by video length (shortest first)
  • 🔄 Dynamic Queue Management: Real-time queue updates as videos are watched or skipped
  • ✅ Completion Tracking: Auto-progression to next video with manual skip option

Advanced Capabilities

  • 📥 Smart Video Import: Drag-and-drop JSON import with validation and progress tracking
  • 🐵 Integrated Userscript: Browser script for exporting YouTube playlists with installation guide
  • 💾 Backup & Restore System: Automated hourly backups with frontend management interface
  • ⚠️ Import Warning System: Smart duplicate detection with user-friendly warnings
  • 🔄 Browser Compatibility: Support for Chrome, Firefox, Safari, Edge with userscript managers

Results and Impact

Production-ready application with significant workflow improvements:

  • 106 Comprehensive Tests: 58 frontend + 48 backend tests with high coverage
  • CI/CD Pipeline: GitLab automation for testing, building, and deployment
  • Live Production: Successfully managing 800+ video playlists in production
  • Performance: Fast loading and responsive interface for large datasets
  • User Experience: Seamless single-page workflow without navigation interruption

Lessons Learned

Technical Insights

  • Full-Stack TypeScript: Benefits of consistent typing across frontend and backend
  • Docker Development: Efficient containerized development workflows
  • Testing Strategy: Importance of comprehensive testing for complex user interactions
  • API Design: Best practices for RESTful API design with proper error handling

Project Management

  • Solo Development: Effective techniques for managing complex projects independently
  • Documentation: Value of comprehensive documentation for long-term maintenance
  • User-Centered Design: Importance of solving real user problems with practical solutions
  • Production Deployment: Experience with CI/CD pipelines and production monitoring