abdullaqudrat / play_full_stack

favorite songs manager - front end built in javascript

Play Full Stack

Module 4 | Contributors: Abdulla Quadrat & Autumn Martin

Core Collaborators: Daniel Mulitouopele, Amy Holt, & Cory Westerfield

About

Intro

Play is a personal playlist builder for music lovers to create playlists for only the best songs: personal favorites.

Check it out live here.

Background

Play is a single page JavaScript application designed for mobile displays. You are looking at its frontend component, which displays views to the user & imparts and provides the interface for user interaction. The frontend is published here.

Play also has a back end component, the Play Full Stack API. The backend is an Express API, which retrieves song data from the API, Musixmatch API, and stores the users personal favorite songs and playlists. The repo for this API is here and it is deployed here.

Tech Stack

JavaScript, HTML, CSS, Webpack

Features

Users are greeted by welcome view, which includes a search bar, app description, and site navigation buttons.

Users can search for songs they like & select them as favorites.

Users can view a favorites index page.

Users can view a playlists index that includes the songs on each playlists.

Production

This app has been deployed to GitHub Pages, and can be viewed in production here.

Development

To view this app in development, clone down https://github.com/abdullaqudrat/play_full_stack.git.

Then install dependencies via npm install.

To get your server started, run npm start. After it has started, visit http://localhost:8080 in your browser to see the app.

play_full_stack's Issues

frontend readme

style welcome page about section

style playlist page content

Create PR template

POST /api/v1/songs

This end point creates a new song for your database. Pleae note that the rating system should only allow for a number between 1-100.

If a song is successfully created, the song item will be returned. If the song is not successfully created, a 400 status code will be returned. All fields are required.

To create a new song, use the following parameters:
{
"songs": {
"id": 1,
"name": "We Will Rock You",
"artist_name": "Queen"
"genre": "Rock",
"song_rating": 88
}
}

Styles search results table

PATCH song end point

If a song is successfully updated (All fields are required), the song item will be returned. If the song is not successfully updated, a 400 status code will be returned.

Allows one to update an existing song with the following parameters:

{
"songs": {
"id": 1,
"name": "We Are the Champions",
"artist_name": "Queen"
"genre": "Rock",
"song_rating": 77
}
}

Test API end points

User can see button to add to playlist

A user can click the “Add to playlist” button once songs have been added as a favorite. This button is hidden until songs have been favorited.

DELETE song end point

Will delete the song with the id passed in and return a 204 status code. If the song can’t be found, a 404 will be returned.

backend readme

DELETE songs on playlist end point

Removes the song with :id from the playlist with :playlist_id

This deletes the existing record in the Playlist Songs table that creates the relationship between this song and playlist. If the playlist/song cannot be found, a 404 will be returned.

If successful, this request will return:

{
"message": "Successfully removed SONG_NAME from PLAYLIST_NAME"
}

retrieve artist data from musixmix

User can click heart to favorite song

Within the song list, a user can click and star songs they want to favorite.

User can view list of playlists

User can add favorite song to Playlist

Clicking add to playlist will add songs into the newly created playlist

Spike based on research links

Style nav bar

GET playlist show end point

Returns all the songs associated with the playlist with an id specified by :playlist_id or a 404 if the playlist is not found

If successful, this request will return a response in the following format:

{
"id": 1,
"playlist_name": "Favorite songs of all time",
"songs": [
{
"id": 1,
"name": "We Will Rock You",
"artist_name": "Queen"
"genre": "Rock",
"song_rating": 88
},
{
"id": 2,
"name": "Careless Whisper",
"artist_name": "George Michael"
"genre": "Pop",
"song_rating": 93
}
]
}

User can search artist

User clicks on a search bar input and enters text of a particular musical artist (i.e Queen). The user then clicks the search button or can hit enter on the keyboard to start the search.

style favorites page content

User can see search bar

User can see a search bar, the search bar includes an input field for entering a text, and a search button

GET playlist index end point

Returns all the playlists in the database along with their associated songs

If successful, this request will return a response in the following format:

[
{
"id": 1,
"playlist_name": "Favorite songs of all time",
"songs": [
{
"id": 1,
"name": "We Will Rock You",
"artist_name": "Queen"
"genre": "Rock",
"song_rating": 88
},
{
"id": 2,
"name": "Careless Whisper",
"artist_name": "George Michael"
"genre": "Pop",
"song_rating": 93
}
]
},
{
"id": 2,
"name": "Other amazing songs",
"songs": [
{
"id": 1,
"name": "We Will Rock You",
"artist_name": "Queen"
"genre": "Rock",
"song_rating": 88
},
{
"id": 2,
"name": "Careless Whisper",
"artist_name": "George Michael"
"genre": "Pop",
"song_rating": 93
},
]
},
]

Refactor file structure

(STRETCH) user can see song show page

User can click into each song in a playlist and find lyrics, images, and additional information on the particular song.

User gets results from search

When executing the search, a list of songs are populated by the API and is presented in the browser asynchronously.

User clicks the playlist name to go to playlist index

Clicking the title of a playlist will take the user to the list of songs in the playlist

GET song show end point

Returns the song object with the specific :id you’ve passed in. A 404 is returned if the song is not found.

[
{
"id": 1,
"name": "We Will Rock You",
"artist_name": "Queen"
"genre": "Rock",
"song_rating": 88
}
]

User can view list of favorite songs

A user can see all of their saved (favorited) songs on the index page of the application.

POST favorites to playlist end point

Adds the song with :id to the playlist with :playlist_id

This creates a new record in the Playlist Songs table to establish the relationship between this song and playlist. If the playlist/song cannot be found, a 404 will be returned.

If successful, this request will return a status code of 201 with the following body:

{
"message": "Successfully added SONG_NAME to PLAYLIST_NAME"
}

Resolve module build failure

Seed playlists, favorites, & playlists favorites

user can delete a playlist

When a user clicks on the trashcan icon next to the playlists' name, the playlist is deleted.

style welcome page footer

• include button for favorites & button for playlists

Review Express/node lesson

GET /api/v1/favorites

Returns all favorited songs currently in the database.

[
{
"id": 1,
"name": "We Will Rock You",
"artist_name": "Queen"
"genre": "Rock",
"song_rating": 88
},
{
"id": 2,
"name": "Careless Whisper",
"artist_name": "George Michael"
"genre": "Pop",
"song_rating": 93
},
]