In this project, I will built a React web application called Jammming. It leveraged my knowledge of React components, state, and requests with the Spotify API to build a website that allows users to search the Spotify library, create a custom playlist, and then save it to their Spotify account.
Additionally this web app is deployed with surge at http://familiar-lead.surge.sh/
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. You will need to follow the steps in the Spotify Developer Guide to register your application.
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. The app will request song data about the user's input from the Spotify library (find Spotify endpoints here).
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.
Because there was a focus on building the React infrastructure, Codecadamy provided links to the HTML/CSS and visual assets used for Jammming. However, they did not break the HTML and CSS into their components, and it was requirement of the project to create my own file paths and component structure.
This project was a true challenge. As my first deployed web app, there where many questions and challenges I struggled with.
What components does the application need? How will the application handle state? What methods does the application need? How does the application hook up to the Spotify API? How does the application save a playlist to a user's profile?
Considering such problems in a large project was a first for me. Jammming has taught me many valuable lessons, and I couldn't be happier with the final product.