Design

TrackQueen

Learn more about your music 💽 👑

by John Canelis, Product Designer
Project Topics
  • React Native
  • iOS
  • Android
  • Material Design
  • Expo
  • ChatGPT
  • OpenAI
  • Genius
  • YouTube
  • Musixmatch
  • ACR Cloud
  • Google Cloud
  • App Store
  • TestFlight
  • mobile

Lyrics, videos, comments, production notes, and more.

TrackQueen is an app that makes it easy to learn more about your currently playing song.

This project is the result of a passion for music and technology. How can we learn more about our favorite songs? How can we easily learn about the latest tracks? I built TrackQueen for that. You can download it for iOS and soon for Android on Google Play.

So here's how it works: start playing a song, open the app, and pull down to refresh. That's it. Your content is ready.

About examples
On the About tab you can find background info on the track. This content is created by real people. Sourced directly from Genius.

lyrics-ios
Lyrics and annotations. Sometimes from the actual artist.

Comments
What are other people saying about your favorite songs?

ChatGPT
Select a question for ChatGPT.

Android Dec 6
The experience on Android.

Android (Light)
On Android, the app uses Google's Material You, which adapts the colors of the interface to the user's selected theme.

Pull down to refresh or record the audio playing around you.

When you pull down to refresh in the app, TrackQueen will ping Spotify to ask for your currently playing track. Then it fetches content for that song from places like Genius, YouTube, and Musixmatch. Not using Spotify? TrackQueen can search using the audio playing around you just like Shazam using ACRCloud.

Check out the features page of the TrackQueen website for an in-depth look at the available functionality.

App Store marketing
App Store promotional images.
Marketing flow
Safari displays Apple's Smart App Banner for a direct link to the App Store page.

Problems

Spotify is great for finding and organizing music but it falls short when you want to learn more.

💿 It's tedious to search for information across several websites for the music you're listening to.

💿 When you're listening to something on Spotify, there isn't a way to know what anyone else has said about it.

💿 For most tracks, Spotify doesn't provide any background info or analysis of the lyrics or production details.

💿 Audio search tools like Shazam don't provide much information beyond just identifying the track.

TrackQueen website
The website homepage.

The website features page.
Built with React and Contentful.

Opportunities

Find the best content. Bring it together in one place. Make it simple.

👑 YouTube has content about most of the music you're listening to. (Comments, performances, reactions, interviews, etc.)

👑 The Genius API has interesting info about many tracks and artists.

👑 ChatGPT from OpenAI unlocks even more possibilities to learn.

👑 With the Spotify API providing the user's currently playing track, requests for all of the needed content can be immediately triggered.

Screenshot 2023-11-10 at 12.15.51 AM
Developing the app.

A dynamic interface using Google's Material Design.

The app follows the design language of the platform it operates within. For iOS, that's Apple's Human Interface Guidelines (HIG). For Android devices, TrackQueen uses Google's latest implementation of Material Design, Material You.

The app drops most of its branding colors on Android. It uses the operating system's approach to customization of the interface based on the theme choices of the user. Often these colors are generated from their wallpaper image.

colors
Material You adapts the interface to the user's preferences.

colors-dark
Material You shown here in dark mode.

colors-loading
Asking ChatGPT about the song.

android
Even the keyboard changes its colors.

Open Source

Available on GitHub.

TrackQueen is an open source project. You can view the full source code on GitHub. It's available on the App Store for iPhone, iPad, and Mac. Learn more on the TrackQueen website.

I built the app with React Native using Expo. It uses APIs from Spotify, YouTube, Genius, Musixmatch, ACRCloud, and ChatGPT. For user authentication I used Google Cloud Functions for Firebase with Node.js. Updates are tested using Apple's TestFlight.

Building an app can be exhausting. It's also a ton of fun and challenging in the best ways. I prefer to work with people, but you learn a lot by taking on the role of product manager, engineer, designer, marketer, etc., for a solo project like this.

TrackQueen Branding
TrackQueen branding imagery.

TrackQueen brain.
The mind of TrackQueen.

The icon.
The app icon.

Social post.
Graphic for social sharing.