updated

openspec/changes/integrate-shadcn-library/.openspec.yaml

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

openspec/changes/integrate-shadcn-library/design.md

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

openspec/changes/integrate-shadcn-library/proposal.md

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

openspec/changes/integrate-shadcn-library/specs/shadcn-integration/spec.md

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

openspec/changes/integrate-shadcn-library/tasks.md

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