How to build a live stock tracker in Bubble

A live stock tracker in Bubble is built by pulling stock prices from a real‑time market API (like Finnhub or Alpha Vantage), connecting that API through Bubble’s API Connector, and updating the data on the page using repeating groups or custom states that refresh on a schedule. Bubble itself cannot stream live data, so you simulate “live” updates by running API calls every few seconds or minutes using repeating events or backend schedule.

Core Concept

You display stock data in Bubble’s front end, but the prices must come from an external provider. Bubble fetches this using an API call, then you choose whether to store the data in your database or just show the response directly on the page.

• API Connector = the plugin used to connect Bubble to stock APIs.
• Get call = the API request to fetch the latest price.
• Repeating event = an action inside a workflow that runs again every X seconds.
• Backend workflow = runs server‑side on a schedule (good for storing historical prices).

Step‑by‑Step Setup

Connect the API: Install API Connector → Add an API → Paste the stock provider’s URL.

// Example Finnhub price call
{
  "method": "GET",
  "url": "https://finnhub.io/api/v1/quote?symbol=AAPL&token=YOUR_KEY"
}

This returns fields like c (current price).

Create UI: Add an input for the stock ticker, a button “Track”, and a text element showing “Current Price”.

Workflow: When button is clicked → Make API call (Get data from external API) → Display result in a custom state.

• Custom states avoid unnecessary database writes.

Auto‑refresh: Add a “Do every X seconds” event (e.g., 10 seconds) → Inside it, run the same API call → Update the custom state. This makes the stock price appear live.

Optional: Historical Tracking

If you want charts or history, create a Data Type “Stock Price” with fields: ticker, price, date.

• Use a backend workflow scheduled every 1–5 minutes to save the latest price.
• Then show it in a chart element on the page.

Key Tips

• Do not schedule API calls every few seconds in backend workflows—use front‑end repeating events instead to avoid cost spikes.
• Only store prices if you truly need historical data; otherwise display API response directly.
• Use custom states to keep the UI fast and avoid database load.