- Description
- Live site
- Built with
- What I learned
- Continued development
- Some views
- Author
- Useful resources
- How to run the project
This proyect is a spotify replica with a little twist in the UI, it is also responsive. You are able to login with your spotify account, see content from your library, create and modify playlists, save songs, albums or playlists, search by categories or specific words. You could play music too!
At the home page you could find new releases and featured playlist of the moment, in addition, can see your created and followed playlists and albums, your top songs and artists.
As I am using the Spotify Web API, there are some limitations such as only registered users in my dashboard can login and as you need to have a premium account to use the player.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- React
- Redux
- Redux Thunk
- Spotify Web API
- React Router
- AXIOS
- react-spotify-web-playback
Building this project helped me to improve my knowledge about:
- Using axios interceptors to add some headers without writing boilerplate code on all my requests, and also to intercept the responses for handle some token expiry related errors before they crash my app.
- Integrating redux middleware to manage async actions.
- Creating a custom hook to fetch data and handle states of loading and error.
- Creating a custom hook for use a debounce function that delay the search in order to avoid unnecessary requests to the API when the user is typing.
- Defining public and private services for the different endpoints provided by the API. This helped me to keep my component´s code cleaner.
There are some tasks that, eventually, I would like to do for improve this app, such as:
- Create loading skeletons for the diferents components.
- Implement a different way to store the token and refresh token, currently I am using localStorage.
- Implement an infinite scroll when fetching data in the search tab.
- Create a component for visualize track's lyrics, currently this functionality is not avilable in the API.
Take a look at the project:
Andrea Támara Correa
- react-spotify-web-playback - This library saved me so much time. the playback component is basic but functional and really easy to use.