How to Integrate Bolt.new with Realtor.com / Real Estate Listings

Go to rapidapi.com and create a free account if you don't have one. In the search bar, search for 'Realty in US' — the result by APIdojo is the most widely used Realtor.com data API on RapidAPI. Click through to the API listing and click 'Subscribe to Test'. The free Basic plan provides 500 requests per month at no cost — enough for development and light production use. The Pro plan ($10/month) provides 10,000 requests. Subscribe to the Basic plan to start. After subscribing, navigate to the 'Endpoints' tab. You'll see the available endpoints: /buy/list-for-sale (property search for sale listings), /for-sale/detail (full listing details by property_id), /buy/list-for-rent (rental listings), and /finance/estimate-payment (mortgage calculator). Click any endpoint and look for the 'Code Snippets' panel on the right side — this shows your RapidAPI key embedded in example code. Copy your RapidAPI key (the X-RapidAPI-Key header value). Also note the host header value: 'realty-in-us.p.rapidapi.com'. Both the key and host are required for authentication.

Add your RapidAPI credentials to your Bolt.new project's .env file. Both the API key and the host are server-side only values — never use NEXT_PUBLIC_ prefix on either. If your key were exposed in client-side code, anyone could scrape it and consume your API quota. Create a Next.js API route that accepts search parameters from your frontend, calls the RapidAPI endpoint, normalizes the response, and returns clean listing data. The normalization layer is important: RapidAPI's Realtor.com response has a complex nested structure — extract only what your UI needs to keep the response lightweight. The RapidAPI endpoint accepts: city (e.g., 'New York City'), state_code (e.g., 'NY'), offset and limit for pagination, sort (price-desc, price-asc, newest, etc.), price_min, price_max, beds_min, baths_min, prop_type (single_family, condo, townhouse, land, multi_family).

1# .env file additions
2# RapidAPI credentials — server-side only, never NEXT_PUBLIC_
3RAPIDAPI_KEY=your_rapidapi_key_here
4RAPIDAPI_HOST=realty-in-us.p.rapidapi.com

