📚 Learning Analytics Platform

Plataforma de análisis de aprendizaje con videos impulsada por IA

Una aplicación educativa moderna para profesores y alumnos que permite subir videos, realizar seguimiento de métricas de visualización y generar insights con inteligencia artificial.

🎯 Descripción

Learning Analytics es una plataforma web diseñada para entornos educativos que permite a los profesores:

Subir y gestionar videos educativos
Dar seguimiento detallado del progreso de sus alumnos
Generar análisis de comportamiento con IA (Groq Llama 3.3)
Obtener transcripciones automáticas de videos (Groq Whisper)
Visualizar métricas de engagement y comprensión

Los alumnos pueden:

Ver videos educativos asignados por sus profesores
Acceder a su progreso y estadísticas personales
Revisar transcripciones de los videos

✨ Características Principales

👨‍🏫 Para Profesores

Gestión de videos: Subida, eliminación y organización de contenido educativo
Dashboard de métricas: Visualización de estadísticas por alumno y por video
Análisis con IA: Insights automáticos generados con Llama 3.3 sobre patrones de aprendizaje
Transcripciones automáticas: Procesamiento con Groq Whisper (español)
Gestión de grupos: Organización de alumnos por grupos (1A-18Z)
Gestión de alumnos: Crear, editar y eliminar cuentas de estudiantes
Configuración de cuenta: Actualizar perfil, cambiar contraseña, eliminar cuenta

👨‍🎓 Para Alumnos

Reproductor de videos: Interfaz moderna con controles avanzados
Analytics automático: Registro de eventos (play, pause, seek, etc.)
Progreso personal: Dashboard con estadísticas individuales
Acceso a transcripciones: Lectura de contenido de los videos
Configuración de cuenta: Actualizar perfil, cambiar contraseña

🔒 Seguridad y Privacidad

Autenticación con Supabase Auth (cookies seguras)
Row Level Security (RLS) en base de datos
Separación estricta de datos entre profesores y alumnos
Eliminación en cascada de datos relacionados
Password hashing automático

🛠️ Tecnologías

Frontend

Next.js 15.1.6 - Framework React con App Router
React 19 - Biblioteca UI con Server Components
TypeScript - Tipo seguro
Tailwind CSS - Estilos utilitarios
shadcn/ui - Componentes de UI modernos
Tanstack Query - Gestión de estado del servidor

Backend

Next.js Server Actions - API serverless
Supabase - Base de datos PostgreSQL con Auth
Edge Runtime - Ejecución en edge de Cloudflare

Almacenamiento y IA

Cloudflare R2 - Almacenamiento de videos (S3-compatible)
Groq SDK - API de IA
- Llama 3.3 70B - Análisis de métricas
- Whisper Large V3 - Transcripción de audio

Otras herramientas

Zod - Validación de schemas
ESLint - Linting
pnpm - Gestor de paquetes

📦 Instalación

Requisitos previos

Node.js 18+
pnpm (recomendado) o npm
Cuenta de Supabase
Cuenta de Cloudflare (para R2)
API Key de Groq

1. Clonar el repositorio

git clone <repository-url>
cd learning-analytics

2. Instalar dependencias

pnpm install

3. Configurar variables de entorno

Copia el archivo de ejemplo y edítalo con tus credenciales:

cp .env.example .env.local

Luego edita .env.local con tus valores reales:

# Supabase (obtén estos valores de tu proyecto en https://app.supabase.com)
NEXT_PUBLIC_SUPABASE_URL=https://xxxxx.supabase.co
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
SUPABASE_SERVICE_ROLE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

# Cloudflare R2 (crea un bucket y obtén credenciales en Cloudflare Dashboard)
R2_VIDEOS_ACCOUNT_ID=your-account-id
R2_VIDEOS_ACCESS_KEY_ID=your-access-key-id
R2_VIDEOS_SECRET_ACCESS_KEY=your-secret-access-key
R2_VIDEOS_BUCKET_NAME=learning-analytics-videos
R2_PUBLIC_URL=https://your-bucket.your-account-id.r2.dev

# Groq AI (obtén gratis en https://console.groq.com/keys)
GROQ_API_KEY=gsk_xxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Nota: El archivo .env.example contiene todas las variables con descripciones detalladas.

