Setup Guide

This guide covers setting up both public and private playlist support.

For Public Playlists (API Key Only)

Step 1: Get Your YouTube API Key

1. Go to Google Cloud Console
2. Create a new project or select an existing one
3. Click "APIs & Services" → "Library"
4. Search for "YouTube Data API v3" and click "Enable"
5. Go to "APIs & Services" → "Credentials"
6. Click "Create Credentials" → "API Key"
7. Copy the API key

Step 2: Add to Netlify

1. Go to your Netlify dashboard
2. Select your site (dannyhope.co.uk)
3. Go to "Site settings" → "Environment variables"
4. Click "Add a variable"
5. Set:
   • Key: YOUTUBE_API_KEY
   • Value: Paste your API key from Step 1
6. Click "Save"

For Private Playlists (OAuth Setup)

To access private playlists like Watch Later (WL) or Liked Videos (LL), you need to set up Google OAuth.

Step 1: Create OAuth Client

1. Go to Google Cloud Console
2. Select the same project from above (or create one)
3. Ensure "YouTube Data API v3" is enabled
4. Go to "APIs & Services" → "Credentials"
5. Click "Create Credentials" → "OAuth client ID"
6. If prompted, configure the OAuth consent screen:
   • User Type: External (unless you have a Google Workspace)
   • App name: "YouTube Playlist Visualizer" (or your preferred name)
   • User support email: Your email
   • Scopes: Add https://www.googleapis.com/auth/youtube.readonly
   • Test users: Add your email if still in testing mode
7. For Application type, select "Web application"
8. Set the authorized redirect URIs:
   • Production: https://dannyhope.co.uk/.netlify/functions/auth-google-callback
   • Preview deploys (optional): https://deploy-preview-*--dannyhope.netlify.app/.netlify/functions/auth-google-callback
   • Branch deploys (optional): https://*--dannyhope.netlify.app/.netlify/functions/auth-google-callback
9. Click "Create"
10. Copy the Client ID and Client Secret

Step 2: Add OAuth Credentials to Netlify

In your Netlify dashboard (Site settings → Environment variables), add these variables:

1. GOOGLE_CLIENT_ID

   • Value: Your OAuth Client ID from Step 1

2. GOOGLE_CLIENT_SECRET

   • Value: Your OAuth Client Secret from Step 1
   • Mark as "Sensitive" in Netlify

3. SESSION_SECRET

   • Value: Generate a random 32+ character string
   • Example: openssl rand -base64 32 (run in terminal)
   • Mark as "Sensitive" in Netlify

Step 3: Deploy

Once all environment variables are set, deploy the site. The visualizer will be available at:

https://dannyhope.co.uk/youtube-playlist-viz/

How It Works

• Public playlists: Work without sign-in using the API key
• Private playlists (WL, LL): Require users to sign in with Google
• When accessing a private playlist, users will see a "Sign in with Google" button
• After signing in, their private playlists will load and display normally

Try It Out

After deployment, test with:

• Public playlist: PLrAXtmErZgOeiKm4sgNOknGvNjby9efdf
• Watch Later (requires sign-in): WL
• Liked Videos (requires sign-in): LL

Testing Locally

To test locally:

# Set environment variables
export YOUTUBE_API_KEY="your-api-key-here"
export GOOGLE_CLIENT_ID="your-client-id"
export GOOGLE_CLIENT_SECRET="your-client-secret"
export SESSION_SECRET="your-random-secret"

# Run the dev server
npm run dev

# Visit http://localhost:5815/youtube-playlist-viz/

Note: For local OAuth testing, add http://localhost:5815/.netlify/functions/auth-google-callback to your OAuth redirect URIs in Google Cloud Console.

API Quotas

The YouTube Data API has daily quotas:

• Free tier: 10,000 units per day
• This tool uses: ~1-3 units per video
• A 50-video playlist = ~100-150 units

This should be plenty for personal use!

Security Notes

• OAuth credentials are stored in secure, httpOnly cookies
• Access tokens never appear in localStorage or client-side JavaScript
• Session data is encrypted before storage
• Never commit API keys or OAuth secrets to the repository