DJP 129ea3ec1e Initial commit: Video Optimizer for L'Oréal

Complete video optimization tool with:
- 21 platform configurations (Meta, TikTok, YouTube, Pinterest, Snapchat, Amazon)
- FFmpeg-powered video conversion with H264, H265, and VP9 codecs
- Python Flask backend with REST API
- HTML/JS frontend with drag-drop interface
- Black + #FFC407 color scheme with Montserrat font
- Side-by-side video comparison player
- Filename auto-detection for platform and aspect ratio
- MAMP-compatible setup

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

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

2025-10-16 16:52:11 -04:00

2.5 KiB

Raw Blame History

🚀 Start with MAMP - Quick Guide

What You Need Running

The app needs TWO things running at the same time:

Python Backend (video processing) - Port 5000
MAMP Frontend (user interface) - Port 8888 (or your MAMP port)

Step 1: Start Python Backend

Open Terminal and run:

cd /Users/daveporter/Desktop/CODING-2024/Loreal-FIle-Reduction/backend
source ../venv/bin/activate
python app.py

✅ Leave this terminal open! You should see:

Starting Video Optimization Server...
 * Running on http://127.0.0.1:5000

Step 2: Configure MAMP

Open MAMP application
Click Preferences → Web Server

Set Document Root to:

/Users/daveporter/Desktop/CODING-2024/Loreal-FIle-Reduction/frontend

Click OK
Click Start Servers

Step 3: Open in Browser

Go to: http://localhost:8888/index.html

(Or use your MAMP port if different)

✅ It's Working When:

You see the black page with yellow "Video Optimizer" title
You can drag & drop a video file
After uploading, you see platform options (Meta, TikTok, YouTube, etc.)

❌ Troubleshooting "Failed to fetch"

Problem: Upload fails with "Failed to fetch"

Check 1: Is Python backend running?

curl http://localhost:5000/api/health

Should return:

{
  "status": "ok",
  "ffmpeg_installed": true
}

Check 2: Open browser console (F12) and look for errors

Check 3: Make sure frontend/config.js has:

API_BASE: 'http://localhost:5000/api'

Quick Test

Test Backend Only:

# In terminal
curl http://localhost:5000/api/platforms

Should show a JSON response with platform data.

Test Frontend:

Open http://localhost:8888/index.html in browser - page should load.

Stop Everything

Stop Backend:

Press Ctrl+C in the terminal running Python

Stop MAMP:

Click "Stop Servers" in MAMP application

File Locations

Frontend files: /Users/daveporter/Desktop/CODING-2024/Loreal-FIle-Reduction/frontend/
Backend files: /Users/daveporter/Desktop/CODING-2024/Loreal-FIle-Reduction/backend/
Config: frontend/config.js (change API endpoint here if needed)

Current Status

✅ Python backend is running on port 5000 ✅ All platform configurations loaded (21 total) ✅ FFmpeg is installed and detected ✅ Ready to accept requests from MAMP frontend

Next: Configure MAMP and open http://localhost:8888/index.html

2.5 KiB Raw Blame History