# viratvasu0/vidflow architecture

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

- Interactive diagram: https://gitdiagram.com/viratvasu0/vidflow
- Repository: https://github.com/viratvasu0/vidflow

## Overview

VidFlow accepts a YouTube URL, fetches video metadata and available stream formats, then lets the user select and open a stream URL. A separate download API route uses ytdl-core to retrieve and return a stream, but the sampled UI does not call that route. Metadata lookup tries public Invidious instances and falls back to YouTube oEmbed; the excerpts do not establish how Invidious stream URLs are served. The graph reflects the sampled routes and UI only.

Main entry points: [`app/page.js`](https://github.com/viratvasu0/vidflow/blob/main/app/page.js) (URL and format UI), [`app/api/info/route.js`](https://github.com/viratvasu0/vidflow/blob/main/app/api/info/route.js) (Metadata and formats), [`app/layout.js`](https://github.com/viratvasu0/vidflow/blob/main/app/layout.js) (App shell), [`app/api/download/route.js`](https://github.com/viratvasu0/vidflow/blob/main/app/api/download/route.js) (Download stream route)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["User experience"]
  node_page["URL and format UI<br/>[page.js]"]
  node_layout["App shell<br/>[layout.js]"]
end

subgraph group_discovery["Video discovery"]
  node_info["Metadata and formats<br/>[route.js]"]
  node_invidious["Invidious instances"]
  node_youtube["YouTube APIs"]
end

subgraph group_delivery["Stream delivery"]
  node_download["Download stream route<br/>[route.js]"]
  node_media["Selected media URL"]
end

node_user(("Visitor"))

node_user -->|"submits URL"| node_page
node_layout -->|"renders"| node_page
node_page -->|"requests metadata"| node_info
node_info -->|"tries instances"| node_invidious
node_info -->|"falls back to oEmbed"| node_youtube
node_page -->|"opens selected URL"| node_media
node_download -->|"retrieves stream"| node_youtube

click node_page "https://github.com/viratvasu0/vidflow/blob/main/app/page.js"
click node_layout "https://github.com/viratvasu0/vidflow/blob/main/app/layout.js"
click node_info "https://github.com/viratvasu0/vidflow/blob/main/app/api/info/route.js"
click node_download "https://github.com/viratvasu0/vidflow/blob/main/app/api/download/route.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_page,node_layout toneBlue
class node_info,node_invidious,node_youtube toneAmber
class node_download,node_media toneMint
class node_user toneIndigo
```

## Components

### User experience

- [URL and format UI](https://github.com/viratvasu0/vidflow/blob/main/app/page.js): `app/page.js`
- [App shell](https://github.com/viratvasu0/vidflow/blob/main/app/layout.js): `app/layout.js`

### Video discovery

- [Metadata and formats](https://github.com/viratvasu0/vidflow/blob/main/app/api/info/route.js): `app/api/info/route.js`
- **Invidious instances**
- **YouTube APIs**

### Stream delivery

- [Download stream route](https://github.com/viratvasu0/vidflow/blob/main/app/api/download/route.js): `app/api/download/route.js`
- **Selected media URL**

### Other components

- **Visitor**

## Connections

- Visitor → URL and format UI: submits URL (evidence: `app/page.js`)
- App shell → URL and format UI: renders (evidence: `app/layout.js`)
- URL and format UI → Metadata and formats: requests metadata (evidence: `app/page.js`)
- Metadata and formats → Invidious instances: tries instances (evidence: `app/api/info/route.js`)
- Metadata and formats → YouTube APIs: falls back to oEmbed (evidence: `app/api/info/route.js`)
- URL and format UI → Selected media URL: opens selected URL (evidence: `app/page.js`)
- Download stream route → YouTube APIs: retrieves stream (evidence: `app/api/download/route.js`)