fix: Resolve frontend API connection issues in Docker

- Add setupProxy.js to proxy API calls to backend container
- Install http-proxy-middleware for development proxy support
- Update docker-compose.dev.yml to use backend service name
- Add HOST=0.0.0.0 to allow external connections to dev server
- Add empty favicon.ico to prevent 500 errors
- Update proxy configuration to use port 7510

This fixes the ERR_CONNECTION_REFUSED errors when the frontend
tries to connect to the backend API in Docker environment.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

docker-compose.dev.yml

@@ -41,7 +41,8 @@ services:
     restart: unless-stopped
     environment:
       PORT: 7511
-      REACT_APP_API_URL: http://localhost:7510/api
+      BACKEND_URL: http://backend:7510
+      DANGEROUSLY_DISABLE_HOST_CHECK: 'true'
     ports:
       - "7511:7511"
     volumes:

docker/Dockerfile.frontend.dev

@@ -18,5 +18,8 @@ COPY . .
 # Expose the development server port
 EXPOSE 7511
 
+# Set the host to allow external connections
+ENV HOST=0.0.0.0
+
 # Start the development server
 CMD ["npm", "start"]

frontend/package-lock.json

@@ -40,6 +40,7 @@
         "eslint-plugin-prettier": "^5.1.2",
         "eslint-plugin-react": "^7.33.2",
         "eslint-plugin-react-hooks": "^4.6.0",
+        "http-proxy-middleware": "^2.0.9",
         "prettier": "^3.1.1"
       }
     },

frontend/package.json

@@ -61,7 +61,8 @@
     "eslint-plugin-prettier": "^5.1.2",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "http-proxy-middleware": "^2.0.9",
     "prettier": "^3.1.1"
   },
-  "proxy": "http://localhost:3000"
+  "proxy": "http://localhost:7510"
-}
+}

frontend/src/setupProxy.js

@@ -0,0 +1,16 @@
+const { createProxyMiddleware } = require('http-proxy-middleware');
+
+module.exports = function(app) {
+  app.use(
+    '/api',
+    createProxyMiddleware({
+      target: process.env.BACKEND_URL || 'http://backend:7510',
+      changeOrigin: true,
+      logLevel: 'debug',
+      onError: (err, req, res) => {
+        console.error('Proxy Error:', err);
+        res.status(500).json({ error: 'Proxy Error', message: err.message });
+      }
+    })
+  );
+};