A Playlist App with the Spotify API
.
Live demo http://Jammming_SimonaPiz.surge.sh/.
![search preview search preview](https://private-user-images.githubusercontent.com/91121660/243386348-96ba886c-e1ab-48ee-aea8-82d8be62470c.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTg1ODM5MDgsIm5iZiI6MTcxODU4MzYwOCwicGF0aCI6Ii85MTEyMTY2MC8yNDMzODYzNDgtOTZiYTg4NmMtZTFhYi00OGVlLWFlYTgtODJkOGJlNjI0NzBjLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MTclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjE3VDAwMjAwOFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWY5ZDI5MTYzYzdkYWExMTU3OTk5OTE4Yjc0ODljZmUzYzk3ZDg0Zjk1NjYyYzNiMDAwNzQ5NmM4ZTE2NjU2MGQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.OyhuFe0dDJNma8G_MOa6GkAS0tuIuj4jGv5pIDppi3Y)
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.
- ⚛️ 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
- React 17
- Node.js 18
- 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
To run this project, install it locally using npm:
$ cd ../[directory]
$ npm install
$ npm start
This project comes from the Codecademy's Front-End Engineer course.