YouTube Notes
Timestamped video note-taker with embedded player, Markdown & IndexedDB.
01 / Overview
A high-productivity browser application designed for learning and research from video content. Enables users to watch YouTube videos, take timestamped notes with synchronized playback, format thoughts using full Markdown editing, and persist notebooks privately to local IndexedDB storage.
02 / Architecture & Engineering
Built with modern React 19 and TypeScript, leveraging Zustand for fast, fine-grained state management across video playback states, active note buffers, and timestamp indexes. Video rendering and precision seeking are handled via the YouTube IFrame API through react-youtube. Notes and workspace state are persisted entirely on the client side using IndexedDB, guaranteeing instant performance and offline privacy.
03 / Technical Highlights
Embedded YouTube Playback: Seamless video playback controls powered by react-youtube with instant timestamp insertion at the exact playback second.
Interactive Timestamp Synchronization: Clicking any timestamp in the notes instantly seeks the video to that exact point for rapid review.
Full Markdown Support: Rich text editing with live formatting, headings, code snippets, lists, and task blocks.
Local-First & Zero-Login: All notes, timestamps, and video metadata are securely persisted in the browser via IndexedDB with zero server dependency.
Technologies Used
Deliverables
- ▸ Production Web App on Vercel
- ▸ Interactive Video Player & Timestamp Sync
- ▸ Full Markdown Note-Taking Workspace
- ▸ IndexedDB Local-First Persistence Layer