# coderegtech/musika-app architecture

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

- Interactive diagram: https://gitdiagram.com/coderegtech/musika-app
- Repository: https://github.com/coderegtech/musika-app

## Overview

Musika is a cross-platform music library app backed by an authenticated Python API. Users sign in, discover or search music, inspect track details, request permitted downloads, then save and play audio locally; they can also organize tracks into playlists. The API verifies Google identity, serves YouTube-backed discovery, and manages authorized download jobs. The README documents queue processing and admin approval. Sampled source confirms key client and server interactions; some backend wiring is unsampled, so those links are limited to documented responsibilities.

Main entry points: [`src/store.ts`](https://github.com/coderegtech/musika-app/blob/main/src/store.ts) (App state), [`server/main.py`](https://github.com/coderegtech/musika-app/blob/main/server/main.py) (API routes), [`App.tsx`](https://github.com/coderegtech/musika-app/blob/main/App.tsx) (App interface), [`server/downloads.py`](https://github.com/coderegtech/musika-app/blob/main/server/downloads.py) (Download queue)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Music app"]
  node_app["App interface<br/>[App.tsx]"]
  node_player["Audio player<br/>[Player.tsx]"]
  node_ui["UI components<br/>[ui.tsx]"]
end

subgraph group_client_services["Client services"]
  node_store["App state<br/>[store.ts]"]
  node_models["Music models<br/>[models.ts]"]
  node_api_client["API client<br/>[api.ts]"]
  node_auth_client["Authentication<br/>[auth.ts]"]
  node_media["Audio files<br/>[media.ts]"]
  node_storage[("Local storage<br/>[storage.ts]")]
  node_storage_web[("Web storage<br/>[storage.web.ts]")]
end

subgraph group_api["API services"]
  node_api_main["API routes<br/>[main.py]"]
  node_youtube["Music discovery<br/>[youtube.py]"]
  node_domain["Domain rules<br/>[domain.py]"]
  node_database[("API database<br/>[database.py]")]
end

subgraph group_backend["Download backend"]
  node_queue["Download queue<br/>[downloads.py]"]
end

node_listener(("Listener"))
node_google{{"Google identity"}}
node_youtube_service{{"YouTube API"}}
node_ffmpeg{{"FFmpeg"}}
node_local_audio[("Device audio")]

node_listener -->|"uses"| node_app
node_app -->|"dispatches actions"| node_store
node_app -->|"renders"| node_player
node_app -->|"renders"| node_ui
node_player -->|"controls playback"| node_store
node_store -->|"uses types"| node_models
node_store -->|"requests"| node_api_client
node_api_client -->|"gets credentials"| node_auth_client
node_api_client -->|"calls API"| node_api_main
node_auth_client -->|"exchanges identity"| node_google
node_auth_client -->|"authenticates"| node_api_main
node_api_main -->|"reads and writes"| node_database
node_api_main -->|"requests metadata"| node_youtube
node_youtube -->|"searches videos"| node_youtube_service
node_api_main -->|"checks duplicates"| node_domain
node_api_main -->|"enqueues jobs"| node_queue
node_queue -->|"updates jobs"| node_database
node_queue -->|"gets media"| node_youtube
node_queue -->|"processes audio"| node_ffmpeg
node_store -->|"saves audio"| node_media
node_media -->|"writes and reads"| node_local_audio
node_store -->|"persists library"| node_storage
node_store -.->|"persists web state"| node_storage_web
node_player -->|"plays tracks"| node_local_audio

click node_app "https://github.com/coderegtech/musika-app/blob/main/App.tsx"
click node_player "https://github.com/coderegtech/musika-app/blob/main/src/components/Player.tsx"
click node_ui "https://github.com/coderegtech/musika-app/blob/main/src/components/ui.tsx"
click node_store "https://github.com/coderegtech/musika-app/blob/main/src/store.ts"
click node_models "https://github.com/coderegtech/musika-app/blob/main/src/models.ts"
click node_api_client "https://github.com/coderegtech/musika-app/blob/main/src/services/api.ts"
click node_auth_client "https://github.com/coderegtech/musika-app/blob/main/src/services/auth.ts"
click node_media "https://github.com/coderegtech/musika-app/blob/main/src/services/media.ts"
click node_storage "https://github.com/coderegtech/musika-app/blob/main/src/services/storage.ts"
click node_storage_web "https://github.com/coderegtech/musika-app/blob/main/src/services/storage.web.ts"
click node_api_main "https://github.com/coderegtech/musika-app/blob/main/server/main.py"
click node_youtube "https://github.com/coderegtech/musika-app/blob/main/server/youtube.py"
click node_domain "https://github.com/coderegtech/musika-app/blob/main/server/domain.py"
click node_database "https://github.com/coderegtech/musika-app/blob/main/server/database.py"
click node_queue "https://github.com/coderegtech/musika-app/blob/main/server/downloads.py"

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_player,node_ui toneBlue
class node_store,node_models,node_api_client,node_auth_client,node_media,node_storage,node_storage_web,node_local_audio toneAmber
class node_api_main,node_youtube,node_domain,node_database,node_youtube_service toneMint
class node_queue toneRose
class node_listener,node_google,node_ffmpeg toneIndigo
```

## Components

### Music app

- [App interface](https://github.com/coderegtech/musika-app/blob/main/App.tsx): `App.tsx`
- [Audio player](https://github.com/coderegtech/musika-app/blob/main/src/components/Player.tsx): `src/components/Player.tsx`
- [UI components](https://github.com/coderegtech/musika-app/blob/main/src/components/ui.tsx): `src/components/ui.tsx`

### Client services

- [App state](https://github.com/coderegtech/musika-app/blob/main/src/store.ts): `src/store.ts`
- [Music models](https://github.com/coderegtech/musika-app/blob/main/src/models.ts): `src/models.ts`
- [API client](https://github.com/coderegtech/musika-app/blob/main/src/services/api.ts): `src/services/api.ts`
- [Authentication](https://github.com/coderegtech/musika-app/blob/main/src/services/auth.ts): `src/services/auth.ts`
- [Audio files](https://github.com/coderegtech/musika-app/blob/main/src/services/media.ts): `src/services/media.ts`
- [Local storage](https://github.com/coderegtech/musika-app/blob/main/src/services/storage.ts): `src/services/storage.ts`
- [Web storage](https://github.com/coderegtech/musika-app/blob/main/src/services/storage.web.ts): `src/services/storage.web.ts`

### API services

- [API routes](https://github.com/coderegtech/musika-app/blob/main/server/main.py): `server/main.py`
- [Music discovery](https://github.com/coderegtech/musika-app/blob/main/server/youtube.py): `server/youtube.py`
- [Domain rules](https://github.com/coderegtech/musika-app/blob/main/server/domain.py): `server/domain.py`
- [API database](https://github.com/coderegtech/musika-app/blob/main/server/database.py): `server/database.py`

### Download backend

- [Download queue](https://github.com/coderegtech/musika-app/blob/main/server/downloads.py): `server/downloads.py`

### Other components

- **Listener**
- **Google identity**
- **YouTube API**
- **FFmpeg**
- **Device audio**

## Connections

- Listener → App interface: uses
- App interface → App state: dispatches actions
- App interface → Audio player: renders
- App interface → UI components: renders
- Audio player → App state: controls playback
- App state → Music models: uses types
- App state → API client: requests
- API client → Authentication: gets credentials
- API client → API routes: calls API
- Authentication → Google identity: exchanges identity
- Authentication → API routes: authenticates
- API routes → API database: reads and writes
- API routes → Music discovery: requests metadata
- Music discovery → YouTube API: searches videos
- API routes → Domain rules: checks duplicates
- API routes → Download queue: enqueues jobs
- Download queue → API database: updates jobs
- Download queue → Music discovery: gets media
- Download queue → FFmpeg: processes audio
- App state → Audio files: saves audio
- Audio files → Device audio: writes and reads
- App state → Local storage: persists library
- App state → Web storage: persists web state
- Audio player → Device audio: plays tracks