Build a financial portfolio tracker in Bubble by adding holdings with purchase data, fetching real-time stock and crypto prices via API, calculating gains and losses, and displaying portfolio allocation with pie charts. This tutorial covers the complete investment tracking workflow from adding positions to analyzing performance.
Overview: Financial Portfolio Tracker in Bubble
A portfolio tracker lets investors monitor their holdings, see current market values, track profit and loss, and visualize asset allocation. This tutorial builds the complete tracking system in Bubble using financial APIs for real-time data.
Prerequisites
- A Bubble account with user authentication
- A free API key from a financial data provider (Alpha Vantage, IEX Cloud, or CoinGecko)
- The Chart.js plugin installed
- Basic understanding of API Connector and Data Types
Step-by-step guide
Create the portfolio data model
Create the portfolio data model
Create Data Types: 'Holding' with fields: user (User), symbol (text, e.g., AAPL), name (text), quantity (number), avg_cost (number — average purchase price), asset_type (Option Set: Stock/Crypto/ETF). Create 'TradeLog': user (User), holding (Holding), action (buy/sell), quantity (number), price (number), date (date).
Expected result: Holding and TradeLog data types track positions and trade history.
Build the add/edit holdings interface
Build the add/edit holdings interface
Create a portfolio page with an 'Add Holding' button that opens a popup form: symbol input, name input, quantity, average cost, and asset type dropdown. Submit workflow: Create Holding with all values. Also create a TradeLog entry for the initial purchase. Display holdings in a Repeating Group with columns for symbol, quantity, avg cost, current value, and gain/loss.
Expected result: Users can add holdings and see them listed in a portfolio table.
Fetch real-time prices from a financial API
Fetch real-time prices from a financial API
In API Connector, set up a GET call to your financial API for stock prices. For Alpha Vantage: https://www.alphavantage.co/query?function=GLOBAL_QUOTE&symbol=[symbol]&apikey=[key]. For crypto, use CoinGecko. Create a scheduled backend workflow that updates prices every 15-30 minutes and stores them in a PriceCache data type.
Expected result: Current market prices are fetched and cached for all held assets.
Calculate portfolio value and performance
Calculate portfolio value and performance
In each Holding's Repeating Group cell, display: current_value = quantity × current price (from cache), cost_basis = quantity × avg_cost, gain_loss = current_value - cost_basis, gain_pct = gain_loss / cost_basis × 100. Color gain/loss green for positive, red for negative. At the top of the page, show total portfolio value (sum of all holdings' current values) and total gain/loss.
Expected result: The portfolio displays real-time values with gain/loss calculations for each holding and the total.
Add allocation charts
Add allocation charts
Install Chart.js plugin. Add a Pie chart with data source: all Holdings. Map symbol to labels and current_value to values. This shows portfolio allocation by asset. Add a second chart — a Line chart showing portfolio total value over time (requires logging daily portfolio snapshots via scheduled backend workflow).
Expected result: Pie chart shows allocation and line chart shows portfolio performance over time.
Complete working example
1PORTFOLIO TRACKER — ARCHITECTURE2==================================34DATA TYPES:5 Holding: user, symbol, name, quantity, avg_cost, asset_type6 TradeLog: user, holding, action (buy/sell), quantity, price, date7 PriceCache: symbol, price, last_updated8 PortfolioSnapshot: user, total_value, date (daily log)910CALCULATIONS:11 Current value: quantity × cached price12 Cost basis: quantity × avg_cost13 Gain/loss: current value - cost basis14 Gain %: gain_loss / cost_basis × 10015 Total portfolio: sum of all holdings' current values1617API:18 Stocks: Alpha Vantage GLOBAL_QUOTE19 Crypto: CoinGecko simple/price20 Update: scheduled every 15-30 minutes2122CHARTS:23 Pie: allocation by symbol (current value)24 Line: total portfolio value over time (daily snapshots)Common mistakes when building a portfolio tracker in Bubble
Why it's a problem: Calling the price API for each holding on every page load
How to avoid: Cache prices in a PriceCache data type and refresh every 15-30 minutes via scheduled workflow
Why it's a problem: Not tracking average cost when adding to positions
How to avoid: Recalculate avg_cost = (old_total_cost + new_purchase_cost) / new_total_quantity on each buy
Why it's a problem: Displaying stale prices without a timestamp
How to avoid: Show a 'Last updated: X minutes ago' timestamp next to prices
Best practices
- Cache prices and update every 15-30 minutes to respect API rate limits
- Track trade history for tax reporting and performance analysis
- Log daily portfolio snapshots for historical performance charts
- Display clear timestamps showing when prices were last updated
- Color-code gains green and losses red for instant visual feedback
- Support both stocks and crypto with separate API configurations
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to build an investment portfolio tracker in Bubble.io that shows real-time stock and crypto prices, calculates gains/losses, and displays allocation pie charts. Can you design the data model and API integration?
Build a portfolio tracker. Create Holding and TradeLog data types. Connect to financial APIs for prices. Display holdings with current values, gains/losses, and allocation charts.
Frequently asked questions
Which financial API should I use?
Alpha Vantage (free, 5 calls/minute) for stocks. CoinGecko (free) for crypto. IEX Cloud ($9/month) for broader market data. All integrate the same way via API Connector.
Can I track crypto and stocks in the same portfolio?
Yes. Use the asset_type field to differentiate. Fetch prices from different APIs based on asset type.
How do I handle stock splits?
When a split occurs, adjust the quantity and avg_cost on the Holding. For example, a 2:1 split doubles quantity and halves avg_cost.
Can I import trades from a brokerage?
Yes via CSV import. Export trades from your broker, map columns to TradeLog fields, and upload in the Data tab.
Is this suitable for real money tracking?
Yes for personal tracking. For financial advisory or customer-facing products, consult regulatory requirements for your jurisdiction.
Can RapidDev build a financial dashboard?
Yes. RapidDev builds investment tracking platforms with real-time data, advanced analytics, and integration with brokerage APIs.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation