feat: add basic test UI and enable cors

backend/main.py

@@ -1,11 +1,21 @@
 from fastapi import FastAPI, Depends
+from fastapi.middleware.cors import CORSMiddleware
 from sqlalchemy.orm import Session
 from . import models, schemas, database
 
 models.Base.metadata.create_all(bind=database.engine)
 
 app = FastAPI()
 
+# Allow the frontend dev server or any origin to access the API
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
 
 @app.get("/")
 def read_root():

frontend/src/App.tsx

@@ -1,9 +1,60 @@
+import { useEffect, useState } from 'react';
+
+interface TestRecord {
+  id: number;
+  timestamp: string;
+  client_ip?: string | null;
+  location?: string | null;
+  asn?: string | null;
+  isp?: string | null;
+  ping_ms?: number | null;
+  mtr_result?: string | null;
+  iperf_result?: string | null;
+  test_target?: string | null;
+}
+
 function App() {
+  const [tests, setTests] = useState<TestRecord[]>([]);
+
+  const loadTests = async () => {
+    try {
+      const res = await fetch('/tests');
+      setTests(await res.json());
+    } catch (err) {
+      console.error('Failed to load tests', err);
+    }
+  };
+
+  useEffect(() => {
+    loadTests();
+  }, []);
+
+  const startTest = async () => {
+    try {
+      await fetch('/tests', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        // For now send minimal mock data. Real implementation should
+        // collect actual network diagnostics here.
+        body: JSON.stringify({ ping_ms: Math.random() * 100 }),
+      });
+      await loadTests();
+    } catch (err) {
+      console.error('Failed to create test record', err);
+    }
+  };
+
   return (
-    <div className="min-h-screen bg-gradient-to-br from-black via-purple-900 to-indigo-900 text-green-400 flex items-center justify-center">
-      <button className="px-6 py-3 border border-green-400 hover:bg-green-400 hover:text-black transition">
+    <div className="min-h-screen bg-gradient-to-br from-black via-purple-900 to-indigo-900 text-green-400 flex flex-col items-center justify-center gap-4 p-4">
+      <button
+        onClick={startTest}
+        className="px-6 py-3 border border-green-400 hover:bg-green-400 hover:text-black transition"
+      >
         Start Test
       </button>
+      <pre className="w-full max-w-3xl bg-black/50 p-4 overflow-auto rounded-md">
+        {JSON.stringify(tests, null, 2)}
+      </pre>
     </div>
   );
 }

frontend/vite.config.ts

@@ -4,4 +4,13 @@ import react from '@vitejs/plugin-react'
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
+  // Proxy API requests during development to the FastAPI backend
+  server: {
+    proxy: {
+      '/tests': {
+        target: 'http://localhost:8000',
+        changeOrigin: true,
+      },
+    },
+  },
 })