Reworked variable system, no longer hardcoded

frontend/.env.example

@@ -0,0 +1,18 @@
+# API Configuration
+# Base URL for API requests (relative path used in production)
+VITE_API_BASE_URL=/api
+
+# Backend API URL (used for development proxy)
+VITE_API_URL=http://localhost:8000
+
+# Development Configuration
+# Port for Vite development server
+VITE_DEV_PORT=5173
+
+# Application Configuration
+# Application version displayed in UI
+VITE_APP_VERSION=0.1.5
+
+# UI/UX Configuration
+# Search input debounce delay in milliseconds
+VITE_SEARCH_DEBOUNCE_MS=300

frontend/src/App.jsx

@@ -13,7 +13,7 @@ function App() {
               <h1 className="text-2xl font-bold text-cyber-orange">
                 TESSERACT
                 <span className="ml-3 text-sm text-gray-500">Task Decomposition Engine</span>
-                <span className="ml-2 text-xs text-gray-600">v0.1.5</span>
+                <span className="ml-2 text-xs text-gray-600">v{import.meta.env.VITE_APP_VERSION || '0.1.5'}</span>
               </h1>
             </div>
             <SearchBar />

frontend/src/components/SearchBar.jsx

@@ -84,9 +84,10 @@ function SearchBar() {
       return
     }
 
+    const debounceMs = parseInt(import.meta.env.VITE_SEARCH_DEBOUNCE_MS || '300')
     const timeoutId = setTimeout(() => {
       handleSearch(query)
-    }, 300)
+    }, debounceMs)
 
     return () => clearTimeout(timeoutId)
   }, [query, selectedProjects])

frontend/src/utils/api.js

@@ -1,4 +1,4 @@
-const API_BASE = '/api';
+const API_BASE = import.meta.env.VITE_API_BASE_URL || '/api';
 
 async function fetchAPI(endpoint, options = {}) {
   const response = await fetch(`${API_BASE}${endpoint}`, {

frontend/vite.config.js

@@ -1,15 +1,19 @@
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
 import react from '@vitejs/plugin-react'
 
-export default defineConfig({
-  plugins: [react()],
-  server: {
-    host: '0.0.0.0',
-    port: 5173,
-    proxy: {
-      '/api': {
-        target: 'http://localhost:8000',
-        changeOrigin: true,
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd(), '')
+
+  return {
+    plugins: [react()],
+    server: {
+      host: '0.0.0.0',
+      port: parseInt(env.VITE_DEV_PORT || '5173'),
+      proxy: {
+        '/api': {
+          target: env.VITE_API_URL || 'http://localhost:8000',
+          changeOrigin: true,
+        }
       }
     }
   }