A pure JavaScript web application for uploading and managing YouTube videos using Google OAuth and YouTube Data API v3.

• Google OAuth Authentication - Secure login with Google accounts
• Video Upload - Upload videos directly to YouTube with metadata
• Video Management - View, edit, and delete your YouTube videos
• Search & Filter - Find videos by title or description
• Sorting Options - Sort by date, title, or view count
• Responsive Design - Works on desktop and mobile devices
• Progress Tracking - Real-time upload progress indication

1. Go to Google Cloud Console
2. Create a new project or select an existing one
3. Enable the YouTube Data API v3:
   • Go to "APIs & Services" > "Library"
   • Search for "YouTube Data API v3"
   • Click "Enable"

1. Go to "APIs & Services" > "Credentials"
2. Click "Create Credentials" > "OAuth 2.0 Client IDs"
3. Configure the OAuth consent screen if prompted
4. Set application type to "Web application"
5. Add authorized JavaScript origins:
   • http://localhost:8000 (for local development)
   • Your production domain
6. Copy the Client ID

1. Open auth.js
2. Replace YOUR_GOOGLE_CLIENT_ID with your actual Client ID:

   const CONFIG = {
       CLIENT_ID: 'your-actual-client-id-here.googleusercontent.com',
       // ... rest of config
   };

Since this is a pure JavaScript application, you need to serve it through a web server (not file://).

# Python 3
python -m http.server 8000

# Python 2
python -m SimpleHTTPServer 8000

npx http-server -p 8000

php -S localhost:8000

Then open http://localhost:8000 in your browser.

1. Sign In: Click the Google sign-in button to authenticate
2. Upload Video:
   • Select a video file (MP4, AVI, MOV, etc.)
   • Enter title and description
   • Choose privacy setting
   • Click "Upload Video"
3. Manage Videos:
   • View all your uploaded videos
   • Search by title or description
   • Sort by date, title, or views
   • Edit or delete videos

• Pure JavaScript - No frameworks or build tools required
• Functional Programming - Uses const variables, arrow functions, and functional patterns
• Modular Design - Separated into auth, API, and app modules
• Responsive UI - Modern CSS with flexbox and grid

├── index.html          # Main HTML structure
├── styles.css          # Modern CSS styling
├── auth.js            # Google OAuth authentication
├── youtube-api.js     # YouTube API integration
├── app.js            # Main application logic
└── README.md         # This file

• No for loops - Uses functional methods like map(), filter(), forEach()
• Arrow functions - Consistent use of => syntax
• Const variables - Immutable variable declarations
• Promise-based - Async/await and Promise patterns
• Error handling - Comprehensive error management

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

• Never commit your actual Client ID to version control
• Use environment variables or config files for production
• Ensure HTTPS in production for OAuth security
• Regularly rotate API credentials

1. "Failed to initialize Google authentication"

   • Check if Client ID is correctly set
   • Verify domain is added to authorized origins
   • Ensure APIs are enabled in Google Cloud Console

2. Upload fails

   • Check file size (YouTube has limits)
   • Verify file format is supported
   • Ensure proper OAuth scopes are granted

3. Videos don't load

   • Check if YouTube Data API is enabled
   • Verify authentication is successful
   • Check browser console for errors

To extend this application:

1. Add new features - Follow the functional programming patterns
2. Modify UI - Update CSS classes and HTML structure
3. Enhance API calls - Add more YouTube API endpoints
4. Improve error handling - Add more specific error messages

MIT License - feel free to use and modify as needed.