Prompts.txt

Prompts.txt

# 1 Prompt Generar Pagina/Board

Guide for implementing a Kanban board for interviews in React

Provide a detailed guide for a junior programmer to create a new page in React to display a Kanban board that visualizes the interview flow for a specific position. Use data obtained from a local API.

# Context

To implement this, follow these steps to guide you in creating a fully functional Kanban board page for visualizing interviews:

# Steps

1. **Set Up a New Route in the Application**
  - Implement a new route `/positions/:id` in the application, where `:id` represents the position’s identifier. Ensure the route is correctly set up to handle requests and that it's integrated into your application's existing routing structure.

2. **Fetch Data from the Server**
  - Construct an HTTP GET request to `http://localhost:3010/position/1/interviewFlow`. Use a library like Axios or the Fetch API to send this request and retrieve the interview flow data. Handle potential errors in the data fetching process to ensure robustness.

3. **Create a Kanban Board using React-Bootstrap**
  - Design a Kanban board displaying:
    - **Position Name:** Ensure it's prominently displayed (e.g., "Senior Full-Stack Engineer").
    - **Interview Stages Columns:** Dynamically generate columns for each interview stage such as "Initial Screening", "Technical Interview", and "Manager Interview".
    - **Moveable Cards:** Allow user interaction for dragging and dropping candidate cards between columns.

4. **Develop Core Components**
  - Split your application into reusable components:
    - **Main Page Component:** Responsible for fetching data and rendering sub-components.
    - **Kanban Board Component:** Encapsulates the logic and structure for the board layout.
    - **Column and Card Components:** Implement columns and cards individually, enabling easy modification and handling of state changes.

5. **Ensure Workflow Functionality**
  - When a user navigates to `/position/1`, ensure the page:
    - Loads and organizes data effectively for the Kanban view.
    - Displays candidate progress throughout the interview stages.

# Example API Response

Below is a sample API request and response for testing purposes:

- **API Request:**
 ```bash
 curl --location 'http://localhost:3010/position/1/interviewFlow'
 ```

- **API Response:**
 ```json
 {
     "interviewFlow": {
         "positionName": "Senior Full-Stack Engineer",
         "interviewFlow": {
             "id": 1,
             "description": "Standard development interview process",
             "interviewSteps": [
                 {
                     "id": 1,
                     "interviewFlowId": 1,
                     "interviewTypeId": 1,
                     "name": "Initial Screening",
                     "orderIndex": 1
                 },
                 {
                     "id": 2,
                     "interviewFlowId": 1,
                     "interviewTypeId": 2,
                     "name": "Technical Interview",
                     "orderIndex": 2
                 },
                 {
                     "id": 3,
                     "interviewFlowId": 1,
                     "interviewTypeId": 3,
                     "name": "Manager Interview",
                     "orderIndex": 3
                 }
             ]
         }
     }
 }
 ```

# Notes
- Use pnpm
- Ensure the application correctly handles asynchronous operations and user interactions for a smooth user experience.
- The application should gracefully handle any errors encountered during API communication and data rendering.
- For further optimization, consider using context or state management libraries if the application scales.

This comprehensive guide should aid in creating an effective Kanban board in React, covering setup, data fetching, component development, and workflow implementation.

----------------------

# 2 Prompt SideBar

DOM Path: div#root > div > div.kanban-board > div.kanban-lane[1] > div.kanban-card.-container > div.kanban-card[1]
Position: top=248px, left=356px, width=284px, height=79px
React Component: Draggable
HTML Element: <div data-rfd-draggable-context-id=":r1:" data-rfd-draggable-id="3-4" tabindex="0" role="button" aria-describedby="rfd-hidden-text-:r1:-hidden-text-:r3:" data-rfd-drag-handle-draggable-id="3-4" data-rfd-drag-handle-context-id=":r1:" draggable="false" class="kanban-card" data-cursor-element-id="cursor-el-19">Carlos García ● ● ● ● ●</div> Quiero que implementes un sidebar tipo drawer usando Bootstrap (react-bootstrap o Bootstrap + clases) para mostrar los detalles del candidato seleccionado desde el Kanban.

Objetivo

Cuando el usuario haga click en una tarjeta de candidato dentro del Kanban, debe abrirse un sidebar desde la derecha con la información completa del candidato. El sidebar debe poder abrirse/cerrarse y debe ser responsive:

Desktop (PC): ancho 40% de la pantalla.

Mobile: ancho 100% (pantalla completa).

Debe abrirse desde la derecha con overlay (fondo oscurecido) y permitir cerrar:

botón “X”

click en overlay

tecla Esc

Requisitos UI/UX

El sidebar debe estar “encima” del contenido (overlay).

Debe tener:

Header: Nombre del candidato + botón cerrar.

Body: sección con campos del candidato.

Footer opcional: acciones rápidas.

Datos a mostrar (mínimo)

En el sidebar, renderiza al menos:

fullName

currentInterviewStep

averageScore

id

applicationId

Si luego añadimos más campos desde API, el sidebar debe poder crecer sin romperse.

Comportamiento y estado

Mantén un estado tipo:

selectedCandidate: Candidate | null

isSidebarOpen: boolean

Al seleccionar candidato:

set selectedCandidate

set isSidebarOpen = true

Al cerrar:

isSidebarOpen = false

no borres selectedCandidate hasta que cierre (así se ve suave), pero puedes limpiarlo después del cierre si lo prefieres.

Implementación sugerida (Bootstrap)

Puedes hacerlo de dos maneras (elige 1):

Bootstrap Offcanvas (preferida)
Usa el componente Offcanvas para que sea nativo y accesible. Debe estar colocado en placement="end".

Modal custom + panel derecho
Si Offcanvas no encaja bien con el layout, crea un componente que use position: fixed; right: 0; top: 0; height: 100vh; y overlay.

Responsive (ancho exacto)

Asegura el ancho así:

Desktop: width: 40vw (o 40%)

Mobile: width: 100vw

Puedes lograrlo con CSS (ejemplo conceptual):

Base: width: 100vw

Desde md o lg: width: 40vw

Entregables

Un componente nuevo: CandidateDetailsSidebar.tsx

Integración en: PositionKanbanPage.tsx

Click en una card abre el sidebar con sus datos.

Debe funcionar en desktop y mobile como se describe.