/The-Music-App

Music app to search for all things, music

Primary LanguageJavaScript

The Music App

https://meeday.github.io/The-Music-App/

Summary

A webapp that searches for music by track, album, or artist. Enter in your search query and access a wealth of information from reputable sources.

Contents

Planning

User Story

AS an avid music fan, I WANT an App that gives me information on songs SO THAT I can learn more about the artists and their work

Acceptance Criteria

GIVEN that I input a valid name
WHEN I enter a track name
THEN I am presented with detailed information about the track
WHEN I enter an album name
THEN I am presented with info on the album and a list of songs in it
WHEN I enter an artist name
THEN I am presented with a bio, some info about them, and discography

Wireframes

image image image image

APIs

Third Party

LastFM

The main API, used to retrieve artist info and to fill out the search result pages

audd.io API

Used to retrieve song lyrics on request.

Used to retreive upcoming shows and concerts related to the artist

CSS Framework

Materialize css is used for most of the styling with some custom css to support it

Features

Results Pages

With all search result pages the user will be able to click on arist/album/track names in the results to open a modal with more info on that item.

Track Search

This will display the top 10 search results. The user can then click to select which track they want. This will then show them the track info.

Album Search

This will return the album with:

  • Artist
  • Brief summary (if available)
  • Tracklist

Artist Search

When selecting artist and searching the user will be presented with artist info:

  • Bio
  • Top Albums
  • Top Tracks

Modals

These are shown whenever a user clicks on a link in the results pages and have been implimented so that a user won't lose their original search if they go down the 'rabbit hole' and click numerous links. Any link clicked within a modal will refresh/change the modal to display the new info.

Track Modal

  • Track
  • Album title with cover
  • Artist name
  • Lyrics

Album & Artist Modals

These are designed the same as the existing results pages.