Hey devs 👋
I recently built a YouTube Video Library Web App that lets you save and organize videos in a way that feels more like a personal library than YouTube playlists.
🔗 Live Demo: https://ytbookmark.vercel.app/
💡 The Problem
YouTube playlists are useful… but only to a point.
- Hard to organize large collections
- No custom grouping beyond playlists
- No quick way to manage or filter content
- Everything is tied to your account
After saving hundreds of videos, it started to feel messy and limiting.
🧠 The Idea
I wanted a simple, private, and flexible way to:
- Save videos quickly
- Organize them however I want
- Access them without logging in
- Keep everything in one clean interface
So I built my own YouTube video library.
⚙️ Tech Stack
- HTML
- CSS
- Vanilla JavaScript
- localStorage
- PWA (Progressive Web App)
No frameworks. No backend. Fully client-side.
**
✨ Features
**
📌 Core Features
- Save YouTube video links
- Auto-generate thumbnails
- Organize videos into custom groups
- Instant search and filtering
⭐ Productivity Features
- Mark favorites
- Edit labels and group names
- Move or copy videos between groups
- In-app video preview
🔄 Data Handling
- Persistent storage using localStorage
- Export & import backups
- Refresh video metadata
🎨 UI & Experience
- Responsive design (mobile + desktop)
- Custom modals & action menus
- Toast notifications
- Recent activity tracking
- 📱 Installable App (PWA)
- Install on desktop
- Works offline
- Feels like a native app
🧩 Key Challenges
1. Structuring Data in localStorage
Without a backend, everything had to be stored and managed in the browser.
I designed a structured format for:
- videos
- groups
- metadata
- user actions
2. Extracting YouTube Thumbnails
I parsed video URLs to extract the video ID and generate thumbnails dynamically.
3. Building UI Without Frameworks
Creating smooth interactions like modals, menus, and notifications using pure JavaScript required careful DOM handling.
🔥 What Makes It Different?
- No login required
- No dependency on YouTube accounts
- Works offline
- Fully private (data stays in your browser)
More flexible than playlists
It’s not meant to replace YouTube —
it’s meant to give you more control over your saved content.
🚀 What I Learned
- How to manage complex state using localStorage
- Structuring scalable front-end logic without frameworks
- Building a complete product experience with just Vanilla JS
- Importance of UX in small tools
*📈 What’s Next?
*
- Some ideas I might add:
- Tags & advanced filtering
- Drag & drop organization
- Dark mode improvements
- Optional cloud sync
🙌 Feedback Welcome
I’d love to hear your thoughts, suggestions, or ideas for improvement.
If you find it useful, feel free to share 🙌
Top comments (0)