Back to projects
繁中

Music Chart Tracker

A music chart tracking app for viewing Spotify daily and total streaming numbers and music details, with filtering and sorting features. It also lets users explore an artist’s Billboard HOT 100 history, sort songs by chart performance and weeks on the chart, and view the HOT 100 ranking for a selected week.

2024
  • Swift
  • SwiftUI
  • Node.js

Project Background and Overview

Music Chart Tracker is an app that allows users to look up daily and total Spotify streaming numbers for an artist’s albums and songs, along with detailed music information. Users can also view the Billboard HOT 100 chart history of a specific artist and browse the HOT 100 chart for a selected week by date.

I regularly use Kworb.net to check Spotify streaming data, but the experience on mobile devices is not ideal. The interface is not designed responsively for mobile screens, and it also lacks convenient search and sorting features, making it inconvenient whenever I want to check the data on my phone. After confirming that its robots.txt allows web crawling, I decided to develop this app so that streaming and chart data could be presented in a way that is easier to use on mobile devices, with more convenient search and sorting features.

Kworb.net Website Screenshots

Kworb Website

Kworb Website

This application is intended solely for non-profit and learning purposes.

Screenshots and Feature Overview

Daily and Total Song / Album Streams

Daily and Total Song and Album Streams

Loading Placeholder

Loading Placeholder

Music Details

Music Details

Collaborating Artists (When a Song or Album Features Multiple Artists)

Collaborating Artists

Streaming Data for Mandarin Artists in Addition to Western Artists

Mandarin Artist Streaming Data

Mandarin Artist Streaming Data

Kpop Artist Streaming Data

Kpop Artist Streaming Data

Filter All Songs from an Album

Filter All Songs from an Album

Billboard History

View a specific artist’s complete Billboard HOT 100 chart history and detailed song rankings.

Billboard History

Sort by Weeks on Chart and Ranking

Billboard History Sort

Billboard Date

Retrieve the Billboard HOT 100 chart for the week based on the date selected by the user and display the top 100 songs and their rankings for that week.

Billboard Date

Feature Implementation and Data Processing Logic

Streaming Data Retrieval Logic

  1. Use a TextField to get the artist name entered by the user
  2. Send the artist name to the backend API server through an HTTP GET request
  3. Use the Spotify API’s GET /v1/search endpoint with type=artist and the artist name as the search query to retrieve the first matching artist’s name, ID, image, and other information, so users do not need to enter the full artist name. For example, entering Tay can return related artists such as Taylor Swift
  4. Use the artist ID and music type to crawl Kworb.net for the artist’s daily album or song streaming data. The URL format is https://kworb.net/spotify/artist/${artistId}_${type}.html. For example, Taylor Swift’s song data is available at https://kworb.net/spotify/artist/06HL4z0CvFAxyc27GXpf02_songs.html
  5. Use the cheerio package to parse the HTML and convert streaming values that may be NaN to 0. When parsing song or album names, the href attribute of the a tag is also parsed. On the website, each song includes a Spotify URL in a format such as https://open.spotify.com/track/1BxfuPKGuaTgP7aM0Bbdwr. The song ID 1BxfuPKGuaTgP7aM0Bbdwr can then be extracted from the URL and used to retrieve album artwork and related song or album information from the Spotify API for display in the app

Special note: The Spotify URL returned for song data is intentionally changed to the album URL instead of the song URL. This prevents Spotify from immediately playing the song when the user taps the button, which could interrupt the music they are currently listening to and affect the user experience.

Streaming Data Response Example

{
    "artistInfo": {
        "name": "Taylor Swift",
        "image": "https://i.scdn.co/image/ab6761610000e5ebe672b5f553298dcdccb0e676"
    },
    "date": "2024/07/31",
    "streamData": [
        {
            "rank": 1,
            "musicName": "Cruel Summer",
            "albumName": "Lover",
            "albumType": null,
            "totalTracks": null,
            "trackNumber": 2,
            "duration": "2:58",
            "releaseDate": "2019-08-23",
            "imageUrl": "https://i.scdn.co/image/ab67616d0000b273e787cffec20aa2a396a61647",
            "totalStreams": 2335196365,
            "dailyStreams": 2953320,
            "popularity": 92,
            "availableMarkets": null,
            "spotifyUrl": "https://open.spotify.com/album/1NAmidJlEaVgA3MpcPFYGq",
            "musicId": "1BxfuPKGuaTgP7aM0Bbdwr",
            "isCollaboration": false
        },
        {
            "rank": 40,
            "musicName": "Fortnight (feat. Post Malone)",
            "albumName": "THE TORTURED POETS DEPARTMENT: THE ANTHOLOGY",
            "albumType": null,
            "totalTracks": null,
            "trackNumber": 1,
            "duration": "3:48",
            "releaseDate": "2024-04-19",
            "imageUrl": "https://i.scdn.co/image/ab67616d0000b2738ecc33f195df6aa257c39eaa",
            "totalStreams": 545126846,
            "dailyStreams": 2431027,
            "popularity": 82,
            "availableMarkets": null,
            "spotifyUrl": "https://open.spotify.com/album/5H7ixXZfsNMGbIE5OBSpcb",
            "musicId": "6dODwocEuGzHAavXqTbwHv",
            "isCollaboration": true
        }
    ]
}

Collaborating Artist Logic

  1. When retrieving music information, determine whether there are collaborating artists based on track.artists.length > 1
  2. If the music has collaborating artists, opening the music details page in the app sends a request to the backend. Depending on whether the item is a song or an album, the Spotify API’s GET /v1/tracks/{id} or GET /v1/albums/{id} endpoint is used to retrieve the song or album data, with collaborating artist information taken from the artists field

Collaborating Artist Response Example

[
    {
        "name": "Jessie J",
        "image": "https://i.scdn.co/image/ab6761610000e5eb91f0dd753c09e051675a1ca6"
    },
    {
        "name": "Ariana Grande",
        "image": "https://i.scdn.co/image/ab6761610000e5eb40b5c07ab77b6b1a9075fdc0"
    },
    {
        "name": "Nicki Minaj",
        "image": "https://i.scdn.co/image/ab6761610000e5eb07a50f0a9a8f11e5a1102cbd"
    }
]

Data Sources and Copyright Notice

Streaming Data

Spotify streaming data comes from Kworb.net, which provides rankings and streaming data across platforms including Spotify, iTunes, and YouTube. Music information comes from the Spotify API. For more information, see Spotify for Developers.

Billboard HOT 100

This project uses the Billboard HOT 100 chart data in JSON format compiled by mhollingshead as its data source, covering weekly chart data from 1958 to the present. The data is used solely for personal learning and practice and has no commercial purpose. This project is not affiliated with any official organization or company. The data is owned by Billboard. For more information, see Penske Media Corporation and Billboard.