Tour Guiado de TalentBricksAI

Bienvenido al tour guiado de TalentBricksAI. está guía te llevara a traves de las características principales de la plataforma, tanto desde la perspectiva del estudiante como del administrador.

Vision General de la Plataforma

TalentBricksAI es una plataforma de aprendizaje en línea que ofrece cursos de video en Data Engineering e Inteligencia Artificial. La plataforma está completamente en español con soporte para inglés mediante un sistema de internacionalizacion (i18n).

Modelos de Negocio

La plataforma soporta multiples modelos de monetizacion:

Compra Individual: Los estudiantes pueden comprar cursos individuales ($29-$99 USD)
Suscripción Mensual: Acceso a todos los cursos por $19/mes
Suscripción Anual: Acceso a todos los cursos por $149/año (ahorro del 36%)

Experiencia del Estudiante

1. Landing Page y Registro

Cuándo un usuario llega a la plataforma por primera vez:

Landing Page: Presenta el valor de la plataforma con secciones de hero, características, testimonios y preguntas frecuentes
Registro: Sistema de autenticación con verificación de email
- En desarrollo: el link de verificación se muestra en la consola
- En produccion: se envia un email via SendGrid

# Ejemplo de usuario de prueba (después de seed)
Email: test@talentbricks.ai
Password: Test123!

2. Catalogo de Cursos

La página de cursos (/courses) muestra:

Grid de Cursos: Cards con imagen, título, descripción y precio
Filtros: Por nivel, categoría, precio
Sistema de Búsqueda: Buscar cursos por título o descripción

Cada curso muestra:

Imagen destacada
Título y descripción breve
Nivel (Principiante, Intermedio, Avanzado)
Duracion total
número de lecciones
Precio (si aplica) o badge “Gratis con Suscripción”

3. Detalle del Curso

Al hacer clic en un curso (/courses/:id), el estudiante ve:

Header del Curso: Título, descripción, nivel, duracion
Lista de Lecciones: Todas las lecciones con numeros y títulos
botón CTA:
- “Inscribirse” (si no está inscrito)
- “Continuar Aprendiendo” (si ya está inscrito)
- “Comprar Curso” (si requiere pago)

Flujo de Inscripcion:

Usuario hace clic en “Inscribirse”
Si el curso requiere pago → redirige a Stripe Checkout
Después del pago exitoso → crea registro en tabla Enrollment
Usuario puede acceder al contenido del curso

4. Player de Video

La experiencia de aprendizaje (/courses/:courseId/learn/:lessonId):

Layout:

Sidebar Izquierdo: Lista de todas las lecciones con indicadores de progreso
- ✅ Completada
- ▶️ En progreso
- 🔒 Bloqueada (proximas lecciones)
Área Principal: Video player HTML5 (S3/Azure en producción, MP4 públicos en desarrollo)
Controles:
- Play/Pause
- Control de volumen
- Pantalla completa
- Velocidad de reproduccion (0.5x, 1x, 1.5x, 2x)

Tracking de Progreso:

Automaticamente marca la leccion como “en progreso” al empezar
botón “Marcar como Completada” al terminar
Progreso se guarda en tabla LessonProgress
Barra de progreso general del curso

5. Dashboard “Mis Cursos”

La página “Mis Cursos” (/my-courses) muestra:

Cursos Activos: En los que estás inscrito con barra de progreso
Certificados: Cursos completados al 100% con opción de descargar certificado
Continuar Aprendiendo: Links directos a la ultima leccion vista

Ejemplo de Card:

[Imagen del Curso]
Fundamentos de Data Engineering
━━━━━━━━━━━━━━━━━━ 75% Completado
8 de 12 lecciones completadas

[Continuar] [Ver Certificado]

6. Certificados Digitales

Al completar un curso al 100%:

Se genera automaticamente un certificado digital
El certificado incluye:
- Nombre del estudiante
- Título del curso
- Fecha de finalizacion
- código de verificación único
- QR code para verificación
verificación Pública: Cualquiera puede verificar un certificado en /certificates/verify/:code

Experiencia del Administrador

Acceso al Panel de Admin

Para convertir un usuario en administrador:

# opción 1: Via Prisma Studio
wasp db studio
# Buscar el usuario y cambiar `isAdmin` a `true`

# opción 2: Via seed
wasp db seed seedMockUsers
# Crea usuarios con isAdmin = true

Dashboard de Admin

El panel de administrador (/admin) incluye:

1. Dashboard Principal (`/admin`)

Métricas Clave:

Total de Usuarios
Cursos Publicados
Ingresos del Mes
Nuevas Inscripciones
Graficos de crecimiento (ApexCharts)

Actividad Reciente:

Ultimos usuarios registrados
Ultimas inscripciones
Ultimos pagos procesados

2. Gestión de Cursos (`/admin/courses`)

