This tutorial builds a React component that accepts a ZIP code input, calls a server-side proxy, and displays market stats and rental yield in a card UI.
Backend Proxy (Express.js)
const express = require('express');
const axios = require('axios');
const app = express();
app.get('/api/zip/:zipCode', async (req, res) => {
try {
const [stats, yield_] = await Promise.all([
axios.get('https://zipmarketdata.com/market-stats',
{ params: { zip_code: req.params.zipCode },
headers: { 'x-rapidapi-proxy-secret': process.env.KEY } }),
axios.get('https://zipmarketdata.com/rental-yield',
{ params: { zip_code: req.params.zipCode, bedrooms: 2 },
headers: { 'x-rapidapi-proxy-secret': process.env.KEY } })
]);
res.json({ market: stats.data, rental: yield_.data });
} catch (e) {
res.status(e.response?.status || 500).json({ error: e.message });
}
});
app.listen(3001);
React Component
import { useState } from 'react';
export default function ZipSearch() {
const [zip, setZip] = useState('');
const [data, setData] = useState(null);
const [loading, setLoading] = useState(false);
const search = async () => {
setLoading(true);
const res = await fetch(`/api/zip/${zip}`);
setData(await res.json());
setLoading(false);
};
return (
<div>
<input value={zip} onChange={e => setZip(e.target.value)} placeholder="ZIP Code" />
<button onClick={search} disabled={loading}>{loading ? '…' : 'Search'}</button>
{data && (
<div>
<p>Median Price: ${data.market.median_sale_price?.toLocaleString()}</p>
<p>Gross Yield: {data.rental.gross_yield_pct}%</p>
<p>Market: {data.market.market_temperature}</p>
</div>
)}
</div>
);
}