Add frontend

frontend/src/App.jsx

@@ -0,0 +1,54 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import Map from './components/Map';
+import Filters from './components/Filters';
+import { DEFAULT_FILTERS } from './lib/constants';
+
+export default function App() {
+  const [filters, setFilters] = useState(DEFAULT_FILTERS);
+  const [data, setData] = useState([]);
+  const [resolution, setResolution] = useState(8);
+  const [loading, setLoading] = useState(false);
+
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    try {
+      const params = new URLSearchParams({
+        resolution: resolution.toString(),
+        min_year: filters.minYear.toString(),
+        max_year: filters.maxYear.toString(),
+        min_price: filters.minPrice.toString(),
+        max_price: filters.maxPrice.toString(),
+      });
+      const res = await fetch(`/api/hexagons?${params}`);
+      const json = await res.json();
+      setData(
+        json.features.map((f) => ({
+          h3: f.properties.h3,
+          ...f.properties,
+        }))
+      );
+    } catch (err) {
+      console.error('Failed to fetch data:', err);
+    } finally {
+      setLoading(false);
+    }
+  }, [filters, resolution]);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  return (
+    <div className="h-screen flex">
+      <Filters filters={filters} onChange={setFilters} />
+      <div className="flex-1 relative">
+        <Map data={data} onZoom={setResolution} />
+        {loading && (
+          <div className="absolute top-4 right-4 bg-white px-3 py-1 rounded shadow">
+            Loading...
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}