A modern web application that helps you find videos from your YouTube subscription channels on any topic. Generate beautiful reports with video details and export them as Markdown or PDF.
- 🔐 Google OAuth Authentication - Secure sign-in with your Google account
- 📺 Subscription Discovery - Fetches all your YouTube subscription channels
- 🔍 Topic Search - Search for videos on specific topics from your subscriptions
- 📅 Date Filtering - Filter videos by date range
- 📋 Markdown Export - Copy results as a formatted Markdown table
- 📄 PDF Export - Download a professional PDF report
- 🎨 Modern UI - Dark theme with YouTube-inspired red accents
- 📱 Responsive - Works on desktop and mobile devices
- Open the app in your browser
- Sign in with your Google account
- Enter a topic (e.g., "Python", "AI", "Cooking")
- Set date range (optional)
- Click "Generate Report"
- Export as Markdown or PDF
- Node.js 18+
- A Google Cloud project with YouTube Data API v3 enabled
- OAuth 2.0 credentials (Client ID)
git clone <repository-url>
cd yt-reportnpm install- Go to Google Cloud Console
- Create a new project or select an existing one
- Enable YouTube Data API v3
- Go to APIs & Services → Credentials
- Create OAuth 2.0 Client ID (Web application)
- Add the following to Authorized JavaScript origins:
http://localhost:8080
- Add the following to Authorized redirect URIs:
http://localhost:8080
- Copy your Client ID
Create a .env file in the root directory:
VITE_YOUTUBE_CLIENT_ID=your-client-id-here.apps.googleusercontent.comnpm run devThe app will be available at http://localhost:8080
npm run buildThe built files will be in the dist folder.
yt-report/
├── src/
│ ├── components/
│ │ ├── Header.jsx # App header with logo
│ │ ├── SearchPanel.jsx # Search input and date filters
│ │ ├── VideoGrid.jsx # Video results grid
│ │ ├── VideoCard.jsx # Individual video card
│ │ └── ExportButtons.jsx # Export buttons
│ ├── App.jsx # Main application component
│ ├── App.css # All styles
│ ├── main.jsx # React entry point
│ └── index.css # Base CSS reset
├── .env # Environment variables (not committed)
├── .gitignore # Git ignore rules
├── index.html # HTML entry point
├── package.json # Dependencies
├── vite.config.js # Vite configuration
└── README.md # This file
- React 19 - UI framework
- Vite - Build tool and dev server
- @react-oauth/google - Google OAuth authentication
- html2pdf.js - PDF generation
- YouTube Data API v3 - YouTube data access
| Endpoint | Purpose |
|---|---|
subscriptions/list |
Fetch user's subscription channels |
search/list |
Search for videos by topic |
videos/list |
Get video details (duration, etc.) |
| Variable | Description |
|---|---|
VITE_YOUTUBE_CLIENT_ID |
Your Google OAuth Client ID |
- The app uses OAuth 2.0 token-based authentication
- Access tokens are stored in sessionStorage (cleared on tab close)
- No sensitive data is stored on the server
- Your Client ID should be kept confidential
Make sure your OAuth redirect URI matches exactly in Google Cloud Console:
http://localhost:8080(no trailing slash)
Add your email as a test user in Google Cloud Console:
- Go to OAuth consent screen → Test users
- Add your Google email address
- Check browser console for errors
- Ensure JavaScript origins are configured correctly
If you find this project useful, please consider:
- ⭐ Star the repo on GitHub
- 🐛 Report issues at https://github.com/plamen5rov/youtube-feed/issues
- 💡 Suggest features or improvements
Your support motivates me to keep building!
MIT License - feel free to use this project for learning or personal projects.