How to Integrate Bolt.new with Redfin

The first decision is which property data API to use. Each has different strengths, pricing, and access requirements. ATTOM Data (api.developer.attomdata.com) is the most comprehensive option. Their database covers over 155 million US properties with records, valuations, neighborhood data, school ratings, and environmental risk scores. The free developer trial gives 100 API calls per day, which is enough for building and testing. ATTOM's API uses header-based authentication — you send your API key in the `apikey` header with every request. Estated (estated.com/developers) is simpler and more affordable, focused on clean property records and valuations. Their Sandbox environment is free and returns data for 27 sample properties for testing. The Production API costs $0.002-$0.01 per request. Estated is a good choice if you need quick, reliable property data without ATTOM's full feature set. SimplyRETS (simplyrets.com) provides live MLS listing data but requires a real estate broker or agent relationship to access real MLS data — the free sandbox returns 3,000 simulated listings for development. If your app is for licensed real estate professionals, SimplyRETS is the best choice for current active listings. For non-commercial prototyping, RapidAPI (rapidapi.com) hosts several unofficial Redfin and Zillow data endpoints. These are scraped data sources that violate Redfin's and Zillow's terms of service for commercial use — use them only for learning and personal projects, not production apps. Once you have your chosen API key, add it to your .env file.

1# .env file — add your chosen property data API credentials
2ATTOM_API_KEY=your_attom_api_key_here
3# OR
4ESTATED_API_KEY=your_estated_token_here
5# OR
6SIMPLYRETS_API_KEY=your_simplyrets_username
7SIMPLYRETS_SECRET=your_simplyrets_password
8
9# Optional: for map visualization
10NEXT_PUBLIC_MAPBOX_TOKEN=your_mapbox_token_here

With credentials in place, prompt Bolt to generate the property search API route. The API route accepts search parameters from the frontend (location, price range, bedrooms), queries the property data API using your credentials from `process.env`, and returns formatted listing data to the React component. For Next.js projects, Bolt generates an API route at `app/api/properties/search/route.ts`. For Vite projects, use a Supabase edge function to proxy the property API request — this avoids CORS issues since ATTOM and Estated may not whitelist browser origins directly. The edge function pattern is also more secure because your API key never reaches the client bundle. The key architectural decision is whether to query the property API on every search or to cache results. For development, direct API calls on every search are fine. For production, consider caching property search results in Supabase for 24 hours — property data doesn't change minute-by-minute, and API calls cost money. A simple caching strategy: store search results in a `property_cache` table with a `cached_at` timestamp, and return cached results if they are less than 24 hours old before making a new API call. Bolt can also generate the full search form UI — location input with autocomplete, price range sliders, bedroom/bathroom filters, and property type checkboxes. Request the full component in the same prompt to get a working search flow in one generation.

1// app/api/properties/search/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4const ATTOM_API_KEY = process.env.ATTOM_API_KEY;
5const ATTOM_BASE_URL = 'https://api.gateway.attomdata.com/propertyapi/v1.0.0';
6
7export async function GET(request: NextRequest) {
8  const { searchParams } = new URL(request.url);
9  const zipCode = searchParams.get('zip');
10  const city = searchParams.get('city');
11  const state = searchParams.get('state');
12  const minPrice = searchParams.get('minPrice');
13  const maxPrice = searchParams.get('maxPrice');
14
15  if (!ATTOM_API_KEY) {
16    return NextResponse.json({ error: 'Property API not configured' }, { status: 500 });
17  }
18
19  // Build ATTOM property search query
20  const params = new URLSearchParams();
21  if (zipCode) params.set('postalcode', zipCode);
22  if (city) params.set('city', city);
23  if (state) params.set('state', state);
24  if (minPrice) params.set('minestimatedvalue', minPrice);
25  if (maxPrice) params.set('maxestimatedvalue', maxPrice);
26  params.set('pagesize', '20');
27
28  const response = await fetch(
29    `${ATTOM_BASE_URL}/property/basicprofile?${params.toString()}`,
30    {
31      headers: {
32        'apikey': ATTOM_API_KEY,
33        'Accept': 'application/json',
34      },
35    }
36  );
37
38  if (!response.ok) {
39    const error = await response.text();
40    return NextResponse.json(
41      { error: `Property API error: ${response.status}` },
42      { status: response.status }
43    );
44  }
45
46  const data = await response.json();
47  const properties = (data.property || []).map((p: any) => ({
48    id: p.identifier?.attomId,
49    address: `${p.address?.line1}, ${p.address?.locality}, ${p.address?.countrySubd} ${p.address?.postal1}`,
50    estimatedValue: p.avm?.amount?.value,
51    bedrooms: p.building?.rooms?.beds,
52    bathrooms: p.building?.rooms?.bathsTotal,
53    squareFootage: p.building?.size?.livingSize,
54    yearBuilt: p.summary?.yearbuilt,
55    propertyType: p.summary?.proptype,
56    latitude: p.location?.latitude,
57    longitude: p.location?.longitude,
58  }));
59
60  return NextResponse.json({ properties });
61}

