Setup

1) Prerequisites

• Node.js 18–20 (recommended: 20 LTS). Use a version manager:
  • macOS/Linux: nvm — nvm install 20 then nvm use 20
  • Windows: nvm‑windows — nvm install 20 then nvm use 20
• Git (any recent version).
• Recommended: VS Code and the ESLint extension.
• Windows native build tools (only if you plan to run tests that compile native modules like canvas): Install Visual Studio Build Toolswith the “Desktop development with C++” workload. Alternatively, use WSL2 (Ubuntu) where the Linux steps below apply directly.

2) Get the code

1. Clone the repository:

   git clone https://github.com/your-org/aivideoeditor.git
   cd aivideoeditor

   Tip (Windows): Clone into a short path like C:\\dev\\aivideoeditor to avoid path length issues.
2. Install dependencies:

   npm install

3) Configure environment

Most features work without keys in development, but stock media and monitoring are disabled. Create a file named .env.local in the repository root with the following (fill as needed):

# Site & CORS (especially important for production)
NEXT_PUBLIC_SITE_URL=http://localhost:3000
# ALLOWED_ORIGINS can include multiple, comma-separated
ALLOWED_ORIGINS=http://localhost:3000

# Optional stock media (server-side only)
PEXELS_API_KEY=your_pexels_api_key
TENOR_API_KEY=your_tenor_api_key
TENOR_CLIENT_KEY=clip-js
MEME_API_KEY=your_meme_api_key

# Optional: FFmpeg WASM controls
NEXT_PUBLIC_FFMPEG_ALLOW_CDN=true
NEXT_PUBLIC_FFMPEG_CDN_BASE=https://unpkg.com/@ffmpeg/core@0.12.6/dist/umd

# Monitoring (optional)
NEXT_PUBLIC_SENTRY_DSN=
SENTRY_AUTH_TOKEN=
SENTRY_ORG=
SENTRY_PROJECT=

4) Start the dev server

5) Verify editor

• Go to /projects → “Create New Project”, then click a project to open the editor.
• Drag a short MP4 or WebM into the Media panel, then onto the timeline.
• Open the Export modal from the header; FFmpeg may preload on first use.

6) Optional: Stock media

To enable Pexels/Tenor/Meme browsing, set keys in .env.local (see above), then restart the dev server. These features proxy via /api/pexels/*, /api/tenor/*, and /api/meme/*.

7) Tests and E2E

• Unit tests: npm test
• E2E (Playwright): In one terminal run npm run dev:clean, then in another:

  npx playwright install
  npm run test:e2e

  Windows tip: If browsers fail to install, run PowerShell as Administrator or use npx playwright install --with-deps in WSL.

8) Build for production

1. Ensure .env/.env.local contains production values (especially NEXT_PUBLIC_SITE_URL and ALLOWED_ORIGINS).
2. Build: npm run build
3. Start: npm start → open your deployed URL.

Windows notes

• Use npm run dev:win (no Linux tools required). If you prefer Bash, use Git Bash or WSL2 and the Linux command.
• If npm install fails on canvas or other native deps, install Visual Studio Build Tools, then retry. Or run tests from WSL2.
• Path length: Clone into a short path (e.g., C:\\dev).
• Port conflicts: Use netstat -ano | findstr :3000 and taskkill /PID <PID> /F.

Troubleshooting