# mr-baraiya/vmusic architecture

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

## Overview

VMusic is an indie-music discovery and streaming web app. Users browse or search music, play tracks in a persistent player, and—when signed in—manage favorites, playlists, and profiles. A parallel VibeTube experience searches YouTube and exposes video and playlist features. The graph reflects documented product capabilities and sampled wiring; several page and API implementations were not sampled, so uncertain connections are left out.

Main entry points: [`src/App.jsx`](https://github.com/mr-baraiya/vmusic/blob/main/src/App.jsx) (Application routes), [`src/contexts/AuthContext.jsx`](https://github.com/mr-baraiya/vmusic/blob/main/src/contexts/AuthContext.jsx) (Auth context), [`src/api/jamendo.js`](https://github.com/mr-baraiya/vmusic/blob/main/src/api/jamendo.js) (Jamendo client), [`src/pages/Search.jsx`](https://github.com/mr-baraiya/vmusic/blob/main/src/pages/Search.jsx) (Music search)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_discovery["Music discovery"]
  node_app["Application routes<br/>[App.jsx]"]
  node_explore["Explore and catalog<br/>[Explore.jsx]"]
  node_search["Music search<br/>[Search.jsx]"]
  node_catalog["Artist and album pages<br/>[Artists.jsx]"]
  node_jamendo_client["Jamendo client<br/>[jamendo.js]"]
  node_jamendo{{"Jamendo music API"}}
  node_spotify_client["Spotify clients<br/>[spotify.js]"]
  node_spotify{{"Spotify API"}}
end

subgraph group_identity["Identity and library"]
  node_auth["Auth context<br/>[AuthContext.jsx]"]
  node_firebase_config["Firebase config<br/>[firebase.js]"]
  node_firebase_auth{{"Firebase Auth"}}
  node_firestore[("Firestore")]
  node_users_client["User API client<br/>[users.js]"]
  node_users_api["User endpoint<br/>[users.js]"]
  node_mongo[("MongoDB")]
  node_library_pages["Favorites and playlists<br/>[Favorites.jsx]"]
  node_favorites_api["Favorites endpoint<br/>[favorites.js]"]
  node_playlists_api["Playlists endpoint<br/>[playlists.js]"]
end

subgraph group_playback["Playback"]
  node_player_state["Player context<br/>[PlayerContext.jsx]"]
  node_player_ui["Persistent player<br/>[FloatingPlayer.jsx]"]
end

subgraph group_vibetube["VibeTube"]
  node_vibetube_page["VibeTube experience<br/>[VibeTube.jsx]"]
  node_youtube_ui["Video search and player<br/>[SearchResults.jsx]"]
  node_youtube_client["YouTube client<br/>[youtube.js]"]
  node_youtube{{"YouTube API"}}
  node_history_ui["Search history<br/>[SearchHistory.jsx]"]
  node_history_api["Search history endpoint<br/>[search-history.js]"]
  node_youtube_playlists["YouTube playlists UI"]
end

node_listener(("Listener"))

node_listener -->|"navigates"| node_app
node_app -->|"routes to"| node_explore
node_app -->|"routes to"| node_search
node_app -->|"routes to"| node_catalog
node_app -->|"routes to"| node_library_pages
node_app -->|"routes to"| node_vibetube_page
node_search -->|"searches"| node_jamendo_client
node_jamendo_client -->|"requests catalog"| node_jamendo
node_search -->|"plays tracks"| node_player_state
node_explore -->|"loads music"| node_jamendo_client
node_catalog -->|"loads catalog"| node_jamendo_client
node_spotify_client -.->|"requests recommendations"| node_spotify
node_auth -->|"uses configuration"| node_firebase_config
node_auth -->|"authenticates"| node_firebase_auth
node_auth -->|"reads and writes users"| node_firestore
node_auth -->|"syncs user"| node_users_client
node_users_client -->|"calls"| node_users_api
node_users_api -->|"persists user"| node_mongo
node_library_pages -->|"manages favorites"| node_favorites_api
node_library_pages -->|"manages playlists"| node_playlists_api
node_player_ui -->|"controls playback"| node_player_state
node_player_state -->|"streams audio"| node_listener
node_vibetube_page -->|"presents search"| node_youtube_ui
node_youtube_ui -->|"searches videos"| node_youtube_client
node_youtube_client -->|"requests videos"| node_youtube
node_history_ui -->|"loads and clears"| node_history_api
node_history_api -->|"stores searches"| node_mongo
node_vibetube_page -->|"offers playlists"| node_youtube_playlists

click node_app "https://github.com/mr-baraiya/vmusic/blob/main/src/App.jsx"
click node_explore "https://github.com/mr-baraiya/vmusic/blob/main/src/pages/Explore.jsx"
click node_search "https://github.com/mr-baraiya/vmusic/blob/main/src/pages/Search.jsx"
click node_catalog "https://github.com/mr-baraiya/vmusic/blob/main/src/pages/Artists.jsx"
click node_jamendo_client "https://github.com/mr-baraiya/vmusic/blob/main/src/api/jamendo.js"
click node_spotify_client "https://github.com/mr-baraiya/vmusic/blob/main/src/api/spotify.js"
click node_auth "https://github.com/mr-baraiya/vmusic/blob/main/src/contexts/AuthContext.jsx"
click node_firebase_config "https://github.com/mr-baraiya/vmusic/blob/main/src/config/firebase.js"
click node_users_client "https://github.com/mr-baraiya/vmusic/blob/main/src/api/users.js"
click node_users_api "https://github.com/mr-baraiya/vmusic/blob/main/api/users.js"
click node_library_pages "https://github.com/mr-baraiya/vmusic/blob/main/src/pages/Favorites.jsx"
click node_favorites_api "https://github.com/mr-baraiya/vmusic/blob/main/api/favorites.js"
click node_playlists_api "https://github.com/mr-baraiya/vmusic/blob/main/api/playlists.js"
click node_player_state "https://github.com/mr-baraiya/vmusic/blob/main/src/contexts/PlayerContext.jsx"
click node_player_ui "https://github.com/mr-baraiya/vmusic/blob/main/src/components/player/FloatingPlayer.jsx"
click node_vibetube_page "https://github.com/mr-baraiya/vmusic/blob/main/src/pages/VibeTube.jsx"
click node_youtube_ui "https://github.com/mr-baraiya/vmusic/blob/main/src/components/vibetube/SearchResults.jsx"
click node_youtube_client "https://github.com/mr-baraiya/vmusic/blob/main/src/api/youtube.js"
click node_history_ui "https://github.com/mr-baraiya/vmusic/blob/main/src/components/vibetube/SearchHistory.jsx"
click node_history_api "https://github.com/mr-baraiya/vmusic/blob/main/api/search-history.js"
click node_youtube_playlists "https://github.com/mr-baraiya/vmusic/blob/main/src/components/vibetube/YouTubePlaylists.jsx"

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_explore,node_search,node_catalog,node_jamendo_client,node_jamendo,node_spotify_client,node_spotify toneBlue
class node_auth,node_firebase_config,node_firebase_auth,node_firestore,node_users_client,node_users_api,node_mongo,node_library_pages,node_favorites_api,node_playlists_api toneAmber
class node_player_state,node_player_ui toneMint
class node_vibetube_page,node_youtube_ui,node_youtube_client,node_youtube,node_history_ui,node_history_api,node_youtube_playlists toneRose
class node_listener toneIndigo
```

## Components

### Music discovery

- [Application routes](https://github.com/mr-baraiya/vmusic/blob/main/src/App.jsx): `src/App.jsx`
- [Explore and catalog](https://github.com/mr-baraiya/vmusic/blob/main/src/pages/Explore.jsx): `src/pages/Explore.jsx`
- [Music search](https://github.com/mr-baraiya/vmusic/blob/main/src/pages/Search.jsx): `src/pages/Search.jsx`
- [Artist and album pages](https://github.com/mr-baraiya/vmusic/blob/main/src/pages/Artists.jsx): `src/pages/Artists.jsx`
- [Jamendo client](https://github.com/mr-baraiya/vmusic/blob/main/src/api/jamendo.js): `src/api/jamendo.js`
- **Jamendo music API**
- [Spotify clients](https://github.com/mr-baraiya/vmusic/blob/main/src/api/spotify.js): `src/api/spotify.js`
- **Spotify API**

### Identity and library

- [Auth context](https://github.com/mr-baraiya/vmusic/blob/main/src/contexts/AuthContext.jsx): `src/contexts/AuthContext.jsx`
- [Firebase config](https://github.com/mr-baraiya/vmusic/blob/main/src/config/firebase.js): `src/config/firebase.js`
- **Firebase Auth**
- **Firestore**
- [User API client](https://github.com/mr-baraiya/vmusic/blob/main/src/api/users.js): `src/api/users.js`
- [User endpoint](https://github.com/mr-baraiya/vmusic/blob/main/api/users.js): `api/users.js`
- **MongoDB**
- [Favorites and playlists](https://github.com/mr-baraiya/vmusic/blob/main/src/pages/Favorites.jsx): `src/pages/Favorites.jsx`
- [Favorites endpoint](https://github.com/mr-baraiya/vmusic/blob/main/api/favorites.js): `api/favorites.js`
- [Playlists endpoint](https://github.com/mr-baraiya/vmusic/blob/main/api/playlists.js): `api/playlists.js`

### Playback

- [Player context](https://github.com/mr-baraiya/vmusic/blob/main/src/contexts/PlayerContext.jsx): `src/contexts/PlayerContext.jsx`
- [Persistent player](https://github.com/mr-baraiya/vmusic/blob/main/src/components/player/FloatingPlayer.jsx): `src/components/player/FloatingPlayer.jsx`

### VibeTube

- [VibeTube experience](https://github.com/mr-baraiya/vmusic/blob/main/src/pages/VibeTube.jsx): `src/pages/VibeTube.jsx`
- [Video search and player](https://github.com/mr-baraiya/vmusic/blob/main/src/components/vibetube/SearchResults.jsx): `src/components/vibetube/SearchResults.jsx`
- [YouTube client](https://github.com/mr-baraiya/vmusic/blob/main/src/api/youtube.js): `src/api/youtube.js`
- **YouTube API**
- [Search history](https://github.com/mr-baraiya/vmusic/blob/main/src/components/vibetube/SearchHistory.jsx): `src/components/vibetube/SearchHistory.jsx`
- [Search history endpoint](https://github.com/mr-baraiya/vmusic/blob/main/api/search-history.js): `api/search-history.js`
- [YouTube playlists UI](https://github.com/mr-baraiya/vmusic/blob/main/src/components/vibetube/YouTubePlaylists.jsx): `src/components/vibetube/YouTubePlaylists.jsx`

### Other components

- **Listener**

## Connections

- Listener → Application routes: navigates
- Application routes → Explore and catalog: routes to
- Application routes → Music search: routes to
- Application routes → Artist and album pages: routes to
- Application routes → Favorites and playlists: routes to
- Application routes → VibeTube experience: routes to
- Music search → Jamendo client: searches
- Jamendo client → Jamendo music API: requests catalog
- Music search → Player context: plays tracks
- Explore and catalog → Jamendo client: loads music
- Artist and album pages → Jamendo client: loads catalog
- Spotify clients → Spotify API: requests recommendations
- Auth context → Firebase config: uses configuration
- Auth context → Firebase Auth: authenticates
- Auth context → Firestore: reads and writes users
- Auth context → User API client: syncs user
- User API client → User endpoint: calls
- User endpoint → MongoDB: persists user
- Favorites and playlists → Favorites endpoint: manages favorites
- Favorites and playlists → Playlists endpoint: manages playlists
- Persistent player → Player context: controls playback
- Player context → Listener: streams audio
- VibeTube experience → Video search and player: presents search
- Video search and player → YouTube client: searches videos
- YouTube client → YouTube API: requests videos
- Search history → Search history endpoint: loads and clears
- Search history endpoint → MongoDB: stores searches
- VibeTube experience → YouTube playlists UI: offers playlists