# xeenjair/flowmusic architecture

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

## Overview

Flowmusic is an Electron music player with a React interface. The main user workflow enters through the app shell, where users browse and control playback, view lyrics, and configure the experience; music-provider requests and desktop features are mediated by Electron. The sampled code confirms several UI composition and lyrics paths, plus Electron’s Yandex API dependency. The README is empty, and some substantial modules—especially the server and unsampled app sections—cannot be characterized confidently from the excerpts, so their connections are left unspecified.

Main entry points: [`src/App.jsx`](https://github.com/xeenjair/flowmusic/blob/master/src/App.jsx) (App shell), [`src/components/PlayerModeView.jsx`](https://github.com/xeenjair/flowmusic/blob/master/src/components/PlayerModeView.jsx) (Player mode), [`src/components/PlayerProgress.jsx`](https://github.com/xeenjair/flowmusic/blob/master/src/components/PlayerProgress.jsx) (Player progress), [`src/index.js`](https://github.com/xeenjair/flowmusic/blob/master/src/index.js) (React entry)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["Application shell"]
  node_app["App shell<br/>[App.jsx]"]
  node_entrypoint["React entry<br/>[index.js]"]
end

subgraph group_playback["Playback experience"]
  node_player_mode["Player mode<br/>[PlayerModeView.jsx]"]
  node_lyrics["Lyrics view"]
  node_player_card["Player card"]
  node_mini_player["Mini player<br/>[MiniPlayer.jsx]"]
  node_progress["Player progress<br/>[PlayerProgress.jsx]"]
  node_visualizer["Visualizer<br/>[Visualizer.jsx]"]
  node_ai["AI assistant<br/>[AIAssistant.jsx]"]
end

subgraph group_accounts["Accounts and settings"]
  node_email_auth["Email auth<br/>[EmailAuth.jsx]"]
  node_vk_auth["VK auth<br/>[VkAuth.jsx]"]
  node_yandex_auth["Yandex auth<br/>[YandexAuth.jsx]"]
  node_settings["Settings<br/>[SettingsView.jsx]"]
  node_subscription["Subscription"]
end

subgraph group_desktop["Desktop and providers"]
  node_electron_main["Electron main<br/>[main.js]"]
  node_preload["IPC preload<br/>[preload.js]"]
  node_yandex_api["Yandex API"]
  node_vk_api["VK Music API<br/>[VkMusicAPI.js]"]
  node_soundcloud_api["SoundCloud API<br/>[SoundCloudAPI.js]"]
end

subgraph group_backend["Backend service"]
  node_server["Server<br/>[index.js]"]
end

node_user(("Listener"))

node_user -->|"uses"| node_app
node_entrypoint -->|"renders"| node_app
node_entrypoint -->|"renders"| node_mini_player
node_app -->|"renders"| node_player_mode
node_app -->|"renders"| node_lyrics
node_app -->|"renders"| node_settings
node_app -->|"renders"| node_email_auth
node_app -->|"uses"| node_visualizer
node_app -->|"uses"| node_progress
node_player_mode -->|"renders"| node_progress
node_player_mode -->|"renders"| node_settings
node_player_mode -->|"renders"| node_visualizer
node_lyrics -->|"renders"| node_player_card
node_player_card -.->|"controls"| node_progress
node_email_auth -.->|"calls bridge"| node_preload
node_vk_api -->|"sends requests"| node_preload
node_electron_main -->|"uses"| node_yandex_api

click node_app "https://github.com/xeenjair/flowmusic/blob/master/src/App.jsx"
click node_entrypoint "https://github.com/xeenjair/flowmusic/blob/master/src/index.js"
click node_player_mode "https://github.com/xeenjair/flowmusic/blob/master/src/components/PlayerModeView.jsx"
click node_lyrics "https://github.com/xeenjair/flowmusic/blob/master/src/components/ui/ScrollExpandLyrics.jsx"
click node_player_card "https://github.com/xeenjair/flowmusic/blob/master/src/components/ui/MusicPlayerCard.jsx"
click node_mini_player "https://github.com/xeenjair/flowmusic/blob/master/src/components/MiniPlayer.jsx"
click node_progress "https://github.com/xeenjair/flowmusic/blob/master/src/components/PlayerProgress.jsx"
click node_visualizer "https://github.com/xeenjair/flowmusic/blob/master/src/components/Visualizer.jsx"
click node_ai "https://github.com/xeenjair/flowmusic/blob/master/src/components/AIAssistant.jsx"
click node_email_auth "https://github.com/xeenjair/flowmusic/blob/master/src/components/EmailAuth.jsx"
click node_vk_auth "https://github.com/xeenjair/flowmusic/blob/master/src/components/VkAuth.jsx"
click node_yandex_auth "https://github.com/xeenjair/flowmusic/blob/master/src/components/YandexAuth.jsx"
click node_settings "https://github.com/xeenjair/flowmusic/blob/master/src/components/SettingsView.jsx"
click node_subscription "https://github.com/xeenjair/flowmusic/blob/master/src/components/SubscriptionModal.jsx"
click node_electron_main "https://github.com/xeenjair/flowmusic/blob/master/electron/main.js"
click node_preload "https://github.com/xeenjair/flowmusic/blob/master/electron/preload.js"
click node_yandex_api "https://github.com/xeenjair/flowmusic/blob/master/electron/yandex-music-api.js"
click node_vk_api "https://github.com/xeenjair/flowmusic/blob/master/src/services/VkMusicAPI.js"
click node_soundcloud_api "https://github.com/xeenjair/flowmusic/blob/master/src/services/SoundCloudAPI.js"
click node_server "https://github.com/xeenjair/flowmusic/blob/master/server/index.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_entrypoint toneBlue
class node_player_mode,node_lyrics,node_player_card,node_mini_player,node_progress,node_visualizer,node_ai toneAmber
class node_email_auth,node_vk_auth,node_yandex_auth,node_settings,node_subscription toneMint
class node_electron_main,node_preload,node_yandex_api,node_vk_api,node_soundcloud_api toneRose
class node_server,node_user toneIndigo
```

## Components

### Application shell

- [App shell](https://github.com/xeenjair/flowmusic/blob/master/src/App.jsx): `src/App.jsx`
- [React entry](https://github.com/xeenjair/flowmusic/blob/master/src/index.js): `src/index.js`

### Playback experience

- [Player mode](https://github.com/xeenjair/flowmusic/blob/master/src/components/PlayerModeView.jsx): `src/components/PlayerModeView.jsx`
- [Lyrics view](https://github.com/xeenjair/flowmusic/blob/master/src/components/ui/ScrollExpandLyrics.jsx): `src/components/ui/ScrollExpandLyrics.jsx`
- [Player card](https://github.com/xeenjair/flowmusic/blob/master/src/components/ui/MusicPlayerCard.jsx): `src/components/ui/MusicPlayerCard.jsx`
- [Mini player](https://github.com/xeenjair/flowmusic/blob/master/src/components/MiniPlayer.jsx): `src/components/MiniPlayer.jsx`
- [Player progress](https://github.com/xeenjair/flowmusic/blob/master/src/components/PlayerProgress.jsx): `src/components/PlayerProgress.jsx`
- [Visualizer](https://github.com/xeenjair/flowmusic/blob/master/src/components/Visualizer.jsx): `src/components/Visualizer.jsx`
- [AI assistant](https://github.com/xeenjair/flowmusic/blob/master/src/components/AIAssistant.jsx): `src/components/AIAssistant.jsx`

### Accounts and settings

- [Email auth](https://github.com/xeenjair/flowmusic/blob/master/src/components/EmailAuth.jsx): `src/components/EmailAuth.jsx`
- [VK auth](https://github.com/xeenjair/flowmusic/blob/master/src/components/VkAuth.jsx): `src/components/VkAuth.jsx`
- [Yandex auth](https://github.com/xeenjair/flowmusic/blob/master/src/components/YandexAuth.jsx): `src/components/YandexAuth.jsx`
- [Settings](https://github.com/xeenjair/flowmusic/blob/master/src/components/SettingsView.jsx): `src/components/SettingsView.jsx`
- [Subscription](https://github.com/xeenjair/flowmusic/blob/master/src/components/SubscriptionModal.jsx): `src/components/SubscriptionModal.jsx`

### Desktop and providers

- [Electron main](https://github.com/xeenjair/flowmusic/blob/master/electron/main.js): `electron/main.js`
- [IPC preload](https://github.com/xeenjair/flowmusic/blob/master/electron/preload.js): `electron/preload.js`
- [Yandex API](https://github.com/xeenjair/flowmusic/blob/master/electron/yandex-music-api.js): `electron/yandex-music-api.js`
- [VK Music API](https://github.com/xeenjair/flowmusic/blob/master/src/services/VkMusicAPI.js): `src/services/VkMusicAPI.js`
- [SoundCloud API](https://github.com/xeenjair/flowmusic/blob/master/src/services/SoundCloudAPI.js): `src/services/SoundCloudAPI.js`

### Backend service

- [Server](https://github.com/xeenjair/flowmusic/blob/master/server/index.js): `server/index.js`

### Other components

- **Listener**

## Connections

- Listener → App shell: uses
- React entry → App shell: renders (evidence: `src/index.js`)
- React entry → Mini player: renders (evidence: `src/index.js`)
- App shell → Player mode: renders (evidence: `src/App.jsx`)
- App shell → Lyrics view: renders (evidence: `src/App.jsx`)
- App shell → Settings: renders (evidence: `src/App.jsx`)
- App shell → Email auth: renders (evidence: `src/App.jsx`)
- App shell → Visualizer: uses (evidence: `src/App.jsx`)
- App shell → Player progress: uses (evidence: `src/App.jsx`)
- Player mode → Player progress: renders (evidence: `src/components/PlayerModeView.jsx`)
- Player mode → Settings: renders (evidence: `src/components/PlayerModeView.jsx`)
- Player mode → Visualizer: renders (evidence: `src/components/PlayerModeView.jsx`)
- Lyrics view → Player card: renders (evidence: `src/components/ui/ScrollExpandLyrics.jsx`)
- Player card → Player progress: controls
- Email auth → IPC preload: calls bridge
- VK Music API → IPC preload: sends requests (evidence: `src/services/VkMusicAPI.js`)
- Electron main → Yandex API: uses (evidence: `electron/main.js`)