/jammming-pyco2-jsd

Primary LanguageCSS

Jammming ( function component )

Jammming codecademy

Features

  • Spotify Login — the first time a user searches for a song, album, or artist, Spotify will ask them to log in or set up a new account.
  • Search by Song, Album, or Artist — a user can type the name of a song, artist, or album into the search bar and click the SEARCH button.
  • Populate Results List — Jammming displays the list of returned tracks from the user’s query.
  • Add Song to a Custom Playlist — users can add a track to their playlist by selecting a + sign on the right side of the track’s display container.
  • Remove Song from Custom Playlist — users can remove a track from their playlist by selecting a - sign on the right side of the track’s display container.
  • Change Playlist Title — users can change the title of their custom playlist.
  • Save Playlist to Account — users can save their custom playlist by clicking a button called SAVE TO SPOTIFY.

Install

npm install

Usage

npm run dev

View in codecademy

In this project, you will build a React web application called Jammming. You will use your knowledge of React components, passing state, and requests with the Spotify API to build a website that allows users to search the Spotify library, create a custom playlist, then save it to their Spotify account.

We’ve broken the Jammming project into 13 sections. Each section contains a descriptive header with an introductory step followed by a set of steps that guide you to the outcome. The first step of each section will explain the goal and provide a brief overview of how we’ll accomplish it. Before you start the second step, try to plan how you would complete the section. As you finish the rest of the steps, reflect on how your solution compares to ours.

This is a long project, but we’ll be with you every step of the way. Whether you’re completing assessments without the additional steps or banging your head against the wall trying to understand a hint, always use best practices and reflect on your growth. If you get stuck or just want to see how a seasoned developer tackles this project, click “get help” to see a walkthrough video.

Good luck!