Hey!
I'm Rafael Ferrera Navarro

A Full-Stack Web Developer with a flair for Design, continuously evolving and crafting innovative
Digital Solutions.

In this website, I use the Spotify API to showcase a selection of tracks from my account. This integration not only demonstrates my technical skills, but also adds a personal touch to my work. Here's a detailed breakdown of how it functions:

1. Subdomain Setup: I created a subdomain on my VPS specifically for handling custom API requests. This allows me to manage all future API interactions securely and efficiently, isolating them from the main site.
2. JavaScript API Request: The integration begins with the JavaScript function that sends a request to my custom API endpoint using the Fetch API, incorporating a custom authentication token to ensure secure access.
3. CORS Configuration: On the server side, I have configured Cross-Origin Resource Sharing (CORS) headers. This setup permits API requests only from specific allowed domains, enhancing security by preventing unauthorized access.
4. Authentication Process: When the API request is received, it first checks for a valid authentication token in the request headers. If the token is missing or incorrect, a "403 Forbidden" response is returned.
5. Access Token Retrieval: Upon successful authentication, the server retrieves an access token from Spotify's API. This token is necessary for authenticating subsequent requests to fetch playlist tracks.
6. Fetching Playlist Tracks: The server then makes a request to the Spotify API to fetch tracks from a designated playlist. It uses the access token obtained earlier to authorize this request.
7. Track Filtering: The API response is filtered to exclude any tracks that do not have a preview URL. This ensures that only playable tracks are included in the final data returned to the client.
8. Randomizing Track List: To add variety, the filtered tracks are randomized before being sent back to the client, providing a dynamic listening experience each time someone enters the website.
9. Sending Data to Client: Finally, the server sends the randomized track data, along with the last updated date, back to the client.
10. Displaying Track Information: Upon receiving the track data, the JS function updates the user interface to display the current track, album cover, and the date of the last update, enhancing user engagement. In case the API fails, the logic is designed to display all elements with other styles, ensuring a seamless experience whether or not the Spotify component is available.

This integration showcases my ability to work with APIs, manage server configurations, and create seamless user experiences by effectively combining my front and back-end development skills.