docker-service-discovery/openspec/changes/archive/2026-03-27-docker-service-display/tasks.md

1. Backend Setup

• 1.1 Initialize a new Node.js project for the backend.
• 1.2 Add dependencies: express, dockerode, and cors.
• 1.3 Create a basic Express server.
• 1.4 Configure the server to listen on a specific port.

2. Docker Service Discovery

• 2.1 Implement a function to connect to the Docker socket using dockerode.
• 2.2 Create a function to list all running containers.
• 2.3 Filter the list of containers to include only those with exposed ports.
• 2.4 Implement logic to identify Traefik services and extract their URLs from container labels.
• 2.5 Create a REST API endpoint (/api/services) that returns the list of discovered services.
• 2.6 Implement real-time updates using Docker events to watch for container start and stop events.

3. Frontend Setup

• 3.1 Initialize a new React project for the frontend.
• 3.2 Add dependencies: axios for making API requests.
• 3.3 Create a basic layout for the application.

4. Frontend Implementation

• 4.1 Create a function to fetch the list of services from the backend API.
• 4.2 Create a ServiceCard component to display the information for a single service.
• 4.3 Implement the main view to display a grid of ServiceCard components.
• 4.4 Implement real-time updates on the frontend, either through polling or a WebSocket connection.

5. Dockerization

• 5.1 Create a Dockerfile for the backend service.
• 5.2 Create a Dockerfile for the frontend service.
• 5.3 Create a docker-compose.yml file to run both services together.