This is a React application that allows users to search the Spotify library, create a custom playlist, and save it to their Spotify account.
- I undertook this project as part of the Codecademy Full-Stack-Engineer curriculum
- The project was quite extensive and built outside of the Codecademy environment
- The front-end part of the project was basically given. The challenge was to implement the logic behind the app, especially connecting to the Spotify Web API
- The aim of this project was to work with an external API by informing yourself about its inner working by reading its documentation and integrate its logic in your application
- React 17.0.2
- Spotify Web API
- Search the Spotify library for song titles
- Creating a custom playlist with its own name and the ability to edit it
- Adding / removing songs to / from the custom playlists
- Connect the application to the user's Spotify account
- Save the custom playlist(s) to the user's Spotify account
The dependencies which are necessary to run this app can be found in the package.json file.
- Clone the repo
- Install NPM packages in the project folder by running
npm install
in the terminal.
-
Create a Spotify client ID by registering the app here
-
Enter the client ID in jammming/src/util/Spotify.js
const clientId = "YOUR_CLIENT_ID_HERE";
- Run the app
npm install
- Visit localhost:3000 in your browser
- Building an appropriate structure of components for the app (e.g., creating respective CSS files for single components)
- Passing the state to specific components
- Work with specific information of the API (e.g., track URIs) to render specific content to the screen
- Implementing a searchbar and its functionality
- Obtaining a Spotify access token
- Implement Spotify search requests by using the impplicit grant flow
The project is finished. In the future I may try to rebuild this project using functional components and React hooks
- This project is part of the Codecademy Full-Stack-Engineer Curriculum