add env var

This commit is contained in:
2026-03-31 20:37:12 +02:00
parent 551b5a2658
commit 0b379d1331
15 changed files with 125 additions and 2 deletions

View File

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

View File

@@ -0,0 +1,25 @@
## Context
The frontend is currently built with custom React components and CSS. This has led to a fragmented and inconsistent user interface. The goal is to standardize the UI by adopting `shadcn/ui`.
## Goals / Non-Goals
**Goals:**
- Successfully integrate `shadcn/ui` into the Create React App project.
- Replace the `Dropdown` and `FilterBox` components with `shadcn/ui` components.
- Establish a pattern for using `shadcn/ui` for all future components.
**Non-Goals:**
- We will not be ejecting from Create React App. We will work within its constraints.
- We will not build a complete design system, but rather use `shadcn/ui` as our component foundation.
## Decisions
- **Installation:** We will follow the official `shadcn/ui` documentation for installation, which involves using `npx`.
- **Component Replacement:** We will replace components one by one, starting with `Dropdown` and `FilterBox`.
- **Styling:** `shadcn/ui` uses Tailwind CSS. We will need to install and configure Tailwind CSS in our project.
## Risks / Trade-offs
- **[Risk]** Integrating Tailwind CSS into a Create React App project can be complex. → **Mitigation:** We will follow the official guides for both Tailwind CSS and Create React App.
- **[Trade-off]** `shadcn/ui` is a relatively new library. → **Mitigation:** It has a strong and growing community, and it is backed by Vercel.

View File

@@ -0,0 +1,23 @@
## Why
The current frontend components lack a consistent and modern design. Manually styling components is time-consuming and leads to inconsistencies. Adopting a component library like `shadcn/ui` will provide a professional look and feel, and speed up development.
## What Changes
- Integrate the `shadcn/ui` library into the frontend application.
- Replace existing custom components (like `Dropdown` and `FilterBox`) with their `shadcn/ui` equivalents.
- All new frontend components will be built using `shadcn/ui`.
## Capabilities
### New Capabilities
- `shadcn-integration`: Integrate the `shadcn/ui` library and replace existing components.
### Modified Capabilities
- None
## Impact
- This will be a significant change to the frontend codebase.
- All existing components will be refactored or replaced.
- This will introduce a new dependency on the `shadcn/ui` library.

View File

@@ -0,0 +1,16 @@
## ADDED 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.

View File

@@ -0,0 +1,14 @@
## 1. Setup Environment
- [x] 1.1 Install Tailwind CSS and its dependencies.
- [x] 1.2 Configure Tailwind CSS in the project.
- [x] 1.3 Initialize `shadcn/ui` in the project.
## 2. Replace Components
- [x] 2.1 Replace the `Dropdown` component with the `shadcn/ui` `Select` component.
- [x] 2.2 Replace the `FilterBox` component with a combination of `shadcn/ui` components (e.g., `DropdownMenu` with `Checkbox`).
## 3. Verification
- [x] 3.1 Manually test the new components in the browser.

View File

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

View File

@@ -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.

View File

@@ -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.

View File

@@ -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".

View File

@@ -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.