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.
Prerequisites
- 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
Set Up the Stock API in the API Connector
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.
Build the Stock Search and Display
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.
Create a Watchlist Feature
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.
Add a Price History Chart
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.
Schedule Automatic Price Updates
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 working example
1{2 "api_name": "Stock API",3 "authentication": "Private key in URL",4 "calls": [5 {6 "name": "Get Stock Quote",7 "method": "GET",8 "url": "https://www.alphavantage.co/query?function=GLOBAL_QUOTE&symbol=[symbol]&apikey=[api_key]",9 "use_as": "Data",10 "parameters": [11 {"key": "symbol", "value": "AAPL", "private": false, "client_safe": true},12 {"key": "api_key", "value": "YOUR_API_KEY", "private": true}13 ]14 },15 {16 "name": "Get Stock History",17 "method": "GET",18 "url": "https://www.alphavantage.co/query?function=TIME_SERIES_DAILY&symbol=[symbol]&apikey=[api_key]&outputsize=compact",19 "use_as": "Data",20 "parameters": [21 {"key": "symbol", "value": "AAPL", "private": false, "client_safe": true},22 {"key": "api_key", "value": "YOUR_API_KEY", "private": true}23 ]24 }25 ]26}Common mistakes when building a live stock tracker in Bubble
Why it's a problem: Calling the stock API for every row in the watchlist Repeating Group
How to avoid: Cache prices in a StockCache data type updated by a scheduled backend workflow, and display cached values in the RG.
Why it's a problem: Not marking the API key as Private in the API Connector
How to avoid: Always check 'Private' on API key parameters.
Why it's a problem: Calling the API during market closed hours
How to avoid: 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.
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to build a stock market tracker in Bubble.io using Alpha Vantage API. I need to show real-time quotes, a user watchlist, and price history charts. How do I set up the API Connector, cache prices, and display charts?
Create a stock tracker page with API Connector calls to Alpha Vantage for quotes and daily history. Add a search input for ticker symbols, a watchlist feature saving symbols per user, and a line chart showing price history.
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.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation