working in docker

frontend/package-lock.json

@@ -13,10 +13,13 @@
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
+        "autoprefixer": "^10.4.20",
         "axios": "^1.7.7",
+        "postcss": "^8.4.47",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-scripts": "^5.0.1",
+        "tailwindcss": "^3.4.13",
         "web-vitals": "^2.1.4"
       }
     },

frontend/package.json

@@ -8,10 +8,13 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "autoprefixer": "^10.4.20",
     "axios": "^1.7.7",
+    "postcss": "^8.4.47",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-scripts": "^5.0.1",
+    "tailwindcss": "^3.4.13",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

frontend/src/App.js

@@ -14,20 +14,24 @@ import {
 
 function App() {
 
-    const [statements, setStatements] = useState([]);
-
-  // function to fetch all statements from BE
-  useEffect(() => {
-    axios
-      .get("http://localhost:7860/data")
-      .then((response) => {
-        setStatements(response.data);
-      })
-      .catch((error) => {
-        console.log("There was an error retrieving the statement list: ", error);
-      });
-  }, []);
-
+    const [statements, setStatements] = useState([
+	"Empty statements"
+    ]);
+    
+    // function to fetch all statements from BE
+    useEffect(() => {
+	axios
+	    .get("/data")
+	    .then((response) => {
+		console.log("Got data ", response.data);
+		setStatements(JSON.stringify(response.data));
+	    })
+	    .catch((error) => {
+		console.log("There was an error retrieving the statement list: ", error);
+		setStatements(JSON.stringify(error));
+	    });
+    }, []);
+    
   return (
     <div className="App">
       <header className="App-header">