# zannbjir/varnime architecture

> Architecture diagram of the GitHub repository zannbjir/varnime, 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/zannbjir/varnime
- Repository: https://github.com/zannbjir/varnime

## Overview

Varnime is a Next.js anime discovery and streaming site backed by the public Sankavollerei API. The principal workflow is to browse or search anime, inspect a title’s details and episode list, then open an episode to stream it, choose a server/quality, or follow download links. Separate catalog routes cover ongoing and completed titles, genres, and daily release schedules; the home page also features recent releases, popular titles, and movies. Shared components provide search, anime cards, and playback. The sampled pages show API fetches and route links; other route behavior is represented only where the README and tree support it.

Main entry points: [`app/config.js`](https://github.com/zannbjir/varnime/blob/main/app/config.js) (API configuration), [`app/episode/[slug]/page.jsx`](https://github.com/zannbjir/varnime/blob/main/app/episode/%5Bslug%5D/page.jsx) (Episode page), [`app/anime/[slug]/page.jsx`](https://github.com/zannbjir/varnime/blob/main/app/anime/%5Bslug%5D/page.jsx) (Anime details), [`app/components/AnimeCard.jsx`](https://github.com/zannbjir/varnime/blob/main/app/components/AnimeCard.jsx) (Anime card)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_discovery["Discovery"]
  node_home["Home / featured<br/>[page.js]"]
  node_search["Search results<br/>[page.jsx]"]
end

subgraph group_catalogs["Catalogs"]
  node_ongoing["Ongoing list<br/>[page.jsx]"]
  node_completed["Completed list<br/>[page.jsx]"]
  node_genres["Genre directory<br/>[page.jsx]"]
  node_genrelist["Genre titles<br/>[page.jsx]"]
  node_schedule["Release schedule<br/>[page.jsx]"]
end

subgraph group_watching["Anime and playback"]
  node_detail["Anime details<br/>[page.jsx]"]
  node_episode["Episode page<br/>[page.jsx]"]
end

subgraph group_shared["Shared UI"]
  node_searchbar["Search form<br/>[SearchBar.jsx]"]
  node_player["Video player<br/>[VideoPlayer.jsx]"]
  node_card["Anime card<br/>[AnimeCard.jsx]"]
  node_config["API configuration<br/>[config.js]"]
end

node_visitor(("Anime viewer"))
node_animeapi{{"Sankavollerei API"}}

node_visitor -->|"opens"| node_home
node_visitor -->|"opens"| node_search
node_visitor -->|"opens"| node_ongoing
node_visitor -->|"opens"| node_completed
node_visitor -->|"opens"| node_genres
node_visitor -->|"opens"| node_genrelist
node_visitor -->|"opens"| node_schedule
node_visitor -->|"opens"| node_detail
node_visitor -->|"opens"| node_episode
node_home -->|"fetches home data"| node_animeapi
node_ongoing -->|"fetches titles"| node_animeapi
node_completed -->|"fetches titles"| node_animeapi
node_genres -->|"fetches genres"| node_animeapi
node_genrelist -->|"fetches genre titles"| node_animeapi
node_schedule -->|"fetches schedule"| node_animeapi
node_search -->|"searches titles"| node_animeapi
node_detail -->|"fetches details"| node_animeapi
node_episode -->|"fetches episode"| node_animeapi
node_searchbar -->|"navigates to"| node_search
node_detail -->|"links episodes"| node_episode
node_episode -->|"links anime"| node_detail
node_episode -->|"supplies stream data"| node_player
node_home -->|"renders titles"| node_card
node_ongoing -->|"renders titles"| node_card
node_completed -->|"renders titles"| node_card
node_genrelist -->|"renders titles"| node_card
node_search -->|"renders results"| node_card
node_home -->|"reads settings"| node_config
node_ongoing -->|"reads settings"| node_config
node_completed -->|"reads settings"| node_config
node_genres -->|"reads settings"| node_config
node_genrelist -->|"reads settings"| node_config
node_schedule -->|"reads settings"| node_config
node_detail -->|"reads settings"| node_config
node_episode -->|"reads settings"| node_config

click node_home "https://github.com/zannbjir/varnime/blob/main/app/page.js"
click node_searchbar "https://github.com/zannbjir/varnime/blob/main/app/components/SearchBar.jsx"
click node_search "https://github.com/zannbjir/varnime/blob/main/app/search/page.jsx"
click node_ongoing "https://github.com/zannbjir/varnime/blob/main/app/ongoing/page.jsx"
click node_completed "https://github.com/zannbjir/varnime/blob/main/app/completed/page.jsx"
click node_genres "https://github.com/zannbjir/varnime/blob/main/app/genre/page.jsx"
click node_genrelist "https://github.com/zannbjir/varnime/blob/main/app/genre/%5Bslug%5D/page.jsx"
click node_schedule "https://github.com/zannbjir/varnime/blob/main/app/jadwal/page.jsx"
click node_detail "https://github.com/zannbjir/varnime/blob/main/app/anime/%5Bslug%5D/page.jsx"
click node_episode "https://github.com/zannbjir/varnime/blob/main/app/episode/%5Bslug%5D/page.jsx"
click node_player "https://github.com/zannbjir/varnime/blob/main/app/components/VideoPlayer.jsx"
click node_card "https://github.com/zannbjir/varnime/blob/main/app/components/AnimeCard.jsx"
click node_config "https://github.com/zannbjir/varnime/blob/main/app/config.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_home,node_search,node_visitor toneBlue
class node_ongoing,node_completed,node_genres,node_genrelist,node_schedule toneAmber
class node_detail,node_episode,node_animeapi toneMint
class node_searchbar,node_player,node_card,node_config toneRose
```

## Components

### Discovery

- [Home / featured](https://github.com/zannbjir/varnime/blob/main/app/page.js): `app/page.js`
- [Search results](https://github.com/zannbjir/varnime/blob/main/app/search/page.jsx): `app/search/page.jsx`

### Catalogs

- [Ongoing list](https://github.com/zannbjir/varnime/blob/main/app/ongoing/page.jsx): `app/ongoing/page.jsx`
- [Completed list](https://github.com/zannbjir/varnime/blob/main/app/completed/page.jsx): `app/completed/page.jsx`
- [Genre directory](https://github.com/zannbjir/varnime/blob/main/app/genre/page.jsx): `app/genre/page.jsx`
- [Genre titles](https://github.com/zannbjir/varnime/blob/main/app/genre/%5Bslug%5D/page.jsx): `app/genre/[slug]/page.jsx`
- [Release schedule](https://github.com/zannbjir/varnime/blob/main/app/jadwal/page.jsx): `app/jadwal/page.jsx`

### Anime and playback

- [Anime details](https://github.com/zannbjir/varnime/blob/main/app/anime/%5Bslug%5D/page.jsx): `app/anime/[slug]/page.jsx`
- [Episode page](https://github.com/zannbjir/varnime/blob/main/app/episode/%5Bslug%5D/page.jsx): `app/episode/[slug]/page.jsx`

### Shared UI

- [Search form](https://github.com/zannbjir/varnime/blob/main/app/components/SearchBar.jsx): `app/components/SearchBar.jsx`
- [Video player](https://github.com/zannbjir/varnime/blob/main/app/components/VideoPlayer.jsx): `app/components/VideoPlayer.jsx`
- [Anime card](https://github.com/zannbjir/varnime/blob/main/app/components/AnimeCard.jsx): `app/components/AnimeCard.jsx`
- [API configuration](https://github.com/zannbjir/varnime/blob/main/app/config.js): `app/config.js`

### Other components

- **Anime viewer**
- **Sankavollerei API**

## Connections

- Anime viewer → Home / featured: opens
- Anime viewer → Search results: opens
- Anime viewer → Ongoing list: opens
- Anime viewer → Completed list: opens
- Anime viewer → Genre directory: opens
- Anime viewer → Genre titles: opens
- Anime viewer → Release schedule: opens
- Anime viewer → Anime details: opens
- Anime viewer → Episode page: opens
- Home / featured → Sankavollerei API: fetches home data
- Ongoing list → Sankavollerei API: fetches titles
- Completed list → Sankavollerei API: fetches titles
- Genre directory → Sankavollerei API: fetches genres
- Genre titles → Sankavollerei API: fetches genre titles
- Release schedule → Sankavollerei API: fetches schedule
- Search results → Sankavollerei API: searches titles
- Anime details → Sankavollerei API: fetches details
- Episode page → Sankavollerei API: fetches episode
- Search form → Search results: navigates to
- Anime details → Episode page: links episodes
- Episode page → Anime details: links anime
- Episode page → Video player: supplies stream data
- Home / featured → Anime card: renders titles
- Ongoing list → Anime card: renders titles
- Completed list → Anime card: renders titles
- Genre titles → Anime card: renders titles
- Search results → Anime card: renders results
- Home / featured → API configuration: reads settings
- Ongoing list → API configuration: reads settings
- Completed list → API configuration: reads settings
- Genre directory → API configuration: reads settings
- Genre titles → API configuration: reads settings
- Release schedule → API configuration: reads settings
- Anime details → API configuration: reads settings
- Episode page → API configuration: reads settings