Real Estate Search Bar

A magical real estate search interface that parses natural language queries in real-time as you type.

1. Set HTTP Trigger: The main.ts file is already configured as an HTTP trigger
2. Access the App: Visit your Val Town URL to see the live application
3. Start Searching: Type natural language queries in the search bar

Visit the main URL and try these example searches:

• "2 bed 2 bath under 800k in Williamsburg"
• "3 bedroom townhouse with yard in Park Slope"
• "condo with doorman and gym under 1M"
• "apartment in Bed Stuy with parking above 400k"

Test the backend endpoints directly:

Search Properties:

GET /api/search?beds=2&priceMax=800000&neighborhoods=Williamsburg

Health Check:

GET /api/health

Example API Response:

{
  "properties": [
    {
      "id": 1,
      "address": "123 Main St, Williamsburg, Brooklyn",
      "price": 750000,
      "beds": 2,
      "baths": 2,
      "sqft": 1200,
      "propertyType": "condo",
      "features": ["parking", "laundry"],
      "neighborhood": "Williamsburg"
    }
  ],
  "total": 1,
  "filters": {
    "beds": "2",
    "priceMax": "800000",
    "neighborhoods": "Williamsburg"
  }
}

• Live Parsing: Filters update instantly as you type, character by character
• Natural Language: Type "2 bed 3 bath under 500k in Brooklyn with yard" and watch the magic happen
• Visual Feedback: Colored underlines show what's been parsed
• Bidirectional: Manual filter changes don't get overwritten
• Smart Parsing: Handles various formats like "2br", "1.5ba", "500k", "$1M"
• Real Results: Displays actual property listings based on your search criteria
• Responsive Design: Works beautifully on desktop and mobile

├── backend/
│   └── index.ts             # Hono API server with search endpoints
├── frontend/
│   ├── components/
│   │   └── SearchApp.tsx    # Main React search interface
│   ├── index.html           # HTML template with styling
│   └── index.tsx            # React app entry point
├── shared/
│   ├── types.ts             # TypeScript interfaces and constants
│   └── parser.ts            # Natural language parsing logic
├── main.ts                  # HTTP trigger entry point
└── README.md

• GET / - Main application interface
• GET /api/search - Property search with filter parameters
• GET /api/health - Health check endpoint

• beds - Minimum number of bedrooms
• baths - Minimum number of bathrooms
• priceMin - Minimum price
• priceMax - Maximum price
• neighborhoods - Comma-separated list of neighborhoods
• propertyTypes - Comma-separated list of property types
• features - Comma-separated list of desired features

Type naturally in the search bar and watch filters populate automatically:

Bedrooms:

• "2 bed", "3br", "2 bedroom", "2 beds"

Bathrooms:

• "2 bath", "1.5ba", "2 bathrooms", "1.5 baths"

Price Ranges:

• "under 500k", "below $1M", "above 300k", "max 800000"

Neighborhoods:

• Bed Stuy, Williamsburg, Park Slope, Bushwick, Crown Heights, Greenpoint, Fort Greene, DUMBO, Cobble Hill, Clinton Hill

Property Types:

• house, condo, co-op, townhouse, apartment

Features:

• yard, parking, garage, doorman, laundry, gym, pool, rooftop

• Use dropdown menus to manually set filters
• Manual selections won't be overwritten by natural language parsing
• Remove filters using the "X" button on filter chips

Try these search queries to see the magic in action:

1. Basic Search: "2 bed 2 bath"
2. Price Range: "under 800k"
3. Location Specific: "condo in Williamsburg"
4. Feature Based: "apartment with doorman and gym"
5. Complex Query: "3 bedroom townhouse with yard in Park Slope under 1.2M"

• Frontend: React 18 with TypeScript, TailwindCSS for styling
• Backend: Hono framework with mock property data (10 sample properties)
• Parsing: Custom natural language parser with regex patterns
• Real-time: Debounced search with loading states (300ms delay)
• Responsive: Mobile-first design with CSS Grid layouts
• State Management: React hooks with manual override tracking

• Syntax Highlighting: Different colors for parsed segments (beds=blue, baths=green, price=yellow/red, etc.)
• Filter Animations: Smooth pulse animations when filters update automatically
• Loading States: Spinner during property searches
• Empty States: Helpful messages when no results are found
• Hover Effects: Interactive property cards with subtle animations