# will99919/clipforge architecture

> Architecture diagram of the GitHub repository will99919/clipforge, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-26). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/will99919/clipforge
- Repository: https://github.com/will99919/clipforge

## Overview

ClipForge accepts uploaded video files, queues in-memory processing jobs, splits videos into 15-second clips, and exposes their status and downloadable results. A separate editor flow uploads a video and exports a 9:16 version. Although the README mentions YouTube videos, the sampled implementation shows local-file upload rather than YouTube ingestion. The status route and upload-area implementation were not sampled, so their internal wiring is represented only where supported by callers and documented routes.

Main entry points: [`backend/src/services/processor.js`](https://github.com/will99919/clipforge/blob/main/backend/src/services/processor.js) (Job processor), [`frontend/src/App.jsx`](https://github.com/will99919/clipforge/blob/main/frontend/src/App.jsx) (Clip dashboard), [`frontend/src/api.js`](https://github.com/will99919/clipforge/blob/main/frontend/src/api.js) (API client), [`backend/src/routes/export.js`](https://github.com/will99919/clipforge/blob/main/backend/src/routes/export.js) (Export endpoint)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Web interface"]
  node_app["Clip dashboard<br/>[App.jsx]"]
  node_editor["Vertical editor<br/>[Editor.jsx]"]
  node_uploadcard["Upload controls<br/>[UploadCard.jsx]"]
  node_preview["Local preview<br/>[VideoPreview.jsx]"]
  node_uploadarea["Editor upload<br/>[UploadArea.jsx]"]
  node_api["API client<br/>[api.js]"]
end

subgraph group_backend["Backend API"]
  node_server["Express server<br/>[index.js]"]
  node_uploadroute["Upload endpoint<br/>[upload.js]"]
  node_statusroute["Status endpoint<br/>[status.js]"]
  node_exportroute["Export endpoint<br/>[export.js]"]
end

subgraph group_processing["Video processing"]
  node_processor["Job processor<br/>[processor.js]"]
  node_jobstore[("In-memory jobs<br/>[processor.js]")]
end

subgraph group_files["Video files"]
  node_uploads[("Uploaded videos")]
  node_exports[("Exported clips")]
end

node_user(("User"))
node_browser(("Browser"))
node_ffmpeg["FFmpeg tools"]

node_user -->|"uses"| node_browser
node_browser -->|"opens"| node_app
node_browser -->|"opens"| node_editor
node_app -->|"renders"| node_uploadcard
node_app -->|"renders"| node_preview
node_user -->|"selects video"| node_uploadcard
node_uploadcard -->|"selects file"| node_app
node_app -->|"uploads; polls"| node_api
node_api -->|"POST /upload"| node_uploadroute
node_api -->|"GET /status"| node_statusroute
node_uploadroute -->|"writes upload"| node_uploads
node_uploadroute -->|"creates job"| node_processor
node_processor -->|"reads input"| node_uploads
node_processor -->|"probes; cuts"| node_ffmpeg
node_processor -->|"writes clips"| node_exports
node_processor -->|"updates job"| node_jobstore
node_statusroute -->|"reads job"| node_jobstore
node_server -->|"mounts route"| node_uploadroute
node_server -->|"mounts route"| node_statusroute
node_server -->|"mounts route"| node_exportroute
node_server -->|"serves files"| node_exports
node_editor -->|"renders"| node_uploadarea
node_editor -->|"requests export"| node_api
node_api -->|"POST /export"| node_exportroute
node_exportroute -->|"reads input"| node_uploads
node_exportroute -->|"transcodes"| node_ffmpeg
node_exportroute -->|"writes vertical video"| node_exports
node_browser -->|"downloads results"| node_exports

click node_app "https://github.com/will99919/clipforge/blob/main/frontend/src/App.jsx"
click node_editor "https://github.com/will99919/clipforge/blob/main/frontend/src/pages/Editor.jsx"
click node_uploadcard "https://github.com/will99919/clipforge/blob/main/frontend/src/components/UploadCard.jsx"
click node_preview "https://github.com/will99919/clipforge/blob/main/frontend/src/components/VideoPreview.jsx"
click node_uploadarea "https://github.com/will99919/clipforge/blob/main/frontend/src/components/UploadArea.jsx"
click node_api "https://github.com/will99919/clipforge/blob/main/frontend/src/api.js"
click node_server "https://github.com/will99919/clipforge/blob/main/backend/src/index.js"
click node_uploadroute "https://github.com/will99919/clipforge/blob/main/backend/src/routes/upload.js"
click node_statusroute "https://github.com/will99919/clipforge/blob/main/backend/src/routes/status.js"
click node_exportroute "https://github.com/will99919/clipforge/blob/main/backend/src/routes/export.js"
click node_processor "https://github.com/will99919/clipforge/blob/main/backend/src/services/processor.js"
click node_jobstore "https://github.com/will99919/clipforge/blob/main/backend/src/services/processor.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_editor,node_uploadcard,node_preview,node_uploadarea,node_api,node_user,node_browser toneBlue
class node_server,node_uploadroute,node_statusroute,node_exportroute toneAmber
class node_processor,node_jobstore toneMint
class node_uploads,node_exports toneRose
class node_ffmpeg toneIndigo
```

## Components

### Web interface

- [Clip dashboard](https://github.com/will99919/clipforge/blob/main/frontend/src/App.jsx): `frontend/src/App.jsx`
- [Vertical editor](https://github.com/will99919/clipforge/blob/main/frontend/src/pages/Editor.jsx): `frontend/src/pages/Editor.jsx`
- [Upload controls](https://github.com/will99919/clipforge/blob/main/frontend/src/components/UploadCard.jsx): `frontend/src/components/UploadCard.jsx`
- [Local preview](https://github.com/will99919/clipforge/blob/main/frontend/src/components/VideoPreview.jsx): `frontend/src/components/VideoPreview.jsx`
- [Editor upload](https://github.com/will99919/clipforge/blob/main/frontend/src/components/UploadArea.jsx): `frontend/src/components/UploadArea.jsx`
- [API client](https://github.com/will99919/clipforge/blob/main/frontend/src/api.js): `frontend/src/api.js`

### Backend API

- [Express server](https://github.com/will99919/clipforge/blob/main/backend/src/index.js): `backend/src/index.js`
- [Upload endpoint](https://github.com/will99919/clipforge/blob/main/backend/src/routes/upload.js): `backend/src/routes/upload.js`
- [Status endpoint](https://github.com/will99919/clipforge/blob/main/backend/src/routes/status.js): `backend/src/routes/status.js`
- [Export endpoint](https://github.com/will99919/clipforge/blob/main/backend/src/routes/export.js): `backend/src/routes/export.js`

### Video processing

- [Job processor](https://github.com/will99919/clipforge/blob/main/backend/src/services/processor.js): `backend/src/services/processor.js`
- [In-memory jobs](https://github.com/will99919/clipforge/blob/main/backend/src/services/processor.js): `backend/src/services/processor.js`

### Video files

- **Uploaded videos**
- **Exported clips**

### Other components

- **User**
- **Browser**
- **FFmpeg tools**

## Connections

- User → Browser: uses
- Browser → Clip dashboard: opens
- Browser → Vertical editor: opens
- Clip dashboard → Upload controls: renders
- Clip dashboard → Local preview: renders
- User → Upload controls: selects video
- Upload controls → Clip dashboard: selects file
- Clip dashboard → API client: uploads; polls
- API client → Upload endpoint: POST /upload
- API client → Status endpoint: GET /status
- Upload endpoint → Uploaded videos: writes upload
- Upload endpoint → Job processor: creates job
- Job processor → Uploaded videos: reads input
- Job processor → FFmpeg tools: probes; cuts
- Job processor → Exported clips: writes clips
- Job processor → In-memory jobs: updates job
- Status endpoint → In-memory jobs: reads job
- Express server → Upload endpoint: mounts route
- Express server → Status endpoint: mounts route
- Express server → Export endpoint: mounts route
- Express server → Exported clips: serves files
- Vertical editor → Editor upload: renders
- Vertical editor → API client: requests export
- API client → Export endpoint: POST /export
- Export endpoint → Uploaded videos: reads input
- Export endpoint → FFmpeg tools: transcodes
- Export endpoint → Exported clips: writes vertical video
- Browser → Exported clips: downloads results