🎥 YouTube Video Discovery

A web application that displays the top 10 YouTube videos for any specified niche or sub-niche.

• Custom Page Headers: Set your own page title for different niches
• Two-Column Layout: Video information on the left, descriptions on the right
• Rich Video Data: Thumbnails, view counts, duration, publish dates
• Responsive Design: Works great on desktop and mobile
• Direct YouTube Links: Click to watch videos directly on YouTube

1. YouTube Data API Key:
   • Go to Google Developers Console
   • Create a new project or select existing one
   • Enable "YouTube Data API v3"
   • Create credentials (API Key)
   • Add as environment variable: YOUTUBE_API_KEY

YOUTUBE_API_KEY=your_youtube_api_key_here

├── backend/
│   └── index.ts              # Main Hono server with YouTube API integration
├── frontend/
│   ├── index.html            # Main HTML template
│   ├── app.js               # Frontend JavaScript logic
│   └── style.css            # Custom CSS styles
├── index.tsx                # Entry point (HTTP trigger)
└── README.md               # This file

1. Enter a Niche: Type any topic (e.g., "cooking tutorials", "javascript programming")
2. Custom Header (Optional): Set a custom page title
3. Search: Click "Find Top Videos" to discover content
4. Browse Results: View video details and click to watch on YouTube

• Backend: Hono framework with YouTube Data API v3 integration
• Frontend: Vanilla JavaScript with TailwindCSS
• API: RESTful endpoint at /api/videos
• Responsive: Mobile-first design with CSS Grid

• GET / - Main application page
• GET /api/videos?niche={search_term} - Fetch top 10 videos for niche
• GET /frontend/* - Static asset serving

• Video Rankings: Shows top 10 videos with numbered rankings
• Rich Metadata: View counts, duration, publish dates, channel info
• Hover Effects: Interactive video cards with smooth animations
• Error Handling: Graceful error messages and loading states
• Accessibility: Proper ARIA labels and keyboard navigation