A real estate app's value is in how properties are presented. The most effective UI pattern combines a searchable list view with an interactive map — users see properties both spatially and as sortable cards. Bolt can generate this split-panel layout from a prompt. For the map, Mapbox GL JS (`mapbox-gl`) and React Map GL (`react-map-gl`) are the recommended choices for Bolt.new projects. They work via npm install without native dependencies — both use WebGL for rendering, which is fully compatible with the WebContainer. Google Maps JavaScript API is also compatible. Add property pins to the map using GeoJSON coordinates from your API response. When a user clicks a pin, show a popup with the property address and estimated value. Clicking through opens the property detail panel. The list view should show PropertyCard components with key stats: address, estimated value formatted as currency, bedrooms, bathrooms, square footage, and year built. Sort controls (price high/low, newest, closest) and filter chips (bedrooms, price range, property type) let users narrow down results without re-querying the API. For the property detail view, a slide-in panel or modal works well — it keeps the map visible while showing full property details. Include: full address, all property characteristics from the API response, an estimated value with a note that values are automated estimates (important for liability reasons), last sale price and date, and a Save to Favorites button that stores the property in Supabase linked to the user's account.

1// components/PropertyCard.tsx
2interface Property {
3  id: string;
4  address: string;
5  estimatedValue?: number;
6  bedrooms?: number;
7  bathrooms?: number;
8  squareFootage?: number;
9  yearBuilt?: number;
10  propertyType?: string;
11}
12
13interface PropertyCardProps {
14  property: Property;
15  isHighlighted?: boolean;
16  onSave?: (propertyId: string) => void;
17  onClick?: () => void;
18}
19
20export function PropertyCard({ property, isHighlighted, onSave, onClick }: PropertyCardProps) {
21  const formatValue = (value?: number) =>
22    value ? `$${value.toLocaleString()}` : 'Est. N/A';
23
24  return (
25    <div
26      onClick={onClick}
27      className={`p-4 border rounded-lg cursor-pointer transition-all hover:shadow-md ${
28        isHighlighted ? 'border-blue-500 shadow-md bg-blue-50' : 'border-gray-200 bg-white'
29      }`}
30    >
31      <div className="flex justify-between items-start mb-2">
32        <p className="font-semibold text-sm leading-tight flex-1 mr-2">{property.address}</p>
33        <span className="text-blue-600 font-bold whitespace-nowrap">
34          {formatValue(property.estimatedValue)}
35        </span>
36      </div>
37      <div className="flex gap-3 text-sm text-gray-600">
38        {property.bedrooms && <span>{property.bedrooms} bed</span>}
39        {property.bathrooms && <span>{property.bathrooms} bath</span>}
40        {property.squareFootage && <span>{property.squareFootage.toLocaleString()} sqft</span>}
41        {property.yearBuilt && <span>Built {property.yearBuilt}</span>}
42      </div>
43      {property.propertyType && (
44        <span className="inline-block mt-2 text-xs bg-gray-100 text-gray-500 rounded px-2 py-0.5">
45          {property.propertyType}
46        </span>
47      )}
48      {onSave && (
49        <button
50          onClick={(e) => { e.stopPropagation(); onSave(property.id); }}
51          className="mt-3 w-full text-sm border border-gray-300 rounded py-1 hover:bg-gray-50"
52        >
53          Save Property
54        </button>
55      )}
56    </div>
57  );
58}

