add env var

README.md

@@ -39,6 +39,22 @@ To run this application, you need to have the following installed:
     -   **Frontend**: Open your web browser and navigate to `http://localhost:3000`.
     -   **Backend API**: The backend API is available at `http://localhost:3001/api/services`.
 
+## Configuration
+
+The application can be configured using environment variables.
+
+### Frontend
+
+-   `REACT_APP_BACKEND_URL`: The URL of the backend API. This is passed to the React application during the build process. If not set, the frontend will default to `http://localhost:3001`.
+
+    To set this variable when running with Docker Compose, you can create a `.env` file in the root of the project with the following content:
+
+    ```
+    REACT_APP_BACKEND_URL=http://your-backend-url:3001
+    ```
+
+    Then run `docker compose up --build`.
+
 ## Accessing Services
 
 -   The frontend will display cards for each discovered Docker service.

docker-compose.yml

@@ -8,7 +8,13 @@ services:
     volumes:
       - /var/run/docker.sock:/var/run/docker.sock
   frontend:
-    build: ./frontend
+    build:
+      context: ./frontend
+      args:
+        # The URL of the backend API.
+        # This is passed to the React application during the build process.
+        # If not set, the frontend will default to http://localhost:3001 in the frontend code.
+        - REACT_APP_BACKEND_URL
     ports:
       - "3000:3000"
     depends_on:

frontend/Dockerfile

@@ -4,6 +4,11 @@ FROM node:18-alpine as builder
 # Set the working directory in the container
 WORKDIR /usr/src/app
 
+# Define the build-time argument
+ARG REACT_APP_BACKEND_URL
+# Set the environment variable for the build process
+ENV REACT_APP_BACKEND_URL=$REACT_APP_BACKEND_URL
+
 # Copy package.json and package-lock.json to the working directory
 COPY package*.json ./
 

frontend/src/api.js

@@ -1,6 +1,7 @@
 import axios from 'axios';
 