4. Configurar Supabase

Ejecutar las migraciones en orden desde lib/supabase/migrations/:

-- En el SQL Editor de Supabase, ejecutar en orden:
001_create_teachers_table.sql
002_create_students_table.sql
003_enable_rls_policies.sql
004_create_helper_functions.sql
005_create_teacher_groups_table.sql
006_fix_security_advisor_warnings.sql
007_fix_get_teachers_by_group.sql
008_cleanup_duplicate_policies.sql
009_create_videos_table.sql
010_add_video_type.sql

O usar el archivo completo:

SETUP_COMPLETE_ORDERED.sql

5. Configurar Cloudflare R2

Crear bucket en Cloudflare R2
Habilitar acceso público para streaming
Configurar CORS:

[
  {
    "AllowedOrigins": ["http://localhost:3000", "https://your-domain.com"],
    "AllowedMethods": ["GET", "PUT", "POST", "DELETE"],
    "AllowedHeaders": ["*"],
    "MaxAgeSeconds": 3600
  }
]

6. Ejecutar en desarrollo

pnpm dev

La aplicación estará disponible en http://localhost:3000

7. Build de producción

pnpm build
pnpm start

📁 Estructura del Proyecto

learning-analytics/
├── app/                          # App Router de Next.js
│   ├── (auth)/                   # Rutas de autenticación
│   │   └── auth/
│   │       ├── login/
│   │       └── register/
│   ├── (dashboard)/              # Rutas protegidas
│   │   └── dashboard/
│   │       ├── teacher/          # Dashboard de profesor
│   │       │   ├── groups/       # Gestión de grupos
│   │       │   ├── metrics/      # Análisis y métricas
│   │       │   ├── settings/     # Configuración
│   │       │   ├── students/     # Gestión de alumnos
│   │       │   └── videos/       # Gestión de videos
│   │       └── student/          # Dashboard de alumno
│   │           ├── activities/   # Videos disponibles
│   │           ├── progress/     # Progreso personal
│   │           └── settings/     # Configuración
│   ├── api/                      # API Routes
│   │   └── video/[id]/stream/   # Streaming de videos
│   └── watch/[id]/               # Reproductor de videos
├── components/                   # Componentes React
│   ├── ui/                       # Componentes de shadcn/ui
│   ├── providers/                # Providers (QueryClient, etc.)
│   └── settings/                 # Componentes de configuración
├── lib/                          # Utilidades y lógica
│   ├── actions/                  # Server Actions
│   │   ├── ai-analysis.ts        # Análisis con IA
│   │   ├── auth.ts               # Autenticación
│   │   ├── students.ts           # Gestión de alumnos
│   │   ├── teacher-groups.ts     # Grupos de profesores
│   │   ├── transcription.ts      # Transcripción con Whisper
│   │   └── videos.ts             # Gestión de videos
│   ├── cloudflare/
│   │   └── r2.ts                 # Cliente de Cloudflare R2
│   ├── supabase/
│   │   ├── client.ts             # Cliente de Supabase
│   │   ├── server.ts             # Server client
│   │   ├── admin.ts              # Admin client
│   │   └── migrations/           # SQL migrations
│   ├── types/                    # Tipos TypeScript
│   └── validations/              # Schemas de Zod
├── hooks/                        # Custom React hooks
└── middleware.ts                 # Middleware de autenticación

🚀 Uso

Registro de Profesor

Ir a /auth/register
Seleccionar "Profesor"
Ingresar nombre, email, contraseña y grupos (ej: "1A, 10B, 11C")
El sistema creará la cuenta y asignará los grupos

Registro de Alumnos (por el profesor)

Ir a Dashboard → Alumnos
Hacer clic en "Agregar Alumno"
Ingresar nombre, email, grupo y contraseña
El sistema enviará las credenciales al alumno

Subir Videos

Dashboard de Profesor → Videos
Clic en "Subir Video"
Seleccionar archivo, agregar título y descripción
Asignar a grupos específicos
El sistema:
- Sube el video a Cloudflare R2
- Genera automáticamente la transcripción con Whisper
- Almacena metadata en Supabase

Ver Análisis con IA

