Realtor.com

Go to rapidapi.com and create an account if you don't have one. In the search bar, search for 'Realtor.com' or navigate directly to the Realtor.com API provider at rapidapi.com/marketplace. You will see several Realtor.com API providers listed. The most commonly used one for residential listings is the provider with the host **realtor-com4.p.rapidapi.com** — look for a provider that shows endpoints for property search, property detail, and home value estimates. Click the provider → click **Subscribe to Test** or **Pricing** → choose a plan. The free Basic plan is only suitable for development (it allows roughly 10 requests per month — you will exhaust this within minutes during testing). For a real user-facing app, subscribe to at least the Basic Pro plan. Once subscribed, go to the **Dashboard** → **My Apps** (or **Security**) → copy your **X-RapidAPI-Key**. This single key works for all RapidAPI providers you subscribe to. Keep it secure — anyone with this key can consume your RapidAPI credits. Note the host value for the Realtor.com provider: **realtor-com4.p.rapidapi.com** — you will need both the key and the host in the next step.

In your Bubble editor, click **Plugins** in the left sidebar → **Add plugins** → search 'API Connector' (by Bubble) → click **Install** if not already installed. Open the API Connector → click **Add another API** → name it 'Realtor.com (RapidAPI)'. Set the **Authentication** to **None** (authentication is handled via headers, not Bubble's built-in auth). Under **Shared headers**, add two headers: **Header 1:** - Name: X-RapidAPI-Key - Value: [paste your key here] - Private: **checked** (click the eye-slash icon — this keeps the key server-side only) **Header 2:** - Name: X-RapidAPI-Host - Value: realtor-com4.p.rapidapi.com - Private: **checked** (this identifies the provider and should also stay private) With both headers set to Private, Bubble will proxy every API call through its own servers. Your RapidAPI key never reaches the user's browser, and CORS is not an issue — Bubble makes all the calls from the server side.

1{
2  "api_name": "Realtor.com (RapidAPI)",
3  "base_url": "https://realtor-com4.p.rapidapi.com",
4  "shared_headers": {
5    "X-RapidAPI-Key": "<your_rapidapi_key_private>",
6    "X-RapidAPI-Host": "realtor-com4.p.rapidapi.com_private"
7  }
8}

Within the Realtor.com (RapidAPI) entry in the API Connector, click **New call**. Configure the call: - **Name**: Property Search - **Method**: GET - **Endpoint** (appended to base URL): /properties/search-with-filters Click **Add parameter (query)** to add the search parameters that users will fill in from form inputs. Add these parameters (leave them as dynamic variables, not fixed values): - **city** — the city name to search in - **state_code** — two-letter state abbreviation (e.g., CA) - **price_min** — minimum list price (number) - **price_max** — maximum list price (number) - **beds_min** — minimum bedrooms - **property_type** — type filter (e.g., single_family, condo) Set the **Use as** dropdown to **Data** — this tells Bubble to expect a list of records from this call. Now click **Initialize call**. This step is critical — Bubble uses the response from a real API call to detect the data structure. You must provide real test values in the parameter fields: - city: San Diego - state_code: CA - price_min: 400000 - price_max: 800000 - beds_min: 2 Click **Initialize**. Wait for Bubble to return a successful response. Bubble will detect response fields like results[].property_id, results[].location.address.line, results[].list_price, results[].description.beds, results[].photos[].href. If you see 'There was an issue setting up your call', check: (1) your X-RapidAPI-Key is correct, (2) you are subscribed to this specific provider on RapidAPI, (3) the endpoint path is exactly /properties/search-with-filters with the right parameter names.

1{
2  "call_name": "Property Search",
3  "method": "GET",
4  "endpoint": "/properties/search-with-filters",
5  "params": {
6    "city": "<dynamic_city>",
7    "state_code": "<dynamic_state_code>",
8    "price_min": "<dynamic_price_min>",
9    "price_max": "<dynamic_price_max>",
10    "beds_min": "<dynamic_beds_min>",
11    "property_type": "<dynamic_property_type>"
12  },
13  "use_as": "Data"
14}

With the API call initialized, build the search experience on your Bubble page. **Add search form inputs:** Place the following inputs on your page: - A text input named 'City Input' (placeholder: 'Enter city name') - A dropdown named 'State Dropdown' with U.S. state options and their two-letter codes - A range slider or two number inputs for price_min and price_max - A dropdown for beds_min (1, 2, 3, 4, 5+) - A search button **Create the search workflow:** Click the search button → add a workflow. Inside the workflow, add the action **Plugins → Realtor.com (RapidAPI) - Property Search**. Connect each parameter to the corresponding input: - city → City Input's value - state_code → State Dropdown's value - price_min → Price Min input's value - price_max → Price Max input's value - beds_min → Beds Min dropdown's value Store the result in a custom state (type: Realtor.com (RapidAPI) Property Search, allow list) on the page element. Name the state 'Search Results'. **Build the repeating group:** Add a Repeating Group to the page: - Type of content: Realtor.com (RapidAPI) Property Search - Data source: Current page's Search Results state - Layout: Grid or list, 2-3 columns Inside the repeating group's cell, add: - A Dynamic Image element → source: Current cell's Realtor.com Property Search's photos first item href - A Text element for address: Current cell's location address line - A Text element for price: 'From $' + Current cell's list_price formatted as number - A Text element for beds/baths: Current cell's description beds + 'bd / ' + Current cell's description baths + 'ba' - A button 'View Details' that stores the current cell's property_id in a page state for the detail popup **Add a loading state:** Add a visual indicator (spinner or loading text) that shows while the search workflow is running and hides when the custom state is populated.

RapidAPI bills per call. A production app without caching will quickly exhaust monthly plan limits, especially if users perform repeated or similar searches. Implement a simple cache in Bubble's database. **Create a data type:** Go to Data tab → Data types → New type → name it 'PropertySearchCache'. Add fields: - query_hash (text) — a unique string representing the search parameters - result_json (text) — the full search result stored as a JSON string - expires_at (date) — set to 'Current date/time + 1 hour' when the record is created - search_city (text) — the city parameter (for display and debugging) **Modify the search workflow to check cache first:** In your search button workflow, insert a conditional check before the API call: 1. First, construct the query_hash — a Toolbox JavaScript expression that creates a consistent string from the search parameters: `[city]+[state]+[price_min]+[price_max]+[beds_min]` concatenated. Store this in a custom state. 2. Add a 'Only when' condition to the API call step: 'Do a search for PropertySearchCache where query_hash = [hash] and expires_at > Current date/time' has 0 results. This means the API only runs on a cache miss. 3. After the API call (on cache miss), add workflow steps: (a) Create a new PropertySearchCache record with the query_hash, result_json (store the raw result), and expires_at = Current date/time + 60 minutes. (b) Update the 'Search Results' custom state with the API result. 4. Add a parallel branch: if the cache record exists and is not expired, load the Search Results from the cached result_json instead of calling the API. An hour cache window is appropriate for active listings — property data changes daily but not minute-to-minute. Adjust the expires_at window based on how fresh your users need the data. **Also add a property detail cache:** Create a PropertyDetailCache type for individual property lookups (keyed by property_id). Listings viewed from search results generate individual detail API calls — caching these saves a call per property page view.

1// Toolbox Run JavaScript — generate query hash for cache key
2var city = properties.city || '';
3var state = properties.state_code || '';
4var priceMin = properties.price_min || '0';
5var priceMax = properties.price_max || '0';
6var beds = properties.beds_min || '0';
7return (city + '_' + state + '_' + priceMin + '_' + priceMax + '_' + beds).toLowerCase().replace(/\s+/g, '_');

Listing cards show summary data. Users will want to see full property details — more photos, full address, listing description, and price history. Add a detail popup triggered from the repeating group. **Add a second API call:** In the API Connector, within the Realtor.com (RapidAPI) entry, click **New call**. Configure: - Name: Property Detail - Method: GET - Endpoint: /properties/detail/{property_id} Add property_id as a dynamic path parameter or query parameter (depending on the provider's endpoint format — check in RapidAPI's playground). Initialize with a known property_id from a recent search result. **Add a Popup element:** Drag a Popup element onto the page. Set its width and design. Inside, add: - A Slideshow element for photos (data source: Current page's SelectedProperty's photos, image URL: Current photo's href) - Text elements for full address, list price, bedrooms, bathrooms, square footage, year built - A text description block (listing description field) - A 'Close' button that closes the popup **Connect the repeating group row:** In the repeating group cell, add a workflow on the 'View Details' button click: 1. Store the current cell's property_id in a page custom state named 'SelectedPropertyID' 2. Call the Property Detail API using the stored ID 3. Store the result in a 'SelectedProperty' custom state 4. Show the popup This way the popup always shows fresh detail data from the API (or from the PropertyDetailCache if you implemented caching in Step 5), rather than relying on the limited fields available in the search result. RapidDev's team has built real estate search Bubble apps connecting to RapidAPI providers including Realtor.com, Zillow, and ATTOM — if you need help with the data structure mapping or want a faster build, book a free scoping call at rapidevelopers.com/contact.

1{
2  "call_name": "Property Detail",
3  "method": "GET",
4  "endpoint": "/properties/detail",
5  "params": {
6    "property_id": "<dynamic_property_id>"
7  },
8  "use_as": "Data"
9}