*Problems identified:*

1. No database indexing strategy

2. N+1 query problems with image loading

3. No caching layer

4. Synchronous image processing

5. Monolithic frontend with no code splitting

The New Architecture: Performance-First Design

We designed a microservices architecture with performance as the primary constraint:

// Property Search Service - Optimized
interface SearchFilters {
  location?: string;
  priceRange?: [number, number];
  propertyType?: string;
  features?: string[];
  page?: number;
  limit?: number;
}

class PropertySearchService {
  private readonly redis: Redis;
  private readonly elasticsearch: Client;
  private readonly db: PostgreSQLClient;

  async searchProperties(filters: SearchFilters): Promise {
    const cacheKey = this.generateCacheKey(filters);

    // Check Redis cache first
    const cached = await this.redis.get(cacheKey);
    if (cached) {
      return JSON.parse(cached);
    }

    // Elasticsearch for complex search queries
    const searchQuery = this.buildElasticsearchQuery(filters);
    const results = await this.elasticsearch.search({
      index: 'properties',
      body: searchQuery,
      size: filters.limit || 20,
      from: ((filters.page || 1) - 1) * (filters.limit || 20)
    });

    // Transform and cache results
    const searchResult = this.transformResults(results);
    await this.redis.setex(cacheKey, 300, JSON.stringify(searchResult)); // 5min cache

    return searchResult;
  }

  private buildElasticsearchQuery(filters: SearchFilters) {
    const must: any[] = [];

    if (filters.location) {
      must.push({
        match: {
          'location.name': {
            query: filters.location,
            fuzziness: 'AUTO'
          }
        }
      });
    }

    if (filters.priceRange) {
      must.push({
        range: {
          price: {
            gte: filters.priceRange[0],
            lte: filters.priceRange[1]
          }
        }
      });
    }

    return {
      query: {
        bool: { must }
      },
      sort: [
        { featured: { order: 'desc' } },
        { updated_at: { order: 'desc' } }
      ]
    };
  }
}

-- Strategic indexing for property searches
CREATE INDEX CONCURRENTLY idx_properties_location_price 
ON properties(location_id, price) 
WHERE status = 'active';

CREATE INDEX CONCURRENTLY idx_properties_type_features 
ON properties USING GIN(property_type, features) 
WHERE status = 'active';

CREATE INDEX CONCURRENTLY idx_properties_geo 
ON properties USING GIST(location_point);

-- Partial index for featured properties
CREATE INDEX CONCURRENTLY idx_properties_featured 
ON properties(featured, updated_at DESC) 
WHERE featured = true AND status = 'active';

-- Query optimization example
EXPLAIN ANALYZE 
SELECT p.id, p.title, p.price, p.location_point,
       array_agg(DISTINCT i.url) as images
FROM properties p
LEFT JOIN property_images i ON p.id = i.property_id
WHERE p.price BETWEEN $1 AND $2
  AND p.location_id = $3
  AND p.status = 'active'
GROUP BY p.id, p.title, p.price, p.location_point
ORDER BY p.featured DESC, p.updated_at DESC
LIMIT 20;

// Optimized Property Listing Component
import { memo, useMemo } from 'react';
import Image from 'next/image';
import { useVirtualizer } from '@tanstack/react-virtual';

interface PropertyListProps {
  properties: Property[];
  onPropertyClick: (id: string) => void;
}

const PropertyList = memo(({ properties, onPropertyClick }: PropertyListProps) => {
  const parentRef = useRef(null);

  // Virtual scrolling for large lists
  const virtualizer = useVirtualizer({
    count: properties.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 320, // Estimated property card height
    overscan: 5
  });

  const virtualItems = virtualizer.getVirtualItems();

  return (
    
      ref={parentRef}
      className="property-list"
      style={{ height: '600px', overflow: 'auto' }}
    >
      
        style={{
          height: ${virtualizer.getTotalSize()}px,
          width: '100%',
          position: 'relative'
        }}
      >
        {virtualItems.map((virtualItem) => {
          const property = properties[virtualItem.index];
          return (
            
              key={property.id}
              property={property}
              style={{
                position: 'absolute',
                top: 0,
                left: 0,
                width: '100%',
                height: ${virtualItem.size}px,
                transform: translateY(${virtualItem.start}px)
              }}
              onClick={() => onPropertyClick(property.id)}
            />
          );
        })}