feat(fastapi): call

src/App.tsx

@@ -1,10 +1,29 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import reactLogo from './assets/react.svg'
 import viteLogo from '/vite.svg'
+import fastapiLogo  from '/static/fastapi.svg';
 import './App.css'
 
 function App() {
-  const [count, setCount] = useState(0)
+  const [count, setCount] = useState(0);
+  const [health, setHealth] = useState('');
+
+  useEffect(() => {
+    const getStatus = async () => {
+      const response = await fetch('/v1/health-check/liveness', {
+        method: 'GET',
+      });
+      let status: { [status: string]: string } = {};
+      try {
+        status = await response.json();
+      } catch (err) {
+        console.log(err);
+      }
+      console.log(status);
+      setHealth(status['status'] || 'unknown');
+    };
+    getStatus();
+  }, []);
 
   return (
     <>
@@ -15,12 +34,16 @@ function App() {
         <a href="https://react.dev" target="_blank">
           <img src={reactLogo} className="logo react" alt="React logo" />
         </a>
+        <a href="https://fastapi.tiangolo.com/" target="_blank">
+          <img src={fastapiLogo} className="logo"/>
+        </a>
       </div>
-      <h1>Vite + React</h1>
+      <h1>Vite + React + FastAPI</h1>
       <div className="card">
         <button onClick={() => setCount((count) => count + 1)}>
           count is {count}
         </button>
+        <div>Backend Status: {health}</div>
         <p>
           Edit <code>src/App.tsx</code> and save to test HMR
         </p>