Fix React dev server issue: Add CRACO configuration to resolve webpack allowedHosts error

frontend/craco.config.js

@@ -0,0 +1,22 @@
+module.exports = {
+  webpack: {
+    configure: (webpackConfig) => {
+      // Fix for webpack dev server allowedHosts issue
+      if (webpackConfig.devServer) {
+        webpackConfig.devServer.allowedHosts = 'all';
+      }
+      return webpackConfig;
+    },
+  },
+  devServer: {
+    allowedHosts: 'all',
+    host: 'localhost',
+    port: 3000,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:5000',
+        changeOrigin: true,
+      },
+    },
+  },
+}; 

frontend/package.json

@@ -13,16 +13,16 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.20.1",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
     "react-hot-toast": "^2.4.1",
     "react-hook-form": "^7.48.2",
     "react-query": "^3.39.3",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
+    "start": "craco start",
+    "build": "craco build",
+    "test": "craco test",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
@@ -44,6 +44,7 @@
     ]
   },
   "devDependencies": {
+    "@craco/craco": "^7.1.0",
     "autoprefixer": "^10.4.16",
     "postcss": "^8.4.32",
     "tailwindcss": "^3.3.6"