Dashboard de Profesor → Métricas
Seleccionar un alumno
Hacer clic en "Generar Análisis con IA"
El sistema analiza:
- Patrones de visualización
- Tiempo de estudio
- Engagement con el contenido
- Áreas de dificultad (basado en seeks/pauses)
- Genera recomendaciones personalizadas

📊 Base de Datos

Tablas principales

teachers

Información de profesores registrados
Vinculado a auth.users

students

Información de alumnos
Vinculado a profesores y grupos

teacher_groups

Relación muchos a muchos entre profesores y grupos

videos

Metadata de videos educativos
Incluye transcripciones y estado de procesamiento

video_views

Registro de visualizaciones completas/parciales
Tiempo de visualización por alumno

video_analytics_events

Eventos granulares (play, pause, seek, etc.)
Para análisis detallado de comportamiento

🔐 Seguridad

RLS (Row Level Security): Todas las tablas tienen políticas RLS
Auth Cookies: Sesión persistente y segura con Supabase
Admin Client: Operaciones privilegiadas solo del servidor
Validación: Zod schemas para validación de entrada
Separación de datos: Los alumnos solo ven sus datos, profesores solo ven sus alumnos

📈 Escalabilidad

Estimado de capacidad

✅ 30-50 usuarios simultáneos: Funciona perfectamente sin optimizaciones
⚠️ 50-100 usuarios: Considerar batch processing de eventos de analytics
⚠️ 100+ usuarios: Implementar caching y queue para transcripciones

Recomendaciones para producción

Implementar batch processing para eventos de video (reduce 90% de writes a BD)
Agregar Redis/Upstash para caching de métricas
Queue system para transcripciones (evitar límites de Groq API)
CDN para videos si tienes usuarios en múltiples regiones

📚 Documentación Adicional

La carpeta docs/ contiene documentación técnica detallada:

GROQ_SETUP.md - Configuración completa de Groq AI (Llama 3.3 y Whisper)
TRANSCRIPTION_SYSTEM.md - Sistema de transcripción automática con timestamps
CASCADE_DELETION_POLICY.md - Políticas de eliminación en cascada de datos

🧪 Testing

Plan de despliegue gradual

Fase 1: Probar con 5 alumnos (1 semana)
Fase 2: Escalar a 15 alumnos (1-2 semanas)
Fase 3: Salón completo (30+ alumnos)

Monitoreo

Supabase Dashboard → Database → Connections
Groq Dashboard → API Usage
Cloudflare Analytics → R2 Requests

📝 Licencia

🤝 Contribuciones

Este es un proyecto educativo. Para reportar bugs o sugerir mejoras, contactar al autor.

📧 Contacto

Para soporte o consultas sobre la plataforma, contactar al administrador del sistema.

Name		Name	Last commit message	Last commit date
Latest commit History 30 Commits
app		app
components		components
docs		docs
hooks		hooks
lib		lib
.env.example		.env.example
.gitignore		.gitignore
README.md		README.md
components.json		components.json
eslint.config.mjs		eslint.config.mjs
middleware.ts		middleware.ts
next.config.ts		next.config.ts
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
postcss.config.mjs		postcss.config.mjs
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json

Folders and files

Latest commit

History

Repository files navigation

📚 Learning Analytics Platform

🎯 Descripción

✨ Características Principales

👨‍🏫 Para Profesores

👨‍🎓 Para Alumnos

🔒 Seguridad y Privacidad

🛠️ Tecnologías

Frontend

Backend

Almacenamiento y IA

Otras herramientas

📦 Instalación

Requisitos previos

1. Clonar el repositorio

2. Instalar dependencias

3. Configurar variables de entorno

4. Configurar Supabase

5. Configurar Cloudflare R2

6. Ejecutar en desarrollo

7. Build de producción

📁 Estructura del Proyecto

🚀 Uso

Registro de Profesor

Registro de Alumnos (por el profesor)

Subir Videos

Ver Análisis con IA

📊 Base de Datos

Tablas principales

🔐 Seguridad

📈 Escalabilidad

Estimado de capacidad

Recomendaciones para producción

📚 Documentación Adicional

🧪 Testing

Plan de despliegue gradual

Monitoreo

📝 Licencia

🤝 Contribuciones

📧 Contacto

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages