buildout full stack functionality

frontend/src/App.tsx

@@ -0,0 +1,83 @@
+import { useEffect, useState } from 'react'
+import { apiBaseUrl, apiFetch } from './api/client'
+import './App.css'
+
+type InfoResponse = {
+  name: string
+  version: string
+  environment: string
+  timestamp: string
+}
+
+function App() {
+  const [info, setInfo] = useState<InfoResponse | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    apiFetch<InfoResponse>('/v1/info')
+      .then(setInfo)
+      .catch((err: unknown) =>
+        setError(err instanceof Error ? err.message : 'Unknown error'),
+      )
+      .finally(() => setLoading(false))
+  }, [])
+
+  return (
+    <div className="app">
+      <header className="app__header">
+        <h1>React + .NET Starter</h1>
+        <p>A minimal monorepo skeleton for new projects.</p>
+      </header>
+
+      <section className="app__section">
+        <h2>Frontend</h2>
+        <p>
+          Vite + React + TypeScript running on port 3000. Extend{' '}
+          <code>src/App.tsx</code> to begin building your application.
+        </p>
+      </section>
+
+      <section className="app__section app__section--api">
+        <h2>Backend API</h2>
+        <p>
+          Requests go to <code>{apiBaseUrl}</code> via{' '}
+          <code>VITE_API_BASE_URL</code>.
+        </p>
+
+        {loading && <p className="app__status app__status--loading">Checking API…</p>}
+        {error && (
+          <p className="app__status app__status--error">
+            Unable to reach API: {error}
+          </p>
+        )}
+        {info && (
+          <dl className="app__info">
+            <div>
+              <dt>Status</dt>
+              <dd className="app__status app__status--ok">Connected</dd>
+            </div>
+            <div>
+              <dt>Name</dt>
+              <dd>{info.name}</dd>
+            </div>
+            <div>
+              <dt>Version</dt>
+              <dd>{info.version}</dd>
+            </div>
+            <div>
+              <dt>Environment</dt>
+              <dd>{info.environment}</dd>
+            </div>
+            <div>
+              <dt>Server time (UTC)</dt>
+              <dd>{new Date(info.timestamp).toISOString()}</dd>
+            </div>
+          </dl>
+        )}
+      </section>
+    </div>
+  )
+}
+
+export default App