fix: dynamic backend address based on frontend address

README.md

@@ -171,3 +171,9 @@ docker exec -it stamp-frontend /bin/sh
 curl -v http://backend:8000/
 exit
 ```
+
+6. Use the network testing script:
+```bash
+./scripts/test-network.sh
+```
+This script will automatically detect your LAN IP and test both local and network connectivity.

docker-compose.yml

@@ -26,7 +26,6 @@ services:
     ports:
       - "4000:4000"
     environment:
-      - REACT_APP_API_URL=http://localhost:8000
       - CHOKIDAR_USEPOLLING=true
       - WDS_SOCKET_PORT=0
       - CI=true

frontend/src/App.js

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import Home from './components/Home';
 import Quiz from './components/Quiz';
 import axios from 'axios';
+import getApiUrl from './utils/apiConfig';
 
 function App() {
     const [sessionId, setSessionId] = useState('');
@@ -93,7 +94,8 @@ function App() {
 
     const handleRetryQuiz = async () => {
         try {
-            await axios.post('http://backend:8000/reset-session/', {
+            const apiUrl = getApiUrl();
+            await axios.post(`${apiUrl}/reset-session/`, {
                 session_id: sessionId,
             });
             setIsTransitioning(true);

frontend/src/components/Home.js

@@ -1,8 +1,9 @@
 import React, { useState, useEffect } from 'react';
 import axios from 'axios';
+import getApiUrl from '../utils/apiConfig';
 
 const Home = ({ setSessionId, setQuizStarted }) => {
-  const API_URL = process.env.REACT_APP_API_URL || 'http://localhost:8000';
+  const API_URL = getApiUrl();
 
   // File state
   const [files, setFiles] = useState([]);
@@ -31,7 +32,9 @@ const Home = ({ setSessionId, setQuizStarted }) => {
 
     formData.append('settings', JSON.stringify(quizSettings));
     
-    console.log('API URL:', API_URL);
+    console.log('Frontend URL:', window.location.href);
+    console.log('Frontend Host:', window.location.hostname);
+    console.log('Detected API URL:', API_URL);
     console.log('Uploading files:', files.map(f => f.name));
     console.log('Quiz settings:', quizSettings);
 

frontend/src/components/Quiz.js

@@ -1,8 +1,9 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import axios from 'axios';
+import getApiUrl from '../utils/apiConfig';
 
 const Quiz = ({ sessionId, onGoHome, onRetry }) => {
-    const API_URL = process.env.REACT_APP_API_URL;
+    const API_URL = getApiUrl();
     
     // Quiz state
     const [questionData, setQuestionData] = useState(null);

frontend/src/utils/apiConfig.js

@@ -0,0 +1,18 @@
+// Dynamically determine API URL based on how the frontend is accessed
+const getApiUrl = () => {
+  if (process.env.REACT_APP_API_URL) {
+    return process.env.REACT_APP_API_URL;
+  }
+
+  const currentHost = window.location.hostname;
+  const apiPort = '8000';
+
+  if (currentHost === 'localhost' || currentHost === '127.0.0.1') {
+    return `http://localhost:${apiPort}`;
+  }
+
+  // Use same host for LAN/network access
+  return `http://${currentHost}:${apiPort}`;
+};
+
+export default getApiUrl;

scripts/test-network.sh

@@ -0,0 +1,39 @@
+#!/bin/bash
+
+# Get the LAN IP address
+LAN_IP=$(ifconfig | grep -E "inet.*broadcast" | awk '{print $2}' | head -1)
+
+echo "=== Stamp Network Configuration Test ==="
+echo "Your MacBook's LAN IP: $LAN_IP"
+echo ""
+echo "Access URLs:"
+echo "  Local access:  http://localhost:4000"
+echo "  LAN access:    http://$LAN_IP:4000"
+echo ""
+echo "Backend API URLs (auto-detected by frontend):"
+echo "  From localhost: http://localhost:8000"
+echo "  From LAN:       http://$LAN_IP:8000"
+echo ""
+echo "Testing API endpoints..."
+
+# Test local backend
+echo -n "Testing localhost backend... "
+if curl -s http://localhost:8000/ > /dev/null; then
+    echo "✅ OK"
+else
+    echo "❌ Failed"
+fi
+
+# Test LAN backend
+echo -n "Testing LAN backend... "
+if curl -s http://$LAN_IP:8000/ > /dev/null; then
+    echo "✅ OK"
+else
+    echo "❌ Failed"
+fi
+
+echo ""
+echo "To test from other devices:"
+echo "1. Make sure your device is on the same network"
+echo "2. Open http://$LAN_IP:4000 in a browser"
+echo "3. The frontend will automatically use http://$LAN_IP:8000 for API calls"