Here's a comprehensive setup for a YouTube music video curation SaaS: MusicVideoHub

MusicVideoHub

Your Curated Playlists

body { font-family: 'Inter', sans-serif; } .video-card { transition: transform 0.2s; } .video-card:hover { transform: translateY(-5px); } .playlist-card { background: rgba(107, 70, 193, 0.1); transition: all 0.2s; } .playlist-card:hover { background: rgba(107, 70, 193, 0.2); transform: scale(1.02); } const API_KEY = 'YOUR_YOUTUBE_API_KEY'; let currentUser = null; document.addEventListener('DOMContentLoaded', () => { const searchBtn = document.getElementById('searchBtn'); const loginBtn = document.getElementById('loginBtn'); searchBtn.addEventListener('click', searchVideos); loginBtn.addEventListener('click', handleAuth); // Load user data if logged in const savedUser = localStorage.getItem('musicVideoHubUser'); if (savedUser) { currentUser = JSON.parse(savedUser); updateUI(); } }); async function searchVideos() { const query = document.getElementById('searchInput').value.trim(); if (!query) return; try { const response = await fetch(`https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=15&q=${encodeURIComponent(query + ' music')}&type=video&key=${API_KEY}`); const data = await response.json(); displayResults(data.items); } catch (error) { console.error('Error searching videos:', error); } } function displayResults(videos) { const resultsContainer = document.getElementById('videoResults'); resultsContainer.innerHTML = ''; videos.forEach(video => { const videoCard = document.createElement('div'); videoCard.className = 'video-card bg-gray-800 rounded-lg overflow-hidden shadow-lg'; videoCard.innerHTML = `

${video.snippet.title}

${video.snippet.channelTitle}

`; resultsContainer.appendChild(videoCard); }); } function addToPlaylist(videoId, title) { if (!currentUser) { alert('Please login to create playlists'); return; } // In a real app, you would show a modal to select/create playlist console.log(`Adding ${title} to playlist`); } function handleAuth() { if (currentUser) { // Logout localStorage.removeItem('musicVideoHubUser'); currentUser = null; updateUI(); } else { // Simulate login currentUser = { id: 'user123', name: 'Demo User', playlists: [ { id: 'pl1', name: 'Workout Mix', videoCount: 8 }, { id: 'pl2', name: 'Chill Vibes', videoCount: 12 }, { id: 'pl3', name: 'Party Hits', videoCount: 15 } ] }; localStorage.setItem('musicVideoHubUser', JSON.stringify(currentUser)); updateUI(); } } function updateUI() { const loginBtn = document.getElementById('loginBtn'); const playlistsContainer = document.getElementById('playlists'); if (currentUser) { loginBtn.textContent = 'Logout'; // Display playlists playlistsContainer.innerHTML = ''; currentUser.playlists.forEach(playlist => { const playlistCard = document.createElement('div'); playlistCard.className = 'playlist-card p-4 rounded-lg cursor-pointer'; playlistCard.innerHTML = `

${playlist.name}

${playlist.videoCount} videos

`; playlistsContainer.appendChild(playlistCard); }); } else { loginBtn.textContent = 'Login'; playlistsContainer.innerHTML = '

'; } } # MusicVideoHub - YouTube Music Curation SaaS ## Features - Search YouTube for music videos - Create and manage curated playlists - User authentication system - Responsive design ## Setup 1. Get a YouTube API key from Google Cloud Console 2. Replace `YOUR_YOUTUBE_API_KEY` in app.js with your actual key 3. Open index.html in a browser ## Future Enhancements - User accounts with database storage - Collaborative playlists - Video recommendations based on preferences - Sharing playlists publicly To use this, you'll need to: 1. Get a YouTube API key from Google Cloud Console 2. Replace 'YOUR_YOUTUBE_API_KEY' in app.js with your actual key 3. The app includes simulated login functionality for demonstration purposes