A modern, feature-rich Progressive Web App for analyzing YouTube playlists and recovering missing video titles
🚀 Live Demo • 📱 Install as PWA • 🔧 Getting Started • 📖 Documentation
- 📊 Comprehensive Playlist Analysis - Get detailed insights into your YouTube playlists
- 🔍 Missing Video Recovery - Identify and recover titles of unavailable/deleted videos
- 📱 Grid & Table Views - Switch between beautiful card layouts and detailed table views
- 🔄 Smart Filtering - Filter by available, unavailable, or all videos
- 📋 Backup & Restore - Export your playlist data and import previous backups
- 🔗 Multi-Platform Search - Search for missing videos across Internet Archive, Brave, Twitter, and Reddit
- 🌊 Beautiful Ocean Theme - Stunning animated gradients with floating flares and sparkles
- 🌓 Dark/Light Mode - Automatic system detection with manual override
- 📱 Responsive Design - Perfect experience on mobile, tablet, and desktop
- ♿ Accessibility First - Built with Material Design 3 principles
- ⚡ Smooth Animations - Delightful micro-interactions and transitions
- 🎭 Progressive Web App - Install on any device for native-like experience
- 🔐 Secure API Key Management - Encrypted local storage of YouTube API credentials
- 💾 Smart Caching - Offline support with service worker implementation
- 📈 Real-time Statistics - Live playlist analytics and insights
- 🔄 File Comparison - Compare current playlist with backup files
- 📱 Install Prompts - Smart PWA installation suggestions
- 🎯 Performance Optimized - Fast loading with code splitting and lazy loading
- Node.js 18+
- npm or yarn
- YouTube Data API v3 key (Get it here)
-
Clone the repository
git clone https://github.com/yourusername/missingtube.git cd missingtube -
Install dependencies
npm install
-
Start development server
npm run dev
-
Open your browser
http://localhost:5173
# Build the app
npm run build
# Preview the build
npm run previewMissingTube can be installed as a Progressive Web App on any device:
- Visit the website
- Look for the install icon in the address bar
- Click "Install MissingTube"
- The app will appear in your applications folder
- Open the website in your browser
- Look for the install icon in the address bar
- Click "Install MissingTube"
- The app will appear in your applications folder
- 📱 Native-like experience - Runs in its own window
- ⚡ Faster loading - Cached resources load instantly
- 🔄 Offline support - Basic functionality works without internet
- 📬 Push notifications - Get updates about new features (coming soon)
- Click the "API Key" button in the navigation
- Enter your YouTube Data API v3 key
- The key is encrypted and stored locally
- Paste any YouTube playlist URL or ID
- Click "Analyze Playlist"
- Wait for the analysis to complete
- View playlist statistics and insights
- Switch between grid and table views
- Filter by video availability
- Search for missing videos using external platforms
- Download your playlist data as JSON
- Compare with previous backups to find recovered titles
- Merge data from multiple sources
- React 18 - Modern React with hooks and concurrent features
- TypeScript - Type-safe development
- Tailwind CSS - Utility-first CSS framework
- Material Design 3 - Google's latest design system
- Lucide React - Beautiful, customizable icons
- Service Worker - Offline support and caching
- Web App Manifest - Native app-like installation
- Background Sync - Data synchronization when back online
- Cache API - Smart resource caching strategy
- Vite - Fast build tool and development server
- ESLint - Code linting and formatting
- PostCSS - CSS processing and optimization
- YouTube Data API v3 - Playlist and video information
- Web APIs - Fetch, Cache, Service Worker, Intersection Observer
The app uses a beautiful ocean-inspired color palette. To customize:
-
Edit
src/index.cssCSS variables::root { --md-sys-color-primary: 14 165 233; /* Sky Blue */ --md-sys-color-secondary: 6 182 212; /* Cyan */ --md-sys-color-tertiary: 16 185 129; /* Emerald */ }
-
Update
tailwind.config.jsfor additional customizations
The animated background can be customized in src/index.css:
oceanGradientanimation for the main gradientfloatingFlaresfor the floating light effectssparklesfor the twinkling stars
Create a .env.local file for local development:
VITE_APP_NAME=MissingTube
VITE_APP_VERSION=1.0.0
VITE_APP_URL=https://missingtube.appEdit public/manifest.json to customize:
- App name and description
- Icons and screenshots
- Theme colors
- Display mode
- Shortcuts
We welcome contributions! Please see our Contributing Guide for details.
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Use TypeScript for all new code
- Follow the existing code style
- Add tests for new features
- Update documentation as needed
This project is licensed under the MIT License - see the LICENSE file for details.
- Google - For the YouTube Data API and Material Design
- Tailwind Labs - For the amazing Tailwind CSS framework
- Lucide - For the beautiful icon library
- The React Team - For the incredible React framework
- All Contributors - Thank you for making this project better!
- Website: https://missingtube.app
- Documentation: Wiki
- Bug Reports: Issues
- Feature Requests: Discussions
- ⭐ Stars: Help us grow by starring the repo!
- 🍴 Forks: See all the amazing forks
- 🐛 Issues: Check current issues and help fix them
- 📈 Contributors: Join our amazing community
Made with ❤️ by the MissingTube team