Javascript/React API with Spotify

• JAMMMING
  • Sections
  • Overview
  • knowledge Demonstrated
    • Set up Directory structure initialized html and css
    • Created Static Components
    • Pass Down Search Results & Render Result List
    • Pass Down Playlist to Track LIst
    • Add Tracks to Playlist
    • Remove Tracks from Playlist
    • Changed the Name of the Playlist
    • Created a Method that Saves the Playlist to a User's Account
    • Hook up Search Bar to Spotify Search
    • Obtain a Spotify Accesss Token
    • Implement Spotify Search Request
    • Save a User's Playlist
      • Deployment Notes
      • MarkDownNotes

Jammming is a REACT web applicaiton. Knowledge of react components, passing state, and requests with the Spotify API were used to build this webstie. The API allows users to search the Spotify Library, create a custom playlist, then save it to their Spotify Account. Sections

• state is passed through a series of components to render an array of tracks.
• Constructor Functions and .map() Sections

• passed the state of a user’s custom playlist title and tracks from the App component down to components that render them Sections

• implemented a process for adding a song from the search results track list to the user’s custom playlist. Sections

• Implemented a process that removes a song from a user's custom playlist when the user selects the "-" sign inside of a rendered track. Sections

• Implemented the code that allows a user to change the name of their playlist, and save the updated value to the App component's state.Sections

• created a method that saves a user's playlist to their Spotify account and resets the state of the playlist name and tracks array.Sections

• created a method thta updates the searchResults parameter in the app component with a user's search results. Wrote the logic that allows a user to enter a serach parameter, receives a response from the Spotify API, and updates the searchResults state with the results from a Spotify Request.Sections

• wrote three methods that:
  • Get a Spotify user's access token.
  • send a search request to the Spotify API
  • Save a user's playlist to their Spotify Account. Sections

• created a method in Spotify.js that accepts a search term input, passes the search term value to a Spotify request, then returns the responses as a list of tracks in JSON format.
• Apply user's access token to make requests to the spotify API following step four of Spotify's implicit grant flow to make requests.
• Used fetch() to make the requests in this case.
• Used the Spofity Web API Endpoint Reference to help format your request. Sections

• Created a mehtod called savePlayList that writes the user's costom playlist in Jammming to their Spotify Account.Sections

• Site Deployed using GitHub Pages

  • code
  • Live Site

  Sections

Mark Down Notes You Tube