MuSearch

Description

MuSearch is a place where you can find any song you can think of. Sometimes we hear a little part of a song and we like it, but we don’t know the name. In the moment we use Musearch, you type the part of the song you remember and then easily enjoy the lyrics and the song on your own or with your family and friends.

Project Requirements

• Must use at least two server-side APIs
• Must use a CSS framework other than Bootstrap
• Must use client-side storage to store persistent data
• Must have a polished UI
• Must meet good quality coding standards (indentation, scoping, naming, etc.)
• Must NOT use alerts, confirms, or prompts (look into modals).
• Must be deployed to GitHub Pages
• Must be interactive (i.e: accept and respond to user input)

User Story

As avid music listeners we wanted to create a project in which we could search for a song to view the lyrics and listen to the song. MuSearch uses Genius and Spotify APIs through RapidAPI. You can search for any song or artist and get a list of the 5 most relevant songs based on your search.

Once you select a song, you are automatically directed to a second page where an embedded music or video player is will allow you to listen to the music and the lyrics are listed below.

During development, we were motivated to take the project one step further by including a pre-populated playlist, if available through the api’s for continued listening based on your song selection.

Once you are satisfied, you can return to the search page and start again.

Acceptance Criteria

• GIVEN a music dashoard with form search options:
• WHEN I search for a song, THEN I am presented with 5 options that include Artist, Song Title and Album Art.
• WHEN I select a song option, THEN I am directed to the song where I can listen and I am presented with the lyrics for that song.
• WHEN I am done listening THEN I can search the next song.

Links to Page

• Deployed: https://icunningham7.github.io/MuSearch
• GitHub Repo: https://github.com/icunningham7/MuSearch

Screenshot or Video of Application

Sources

• Rapid API - Genius and Spotify
• Background Photo by Shapelined on Unsplash
• Google Fonts
• Foundation Framework
• Figma
• YouTube
• Post Scribe JS Library