Music Search app

Initial Requirements

The high-level requirements from a friend who runs an independent music label were:

I have several artist releases available on a digital store, I need an app that allows the following actions: -

  • can maintain a list of artists & their corresponding digital store id

  • using the digital store id,

o search for all albums on either the GB or US store for the selected artist

o display the albums

  • including artist name, album title, release date, store price and copyright notice

o a way to view the store’s assigned artwork

o a way to see the album on the store

o a way to view the album’s associated track listing

Proposed Solution

To address the requirements, a flutter app which utilises an SQLite database will be built, the app will store the artist’s name and their corresponding ids, when an artist is selected a call will be made to the digital store’s API endpoint to retrieve the relevant albums. By clicking “show tracks”, a subsequent call will be made to the digital store’s API endpoint to retrieve the relevant tracks for the selected album.

The app will have four distinct pages, these are:

Home Page – this page will be where the user will initiate the search by selecting an artist from the list, the page will also allow the user to select the required store country. From the app bar, the user will also be able to create new artists or navigate to the artist list page.

Artist List – this page will show all previously entered artists and their corresponding store ids. A search will allow the user to search for a specific artist by name or id. Long pressing and selecting one or more cards will allow the user to delete multiple cards.

Album List – this page will show all albums found on store for the selected artist. Swiping the card will reveal actions which allow the user to either view the album artwork, show the album’s store page, or view the selected album’s track listing.

Track List – this page will show all tracks for the selected album.

Solution Details

Home Page

On opening the app, the user will navigate to the “home” page.

Tapping the “country” icon, switches between the two required stores.

To create a new artist, the user will tap the “add” icon in the app bar, the add dialogue is shown and both the “name” and “id” fields are required.

Swiping a schedule card to the right, the “show artwork” and “view on store” actions will be displayed, swiping the card to the left, displays the “show tracks” action.

When selecting an artist to search on store with, the field “artist name” is an auto-complete input so the required artist must have been previously created.

The “artist id” is unique.

Tapping the “list” icon in the app bar, navigates to the “artist list” page.

Artist List

This page shows all previously entered artists and their corresponding artist ids.

Tapping the add icon in the app bar, this allows the user to create new entries.

Tapping the search icon in the app bar, shows a search criteria box, this allows the user to search for an artist by name or id.

Long pressing and selecting one or more cards will allow the user to delete multiple cards.

Album List

This page shows all albums returned in the digital store’s JSON document for the selected artist.

The album card shows the artist’s name, album name, album price, total number of tracks on the album, the release date, and the album copyright notice.

The leading image shows an “E” if the album is considered explicit.

Swiping a schedule card to the right, the “show artwork” and “show in store” actions will be displayed, swiping the card to the left, displays the “show tracks” action.

On tapping the “show artwork” action, using the store’s artwork URL from the received data, an alert dialogue displays the image.

On tapping the “show in store” action, using the store’s album preview URL from the received data, an in-app web-view is opened displaying the store’s corresponding album page.

Track List

This page shows all tracks returned in the digital store’s JSON document for the selected album.

The tracks card shows the artist’s name, track name, disc number, track number, track duration and track price.

The leading image shows an “E” if the track is considered explicit.

Technical stuff

  • When saving a new artist, the “artist id” is unique.

  • To initiate a digital store search, the user must have a valid network connection.

  • On selecting an artist from the search auto-complete dialogue

a. a HTTP call is made to the digital store’s API endpoint

b. a JSON document is returned

c. the JSON document is parsed, decoded, and then mapped to dart objects

d. if the document results count is zero, then a “no data found on store” message is shown

  • On tapping the album card action “show tracks”

a. a HTTP call is made to the digital store’s API endpoint

b. a JSON document is returned

c. the JSON document is parsed, decoded, and then mapped to dart objects

Icons made by freepik from www.flaticon.com

App Mock-ups