Jammming

A Playlist App with the Spotify API .

Live demo http://Jammming_SimonaPiz.surge.sh/.

Table of Contents

• General Info
• Technologies Used
• Features
• Setup
• Acknowledgements

General Information

In this project, I build a React web application. I use my 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.

main Tasks

• ⚛️ Create static components
• ⚛️ Pass Down Search Result and Render Result List
• ⚛️ Pass down Playlist to Tracklist
• ⚛️ Add Tracks to a Playlist
• ⚛️ Remove Tracks from a Playlist
• ⚛️ Change the name of a Playlist
• ⚛️ Create method that Saves the Playlist to a User's Account
• ⚛ Hook up Search Bar to Spotify Search
• 🔑 Obtain a Spotify Developer Access Token
• ↔️ Implement Spotify Search Request
• ↔ Save a User's Playlist
• ➕ new Feature: Include preview samples for each track

Technologies Used

• React 17
• Node.js 18

Features

Extra Features

• Include preview samples for each track
• Only display songs not currently present in the playlist in the search results
• Add a loading screen while playlist is saving
• Update the access token logic to expire at exactly the right time, instead of setting expiration from when the user initiates their next search
• After user redirect on login, restoring the search term from before the redirect
• Ensure playlist information doesn’t get cleared if a user has to refresh their access token

Setup

To run this project, install it locally using npm:

$ cd ../[directory]
$ npm install
$ npm start

Acknowledgements

This project comes from the Codecademy's Front-End Engineer course.