Build a ZIP Code Radius Search in React

import { NextRequest, NextResponse } from 'next/server';

export async function GET(request: NextRequest) {
  const searchParams = request.nextUrl.searchParams;
  const zipcode = searchParams.get('zipcode');
  const radius = searchParams.get('radius') || '25'; // Default 25 miles
  
  if (!zipcode) {
    return NextResponse.json(
      { error: 'ZIP code is required' },
      { status: 400 }
    );
  }
  
  try {
    const response = await fetch(
      `https://zip-code-api8.p.rapidapi.com/radius?zipcode=${zipcode}&radius=${radius}`,
      {
        headers: {
          'X-RapidAPI-Key': process.env.RAPIDAPI_KEY!,
          'X-RapidAPI-Host': 'zip-code-api8.p.rapidapi.com'
        },
        next: { revalidate: 86400 } // Cache for 24 hours
      }
    );
    
    if (!response.ok) {
      throw new Error('Failed to fetch radius data');
    }
    
    const data = await response.json();
    
    return NextResponse.json(data);
    
  } catch (error) {
    console.error('Radius search error:', error);
    return NextResponse.json(
      { error: 'Failed to search radius' },
      { status: 500 }
    );
  }
}

'use client';

import { useState } from 'react';

interface Store {
  id: string;
  name: string;
  zipcode: string;
  address: string;
  city: string;
  state: string;
}

// Sample store locations (replace with your actual data)
const STORES: Store[] = [
  { id: '1', name: 'Downtown Store', zipcode: '90210', address: '123 Main St', city: 'Beverly Hills', state: 'CA' },
  { id: '2', name: 'Westside Location', zipcode: '90211', address: '456 Oak Ave', city: 'Beverly Hills', state: 'CA' },
  { id: '3', name: 'Airport Plaza', zipcode: '90045', address: '789 LAX Blvd', city: 'Los Angeles', state: 'CA' },
  { id: '4', name: 'Beach Store', zipcode: '90401', address: '321 Beach Dr', city: 'Santa Monica', state: 'CA' },
];

export default function StoreLocator() {
  const [zipcode, setZipcode] = useState('');
  const [radius, setRadius] = useState('25');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const [nearbyStores, setNearbyStores] = useState<Store[]>([]);
  const [searchPerformed, setSearchPerformed] = useState(false);
  
  const handleSearch = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setError('');
    setSearchPerformed(true);
    
    try {
      // Fetch ZIP codes within radius
      const response = await fetch(
        `/api/radius-search?zipcode=${zipcode}&radius=${radius}`
      );
      
      if (!response.ok) {
        throw new Error('Failed to search');
      }
      
      const data = await response.json();
      
      // Extract ZIP codes from radius search results
      const nearbyZipCodes = new Set(
        data.results?.map((result: any) => result.zipcode) || []
      );
      
      // Filter stores that match nearby ZIP codes
      const filtered = STORES.filter(store => 
        nearbyZipCodes.has(store.zipcode)
      );
      
      setNearbyStores(filtered);
      
    } catch (err) {
      setError('Failed to search for stores. Please try again.');
      console.error(err);
    } finally {
      setLoading(false);
    }
  };
  
  return (
    <div className="max-w-4xl mx-auto p-6">
      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
        <h2 className="text-2xl font-bold mb-6">Find Stores Near You</h2>
        
        {/* Search Form */}
        <form onSubmit={handleSearch} className="mb-8">
          <div className="grid md:grid-cols-3 gap-4">
            <div>
              <label className="block text-sm font-medium mb-2">
                ZIP Code
              </label>
              <input
                type="text"
                value={zipcode}
                onChange={(e) => setZipcode(e.target.value)}
                placeholder="90210"
                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-700"
                required
                pattern="[0-9]{5}"
                maxLength={5}
              />
            </div>
            
            <div>
              <label className="block text-sm font-medium mb-2">
                Radius (miles)
              </label>
              <select
                value={radius}
                onChange={(e) => setRadius(e.target.value)}
                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-700"
              >
                <option value="10">10 miles</option>
                <option value="25">25 miles</option>
                <option value="50">50 miles</option>
                <option value="100">100 miles</option>
              </select>
            </div>
            
            <div className="flex items-end">
              <button
                type="submit"
                disabled={loading}
                className="w-full px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
              >
                {loading ? 'Searching...' : 'Find Stores'}
              </button>
            </div>
          </div>
        </form>
        
        {/* Error Message */}
        {error && (
          <div className="mb-6 p-4 bg-red-100 dark:bg-red-900/20 border border-red-300 dark:border-red-700 rounded-lg text-red-700 dark:text-red-400">
            {error}
          </div>
        )}
        
        {/* Results */}
        {searchPerformed && !loading && (
          <div>
            <h3 className="text-xl font-semibold mb-4">
              {nearbyStores.length > 0 
                ? `Found ${nearbyStores.length} store${nearbyStores.length !== 1 ? 's' : ''} within ${radius} miles`
                : 'No stores found in this area'
              }
            </h3>
            
            {nearbyStores.length > 0 && (
              <div className="space-y-4">
                {nearbyStores.map(store => (
                  <div 
                    key={store.id}
                    className="p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:border-blue-500 transition-colors"
                  >
                    <h4 className="font-semibold text-lg">{store.name}</h4>
                    <p className="text-gray-600 dark:text-gray-400 mt-1">
                      {store.address}
                    </p>
                    <p className="text-gray-600 dark:text-gray-400">
                      {store.city}, {store.state} {store.zipcode}
                    </p>
                    <button className="mt-3 text-blue-600 hover:text-blue-700 font-medium">
                      Get Directions →
                    </button>
                  </div>
                ))}
              </div>
            )}
          </div>
        )}
      </div>
    </div>
  );
}

import StoreLocator from '@/components/StoreLocator';

export default function StoreLocatorPage() {
  return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 py-12">
      <StoreLocator />
    </div>
  );
}