Advanced API Integration with Bubble – Spotify, Vagalume & Make

About

In this study case app project, I designed and implemented a seamless integration between Bubble and external services including Spotify, Vagalume, and Make (Integromat). Users can log in with their Spotify accounts, browse their playlists, choose a track, and instantly view the lyrics. The app then connects to the Vagalume API to fetch lyrics, translates them using an internal logic, and sends a PDF version to Google Drive using a Make webhook. This solution demonstrates real-world use of authentication flows (OAuth2), dynamic API calls, and third-party automation—all without code.

Spotify API Connector – OAuth Setup

This API configuration enables users to authenticate with their Spotify accounts via OAuth 2.0 (User-Agent Flow), allowing the app to access user-specific data. The defined scopes (user-library-read, playlist-read-private) permit reading the user’s saved tracks and private playlists. Key endpoints like https://accounts.spotify.com/authorize and https://accounts.spotify.com/api/token handle the authorization and token exchange. This setup was crucial to securely link the user's Spotify account and fetch personalized playlist data within the app.

Spotify – List User Playlists

This GET request fetches all playlists belonging to the authenticated Spotify user via the endpoint: https://api.spotify.com/v1/me/playlists. This is the first step in the user journey, allowing them to browse and select a playlist from their account. The call is authenticated via OAuth and returns a structured list of playlists, which are displayed in the UI for user interaction.

Spotify – List Tracks in a Playlist

This GET request retrieves tracks from a specific playlist using the Spotify Web API endpoint: https://api.spotify.com/v1/playlists/[playlist_id]/tracks. The [playlist_id] is dynamically injected, allowing the app to display the songs contained in any user-selected playlist. This call is a critical part of the flow that enables users to choose which track they want to translate the lyrics from.

Vagalume API – Get Lyrics

This API call queries the Vagalume lyrics database using a GET request to retrieve song lyrics by specifying the artist (art) and music name (mus). It uses a public API key and returns a JSON response. Once the user selects a song from Spotify, this integration fetches the corresponding lyrics, which are later translated and formatted as a PDF for download or sharing.

Make (Integromat) – File Automation Webhook

This connection sends PDF files via a Make webhook using a POST request. It leverages a multipart form-data structure, allowing the transmission of a file (typically a lyrics translation document) and an associated URL. This automation step enabled the app to dynamically generate and deliver translated lyrics in PDF format, storing them on Google Drive or another destination defined in the Make scenario. It serves as the final delivery mechanism of the translated content to the user.