Add centralized API configuration with localhost fallback

octofit-tracker/frontend/.env

@@ -1 +1,11 @@
-REACT_APP_CODESPACE_NAME=bug-free-goldfish-pqgxwp57wvc6q9q
+# API Configuration
+# Priority:
+# 1. REACT_APP_API_BASE_URL - Use this for explicit API URL (recommended)
+# 2. REACT_APP_CODESPACE_NAME - Used for GitHub Codespaces (auto-populated)
+# 3. If neither is set, defaults to http://localhost:8000
+
+# For local development (recommended):
+REACT_APP_API_BASE_URL=http://localhost:8000
+
+# For GitHub Codespaces (uncomment and set when in Codespaces):
+# REACT_APP_CODESPACE_NAME=bug-free-goldfish-pqgxwp57wvc6q9q

octofit-tracker/frontend/.env.example

@@ -1,3 +1,13 @@
+# API Configuration
+# Priority:
+# 1. REACT_APP_API_BASE_URL - Use this for explicit API URL (recommended)
+# 2. REACT_APP_CODESPACE_NAME - Used for GitHub Codespaces (auto-populated)
+# 3. If neither is set, defaults to http://localhost:8000
+
+# For local development:
+REACT_APP_API_BASE_URL=http://localhost:8000
+
+# For GitHub Codespaces (optional - usually auto-detected):
 # Set your Codespace name here for GitHub Codespaces deployment
 # You can get this from the CODESPACE_NAME environment variable in your terminal
 # 

octofit-tracker/frontend/FRONTEND_README.md

@@ -26,12 +26,12 @@ React-based frontend application for the OctoFit Tracker fitness tracking system
 
 2. Configure environment variables:
    ```bash
-   # Run the setup script to auto-configure
+   # Create .env file with recommended configuration
+   echo "REACT_APP_API_BASE_URL=http://localhost:8000" > .env
+
+   # Or run the setup script to auto-configure for Codespaces
    chmod +x setup.sh
    ./setup.sh
-
-   # Or manually create .env file
-   echo "REACT_APP_CODESPACE_NAME=${CODESPACE_NAME}" > .env
    ```
 
 3. Start the development server:
@@ -43,15 +43,54 @@ The app will be available at `http://localhost:3000` or your Codespace's forward
 
 ## Environment Variables
 
-- `REACT_APP_CODESPACE_NAME`: Your GitHub Codespace name (auto-populated in Codespaces)
+The application uses a centralized API configuration that supports multiple environments:
 
-## API Integration
+### Configuration Priority
+
+1. **REACT_APP_API_BASE_URL** (Recommended): Explicit API base URL
+   - Example: `http://localhost:8000`
+   - Best for local development and production deployments
+
+2. **REACT_APP_CODESPACE_NAME**: GitHub Codespaces auto-detection
+   - Automatically builds: `https://{name}-8000.app.github.dev`
+   - Legacy support for existing setups
+
+3. **Default Fallback**: `http://localhost:8000`
+   - Used when no environment variables are set
+   - Ensures the app works out-of-the-box locally
+
+### Configuration Examples
+
+**Local Development:**
+```bash
+REACT_APP_API_BASE_URL=http://localhost:8000
+```
+
+**GitHub Codespaces (legacy):**
+```bash
+REACT_APP_CODESPACE_NAME=your-codespace-name
+```
 
-The frontend connects to the Django REST API backend at:
+**Production:**
+```bash
+REACT_APP_API_BASE_URL=https://api.octofit.example.com
 ```
-https://${REACT_APP_CODESPACE_NAME}-8000.app.github.dev/api/
+
+## API Integration
+
+The frontend uses a centralized API configuration located in `src/config/api.js`. This ensures consistent API URL handling across all components.
+
+### API Configuration
+
+```javascript
+import { getApiUrl } from './config/api';
+
+// Use the helper function to build API URLs
+const apiUrl = getApiUrl('/api/users/');
 ```
 
