# How to design a crypto exchange app in Bubble

- Tool: Bubble
- Difficulty: Beginner
- Time required: 35-45 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

Design a cryptocurrency exchange interface in Bubble by connecting to crypto price APIs for real-time data, building buy/sell order forms, displaying an order book, and tracking portfolio holdings. This tutorial covers the UI and data architecture for a crypto trading platform — note that real trading requires regulated financial infrastructure beyond Bubble.

## Overview: Crypto Exchange UI in Bubble

This tutorial builds the front-end interface and data tracking for a cryptocurrency exchange. It connects to CoinGecko or similar APIs for price data, displays trading pairs, and manages a portfolio tracker. Important: actual crypto trading requires regulatory compliance and custodial infrastructure beyond what Bubble provides.

## Before you start

- A Bubble account with user authentication
- A free CoinGecko API key
- Basic understanding of API Connector and Data Types

## Step-by-step guide

### 1. Connect to the CoinGecko API for crypto prices

In API Connector, create an API called 'CoinGecko.' Add a GET call: https://api.coingecko.com/api/v3/simple/price?ids=[coin_ids]&vs_currencies=usd&include_24hr_change=true. Initialize with coin_ids = bitcoin,ethereum. This returns current prices and 24-hour change percentages.

```
GET https://api.coingecko.com/api/v3/simple/price?ids=bitcoin,ethereum&vs_currencies=usd&include_24hr_change=true

Response:
{
  "bitcoin": { "usd": 65432.10, "usd_24h_change": 2.35 },
  "ethereum": { "usd": 3456.78, "usd_24h_change": -1.2 }
}
```

**Expected result:** The API returns real-time crypto prices.

### 2. Build the trading pair display

Create a page with a market overview showing top cryptocurrencies. Use a Repeating Group displaying coin name, current price, 24h change (green for positive, red for negative), and a mini chart icon. Add a search and sort by name, price, or change. Clicking a coin opens the trading page for that pair.

**Expected result:** A market overview page shows live crypto prices with color-coded changes.

### 3. Create the buy/sell order form

On the trading page, build a two-tab form: Buy and Sell. Each tab has: amount input (number of coins), price display (current market price), total cost calculation (amount × price), and a Submit Order button. For demo purposes, the order workflow creates a Trade record: user, coin, type (buy/sell), amount, price, total, timestamp.

**Expected result:** Users can place simulated buy and sell orders with real-time price data.

### 4. Display the order book and trade history

Add two sections: Order Book showing recent buy/sell orders from all users (Repeating Group of Trade records sorted by date, color-coded green for buys and red for sells), and Trade History showing the current user's past trades. Display each trade's coin, type, amount, price, and total.

**Expected result:** An order book shows market activity and personal trade history.

### 5. Build the portfolio tracker

Create a 'Holding' data type: user, coin_id (text), amount (number), avg_buy_price (number). When a buy order executes, update or create the Holding. Display a portfolio page with current values (amount × current API price), cost basis, and profit/loss. Add a pie chart showing portfolio allocation.

**Expected result:** Users see their portfolio value, individual holdings, and profit/loss calculations.

## Complete code example

File: `Workflow summary`

```text
CRYPTO EXCHANGE — ARCHITECTURE
================================

API: CoinGecko
  Prices: /simple/price?ids=[coins]&vs_currencies=usd
  Market data: /coins/markets?vs_currency=usd&order=market_cap_desc

DATA TYPES:
  Trade: user, coin_id, type (buy/sell), amount, price, total, date
  Holding: user, coin_id, amount, avg_buy_price

PAGES:
  market    — Price listing with search and sort
  trade     — Buy/sell forms + order book
  portfolio — Holdings with current values + P&L

DISCLAIMER:
  This builds a SIMULATED exchange UI.
  Real crypto trading requires:
  - Financial regulatory compliance
  - Custodial wallet infrastructure
  - KYC/AML verification
  - Order matching engine
  - Security audits
```

## Common mistakes

- **Calling the price API on every page load without caching** — CoinGecko free tier limits to 10-30 calls/minute Fix: Cache prices in a database record, update every 60 seconds via a scheduled workflow
- **Building a real exchange without regulatory compliance** — Operating a crypto exchange without proper licensing is illegal in most jurisdictions Fix: Clearly label this as a simulation/tracker. For real trading, partner with regulated infrastructure providers.
- **Not handling API rate limits gracefully** — Exceeding limits causes errors and blank price displays Fix: Add error handling and display cached prices when the API is unavailable

## Best practices

- Cache crypto prices and update every 30-60 seconds
- Color-code positive changes green and negative red
- Display clear disclaimers that this is a simulation unless properly licensed
- Use Option Sets for supported cryptocurrencies
- Store trade history for portfolio calculations
- Add price alerts using scheduled backend workflows

## Frequently asked questions

### Can I build a real crypto exchange on Bubble?

Bubble can handle the UI and user management, but real trading requires regulated custodial services, order matching engines, and security infrastructure. Use Bubble as the frontend connected to licensed exchange APIs.

### Is the CoinGecko API free?

Yes, with a free tier of 10-30 calls/minute. The demo plan ($0) is sufficient for portfolio trackers. Higher volume requires a paid plan.

### Can I show real-time price charts?

Yes. Use the Chart.js plugin with historical price data from CoinGecko's /coins/{id}/market_chart endpoint.

### How do I handle multiple currencies?

Change the vs_currencies parameter in the API call. CoinGecko supports USD, EUR, GBP, and many others.

### Can I add wallet integration?

Connecting to MetaMask or other wallets requires JavaScript and is possible via Bubble's HTML element and Toolbox plugin, but involves significant complexity.

### Can RapidDev build a crypto platform?

Yes. RapidDev builds crypto-related platforms including portfolio trackers, price alerts, and trading interfaces connected to regulated exchange APIs.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/design-a-cryptocurrency-exchange-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/design-a-cryptocurrency-exchange-in-bubble