How gabrieltembra/trackonnections works
Trackonnections is a React music-and-discovery app: users sign in, connect a music source, view listening activity in a feed and privacy-approximate map, find nearby venues and events, and ask DJ Gabriel for music analysis or event recommendations. The graph preserves the documented Spotify, ListenBrainz, Last.fm, OpenStreetMap, Ticketmaster, and Groq branches. Backend production wiring is documented and partly sampled; unsampled screen and service internals are represented at their exact tree paths without inferring undocumented calls.
Main entry points: MusicContext.jsx Music state · index.js Production API · App.jsx React app · MapScreen.jsx Music map
Components 29
App experience
- React app
frontend/src/App.jsx - Login screen
frontend/src/screens/LoginScreen.jsx - Music feed
frontend/src/screens/FeedScreen.jsx - Music map
frontend/src/screens/MapScreen.jsx - DJ Gabriel
frontend/src/screens/DjDaniScreen.jsx - User profile
frontend/src/screens/ProfileScreen.jsx
Music sources
- Music state
frontend/src/context/MusicContext.jsx - Spotify client
frontend/src/services/spotifyApi.js - Spotify player
frontend/src/services/spotifyPlayer.js - ListenBrainz client
frontend/src/services/listenbrainzApi.js - Last.fm client
frontend/src/services/lastfmApi.js
Local discovery
- Location privacy
frontend/src/utils/geo.js - Nearby venues
frontend/src/services/nearbyPlaces.js - Event search
frontend/src/services/eventsApi.js - DJ client
frontend/src/services/djDani.js
API services
- Production API
functions/index.js - Local API routes
backend/routes
Identity and state
- Firebase config
frontend/src/firebase.js - Auth state
frontend/src/context/AuthContext.jsx - Profile state
frontend/src/context/ProfileContext.jsx - Local storage
frontend/src/utils/storage.js
Other components
- Listener
- Firebase Auth
- Spotify API
- ListenBrainz API
- Last.fm API
- OpenStreetMap
- Ticketmaster API
- Groq API
Connections 37
- Listener → React app: uses
- React app → Login screen: routes to
- React app → Music feed: routes to
- React app → Music map: routes to
- React app → DJ Gabriel: routes to
- React app → User profile: routes to
- Login screen → Auth state: signs in
- Auth state → Firebase config: uses
- Firebase config → Firebase Auth: authenticates
- User profile → Profile state: edits
- Profile state → Local storage: reads/writes
- Music feed → Music state: reads music
- Music state → Spotify client: requests data
- Music state → ListenBrainz client: requests data
- Music state → Last.fm client: requests data
- Spotify client → Spotify API: OAuth / data
- ListenBrainz client → ListenBrainz API: fetches listens
- Last.fm client → Production API: requests data
- Production API → Last.fm API: proxies requests
- Music state → Spotify player: loads playback
- Spotify player → Spotify API: plays tracks
- Music map → Music state: reads now playing
- Music map → Location privacy: approximates location
- Music map → Nearby venues: finds venues
- Nearby venues → OpenStreetMap: queries places
- Music map → Event search: searches events
- Event search → Production API: requests nearby events
- Production API → Ticketmaster API: queries events
- DJ Gabriel → Music state: reads music profile
- DJ Gabriel → Event search: uses event results
- DJ Gabriel → DJ client: requests analysis
- DJ client → Production API: sends DJ request
- Production API → Groq API: requests completion
- Production API → Firebase Auth: verifies token
- Local API routes → Groq API: calls AI
- Local API routes → Ticketmaster API: queries events
- Local API routes → Last.fm API: proxies requests