C3 frontend

C3 — Reto Tecnico: Desarrollo Frontend#

Cargo: Desarrollo Frontend Tipo de reto: Desarrollo de producto Stack: React, Next.js, TypeScript, TailwindCSS Producto: MetricsDash — Dashboard de metricas en tiempo real Metodologia de evaluacion: Ver 00-metodologia-evaluacion.md

1. Vision del Producto#

Producto: MetricsDash — Un dashboard interactivo de metricas y KPIs con widgets configurables, graficos en tiempo real, y capacidad de crear vistas personalizadas.

Problema que resuelve: Equipos de producto necesitan visualizar metricas de diferentes fuentes en un solo lugar, con la posibilidad de personalizar los dashboards y compartirlos con otros miembros.

Usuarios objetivo: Product managers, analistas de datos, equipos de operaciones.

No hay backend que construir. Se proporciona una API mockeada (json-server, MSW, o endpoint publico) con datos de metricas. El reto es 100% frontend: consumo de API, visualizacion, interaccion, performance y UX.

1.1 API Proporcionada#

El candidato recibe un archivo api-mock.json y un script para levantar el mock server:

bash
npx json-server --watch api-mock.json --port 4000

Endpoints disponibles:

GET /metrics                  → Lista de metricas disponibles (id, name, unit, category)
GET /metrics/:id/data         → Serie temporal (timestamp, value) con filtros ?from=&to=&interval=
GET /metrics/:id/summary      → Resumen: current, previous, change%, trend (up/down/stable)
GET /dashboards               → Dashboards guardados por el usuario
POST /dashboards              → Crear dashboard
PATCH /dashboards/:id         → Editar dashboard (nombre, layout)
DELETE /dashboards/:id        → Eliminar dashboard
GET /alerts                   → Alertas activas (metric, threshold, status)
POST /alerts                  → Crear alerta
WS  ws://localhost:4000/live  → WebSocket que emite valores nuevos cada 5 segundos

El mock server y los datos se entregan al candidato junto con este documento.

2. Historias de Usuario — Backlog Priorizado#

H01 — Pantalla de metricas#

Prioridad: Critica | Nivel minimo: N1 | Estimacion: 3 pts

Como usuario, quiero ver una lista de todas mis metricas disponibles para tener una vision general.

Criterios de aceptacion:

• AC-01: Pagina principal muestra grid de cards con cada metrica: nombre, valor actual, cambio % respecto al periodo anterior, icono de tendencia (flecha arriba/abajo)
• AC-02: Las cards tienen color segun tendencia: verde si sube (y eso es bueno), rojo si baja, gris si estable
• AC-03: Click en una card navega al detalle de esa metrica
• AC-04: Skeleton loaders mientras cargan los datos (no pantalla en blanco)
• AC-05: Responsive: grid de 4 columnas en desktop (1440px), 2 en tablet (768px), 1 en mobile (375px)

Definition of Done: Pantalla carga, muestra 10+ metricas, responsive verificado en 3 breakpoints.

H02 — Grafico de detalle de metrica#

Prioridad: Critica | Nivel minimo: N1 | Estimacion: 3 pts

Como usuario, quiero ver la evolucion de una metrica en un grafico interactivo.

Criterios de aceptacion:

• AC-01: Pagina de detalle muestra grafico de linea con la serie temporal de la metrica
• AC-02: Selector de rango: Ultima hora, Ultimas 24h, Ultima semana, Ultimo mes, Custom (date picker)
• AC-03: Hover sobre el grafico muestra tooltip con: fecha/hora exacta, valor, unidad
• AC-04: Grafico responsive: se adapta al ancho del contenedor sin distorsion
• AC-05: Animacion suave al cambiar de rango (transicion, no salto brusco)

Libreria sugerida: Recharts, Chart.js con react-chartjs-2, Nivo, o Tremor.

Definition of Done: Grafico renderiza correctamente. Cambiar rango actualiza los datos. Tooltip funciona.

H03 — Filtros y busqueda#

Prioridad: Critica | Nivel minimo: N1 | Estimacion: 2 pts

Como usuario, quiero buscar y filtrar metricas para encontrar rapidamente la que necesito.

Criterios de aceptacion:

• AC-01: Barra de busqueda en la pagina principal: busqueda por nombre (parcial, case-insensitive, debounce 300ms)
• AC-02: Filtro por categoria (dropdown o chips): "Performance", "Business", "Infrastructure", "Custom"
• AC-03: Filtros combinables: busqueda + categoria
• AC-04: Si no hay resultados, mostrar estado vacio con mensaje e ilustracion
• AC-05: Los filtros se reflejan en la URL (query params) para poder compartir la vista filtrada

