--- id: "US-EDU-001" title: "Ver Catalogo de Cursos" type: "User Story" status: "Done" priority: "Alta" epic: "OQI-002" story_points: 3 created_date: "2025-12-05" updated_date: "2026-01-04" --- # US-EDU-001: Ver Catálogo de Cursos ## Metadata | Campo | Valor | |-------|-------| | **ID** | US-EDU-001 | | **Épica** | OQI-002 - Módulo Educativo | | **Módulo** | education | | **Prioridad** | P0 | | **Story Points** | 3 | | **Sprint** | Sprint 3 | | **Estado** | Pendiente | | **Asignado a** | Por asignar | --- ## Historia de Usuario **Como** usuario interesado en aprender trading, **quiero** ver un catálogo completo de cursos disponibles con filtros y búsqueda, **para** descubrir contenido educativo relevante a mi nivel y áreas de interés. ## Descripción Detallada El usuario debe poder acceder a una página que muestre todos los cursos educativos disponibles en la plataforma. Debe poder filtrar por categoría (Fundamentos, Análisis Técnico, etc.), nivel de dificultad (Principiante, Intermedio, Avanzado), y buscar por palabras clave. Cada curso debe mostrar información clave como título, instructor, duración, número de estudiantes, rating, y el progreso del usuario si ya está inscrito. ## Mockups/Wireframes ``` ┌─────────────────────────────────────────────────────────────────┐ │ [LOGO] Trading Platform Educación Trading Cuentas 👤 │ ├─────────────────────────────────────────────────────────────────┤ │ │ │ CATÁLOGO DE CURSOS [🔍 Buscar cursos...] │ │ │ │ ┌────────────────┐ ┌──────────────────────────────────────┐ │ │ │ FILTROS │ │ Mostrando 24 de 47 cursos │ │ │ │ │ │ Ordenar: [Más recientes ▼] │ │ │ │ Categorías │ │ │ │ │ │ □ Fundamentos │ │ ┌─────────┐ ┌─────────┐ ┌─────────┐│ │ │ ✓ Análisis T. │ │ │[IMG] │ │[IMG] │ │[IMG] ││ │ │ □ Gestión Riesgo│ │ │Fibonacci│ │Candlestk│ │Day Trad.││ │ │ │ │ │básico │ │Avanzado │ │Pro ││ │ │ Nivel │ │ │⭐ 4.8 │ │⭐ 4.9 │ │⭐ 4.7 ││ │ │ ✓ Principiante │ │ │2h 30m │ │4h 15m │ │6h 45m ││ │ │ ✓ Intermedio │ │ │1,234 👥 │ │892 👥 │ │567 👥 ││ │ │ □ Avanzado │ │ │[Ver curso]│ │[60% ✓] │ │[Iniciar]││ │ │ │ │ └─────────┘ └─────────┘ └─────────┘│ │ │ Duración │ │ │ │ │ │ □ < 2 horas │ │ ┌─────────┐ ┌─────────┐ ┌─────────┐│ │ │ ✓ 2-5 horas │ │ │ ...más cursos... ││ │ │ □ > 5 horas │ │ └─────────┘ └─────────┘ └─────────┘│ │ │ │ │ │ │ │ │ [Limpiar] │ │ [1] 2 3 4 ... 8 │ │ │ └────────────────┘ └──────────────────────────────────────┘ │ │ │ │ ┌──────────────────────────────────────────────────────────┐ │ │ │ 📚 Recomendado para ti │ │ │ │ [Curso A] [Curso B] [Curso C] │ │ │ └──────────────────────────────────────────────────────────┘ │ │ │ └─────────────────────────────────────────────────────────────────┘ ``` --- ## Criterios de Aceptación **Escenario 1: Ver catálogo completo** ```gherkin DADO que el usuario está autenticado CUANDO navega a /education/courses ENTONCES se muestra el catálogo de cursos Y se muestran 12 cursos por página Y cada curso muestra: imagen, título, instructor, duración, rating, estudiantes Y se muestran filtros en sidebar izquierdo Y se muestra barra de búsqueda Y se muestra contador "Mostrando X de Y cursos" ``` **Escenario 2: Filtrar por categoría** ```gherkin DADO que el usuario está en el catálogo CUANDO selecciona filtro "Análisis Técnico" ENTONCES solo se muestran cursos de esa categoría Y el filtro se marca como activo (checkbox marcado) Y la URL se actualiza a ?category=technical-analysis Y el contador se actualiza "Mostrando X de Y cursos" ``` **Escenario 3: Filtrar por nivel** ```gherkin DADO que el usuario está en el catálogo CUANDO selecciona "Principiante" e "Intermedio" ENTONCES solo se muestran cursos de esos niveles Y se pueden combinar con otros filtros activos Y se muestra badge de nivel en cada curso ``` **Escenario 4: Buscar curso** ```gherkin DADO que el usuario está en el catálogo CUANDO escribe "fibonacci" en el buscador ENTONCES se filtran cursos en tiempo real Y se muestran solo cursos que contengan "fibonacci" en título o descripción Y se resalta el término buscado en resultados Y se muestra "X resultados para 'fibonacci'" ``` **Escenario 5: Sin resultados** ```gherkin DADO que el usuario aplicó filtros Y no hay cursos que cumplan los criterios ENTONCES se muestra mensaje "No se encontraron cursos" Y se sugiere "Intenta ajustar los filtros" Y se muestra botón "Limpiar filtros" ``` **Escenario 6: Ver progreso en curso inscrito** ```gherkin DADO que el usuario ya está inscrito en un curso CUANDO ve la tarjeta del curso en el catálogo ENTONCES se muestra barra de progreso (ej: "60% completado") Y el botón dice "Continuar" en lugar de "Ver curso" Y al hacer click, navega a la última lección vista ``` **Escenario 7: Ver recomendaciones** ```gherkin DADO que el usuario tiene cursos en progreso CUANDO accede al catálogo ENTONCES se muestra sección "Recomendado para ti" Y aparecen máximo 6 cursos relacionados Y se basa en: cursos en progreso, nivel del usuario, categorías de interés ``` **Escenario 8: Ordenar resultados** ```gherkin DADO que el usuario está viendo el catálogo CUANDO selecciona ordenar por "Mejor valorados" ENTONCES los cursos se reordenan de mayor a menor rating Y la paginación se mantiene Y los filtros activos se mantienen ``` ## Criterios Adicionales - [ ] Responsive design para móvil y tablet - [ ] Loading skeleton mientras cargan cursos - [ ] Infinite scroll opcional (además de paginación) - [ ] Animaciones suaves al filtrar - [ ] Badge "Nuevo" para cursos publicados hace < 30 días - [ ] Badge "Popular" para cursos con > 1000 estudiantes - [ ] Guardar filtros en localStorage para próxima visita --- ## Tareas Técnicas **Database:** - [ ] DB-EDU-001: Verificar schema education.courses - [ ] DB-EDU-002: Verificar índices en category_id, level, published_at - [ ] DB-EDU-003: Vista courses_catalog con joins optimizados **Backend:** - [ ] BE-EDU-001: Endpoint GET /education/courses (con paginación) - [ ] BE-EDU-002: Implementar filtros: category, level, duration, search - [ ] BE-EDU-003: Implementar ordenamiento: recent, popular, rating - [ ] BE-EDU-004: Endpoint GET /education/categories - [ ] BE-EDU-005: Implementar CourseService.getCatalog() - [ ] BE-EDU-006: Implementar lógica de recomendaciones - [ ] BE-EDU-007: Caché de catálogo en Redis (5 min) **Frontend:** - [ ] FE-EDU-001: Crear página CoursesPage.tsx - [ ] FE-EDU-002: Crear componente CourseCard.tsx - [ ] FE-EDU-003: Crear componente CourseFilters.tsx - [ ] FE-EDU-004: Crear componente SearchBar.tsx - [ ] FE-EDU-005: Crear componente Pagination.tsx - [ ] FE-EDU-006: Implementar coursesStore (Zustand) - [ ] FE-EDU-007: Integrar con React Query para caché - [ ] FE-EDU-008: Skeleton loader para carga **Tests:** - [ ] TEST-EDU-001: Test unitario CourseService.getCatalog() - [ ] TEST-EDU-002: Test integración GET /courses con filtros - [ ] TEST-EDU-003: Test E2E búsqueda y filtrado --- ## Dependencias **Depende de:** - [ ] US-AUTH-001: Sistema de autenticación - Estado: ✅ Completado **Bloquea:** - [ ] US-EDU-002: Ver detalle de curso - [ ] US-EDU-003: Iniciar lección --- ## Notas Técnicas **Endpoints involucrados:** | Método | Endpoint | Descripción | |--------|----------|-------------| | GET | /education/courses | Catálogo con filtros y paginación | | GET | /education/categories | Listado de categorías | **Query params para GET /courses:** ``` ?page=1 &limit=12 &category=technical-analysis,fundamentals &level=beginner,intermediate &search=fibonacci &sortBy=recent &sortOrder=desc ``` **Response GET /courses:** ```typescript { courses: [ { id: "uuid-1", title: "Fibonacci Retracement Básico", slug: "fibonacci-retracement-basico", shortDescription: "Aprende a usar Fibonacci...", thumbnail: "https://cdn.trading.com/courses/fib.jpg", category: { id: "cat-1", name: "Análisis Técnico", slug: "technical-analysis", icon: "📊" }, level: "beginner", duration: 150, // minutos moduleCount: 5, lessonCount: 23, studentCount: 1234, rating: 4.8, reviewCount: 89, instructor: { id: "inst-1", name: "Carlos Mendoza", avatar: "https://...", title: "Senior Trader" }, isPremium: false, publishedAt: "2025-11-15T10:00:00Z", userProgress: { enrolledAt: "2025-12-01T14:30:00Z", progressPercent: 60, lastAccessedAt: "2025-12-04T18:20:00Z" } } // ... más cursos ], pagination: { page: 1, limit: 12, total: 47, totalPages: 4 }, filters: { categories: [...], levels: ["beginner", "intermediate", "advanced", "expert"] } } ``` **Entidades/Tablas:** - `education.courses`: Catálogo de cursos - `education.categories`: Categorías - `education.course_enrollments`: Inscripciones y progreso - `education.instructors`: Información de instructores --- ## Definition of Ready (DoR) - [x] Historia claramente escrita - [x] Criterios de aceptación definidos - [x] Story points estimados - [x] Dependencias identificadas - [x] Sin bloqueadores - [x] Diseño/mockup disponible - [x] API spec disponible ## Definition of Done (DoD) - [ ] Código implementado según criterios - [ ] Tests unitarios escritos y pasando - [ ] Tests de integración pasando - [ ] Code review aprobado - [ ] Documentación actualizada - [ ] QA aprobado - [ ] Desplegado en ambiente de pruebas --- ## Historial de Cambios | Fecha | Cambio | Autor | |-------|--------|-------| | 2025-12-05 | Creación | Requirements-Analyst | --- **Creada por:** Requirements-Analyst **Fecha:** 2025-12-05 **Última actualización:** 2025-12-05