add the very basics of a plot

Also troubleshoot to fix vite config for deduplicating react and
react-dom

frontend/src/App.tsx

@@ -1,32 +1,23 @@
 import './App.css'
 import LatestTemperature from "@/components/latest-temperature"
+import TemperatureHistory from "@/components/temperature-history"
+import TemperaturePlot from "@/components/temperature-plot"
 // import { Button } from "@/components/ui/button"
 
 
-// {"id":1001,"city":"Salem","temp":66.7,"feels_like":67.17,"humidity":87,"conditions":"scattered clouds","fetched_at":"2026-02-18T22:16:38.067097Z"}
-interface WeatherHistory {
-    id: number;
-    city: string;
-    temp: number;
-    feels_like: number;
-    humidity: number;
-    conditions: string;
-    fetched_at: Date;
-
-}
-
-async function fetchWeatherHistory(): Promise<WeatherHistory>{
-    const res = await fetch("/api/weather/history");
-    if(!res.ok) throw new Error("Failed to fetch weather history");
-    return res.json();
-}
 
 
 function App() {
     return (
-        <>
-            <LatestTemperature />
-        </>
+        <main className="min-h-screen bg-background p-6">
+            <div className="max-w-4xl mx-auto space-y-2">
+                <TemperaturePlot />
+                <div grid grid-cols-1 md:grid-cols-1 gap-6>
+                <LatestTemperature />
+                <TemperatureHistory />
+                </div>
+            </div>
+        </main>
     )    
 }
 

frontend/src/components/temperature-history.tsx

@@ -0,0 +1,19 @@
+import WeatherHistory from '@/hooks/weather-history'
+
+
+function TemperatureHistory(){
+    const {data, isLoading, error} = WeatherHistory()
+
+  if (isLoading) return <p>Loading...</p>
+  if (error) return <p>Error: {error.message}</p>
+  return (
+    <>
+        {data.map((record) => (
+            <div key={record.id}>{record.temp ?? 'N/A'}({record.city})</div>
+        ))}
+    </>
+  )
+
+}
+
+export default TemperatureHistory

frontend/src/components/temperature-plot.tsx

@@ -0,0 +1,25 @@
+import { ScatterChart, Scatter, XAxis, YAxis, Tooltip, ResponsiveContainer } from "recharts";
+import WeatherHistory from '@/hooks/weather-history'
+
+function TemperaturePlot() {
+    const {data, isLoading, error} = WeatherHistory()
+
+    if (isLoading) return <p>Loading...</p>
+    if (error) return <p>Error: {error.message}</p>
+
+    return (
+        <div>
+            <ResponsiveContainer width="100%" height={400}>
+              <ScatterChart data={data}>
+                <XAxis dataKey="id" />
+                <YAxis />
+                <Tooltip />
+                <Scatter dataKey="temp" fill="#6366f1" />
+              </ScatterChart>
+            </ResponsiveContainer>
+        </div>
+    )
+}
+
+export default TemperaturePlot
+

frontend/src/hooks/weather-history.tsx

@@ -0,0 +1,29 @@
+import { useQuery } from '@tanstack/react-query'
+
+// {"id":1001,"city":"Salem","temp":66.7,"feels_like":67.17,"humidity":87,"conditions":"scattered clouds","fetched_at":"2026-02-18T22:16:38.067097Z"}
+interface WeatherHistory {
+    id: number;
+    city: string;
+    temp: number;
+    feels_like: number;
+    humidity: number;
+    conditions: string;
+    fetched_at: string;
+}
+
+async function fetchWeatherHistory(): Promise<WeatherHistory[]>{
+    const res = await fetch("/api/weather/history");
+    if(!res.ok) throw new Error("Failed to fetch weather history");
+    return res.json();
+}
+
+function WeatherHistory() {
+    const {data, isLoading, error} = useQuery({
+        queryKey: ["weather-history"],
+        queryFn: fetchWeatherHistory,
+
+    });
+    return {data, isLoading, error}
+}
+
+export default WeatherHistory