Back to projects
繁中

Artist Profile

An artist information app that combines data from Spotify, Wikipedia, and MusicBrainz to provide artist profiles, music genres, popularity, followers, birth information, and other details. It also supports English and Traditional Chinese Wikipedia content, artist search, and multiple data validation methods to improve result accuracy.

2024
  • Flutter
  • Node.js

Project Overview

《Artist Profile》 is an application that integrates multiple data sources, allowing users to easily explore artists. By integrating the Spotify API, Wikipedia API, and MusicBrainz API, the application provides rich information including artist images, names, music genres, follower counts, popularity, birthplace, date of birth, active countries, and more. Wikipedia content is also available in Traditional Chinese and English to support different language needs. The App also includes a smart search feature, allowing users to accurately find relevant artists even when entering only part of a name or making spelling mistakes.

App Showcase

Home Page

homepage

English and Chinese Artist Detail Pages

en_artist_bio_page zh_artist_bio_page

Support for Searching Taiwanese Artists

tw_artist_bio_page

Home Page Loading Screen

loading_artist_bio_page

Artist Detail Loading Screen

loading_artist_bio_page

Search Page

search_page

Alert Dialog

dialog

Notification Bar

notification_bar

Features

  • Artist Profile: Integrates multiple APIs to provide detailed artist information

    • Spotify API: Displays the artist's photo, name, Spotify popularity, follower count, and music genres
    • Wikipedia API: Provides the artist's information from Wikipedia
    • MusicBrainz API: Provides detailed information such as the artist's date of birth, birthplace, and active countries

  • Search: Retrieves results through the Spotify API, allowing users to find relevant artists even when entering only part of a name or making spelling mistakes (for example, entering "Taylor" or "Tay" can find "Taylor Swift")

  • Language Settings: Allows Wikipedia content to be displayed in Traditional Chinese or English

Project Highlights

  • Caching Mechanism:

    • Backend Cache: Caches data on the server side to effectively reduce third-party API usage even when multiple users make requests simultaneously
    • Frontend Cache: Caches backend data locally after it is retrieved, allowing the same user to directly use locally cached data when making repeated requests within a short period of time, improving response speed and reducing backend traffic

  • Improving Data Accuracy: After repeated testing, the backend uses keyword searches and multiple layers of checks when integrating data from multiple third-party APIs, reducing the possibility of users receiving incorrect data

    • Spotify API Precise Keyword Search: Uses the full artist name returned by Spotify as the basis for querying the Wikipedia API and MusicBrainz API

    • Multi-Layer Checking and Validation Mechanism:

      • When searching with an artist name + keyword, the Wikipedia API may fail to return accurate data, such as returning an entry related to the keyword but not the artist, or when a lesser-known artist does not have a Wikipedia entry. Therefore, the backend checks whether the artist name appears in the extract returned by the Wikipedia API (for example, the Taylor Swift entry will mention Taylor Swift). If it does not, the entry is considered unrelated to the artist, and the backend returns null and displays a message in the App to avoid confusion
      • If an entry passes the check but is still incorrect, such as a search for "Taylor Swift" returning the self-titled album 《Taylor Swift》, the backend manually handles these exceptional cases
      • When checking MusicBrainz API data, the backend checks whether the artist name provided by the Spotify API matches the artist name from the MusicBrainz API and only returns the data when the names match exactly, ensuring data accuracy

  • Chinese Wikipedia Fallback Query Mechanism: Since using Chinese names to search English Wikipedia has a lower chance of returning correct results, when the user selects Chinese as the Wikipedia language and the artist name is in English, the backend does not immediately return null if it cannot find the correct data on Chinese Wikipedia. Instead, it searches English Wikipedia using the artist name.

API Sources

  • Spotify API: Provides artist photos, names, Spotify popularity, follower counts, and music genres, and supports real-time search

  • Wikipedia API: Uses the API provided by MediaWiki to search entry content by keyword and supports multiple language options

  • MusicBrainz API: Provides detailed artist information such as date of birth, birthplace, and active countries