add minimal working version where we fetch data and visualize it corectly

crawler/frontend/src/App.tsx

@@ -6,16 +6,7 @@ import { Map } from './components/Map';
 import { Parameters } from './components/Parameters';
 
 function App() {
-  useEffect(() => {
-    const script = document.createElement('script');
-    script.src = './script.js';
-    script.async = true;
-    document.body.appendChild(script);
-
-    return () => {
-      document.body.removeChild(script); // Cleanup
-    };
-  }, []);
+  const [listingData, setListingData] = useState({});
   const [user, setUser] = useState<User | null>(null);
 
   useEffect(() => {
@@ -65,8 +56,15 @@ function App() {
       <p className="read-the-docs">
         Click on the Vite and React logos to learn more
       </p> */}
-      <Parameters />
-      <Map />
+
+      {/* <link href='https://api.mapbox.com/mapbox-gl-js/v3.12.0/mapbox-gl.css' rel='stylesheet' /> */}
+      <Parameters setListingData={setListingData} />
+      {Object.keys(listingData).length > 0 &&
+
+        <div style={{ width: '100%' }}>
+          <Map listingData={listingData} />
+        </div>
+      }
     </>
   )
 }