+The API base URL is automatically determined based on your environment configuration (see Environment Variables section above).
+
 ### API Endpoints
 
 - `/api/users/` - User management
@@ -92,8 +131,11 @@ If you see CORS errors or connection failures:
 
 1. Ensure the Django backend is running on port 8000
 2. Check that CORS is properly configured in Django settings
-3. Verify the `REACT_APP_CODESPACE_NAME` environment variable is set correctly
-4. Check browser console for detailed error messages
+3. Verify your environment variables are set correctly:
+   - For local dev: `REACT_APP_API_BASE_URL=http://localhost:8000`
+   - For Codespaces: `REACT_APP_CODESPACE_NAME` should be set
+4. Check the browser console for the actual API URL being used
+5. Ensure the API base URL is accessible from your browser
 
 ### Component Data Not Loading
 

octofit-tracker/frontend/src/config/api.js

@@ -1,38 +1,52 @@
 /**
- * API Configuration for OctoFit Tracker
+ * API Configuration
  * 
- * Provides a single source of truth for the API base URL with automatic
- * environment detection and fallback to localhost for local development.
+ * Provides a centralized API base URL configuration that works in both
+ * local development and GitHub Codespaces environments.
  */
 
 /**
- * Get the API base URL based on the environment
- * @returns {string} The API base URL
+ * Gets the API base URL based on environment configuration.
+ * 
+ * Priority:
+ * 1. REACT_APP_API_BASE_URL - explicit API URL (e.g., "http://localhost:8000")
+ * 2. REACT_APP_CODESPACE_NAME - Codespaces environment (builds https://{name}-8000.app.github.dev)
+ * 3. Default - falls back to http://localhost:8000
+ * 
+ * @returns {string} The API base URL without trailing slash
  */
-export const getApiBaseUrl = () => {
-  // Check if REACT_APP_CODESPACE_NAME is set and not empty
-  const codespaceName = process.env.REACT_APP_CODESPACE_NAME;
+const getApiBaseUrl = () => {
+  // Check for explicit API base URL first
+  if (process.env.REACT_APP_API_BASE_URL) {
+    return process.env.REACT_APP_API_BASE_URL.replace(/\/$/, ''); // Remove trailing slash
+  }
 
-  if (codespaceName && codespaceName.trim() !== '') {
-    // Running in GitHub Codespaces
-    return `https://${codespaceName}-8000.app.github.dev`;
+  // Check if running in GitHub Codespaces
+  if (process.env.REACT_APP_CODESPACE_NAME) {
+    return `https://${process.env.REACT_APP_CODESPACE_NAME}-8000.app.github.dev`;
   }
 
-  // Fallback to localhost for local development
+  // Default to localhost for local development
   return 'http://localhost:8000';
 };
 
+export const API_BASE_URL = getApiBaseUrl();
+
 /**
- * Build a full API URL for a specific endpoint
- * @param {string} endpoint - The API endpoint path (e.g., '/api/users/')
- * @returns {string} The full API URL
+ * Constructs a full API endpoint URL.
+ * 
+ * @param {string} path - The API endpoint path (e.g., "/api/users/")
+ * @returns {string} The complete API URL
  */
-export const getApiUrl = (endpoint) => {
-  const baseUrl = getApiBaseUrl();
-  // Ensure endpoint starts with /
-  const normalizedEndpoint = endpoint.startsWith('/') ? endpoint : `/${endpoint}`;
-  return `${baseUrl}${normalizedEndpoint}`;
+export const getApiUrl = (path) => {
+  // Ensure path starts with /
+  const normalizedPath = path.startsWith('/') ? path : `/${path}`;
+  return `${API_BASE_URL}${normalizedPath}`;
 };
 
-// Export the base URL as a constant for convenience
-export const API_BASE_URL = getApiBaseUrl();
+const apiConfig = {
+  API_BASE_URL,
+  getApiUrl,
+};
+
+export default apiConfig;