Definition of Done: Busqueda filtra en tiempo real. URL refleja filtros. Estado vacio se muestra correctamente.

H04 — Layout de dashboard personalizable#

Prioridad: Critica | Nivel minimo: N1 | Estimacion: 5 pts

Como usuario, quiero crear mi propio dashboard arrastrando widgets para organizarlos como yo quiera.

Criterios de aceptacion:

• AC-01: Boton "Crear Dashboard" abre modal pidiendo nombre y descripcion
• AC-02: El dashboard es un grid donde puedo agregar widgets desde un panel lateral
• AC-03: Widgets disponibles: Numero (KPI card), Grafico linea, Grafico barras, Grafico pie, Tabla
• AC-04: Cada widget se configura: seleccionar metrica, rango temporal, titulo custom
• AC-05: Al agregar un widget, aparece en el dashboard y muestra datos reales de la API

Definition of Done: Puedo crear un dashboard, agregar 4 widgets diferentes, y ver datos reales en cada uno.

H05 — Drag and drop de widgets#

Prioridad: Alta | Nivel minimo: N2 | Estimacion: 5 pts

Como usuario, quiero mover y redimensionar widgets en mi dashboard para personalizarlo.

Criterios de aceptacion:

• AC-01: Drag and drop para mover widgets dentro del grid (cambiar posicion)
• AC-02: Resize: arrastrar esquina del widget para hacerlo mas grande o pequeno (2x1, 1x1, 2x2, etc.)
• AC-03: El layout se guarda automaticamente (debounce 1s despues del ultimo cambio)
• AC-04: Animacion fluida durante drag (feedback visual: sombra, placeholder en destino)
• AC-05: Funciona en desktop (mouse) y tablet (touch)
• AC-06: Modo "edicion" vs modo "visualizacion": en visualizacion los widgets no se mueven

Libreria sugerida: react-grid-layout, dnd-kit, o @hello-pangea/dnd.

Definition of Done: Puedo mover y redimensionar widgets. Layout persiste al refrescar.

H06 — Datos en tiempo real (WebSocket)#

Prioridad: Alta | Nivel minimo: N2 | Estimacion: 3 pts

Como usuario, quiero ver las metricas actualizarse en tiempo real sin refrescar la pagina.

Criterios de aceptacion:

• AC-01: Conexion WebSocket a ws://localhost:4000/live al entrar al dashboard
• AC-02: Cuando llega un nuevo valor, el widget correspondiente se actualiza con animacion (flash o pulse)
• AC-03: El grafico de linea agrega el nuevo punto y se desplaza suavemente (no se redibuja completo)
• AC-04: Indicador visual de "conexion activa" (punto verde) o "desconectado" (punto rojo)
• AC-05: Reconexion automatica con backoff exponencial si se pierde la conexion
• AC-06: Fallback a polling cada 10s si WebSocket no esta disponible

Definition of Done: Dashboard con 3 widgets actualizandose en tiempo real. Indicador de conexion visible.

H07 — Temas y preferencias#

Prioridad: Alta | Nivel minimo: N2 | Estimacion: 2 pts

Como usuario, quiero cambiar entre tema claro y oscuro y que se recuerde mi preferencia.

Criterios de aceptacion:

• AC-01: Toggle de tema en el header: Light / Dark / System
• AC-02: Dark mode: todos los componentes, graficos, cards, modal se ven correctamente (no solo fondo negro)
• AC-03: Los graficos ajustan colores: ejes, labels, gridlines, tooltips visibles en ambos temas
• AC-04: Preferencia guardada en localStorage y respetada al recargar
• AC-05: Si elige "System", sigue la preferencia del OS (prefers-color-scheme)

Definition of Done: Toggle funciona. Dark mode se ve correcto en toda la app. Preferencia persiste.

H08 — Alertas visuales#

Prioridad: Alta | Nivel minimo: N2 | Estimacion: 3 pts

Como usuario, quiero configurar alertas que me avisen cuando una metrica supera un umbral.

Criterios de aceptacion:

• AC-01: Boton "Crear alerta" en la pagina de detalle de metrica
• AC-02: Configurar: metrica, condicion (mayor que, menor que, igual a), umbral, severidad (info, warning, critical)
• AC-03: Panel de alertas activas accesible desde el header (icono de campana con badge de count)
• AC-04: Cuando una metrica supera el umbral (via WebSocket), mostrar toast notification
• AC-05: Historial de alertas disparadas con timestamp y valor que las disparo

