How fernandonaon/migrate-beats-client works
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: App.tsx Router · api.ts HTTP API Client · AuthContext.tsx Account Context · Layout.tsx Navigation Layout
Components 17
Application Shell
- Router
src/App.tsx - Navigation Layout
src/components/Layout.tsx - HTTP API Client
src/lib/api.ts
Account and UI State
- Account Context
src/context/AuthContext.tsx - Theme Context
src/context/ThemeContext.tsx - Theme Toggle
src/components/ThemeToggle.tsx - Home and Login
src/pages/Home.tsx - OAuth Callback
src/pages/Callback.tsx
Music Workflows
- Playlist Migration
src/pages/Migrate.tsx - Liked Songs
src/pages/LikedSongs.tsx - Playlist Manager
src/pages/PlaylistManager.tsx - Playlist Picker
src/components/PlaylistPickerModal.tsx
Insights and Settings
- Dashboard
src/pages/Dashboard.tsx - Library Archaeology
src/pages/Archaeologist.tsx - Settings
src/pages/Settings.tsx
Other components
- Listener
- Application API
Connections 28
- Listener → Router: uses
- Router → Navigation Layout: routes through
src/App.tsx - Router → Account Context: provides
src/App.tsx - Router → Theme Context: provides
src/App.tsx - Router → Home and Login: routes to
src/App.tsx - Router → OAuth Callback: routes to
src/App.tsx - Router → Dashboard: routes to
src/App.tsx - Router → Playlist Migration: routes to
src/App.tsx - Router → Playlist Manager: routes to
src/App.tsx - Router → Library Archaeology: routes to
src/App.tsx - Router → Liked Songs: routes to
src/App.tsx - Router → Settings: routes to
src/App.tsx - Navigation Layout → Account Context: reads state
src/components/Layout.tsx - Navigation Layout → Theme Toggle: renders
src/components/Layout.tsx - Theme Toggle → Theme Context: toggles
src/components/ThemeToggle.tsx - Account Context → HTTP API Client: calls
src/context/AuthContext.tsx - Home and Login → Account Context: uses state
src/pages/Home.tsx - Home and Login → HTTP API Client: requests
src/pages/Home.tsx - OAuth Callback → Account Context: exchanges code
src/pages/Callback.tsx - Dashboard → HTTP API Client: requests
src/pages/Dashboard.tsx - Playlist Migration → HTTP API Client: loads and migrates
src/pages/Migrate.tsx - Liked Songs → HTTP API Client: moves and migrates
src/pages/LikedSongs.tsx - Playlist Manager → HTTP API Client: manages playlists
src/pages/PlaylistManager.tsx - Playlist Manager → Playlist Picker: opens picker
src/pages/PlaylistManager.tsx - Liked Songs → Playlist Picker: opens picker
src/pages/LikedSongs.tsx - Library Archaeology → HTTP API Client: requests insights
src/pages/Archaeologist.tsx - Settings → HTTP API Client: requests settings
src/pages/Settings.tsx - HTTP API Client → Application API: sends HTTP requests
src/lib/api.ts