Add YouTube Thumbnail Resizer tool with Netlify deployment

- Built complete thumbnail resizing tool for YouTube content creators
- Features drag-and-drop upload with multiple format support (JPG, PNG, WebP)
- Automatic optimization to stay under 2MB file size limit
- YouTube-optimized presets (1280x720 HD, 640x360 SD, custom sizes)
- Quality control with adjustable compression (10-100%)
- Batch processing for multiple images
- Server-side processing using Sharp via Netlify Functions
- Static export configuration for seamless Netlify deployment
- Responsive design with Tailwind CSS matching existing UI
- Complete deployment documentation and configuration

Technical implementation:
- Next.js API route converted to Netlify Function for server-side image processing
- Client-side React interface with react-dropzone for modern UX
- Sharp library for high-performance image manipulation
- Static export optimization with proper build configuration
- CORS configuration for cross-origin requests
- TypeScript throughout for type safety

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: alanops

DEPLOY.md

@@ -0,0 +1,99 @@
+# Deploy YouTube Thumbnail Resizer to Netlify
+
+## 🚀 Quick Deploy
+
+### Option 1: Drag & Drop (Easiest)
+1. Run build: `npm run build`
+2. Go to [netlify.com](https://netlify.com) and create account
+3. Drag the `out` folder to Netlify's deploy area
+4. Your site will be live at `https://random-name.netlify.app`
+
+### Option 2: Git Deploy (Recommended)
+1. Push code to GitHub repository
+2. Connect repository to Netlify
+3. Netlify will auto-build using `netlify.toml` settings
+
+### Option 3: Netlify CLI
+```bash
+# Install Netlify CLI
+npm install -g netlify-cli
+
+# Login to Netlify
+netlify login
+
+# Deploy
+netlify deploy --prod --dir=out
+```
+
+## 📁 Project Structure for Netlify
+
+```
+/workspaces/devopslearn/
+├── netlify.toml              # Netlify configuration
+├── netlify/
+│   └── functions/
+│       └── thumbnail-resize.js  # Server-side image processing
+├── out/                      # Built static files (auto-generated)
+├── src/
+│   ├── pages/
+│   │   └── tools/
+│   │       └── thumbnail-resizer.tsx  # Frontend UI
+│   └── utils/
+│       └── thumbnail-resizer.ts       # Utility functions
+└── next.config.js           # Next.js configuration for static export
+```
+
+## ⚙️ Configuration Files
+
+### netlify.toml
+- Builds static files to `out/` directory
+- Configures Netlify Functions
+- Sets up redirects and CORS headers
+
+### next.config.js
+- Enables static export with `output: 'export'`
+- Disables image optimization for static hosting
+- Optimizes build for deployment
+
+## 🔧 Environment Requirements
+
+### Netlify Functions:
+- Node.js 18+
+- Sharp (for server-side image processing)
+- lambda-multipart-parser (for file uploads)
+
+### Frontend:
+- Static HTML/CSS/JS (no server required)
+- React + Next.js (client-side only)
+- Tailwind CSS for styling
+
+## 🌐 Live URL
+After deployment, your thumbnail resizer will be available at:
+- `https://your-site.netlify.app/tools/thumbnail-resizer`
+
+## 🐞 Troubleshooting
+
+### Build Issues:
+- Ensure all dependencies are installed: `npm install`
+- Check build logs in Netlify dashboard
+- Verify `out/` directory exists after build
+
+### Function Issues:
+- Check function logs in Netlify dashboard
+- Verify Sharp binary compatibility with Netlify's environment
+- Test function endpoint: `/.netlify/functions/thumbnail-resize`
+
+### CORS Issues:
+- CORS headers are configured in `netlify.toml`
+- Test with browser dev tools network tab
+
+## 📊 Usage Stats
+Monitor usage in Netlify dashboard:
+- Function invocations
+- Bandwidth usage
+- Build minutes
+
+Free tier includes:
+- 125K function requests/month
+- 100GB bandwidth/month
+- 300 build minutes/month

netlify.toml

@@ -0,0 +1,23 @@
+[build]
+  publish = "out"
+  command = "npm run build"
+
+[functions]
+  directory = "netlify/functions"
+
+[[redirects]]
+  from = "/api/*"
+  to = "/.netlify/functions/:splat"
+  status = 200
+
+[build.environment]
+  NODE_VERSION = "18"
+  NPM_VERSION = "9"
+
+# Headers for CORS
+[[headers]]
+  for = "/.netlify/functions/*"
+  [headers.values]
+    Access-Control-Allow-Origin = "*"
+    Access-Control-Allow-Headers = "Content-Type"
+    Access-Control-Allow-Methods = "GET, POST, PUT, DELETE, OPTIONS"

netlify/functions/thumbnail-resize.js

@@ -0,0 +1,110 @@
+const sharp = require('sharp');
+const multipart = require('lambda-multipart-parser');
+
+exports.handler = async (event, context) => {
+  // Only allow POST requests
+  if (event.httpMethod !== 'POST') {
+    return {
+      statusCode: 405,
+      headers: {
+        'Access-Control-Allow-Origin': '*',
+        'Access-Control-Allow-Headers': 'Content-Type',
+        'Access-Control-Allow-Methods': 'POST, OPTIONS'
+      },
+      body: JSON.stringify({ error: 'Method not allowed' })
+    };
+  }
+
+  // Handle CORS preflight
+  if (event.httpMethod === 'OPTIONS') {
+    return {
+      statusCode: 200,
+      headers: {
+        'Access-Control-Allow-Origin': '*',
+        'Access-Control-Allow-Headers': 'Content-Type',
+        'Access-Control-Allow-Methods': 'POST, OPTIONS'
+      },
+      body: ''
+    };
+  }
+
+  try {
+    // Parse multipart form data
+    const result = await multipart.parse(event);
+    
+    if (!result.files || !result.files.length) {
+      return {
+        statusCode: 400,
+        headers: {
+          'Access-Control-Allow-Origin': '*',
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ error: 'No image file provided' })
+      };
+    }
+
+    const file = result.files[0];
+    const fileBuffer = Buffer.from(file.content, 'base64');
+    
+    // Get resize options from form fields
+    const width = parseInt(result.width || '1280');
+    const height = parseInt(result.height || '720');
+    const quality = parseInt(result.quality || '90');
+    const format = result.format || 'jpeg';
+    const maxSizeKB = parseInt(result.maxSizeKB || '2048');
+
+    // Get original image metadata
+    const originalMetadata = await sharp(fileBuffer).metadata();
+    const originalSizeKB = Math.round(fileBuffer.length / 1024);
+
+    // Resize the image
+    let resizedBuffer = await sharp(fileBuffer)
+      .resize(width, height, {
+        fit: 'cover',
+        position: 'centre'
+      })
+      .toFormat(format, { quality })
+      .toBuffer();
+
+    // If the file is still too large, reduce quality iteratively
+    let currentQuality = quality;
+    while (resizedBuffer.length > maxSizeKB * 1024 && currentQuality > 10) {
+      currentQuality -= 10;
+      resizedBuffer = await sharp(fileBuffer)
+        .resize(width, height, {
+          fit: 'cover',
+          position: 'centre'
+        })
+        .toFormat(format, { quality: currentQuality })
+        .toBuffer();
+    }
+
+    const resizedSizeKB = Math.round(resizedBuffer.length / 1024);
+
+    // Return the resized image
+    return {
+      statusCode: 200,
+      headers: {
+        'Access-Control-Allow-Origin': '*',
+        'Content-Type': `image/${format}`,
+        'Content-Disposition': `attachment; filename="thumbnail.${format}"`,
+        'X-Original-Size': originalSizeKB.toString(),
+        'X-Resized-Size': resizedSizeKB.toString(),
+        'X-Original-Dimensions': `${originalMetadata.width}x${originalMetadata.height}`,
+        'X-Resized-Dimensions': `${width}x${height}`
+      },
+      body: resizedBuffer.toString('base64'),
+      isBase64Encoded: true
+    };
+  } catch (error) {
+    console.error('Error processing image:', error);
+    return {
+      statusCode: 500,
+      headers: {
+        'Access-Control-Allow-Origin': '*',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ error: 'Failed to process image' })
+    };
+  }
+};

next.config.js

@@ -1,19 +1,21 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-  swcMinify: true,
-  async headers() {
-    return [
-      {
-        source: '/:path*',
-        headers: [
-          {
-            key: 'X-Frame-Options',
-            value: 'DENY',
-          },
-        ],
-      },
-    ]
+  trailingSlash: true,
+  output: 'export',
+  images: {
+    unoptimized: true
+  },
+  // Disable API routes in static export
+  experimental: {
+    // This will be handled by Netlify Functions
+    outputFileTracingExcludes: {
+      '*': [
+        'node_modules/@swc/core-linux-x64-gnu',
+        'node_modules/@swc/core-linux-x64-musl',
+        'node_modules/@esbuild/linux-x64',
+      ],
+    },
   },
 }