# fernandonaon/migrate-beats-client architecture

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

- Interactive diagram: https://gitdiagram.com/fernandonaon/migrate-beats-client
- Repository: https://github.com/fernandonaon/migrate-beats-client

## Overview

Migrate Beats is a music-library web app centered on moving playlists and tracks between Spotify and Tidal. Users connect accounts, choose music and a destination, then initiate a migration; separate screens manage playlists, liked songs, account settings, dashboard information, and listening-history analysis. The React app routes through shared authentication and layout state to feature pages, which use a shared API client. The README is only the Vite template; feature details here come from the source index and sampled source, so backend behavior is not inferred beyond the client’s HTTP boundary.

Main entry points: [`src/App.tsx`](https://github.com/fernandonaon/migrate-beats-client/blob/main/src/App.tsx) (Router), [`src/lib/api.ts`](https://github.com/fernandonaon/migrate-beats-client/blob/main/src/lib/api.ts) (HTTP API Client), [`src/context/AuthContext.tsx`](https://github.com/fernandonaon/migrate-beats-client/blob/main/src/context/AuthContext.tsx) (Account Context), [`src/components/Layout.tsx`](https://github.com/fernandonaon/migrate-beats-client/blob/main/src/components/Layout.tsx) (Navigation Layout)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application Shell"]
  node_app["Router<br/>[App.tsx]"]
  node_layout["Navigation Layout<br/>[Layout.tsx]"]
  node_api["HTTP API Client<br/>[api.ts]"]
end

subgraph group_accounts["Account and UI State"]
  node_auth["Account Context<br/>[AuthContext.tsx]"]
  node_theme["Theme Context<br/>[ThemeContext.tsx]"]
  node_theme_toggle["Theme Toggle<br/>[ThemeToggle.tsx]"]
  node_home["Home and Login<br/>[Home.tsx]"]
  node_callback["OAuth Callback<br/>[Callback.tsx]"]
end

subgraph group_music["Music Workflows"]
  node_migrate["Playlist Migration<br/>[Migrate.tsx]"]
  node_liked["Liked Songs<br/>[LikedSongs.tsx]"]
  node_manager["Playlist Manager"]
  node_picker["Playlist Picker"]
end

subgraph group_insights["Insights and Settings"]
  node_dashboard["Dashboard<br/>[Dashboard.tsx]"]
  node_archaeologist["Library Archaeology<br/>[Archaeologist.tsx]"]
  node_settings["Settings<br/>[Settings.tsx]"]
end

node_user(("Listener"))
node_backend["Application API"]

node_user -->|"uses"| node_app
node_app -->|"routes through"| node_layout
node_app -->|"provides"| node_auth
node_app -->|"provides"| node_theme
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_callback
node_app -->|"routes to"| node_dashboard
node_app -->|"routes to"| node_migrate
node_app -->|"routes to"| node_manager
node_app -->|"routes to"| node_archaeologist
node_app -->|"routes to"| node_liked
node_app -->|"routes to"| node_settings
node_layout -->|"reads state"| node_auth
node_layout -->|"renders"| node_theme_toggle
node_theme_toggle -->|"toggles"| node_theme
node_auth -->|"calls"| node_api
node_home -->|"uses state"| node_auth
node_home -->|"requests"| node_api
node_callback -->|"exchanges code"| node_auth
node_dashboard -->|"requests"| node_api
node_migrate -->|"loads and migrates"| node_api
node_liked -->|"moves and migrates"| node_api
node_manager -->|"manages playlists"| node_api
node_manager -->|"opens picker"| node_picker
node_liked -->|"opens picker"| node_picker
node_archaeologist -->|"requests insights"| node_api
node_settings -->|"requests settings"| node_api
node_api -->|"sends HTTP requests"| node_backend

click node_app "https://github.com/fernandonaon/migrate-beats-client/blob/main/src/App.tsx"
click node_layout "https://github.com/fernandonaon/migrate-beats-client/blob/main/src/components/Layout.tsx"
click node_auth "https://github.com/fernandonaon/migrate-beats-client/blob/main/src/context/AuthContext.tsx"
click node_theme "https://github.com/fernandonaon/migrate-beats-client/blob/main/src/context/ThemeContext.tsx"
click node_theme_toggle "https://github.com/fernandonaon/migrate-beats-client/blob/main/src/components/ThemeToggle.tsx"
click node_api "https://github.com/fernandonaon/migrate-beats-client/blob/main/src/lib/api.ts"
click node_home "https://github.com/fernandonaon/migrate-beats-client/blob/main/src/pages/Home.tsx"
click node_callback "https://github.com/fernandonaon/migrate-beats-client/blob/main/src/pages/Callback.tsx"
click node_dashboard "https://github.com/fernandonaon/migrate-beats-client/blob/main/src/pages/Dashboard.tsx"
click node_migrate "https://github.com/fernandonaon/migrate-beats-client/blob/main/src/pages/Migrate.tsx"
click node_liked "https://github.com/fernandonaon/migrate-beats-client/blob/main/src/pages/LikedSongs.tsx"
click node_manager "https://github.com/fernandonaon/migrate-beats-client/blob/main/src/pages/PlaylistManager.tsx"
click node_picker "https://github.com/fernandonaon/migrate-beats-client/blob/main/src/components/PlaylistPickerModal.tsx"
click node_archaeologist "https://github.com/fernandonaon/migrate-beats-client/blob/main/src/pages/Archaeologist.tsx"
click node_settings "https://github.com/fernandonaon/migrate-beats-client/blob/main/src/pages/Settings.tsx"

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_layout,node_api toneBlue
class node_auth,node_theme,node_theme_toggle,node_home,node_callback toneAmber
class node_migrate,node_liked,node_manager,node_picker,node_backend toneMint
class node_dashboard,node_archaeologist,node_settings toneRose
class node_user toneIndigo
```

## Components

### Application Shell

- [Router](https://github.com/fernandonaon/migrate-beats-client/blob/main/src/App.tsx): `src/App.tsx`
- [Navigation Layout](https://github.com/fernandonaon/migrate-beats-client/blob/main/src/components/Layout.tsx): `src/components/Layout.tsx`
- [HTTP API Client](https://github.com/fernandonaon/migrate-beats-client/blob/main/src/lib/api.ts): `src/lib/api.ts`

### Account and UI State

- [Account Context](https://github.com/fernandonaon/migrate-beats-client/blob/main/src/context/AuthContext.tsx): `src/context/AuthContext.tsx`
- [Theme Context](https://github.com/fernandonaon/migrate-beats-client/blob/main/src/context/ThemeContext.tsx): `src/context/ThemeContext.tsx`
- [Theme Toggle](https://github.com/fernandonaon/migrate-beats-client/blob/main/src/components/ThemeToggle.tsx): `src/components/ThemeToggle.tsx`
- [Home and Login](https://github.com/fernandonaon/migrate-beats-client/blob/main/src/pages/Home.tsx): `src/pages/Home.tsx`
- [OAuth Callback](https://github.com/fernandonaon/migrate-beats-client/blob/main/src/pages/Callback.tsx): `src/pages/Callback.tsx`

### Music Workflows

- [Playlist Migration](https://github.com/fernandonaon/migrate-beats-client/blob/main/src/pages/Migrate.tsx): `src/pages/Migrate.tsx`
- [Liked Songs](https://github.com/fernandonaon/migrate-beats-client/blob/main/src/pages/LikedSongs.tsx): `src/pages/LikedSongs.tsx`
- [Playlist Manager](https://github.com/fernandonaon/migrate-beats-client/blob/main/src/pages/PlaylistManager.tsx): `src/pages/PlaylistManager.tsx`
- [Playlist Picker](https://github.com/fernandonaon/migrate-beats-client/blob/main/src/components/PlaylistPickerModal.tsx): `src/components/PlaylistPickerModal.tsx`

### Insights and Settings

- [Dashboard](https://github.com/fernandonaon/migrate-beats-client/blob/main/src/pages/Dashboard.tsx): `src/pages/Dashboard.tsx`
- [Library Archaeology](https://github.com/fernandonaon/migrate-beats-client/blob/main/src/pages/Archaeologist.tsx): `src/pages/Archaeologist.tsx`
- [Settings](https://github.com/fernandonaon/migrate-beats-client/blob/main/src/pages/Settings.tsx): `src/pages/Settings.tsx`

### Other components

- **Listener**
- **Application API**

## Connections

- Listener → Router: uses
- Router → Navigation Layout: routes through (evidence: `src/App.tsx`)
- Router → Account Context: provides (evidence: `src/App.tsx`)
- Router → Theme Context: provides (evidence: `src/App.tsx`)
- Router → Home and Login: routes to (evidence: `src/App.tsx`)
- Router → OAuth Callback: routes to (evidence: `src/App.tsx`)
- Router → Dashboard: routes to (evidence: `src/App.tsx`)
- Router → Playlist Migration: routes to (evidence: `src/App.tsx`)
- Router → Playlist Manager: routes to (evidence: `src/App.tsx`)
- Router → Library Archaeology: routes to (evidence: `src/App.tsx`)
- Router → Liked Songs: routes to (evidence: `src/App.tsx`)
- Router → Settings: routes to (evidence: `src/App.tsx`)
- Navigation Layout → Account Context: reads state (evidence: `src/components/Layout.tsx`)
- Navigation Layout → Theme Toggle: renders (evidence: `src/components/Layout.tsx`)
- Theme Toggle → Theme Context: toggles (evidence: `src/components/ThemeToggle.tsx`)
- Account Context → HTTP API Client: calls (evidence: `src/context/AuthContext.tsx`)
- Home and Login → Account Context: uses state (evidence: `src/pages/Home.tsx`)
- Home and Login → HTTP API Client: requests (evidence: `src/pages/Home.tsx`)
- OAuth Callback → Account Context: exchanges code (evidence: `src/pages/Callback.tsx`)
- Dashboard → HTTP API Client: requests (evidence: `src/pages/Dashboard.tsx`)
- Playlist Migration → HTTP API Client: loads and migrates (evidence: `src/pages/Migrate.tsx`)
- Liked Songs → HTTP API Client: moves and migrates (evidence: `src/pages/LikedSongs.tsx`)
- Playlist Manager → HTTP API Client: manages playlists (evidence: `src/pages/PlaylistManager.tsx`)
- Playlist Manager → Playlist Picker: opens picker (evidence: `src/pages/PlaylistManager.tsx`)
- Liked Songs → Playlist Picker: opens picker (evidence: `src/pages/LikedSongs.tsx`)
- Library Archaeology → HTTP API Client: requests insights (evidence: `src/pages/Archaeologist.tsx`)
- Settings → HTTP API Client: requests settings (evidence: `src/pages/Settings.tsx`)
- HTTP API Client → Application API: sends HTTP requests (evidence: `src/lib/api.ts`)