diff --git a/frontend/package.json b/frontend/package.json
index dc174c30839f1e6d296af56528d46243e98949b7..488d3d8b8497bfe6e406fbd8381a797302a7a69d 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -24,6 +24,7 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
+  "proxy": "http://localhost:8000",
   "eslintConfig": {
     "extends": [
       "react-app",
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index de30797dc93425e1ab53a7dd8a0614d2f04ac558..fa11d5dd8a4614aea3d08fa5dd325b0152ceafa9 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,10 +1,29 @@
-import React from "react";
+import React, { useState } from "react";
 import logo from "./logo.svg";
 import "./App.css";
 
 import { appTimezone, appVersion, appTheme } from "./appConfig";
 
 const App = () => {
+  const [apiHealth, setApiHealth] = useState("not yet");
+  const [didContactApi, setDidContactApi] = useState(false);
+  if (!didContactApi) {
+    setDidContactApi(true);
+    fetch("http://localhost:3000/api/health/")
+      .then((res) => res.text())
+      .then((result) => {
+        if (result === "OK") {
+          setApiHealth("yes");
+        } else {
+          setApiHealth(result);
+        }
+      })
+      .catch((error) => {
+        setApiHealth("error");
+        console.log(error);
+      });
+  }
+
   return (
     <div className="App">
       <header className="App-header">
@@ -27,6 +46,7 @@ const App = () => {
           <br />
           Theme {appTheme}
           <br />
+          API reachable? {apiHealth}
         </p>
       </header>
     </div>