Definition of Done: Crear alerta, simular que la metrica supera umbral, ver notificacion toast.

H09 — Compartir dashboard#

Prioridad: Media | Nivel minimo: N3 | Estimacion: 3 pts

Como usuario, quiero compartir mi dashboard con un enlace para que otros lo vean.

Criterios de aceptacion:

• AC-01: Boton "Compartir" genera un link unico al dashboard (slug o UUID en la URL)
• AC-02: El link es accesible sin login (modo solo lectura)
• AC-03: El dashboard compartido muestra datos en tiempo real igual que el original
• AC-04: El dueno puede desactivar el link de compartir en cualquier momento
• AC-05: Vista compartida no muestra controles de edicion (no drag, no delete widget)

Definition of Done: Generar link, abrir en incognito, ver dashboard con datos actualizandose.

H10 — Performance y accesibilidad#

Prioridad: Media | Nivel minimo: N3 | Estimacion: 3 pts

Como equipo tecnico, queremos que la app sea rapida y accesible.

Criterios de aceptacion:

• AC-01: Lighthouse Performance > 80 en pagina principal
• AC-02: Lighthouse Accessibility > 80
• AC-03: Code splitting: cada pagina se carga lazy (no bundle monolitico)
• AC-04: Graficos renderizados con useMemo / React.memo para evitar re-renders innecesarios
• AC-05: Aria-labels en todos los botones de icono (cerrar, tema, campana, menu)
• AC-06: Navegacion por teclado: Tab navega entre widgets, Enter abre detalle
• AC-07: Virtualizacion si hay mas de 50 widgets (react-virtualized o similar)

Definition of Done: Lighthouse reports generados. Tab navigation funciona. No hay jank visible con 20+ widgets.

H11 — Exportar dashboard#

Prioridad: Media | Nivel minimo: N3 | Estimacion: 2 pts

Como usuario, quiero exportar una captura de mi dashboard para incluirla en presentaciones.

Criterios de aceptacion:

• AC-01: Boton "Exportar como imagen" genera PNG del dashboard completo
• AC-02: Boton "Exportar datos" descarga CSV con los datos de todos los widgets
• AC-03: La imagen captura el estado actual (no un screenshot del viewport — captura el grid completo)

Libreria sugerida: html-to-image, dom-to-image, html2canvas.

Definition of Done: PNG descargado correctamente. CSV con datos reales.

H12 — Testing#

Prioridad: Alta | Nivel minimo: N3 | Estimacion: 3 pts

Como equipo, queremos confianza de que la UI funciona despues de cada cambio.

Criterios de aceptacion:

• AC-01: Tests de componentes: MetricCard, Chart, SearchBar, DashboardGrid (al menos 4 componentes)
• AC-02: Tests de hooks custom: useWebSocket, useTheme, useMetrics
• AC-03: Test E2E: flujo completo de crear dashboard, agregar widget, verificar datos
• AC-04: Coverage > 60% (N3) o > 80% (N4)
• AC-05: npm test corre sin configuracion adicional
• AC-06: Mock del WebSocket en tests (no depende de server activo)

Definition of Done: npm test pasa. Coverage report generado.

H13 — CI/CD Pipeline (solo N4)#

Prioridad: Media | Nivel minimo: N4 | Estimacion: 3 pts

Mismos criterios que la metodologia general: pipeline que instala, lint, test, build, deploy automatico.

H14 — Observabilidad (solo N4)#

Prioridad: Media | Nivel minimo: N4 | Estimacion: 2 pts

Criterios de aceptacion:

• AC-01: Error boundary global que captura errores de React y muestra fallback UI
• AC-02: Logging de errores a servicio externo (Sentry, LogRocket, o custom endpoint)
• AC-03: Web Vitals reportados: LCP, FID, CLS
• AC-04: Performance monitoring: tiempo de carga por ruta

H15 — Documentacion de arquitectura (solo N4)#

Mismos criterios que la metodologia general: C4, ADRs, README.

3. Sprint Planning — Que completar segun tu nivel#

4. Timebox del Sprint#

5. Entregables#

6. Stack sugerido (no obligatorio)#

Reto especifico para C3 — Frontend. Para la rubrica general y metodologia, ver 00-metodologia-evaluacion.md