Listado de Cursos:

Tabla con todos los cursos
Columnas: ID, Título, Nivel, Lecciones, Inscritos, Estado
Acciones: Editar, Eliminar, Ver

Crear/Editar Curso:

Formulario completo con:
- Título y descripción
- Nivel (select)
- Precio (opcional)
- Imagen destacada (upload a S3)
- Estado (draft/published)

Gestión de Lecciones:

Lista de lecciones del curso
Orden de lecciones (drag & drop)
Crear nueva leccion:
- Título y descripción
- Duracion
- Upload del video (S3 o Azure Blob Storage)
- número de orden

3. Gestión de Usuarios (`/admin/users`)

Listado de Usuarios:

Tabla con todos los usuarios
Filtros: Rol (Admin/Student), Estado de Suscripción
Columnas: ID, Email, Nombre, Cursos Inscritos, Fecha de Registro
Acciones: Ver Detalles, Cambiar Rol, Bloquear/Desbloquear

Detalle de Usuario:

información personal
Lista de cursos inscritos con progreso
Historial de pagos
Certificados obtenidos

4. Analytics y Reportes (`/admin/analytics`)

Métricas Disponibles:

Cursos más populares
Tasa de finalizacion por curso
Ingresos por periodo
Nuevos registros vs cancelaciones
Engagement (tiempo promedio por curso)

Exportar Datos:

CSV de usuarios
CSV de inscripciones
CSV de pagos

Flujos de Trabajo Comunes

Flujo: Crear y Publicar un Curso

Admin → Dashboard Admin → “Crear Curso”
Llenar formulario del curso (título, descripción, nivel, precio)
Subir imagen destacada
Guardar como “Draft”
Crear lecciones:
- Ir a “Lecciones” del curso
- Hacer clic en “Nueva Leccion”
- Subir video a S3 o Azure Blob Storage
- Definir título, descripción, duracion
Ordenar lecciones
Cambiar estado del curso a “Published”
Curso aparece en catalogo público

Flujo: Estudiante Completa un Curso

Estudiante → Catalogo de Cursos
Selecciona curso → “Inscribirse” o “Comprar”
Si requiere pago → Stripe Checkout → Pago exitoso
Redirige a /courses/:id/learn/:firstLessonId
Ve video de la primera leccion
Marca leccion como completada
Continúa con siguiente leccion
Repite hasta completar todas las lecciones (100%)
Sistema genera certificado automaticamente
Certificado disponible en “Mis Cursos”
Puede descargar y compartir certificado

Flujo: verificación de Certificado

Usuario externo (ej: empleador) recibe certificado en PDF
Escanea QR code o visita URL de verificación
Sistema muestra:
- ✅ Certificado Valido
- Nombre del estudiante
- Título del curso
- Fecha de finalizacion
- código único de verificación

Arquitectura Tecnica

Base de Datos

Los modelos principales son:

User: Usuarios de la plataforma
Course: Cursos disponibles
Lesson: Lecciones de cada curso
Enrollment: Registro de inscripciones
LessonProgress: Progreso por leccion
Certificate: Certificados emitidos

Relaciones:

User -< Enrollment >- Course
User -< LessonProgress >- Lesson
User -< Certificate >- Course
Course -< Lesson

Operaciones (Queries y Actions)

Queries (lectura):

getCourses - Listar cursos
getCourse - Detalle de un curso
getMyEnrollments - Cursos del usuario
getLessonProgress - Progreso de lecciones

Actions (escritura):

enrollInCourse - Inscribirse en curso
markLessonComplete - Marcar leccion completada
createCourse - Crear curso (admin)
updateCourse - Actualizar curso (admin)
issueCertificate - Generar certificado

integración con Stripe

Productos en Stripe:

Cursos individuales (one-time payment)
Suscripción mensual (recurring)
Suscripción anual (recurring)

Webhooks:

checkout.session.completed - Crear Enrollment después de pago
customer.subscription.created - Actualizar user.subscriptionStatus
customer.subscription.deleted - Cancelar acceso a cursos

Sistema de Internacionalizacion (i18n)

TalentBricksAI soporta multiples idiomas:

Estructura:

app/src/shared/content/locales/
├── es/  # Español (fuente de verdad)
│   ├── brand.ts
│   ├── nav.ts
│   ├── courses.ts
│   └── ...
└── en/  # inglés (traducido con IA)
    ├── brand.ts
    ├── nav.ts
    ├── courses.ts
    └── ...

Uso en Componentes:

import { useTranslation } from "@src/shared/i18n";

function MiComponente() {
  const { t } = useTranslation();

  return <h1>{t("courses.catalog.title")}</h1>;
}

Cambiar Idioma:

Selector de idioma en navbar (EN/ES)
Preferencia guardada en localStorage
Fallback: Español → inglés → clave del string