App

import React, { useState } from 'react';
import axios from 'axios';

function App() {
  const [query, setQuery] = useState('');
  const [recommendations, setRecommendations] = useState([]);

  // Function to fetch recommendations from the Flask backend
  const handleSearch = async () => {
    try {
      const response = await axios.post('https://recsys-ruddy.vercel.app/recommend', { query });
      setRecommendations(response.data);
    } catch (error) {
      console.error('Error fetching recommendations:', error);
    }
  };

  return (
    <div style={{ padding: '20px' }}>
      <h1>Real Estate Listing Recommender</h1>
      <input 
        type="text" 
        value={query} 
        onChange={(e) => setQuery(e.target.value)} 
        placeholder="Enter your search query" 
        style={{ padding: '10px', width: '300px' }}
      />
      <button onClick={handleSearch} style={{ padding: '10px', marginLeft: '10px' }}>Search</button>

      <div style={{ display: 'flex', flexWrap: 'wrap', marginTop: '20px' }}>
        {recommendations.map((item, index) => (
          <div key={index} style={{ border: '1px solid #ccc', padding: '10px', margin: '10px', width: '300px' }}>
            <a href={item.listing_url} target="_blank" rel="noopener noreferrer">
              <img src={item.picture_url} alt="Listing" style={{ width: '100%' }} />
            </a>
            <p><strong>Description:</strong> {item.description}</p>
            <p><strong>Neighborhood:</strong> {item.neighbourhood}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

export default App;