Initial commit 4.

frontend/src/app/components/HealthStatus.tsx

@@ -0,0 +1,75 @@
+"use client";
+import { useState, useEffect } from "react";
+
+export default function HealthStatus() {
+  const [health, setHealth] = useState<{ status?: string }>({});
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    const checkHealth = async () => {
+      try {
+        setLoading(true);
+        const response = await fetch("/service/health");
+
+        if (!response.ok) {
+          throw new Error(`Server responded with status: ${response.status}`);
+        }
+
+        const data = await response.json();
+        setHealth(data);
+      } catch (err) {
+        setError(
+          err instanceof Error ? err.message : "Failed to check health status"
+        );
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    checkHealth();
+  }, []);
+
+  return (
+    <div className="health-status">
+      <h2>Backend Health Status</h2>
+      {loading ? (
+        <p>Checking backend status...</p>
+      ) : error ? (
+        <div className="error">
+          <p>Error: {error}</p>
+        </div>
+      ) : (
+        <div className="status">
+          <p>
+            Status:{" "}
+            <span
+              className={health.status === "ok" ? "status-ok" : "status-error"}
+            >
+              {health.status || "unknown"}
+            </span>
+          </p>
+        </div>
+      )}
+      <style jsx>{`
+        .health-status {
+          padding: 1rem;
+          border-radius: 0.5rem;
+          border: 1px solid #eaeaea;
+          margin-top: 1rem;
+        }
+        .status-ok {
+          color: green;
+          font-weight: bold;
+        }
+        .status-error {
+          color: red;
+          font-weight: bold;
+        }
+        .error {
+          color: red;
+        }
+      `}</style>
+    </div>
+  );
+}

frontend/src/app/layout.tsx

@@ -1,17 +1,6 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
-
 export const metadata: Metadata = {
   title: "Webapp Starter",
   description: "Created by FMC",

frontend/src/app/page.tsx

@@ -1,3 +1,21 @@
+"use client";
+import HealthStatus from "./components/HealthStatus";
+
 export default function Home() {
-  return <main>Hello, world!</main>;
+  return (
+    <main className="container">
+      <h1>Welcome to Starter App</h1>
+      <HealthStatus />
+      <style jsx>{`
+        .container {
+          max-width: 800px;
+          margin: 0 auto;
+          padding: 2rem;
+        }
+        h1 {
+          margin-bottom: 1rem;
+        }
+      `}</style>
+    </main>
+  );
 }