-const API_URL = 'http://localhost:3001/api';
+const BACKEND_URL = process.env.REACT_APP_BACKEND_URL || 'http://localhost:3001';
+const API_URL = `${BACKEND_URL}/api`;
 
 export async function getServices() {
   const response = await axios.get(`${API_URL}/services`);

openspec/changes/archive/2026-03-31-backend-url-env-var/.openspec.yaml

@@ -0,0 +1,2 @@
+schema: spec-driven
+created: 2026-03-31

openspec/changes/archive/2026-03-31-backend-url-env-var/design.md

@@ -0,0 +1,25 @@
+## Context
+
+As outlined in the proposal, the frontend application's backend URL is hardcoded. This design details the technical approach to make this configurable, improving deployment flexibility across different environments.
+
+## Goals / Non-Goals
+
+**Goals:**
+- To allow the backend URL for the frontend application to be set via an environment variable named `REACT_APP_BACKEND_URL`.
+- To update the Docker configuration to support passing this environment variable at runtime.
+- To ensure the application remains runnable locally with a sensible default, requiring no extra setup for local development.
+
+**Non-Goals:**
+- This change will not address dynamic configuration updates at runtime. A restart of the frontend application will be needed for a new URL to take effect.
+- This will not involve any changes to the backend service itself.
+
+## Decisions
+
+- **Environment Variable Name**: We will use `REACT_APP_BACKEND_URL`. Create React App's build process automatically embeds environment variables prefixed with `REACT_APP_` into the application, making them accessible via `process.env.REACT_APP_BACKEND_URL`. This is the standard and simplest method for this stack.
+- **Default Value**: In the frontend JavaScript code, we will implement a fallback to `http://localhost:3001` if the `REACT_APP_BACKEND_URL` environment variable is not set. This ensures that running `npm start` locally continues to work out-of-the-box.
+- **Docker Configuration**: The `docker-compose.yml` file will be modified to accept the `REACT_APP_BACKEND_URL` environment variable and pass it to the `frontend` service. This allows operators to configure the backend URL when running `docker-compose up`.
+
+## Risks / Trade-offs
+
+- **Risk**: If the `REACT_APP_BACKEND_URL` is not set in a production environment, the frontend will default to `http://localhost:3001`, which will fail.
+  - **Mitigation**: Deployment documentation and CI/CD scripts must be updated to explicitly require and validate the presence of the `REACT_APP_BACKEND_URL` variable for all non-local environments.

openspec/changes/archive/2026-03-31-backend-url-env-var/proposal.md

@@ -0,0 +1,22 @@
+## Why
+
+The backend URL is currently hardcoded in the frontend application, which makes it inflexible for different environments. Configuring it via environment variables will allow for seamless switching between development, staging, and production endpoints without code changes.
+
+## What Changes
+
+- The frontend application will be modified to read the backend API URL from an environment variable.
+- A sensible default will be provided for local development.
+- The Docker setup will be updated to allow passing the environment variable during container startup.
+
+## Capabilities
+
+### New Capabilities
+- `configurable-backend-url`: Enables the backend URL to be set dynamically via an environment variable.
+
+### Modified Capabilities
+- None
+
+## Impact
+
+- Frontend application code (where API calls are made).
+- Frontend Dockerfile and docker-compose.yml to manage the new environment variable.

openspec/changes/archive/2026-03-31-backend-url-env-var/specs/configurable-backend-url/spec.md

@@ -0,0 +1,12 @@
+## ADDED Requirements
+
+### Requirement: Backend URL is configured via environment variable
+The frontend application SHALL use the URL defined in the `REACT_APP_BACKEND_URL` environment variable to make API calls to the backend.
+
+#### Scenario: Environment variable is set
+- **WHEN** the `REACT_APP_BACKEND_URL` environment variable is set to "http://api.example.com"
+- **THEN** the application SHALL make API calls to "http://api.example.com".
+
+#### Scenario: Environment variable is not set
+- **WHEN** the `REACT_APP_BACKEND_URL` environment variable is not set
+- **THEN** the application SHALL make API calls to "http://localhost:3001".

openspec/changes/archive/2026-03-31-backend-url-env-var/tasks.md

@@ -0,0 +1,14 @@
+## 1. Frontend Application Changes
+
+- [x] 1.1 In `frontend/src/api.js`, modify the logic to use `process.env.REACT_APP_BACKEND_URL` for the API base URL.
+- [x] 1.2 Implement a fallback to `http://localhost:3001` in the same file for when the environment variable is not set.
+
+## 2. Docker Configuration
+
+- [x] 2.1 In `docker-compose.yml`, update the `frontend` service definition to pass the `REACT_APP_BACKEND_URL` environment variable.
+- [x] 2.2 Add comments to `docker-compose.yml` to clarify the purpose and usage of the new environment variable.
+- [x] 2.3 In `frontend/Dockerfile`, add `ARG` and `ENV` to pass the `REACT_APP_BACKEND_URL` to the build process.
+
+## 3. Documentation
+
+- [x] 3.1 Update the main `README.md` to document the new `REACT_APP_BACKEND_URL` environment variable, explaining its purpose and how to use it.

openspec/specs/shadcn-integration/spec.md

@@ -0,0 +1,20 @@
+# shadcn-integration Specification
+
+## Purpose
+TBD - created by archiving change integrate-shadcn-library. Update Purpose after archive.
+## Requirements
+### Requirement: Shadcn/ui Integration
+The system SHALL be integrated with the `shadcn/ui` component library.
+
+#### Scenario: Component Replacement
+- **WHEN** the application is rendered
+- **THEN** the `Dropdown` and `FilterBox` components SHALL be replaced with their `shadcn/ui` equivalents.
+- **THEN** the visual appearance of the components SHALL be consistent with the `shadcn/ui` design system.
+
+### Requirement: Consistent UI
+All new frontend components SHALL be built using `shadcn/ui`.
+
+#### Scenario: New Component Development
+- **WHEN** a new component is developed
+- **THEN** it SHALL be built using components from the `shadcn/ui` library.
+