A real estate app becomes much more useful when users can save properties they are interested in and set up saved searches that notify them of new listings matching their criteria. Bolt can generate the full favorites and saved search system from a prompt. The data model in Supabase requires two tables: `favorites` (user_id, property_id, property_address, estimated_value, saved_at) for saved individual properties, and `saved_searches` (user_id, search_name, location, min_price, max_price, bedrooms, property_type, created_at) for recurring searches. Both tables need RLS policies ensuring users can only access their own saved data. For the favorites feature, the Save button on each property card calls a Supabase insert. Since property data comes from an external API and not your own database, you store a snapshot of the key property fields alongside the external property ID — this way, favorites remain displayable even if the external API data changes or becomes unavailable. Saved searches with email notifications require deployment since email sending (via SendGrid or Resend) happens from a server-side function. The notification trigger can be a scheduled Supabase function (via pg_cron) that runs daily, queries the property API for each saved search, compares against the last known results stored in Supabase, and emails the user about new listings. This is an advanced feature — build it after the core search and favorites are working.

1// hooks/useFavorites.ts
2import { useState, useEffect } from 'react';
3import { createClient } from '@supabase/supabase-js';
4
5const supabase = createClient(
6  process.env.NEXT_PUBLIC_SUPABASE_URL!,
7  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
8);
9
10export function useFavorites(userId?: string) {
11  const [favorites, setFavorites] = useState<Set<string>>(new Set());
12  const [loading, setLoading] = useState(false);
13
14  useEffect(() => {
15    if (!userId) return;
16    supabase
17      .from('favorites')
18      .select('attom_id')
19      .eq('user_id', userId)
20      .then(({ data }) => {
21        if (data) setFavorites(new Set(data.map((f) => f.attom_id)));
22      });
23  }, [userId]);
24
25  async function toggleFavorite(property: {
26    attomId: string;
27    address: string;
28    estimatedValue?: number;
29    bedrooms?: number;
30    bathrooms?: number;
31    squareFootage?: number;
32  }) {
33    if (!userId) return;
34    setLoading(true);
35
36    if (favorites.has(property.attomId)) {
37      await supabase
38        .from('favorites')
39        .delete()
40        .eq('user_id', userId)
41        .eq('attom_id', property.attomId);
42      setFavorites((prev) => { const next = new Set(prev); next.delete(property.attomId); return next; });
43    } else {
44      await supabase.from('favorites').insert({
45        user_id: userId,
46        attom_id: property.attomId,
47        address: property.address,
48        estimated_value: property.estimatedValue,
49        bedrooms: property.bedrooms,
50        bathrooms: property.bathrooms,
51        sqft: property.squareFootage,
52      });
53      setFavorites((prev) => new Set([...prev, property.attomId]));
54    }
55    setLoading(false);
56  }
57
58  return { favorites, toggleFavorite, loading };
59}

Property search apps need to be tested in a real deployment environment, not just in Bolt's WebContainer preview. While outbound API calls to ATTOM or Estated work in the preview, the full experience — user authentication, saved favorites, map rendering with a real Mapbox token — works best on a deployed URL. Deploy to Netlify or Bolt Cloud by clicking the Publish button in Bolt's top navigation. After deployment, configure environment variables in your hosting platform. In Netlify, go to Site Configuration → Environment Variables and add: `ATTOM_API_KEY` (or `ESTATED_API_KEY`), `NEXT_PUBLIC_MAPBOX_TOKEN`, `NEXT_PUBLIC_SUPABASE_URL`, and `NEXT_PUBLIC_SUPABASE_ANON_KEY`. In Bolt Cloud, use the Secrets panel. After deployment, test the full flow: search for properties in a specific ZIP code, view them on the map, save a favorite, log out and log back in to confirm favorites persist. Check browser DevTools for any 403 errors (Supabase RLS policies blocking access) or CORS errors from the property API. For production apps, set up API rate limiting in your API route to prevent excessive ATTOM or Estated API calls. Both providers charge per request, and a popular app without rate limiting can accumulate significant API costs. Add request caching using Supabase as a cache store — save API responses with a `cached_at` timestamp and return cached data if it's less than 24 hours old.