Architecture

ClipAce uses Next.js App Router for both the frontend pages and Node.js Route Handlers. The backend stores uploaded files on local disk and runs ffmpeg from the Node runtime.

Runtime Pieces

• `src/app` contains pages and API routes.
• `src/components` contains UI surfaces for upload, analysis, results, and shared navigation.
• `src/lib/clipace` contains the domain layer: storage, mock highlights, ffmpeg wrappers, formatting, and pipeline orchestration.
• `storage/projects/<projectId>` contains source videos, frames, exports, and `project.json`.

Processing Flow

• `POST /api/upload` receives a `video` file in multipart form data.
• The upload route writes the source file and creates a project record.
• `/analyzing/[projectId]` starts `POST /api/projects/[projectId]/process`.
• The pipeline probes duration and dimensions with `ffprobe`.
• The pipeline extracts a poster frame and three highlight frames with `ffmpeg`.
• Mock highlight logic returns three moments.
• The pipeline cuts and concatenates clips into `clip-15s.mp4` and `clip-30s.mp4`.
• `/results/[projectId]` previews and downloads media through `/api/media`.

Deployment Shape

The production-like deployment uses Docker Compose:

• `clipace`: Next.js standalone server with ffmpeg installed.
• `caddy`: HTTPS reverse proxy for `ace.codekey.top`.
• `./storage`: persistent bind mount for uploaded and generated files.