Add a docker build step.

frontend/app/services/api.test.ts

@@ -52,9 +52,12 @@ describe('API Client', () => {
 
       const result = await apiClient.listTasks()
 
-      expect(mockFetch).toHaveBeenCalledWith('/api/tasks', {
-        headers: { 'Content-Type': 'application/json' },
-      })
+      expect(mockFetch).toHaveBeenCalledWith(
+        'http://localhost:3000/api/tasks',
+        {
+          headers: { 'Content-Type': 'application/json' },
+        }
+      )
       expect(result).toEqual(mockTasks)
     })
 
@@ -94,9 +97,12 @@ describe('API Client', () => {
 
       const result = await apiClient.getTask(mockTask.id)
 
-      expect(mockFetch).toHaveBeenCalledWith(`/api/tasks/${mockTask.id}`, {
-        headers: { 'Content-Type': 'application/json' },
-      })
+      expect(mockFetch).toHaveBeenCalledWith(
+        `http://localhost:3000/api/tasks/${mockTask.id}`,
+        {
+          headers: { 'Content-Type': 'application/json' },
+        }
+      )
       expect(result).toEqual(mockTask)
     })
 
@@ -130,11 +136,14 @@ describe('API Client', () => {
 
       const result = await apiClient.createTask(newTaskData)
 
-      expect(mockFetch).toHaveBeenCalledWith('/api/tasks', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(newTaskData),
-      })
+      expect(mockFetch).toHaveBeenCalledWith(
+        'http://localhost:3000/api/tasks',
+        {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(newTaskData),
+        }
+      )
       expect(result).toEqual(mockTask)
     })
 
@@ -174,11 +183,14 @@ describe('API Client', () => {
 
       const result = await apiClient.updateTask(mockTask.id, updateData)
 
-      expect(mockFetch).toHaveBeenCalledWith(`/api/tasks/${mockTask.id}`, {
-        method: 'PUT',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(updateData),
-      })
+      expect(mockFetch).toHaveBeenCalledWith(
+        `http://localhost:3000/api/tasks/${mockTask.id}`,
+        {
+          method: 'PUT',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(updateData),
+        }
+      )
       expect(result).toEqual(updatedTask)
     })
 
@@ -211,10 +223,13 @@ describe('API Client', () => {
       const result = await apiClient.deleteTask(mockTask.id)
       expect(result).toBeNull()
 
-      expect(mockFetch).toHaveBeenCalledWith(`/api/tasks/${mockTask.id}`, {
-        method: 'DELETE',
-        headers: { 'Content-Type': 'application/json' },
-      })
+      expect(mockFetch).toHaveBeenCalledWith(
+        `http://localhost:3000/api/tasks/${mockTask.id}`,
+        {
+          method: 'DELETE',
+          headers: { 'Content-Type': 'application/json' },
+        }
+      )
     })
 
     it('should handle delete errors', async () => {

frontend/app/services/api.ts

@@ -6,7 +6,7 @@ import type {
   ApiError,
 } from '~/types/task'
 
-const API_BASE_URL = '/api'
+const API_BASE_URL = `${import.meta.env.VITE_API_URL || 'http://localhost:3000'}/api`
 
 class ApiClient {
   private async fetchWrapper<T>(

frontend/package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "build": "react-router build",
     "dev": "react-router dev",
-    "start": "react-router-serve ./build/server/index.js",
+    "start": "PORT=5173 react-router-serve ./build/server/index.js",
     "test": "vitest",
     "test:coverage": "vitest --coverage",
     "test:run": "vitest run",

frontend/vite.config.ts

@@ -7,7 +7,7 @@ export default defineConfig({
   server: {
     proxy: {
       "/api": {
-        target: "http://localhost:3000",
+        target: process.env.VITE_API_URL || "http://127.0.0.1:3000",
         changeOrigin: true,
       },
     },