The RapidAPI call follows a specific pattern: your API route sends a GET request to the RapidAPI endpoint URL with three required headers: X-RapidAPI-Key (your key), X-RapidAPI-Host (the specific API's host), and optionally Accept: application/json. The Realtor.com endpoint returns listings in a nested structure: response → properties → []. Each property has location (address, coordinates), list_price, description (beds, baths, sqft, property_type), photos (array of href URLs), and property_id. Some fields may be null if the listing doesn't include that data — always use optional chaining. Map query parameters from your route to the RapidAPI URL parameters. The city parameter should be URL-encoded. Pagination uses offset (starting position) and limit (count per page) — useful for infinite scroll or 'Load more' buttons.

1// app/api/listings/route.ts
2import { NextResponse } from 'next/server';
3
4interface RapidAPIProperty {
5  property_id?: string;
6  location?: { address?: { line?: string; city?: string; state_code?: string; postal_code?: string }; coordinate?: { lat?: number; lon?: number } };
7  list_price?: number;
8  description?: { beds?: number; baths_consolidated?: number; sqft?: number; type?: string };
9  photos?: Array<{ href?: string }>;
10  href?: string;
11  list_date?: string;
12}
13
14export async function GET(request: Request) {
15  const url = new URL(request.url);
16  const city = url.searchParams.get('city') ?? 'New York City';
17  const stateCode = url.searchParams.get('stateCode') ?? 'NY';
18  const priceMin = url.searchParams.get('priceMin');
19  const priceMax = url.searchParams.get('priceMax');
20  const bedsMin = url.searchParams.get('bedsMin');
21  const bathsMin = url.searchParams.get('bathsMin');
22  const limit = Math.min(Number(url.searchParams.get('limit') ?? 20), 42);
23  const page = Number(url.searchParams.get('page') ?? 1);
24  const offset = (page - 1) * limit;
25
26  const params = new URLSearchParams({
27    city,
28    state_code: stateCode,
29    offset: String(offset),
30    limit: String(limit),
31    sort: 'newest',
32    ...(priceMin ? { price_min: priceMin } : {}),
33    ...(priceMax ? { price_max: priceMax } : {}),
34    ...(bedsMin ? { beds_min: bedsMin } : {}),
35    ...(bathsMin ? { baths_min: bathsMin } : {}),
36  });
37
38  try {
39    const apiUrl = `https://realty-in-us.p.rapidapi.com/properties/v3/list?${params}`;
40    const response = await fetch(apiUrl, {
41      method: 'GET',
42      headers: {
43        'X-RapidAPI-Key': process.env.RAPIDAPI_KEY ?? '',
44        'X-RapidAPI-Host': process.env.RAPIDAPI_HOST ?? 'realty-in-us.p.rapidapi.com',
45        'Accept': 'application/json',
46      },
47    });
48
49    if (response.status === 429) {
50      return NextResponse.json({ error: 'Rate limit reached. Please try again later.' }, { status: 429 });
51    }
52    if (!response.ok) {
53      return NextResponse.json({ error: `API error: ${response.status}` }, { status: response.status });
54    }
55
56    const data = await response.json();
57    const properties: RapidAPIProperty[] = data?.data?.home_search?.results ?? data?.properties ?? [];
58    const total: number = data?.data?.home_search?.total ?? data?.matching_rows ?? properties.length;
59
60    const listings = properties.map((p) => ({
61      propertyId: p.property_id ?? '',
62      address: `${p.location?.address?.line ?? ''}, ${p.location?.address?.city ?? ''}, ${p.location?.address?.state_code ?? ''} ${p.location?.address?.postal_code ?? ''}`.trim(),
63      price: p.list_price ?? null,
64      beds: p.description?.beds ?? null,
65      baths: p.description?.baths_consolidated ?? null,
66      sqft: p.description?.sqft ?? null,
67      propertyType: p.description?.type ?? 'unknown',
68      latitude: p.location?.coordinate?.lat ?? null,
69      longitude: p.location?.coordinate?.lon ?? null,
70      photos: (p.photos ?? []).slice(0, 3).map((ph) => ph.href).filter(Boolean),
71      listingUrl: p.href ?? '',
72    }));
73
74    return NextResponse.json({ listings, total, page, limit });
75  } catch (error) {
76    console.error('Listings API error:', error);
77    return NextResponse.json({ error: 'Failed to fetch listings' }, { status: 500 });
78  }
79}

With the API route working, build the React UI that powers the property search experience. A well-designed property search has two main views: a search/filter panel and a results grid (or map view). Start with the grid view — it's more straightforward to build and test. The listing card should show: the primary photo (use a placeholder if no photos), the price prominently (formatted as currency), the address, and key specs (beds, baths, sqft) in a row. Clicking the card should link to the Realtor.com listing URL (target='_blank'). Add a loading skeleton state while data is being fetched to prevent layout shift. For the search form, debounce the city input by 500ms before making API calls — you don't want a request for every keystroke. Connect the filter controls (price range, beds, baths) to re-fetch listings when changed.

For production applications that need reliable, officially licensed listing data, SimplyRETS is a well-regarded option. SimplyRETS aggregates data from participating MLSes and provides a documented REST API at api.simplyrets.com. They have a test mode with fictional listing data for development, and paid plans start at $49/month for access to real MLS listings in their coverage areas. The SimplyRETS API uses HTTP Basic Authentication (username:password, base64 encoded) rather than API keys. Search parameters are similar: address, city, county, postal code, min/max price, min/max beds, and property type. The response format is cleaner and more consistent than scraped data. If your app serves real estate agents or buyers and needs official MLS data, SimplyRETS or the RESO Web API (accessed through an MLS data vendor) is the correct path. RESO certification requires demonstrating a valid real estate business purpose — contact your local MLS for certified data access options. For the code change from RapidAPI to SimplyRETS, you'd replace the RapidAPI headers and URL with Basic Auth headers and SimplyRETS's endpoint URLs — the API route structure remains the same.

1// Switching from RapidAPI to SimplyRETS:
2// SimplyRETS uses HTTP Basic Auth
3const credentials = Buffer.from(
4  `${process.env.SIMPLYRETS_API_USER}:${process.env.SIMPLYRETS_API_SECRET}`
5).toString('base64');
6
7const response = await fetch('https://api.simplyrets.com/properties?city=Austin&q=&minprice=200000&maxprice=500000', {
8  headers: {
9    'Authorization': `Basic ${credentials}`,
10    'Accept': 'application/json',
11  },
12});
13// SimplyRETS test credentials: simplyrets:simplyrets