add initial frontend

frontend/src/App.tsx

@@ -0,0 +1,32 @@
+import { useQuery } from '@tanstack/react-query'
+import reactLogo from './assets/react.svg'
+import viteLogo from '/vite.svg'
+import './App.css'
+import { Button } from "@/components/ui/button"
+
+interface LatestTemperature {
+    temp: number;
+}
+
+async function fetchLatestTemperature(): Promise<LatestTemperature>{
+    const res = await fetch("/api/latest-temperature");
+    if (!res.ok) throw new Error("Failed to fetch latest temperature");
+    return res.json();
+}
+
+function App() {
+    const {data, isLoading, error} = useQuery({
+        queryKey: ["latest-temperature"],
+        queryFn: fetchLatestTemperature,
+
+    });
+  if (isLoading) return <p>Loading...</p>
+  if (error) return <p>Error: {error.message}</p>
+  return (
+    <>
+    <p>{data.temp}</p>
+    </>
+  )
+}
+
+export default App