# How to build a live stock tracker in Bubble

- Tool: Bubble
- Difficulty: Beginner
- Time required: 25-30 min
- Compatibility: All Bubble plans (API subscription may be required)
- Last updated: March 2026

## TL;DR

Build a live stock market tracker in Bubble by connecting to a financial data API like Alpha Vantage or Twelve Data via the API Connector. Display real-time stock prices, build a watchlist with user-selected tickers, and visualize price history with a chart plugin. Scheduled backend workflows can periodically refresh prices so data stays current.

## Build a Stock Market Tracker App in Bubble

This tutorial shows you how to create a stock market tracker that fetches live prices from a financial API, displays them in your Bubble app, and lets users maintain a personal watchlist. You will configure the API Connector, build the display UI, and add chart-based price history visualization.

## Before you start

- A Bubble account with an active app
- An API key from a stock data provider (Alpha Vantage offers free keys at alphavantage.co)
- The API Connector plugin installed
- Basic understanding of API calls and JSON responses

## Step-by-step guide

### 1. Set Up the Stock API in the API Connector

Go to Plugins → API Connector → Add another API. Name it 'Stock API'. Add authentication: set 'Private key in URL' or 'Private key in header' depending on your provider. Create a new API call named 'Get Stock Quote' — set it to GET, enter the URL (e.g., https://www.alphavantage.co/query?function=GLOBAL_QUOTE&symbol=[symbol]&apikey=[api_key]). Mark 'symbol' as a dynamic parameter (uncheck Private, check Client safe). Mark 'api_key' as Private. Set 'Use as' to Data. Click Initialize to test with a sample symbol like 'AAPL'. Bubble will map the response fields.

> Pro tip: Alpha Vantage free tier allows 5 API calls per minute and 500 per day. For real-time data with more calls, consider Twelve Data or Polygon.io.

**Expected result:** The API Connector successfully returns stock quote data with price, change, and volume fields.

### 2. Build the Stock Search and Display

Create a page called 'stocks'. Add an Input for the stock ticker symbol and a Search button. Create a workflow: when Search is clicked, use 'Get data from an external API' with the Stock API call, passing Input's value as the symbol parameter. Display the results in a Group: stock symbol, current price, change amount, change percentage, and volume. Use conditional formatting to color the change green (positive) or red (negative).

**Expected result:** Users can enter a ticker symbol and see the current price, change, and volume.

### 3. Create a Watchlist Feature

Create a Data Type called 'WatchlistItem' with fields: user (User), symbol (text), and company_name (text). Add an 'Add to Watchlist' button on the stock display. The workflow creates a new WatchlistItem with Current User, the searched symbol, and the company name. On the main stocks page, add a Repeating Group showing Search for WatchlistItems (user = Current User). Each row displays the symbol and triggers the stock API call to show the latest price.

> Pro tip: To avoid hitting API rate limits when loading the watchlist, cache stock prices in a StockPrice data type updated by a scheduled backend workflow every 5-15 minutes instead of calling the API per row.

**Expected result:** Users can save stocks to a personal watchlist and see prices for all watched stocks.

### 4. Add a Price History Chart

Install a chart plugin (Chart Element or ApexCharts). Create another API call in the API Connector: 'Get Stock History' using the daily time series endpoint (e.g., TIME_SERIES_DAILY). Initialize it with a sample symbol. On the stock detail view, add a Line Chart element. Set its data source to the Stock History API call results. Map dates to the X-axis and closing prices to the Y-axis. Allow users to toggle between 1-week, 1-month, and 3-month views by adjusting the number of data points displayed.

**Expected result:** A line chart showing stock price history for the selected time period.

### 5. Schedule Automatic Price Updates

Create a backend workflow called 'update-stock-prices'. This workflow searches for all unique symbols in WatchlistItems, calls the Stock API for each, and saves the result to a StockCache data type (symbol, price, change, last_updated). Schedule this workflow to run every 15 minutes during market hours (9:30 AM - 4:00 PM ET). On the watchlist Repeating Group, display cached prices from StockCache instead of making live API calls per row.

**Expected result:** Stock prices on watchlists update automatically every 15 minutes without hitting API limits per user.

## Complete code example

File: `API Connector payload`

```json
{
  "api_name": "Stock API",
  "authentication": "Private key in URL",
  "calls": [
    {
      "name": "Get Stock Quote",
      "method": "GET",
      "url": "https://www.alphavantage.co/query?function=GLOBAL_QUOTE&symbol=[symbol]&apikey=[api_key]",
      "use_as": "Data",
      "parameters": [
        {"key": "symbol", "value": "AAPL", "private": false, "client_safe": true},
        {"key": "api_key", "value": "YOUR_API_KEY", "private": true}
      ]
    },
    {
      "name": "Get Stock History",
      "method": "GET",
      "url": "https://www.alphavantage.co/query?function=TIME_SERIES_DAILY&symbol=[symbol]&apikey=[api_key]&outputsize=compact",
      "use_as": "Data",
      "parameters": [
        {"key": "symbol", "value": "AAPL", "private": false, "client_safe": true},
        {"key": "api_key", "value": "YOUR_API_KEY", "private": true}
      ]
    }
  ]
}
```

## Common mistakes

- **Calling the stock API for every row in the watchlist Repeating Group** — Each row triggers a separate API call. A watchlist with 10 stocks = 10 API calls on every page load, quickly exceeding free tier limits. Fix: Cache prices in a StockCache data type updated by a scheduled backend workflow, and display cached values in the RG.
- **Not marking the API key as Private in the API Connector** — Non-private parameters are sent to the browser and visible in network requests, exposing your API key. Fix: Always check 'Private' on API key parameters.
- **Calling the API during market closed hours** — Stock prices do not change when markets are closed, so API calls during off-hours waste your quota. Fix: Add time conditions to your scheduled workflow: only run between 9:30 AM and 4:30 PM ET on weekdays.

## Best practices

- Cache stock prices in a database table to avoid excessive API calls and improve page load speed.
- Mark API keys as Private in the API Connector to keep them server-side.
- Add rate limit handling — if the API returns a rate limit error, show a friendly message and retry after the cooldown.
- Use conditional formatting (green/red) to visually indicate positive and negative price changes.
- Schedule price updates only during market hours to conserve API quota.
- Provide a manual refresh button for users who want the latest price immediately.
- Display the last updated timestamp so users know how fresh the data is.

## Frequently asked questions

### Which stock API is best for a Bubble app?

Alpha Vantage is popular for free projects (500 calls/day). For production apps, Twelve Data, Polygon.io, or IEX Cloud offer better rate limits and real-time data. Compare pricing based on your expected call volume.

### Can I display real-time streaming stock prices?

Bubble does not natively support WebSocket streaming. You can simulate real-time updates by polling the API every 15-60 seconds using a Do Every X Seconds workflow, but true tick-by-tick streaming requires external services.

### How many stocks can a user track on the watchlist?

Technically unlimited, but API rate limits are the constraint. With cached prices updated every 15 minutes, a backend workflow processing 100 unique symbols uses 100 API calls per update cycle.

### Is this suitable for actual trading decisions?

This tracker is informational only. Stock APIs have varying data delays (15 min to real-time). For trading applications, use broker APIs with real-time feeds and consult financial regulations.

### Can I add portfolio tracking with profit/loss calculations?

Yes. Create a Holding data type with purchase price, quantity, and symbol. Calculate current value from cached prices and display gain/loss. For complex financial apps, RapidDev can help architect the data model and calculations.

### How do I handle API errors when the stock service is down?

Add error handling in your workflows. If the API returns an error or empty data, display the most recent cached price with a note like 'Price as of [last update time]'. Use the API Connector's error handling options.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/create-a-live-stock-market-tracker-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/create-a-live-stock-market-tracker-in-bubble