Propuesta LMS Avanzado v2

1.1 · Visión general

La plataforma en una página

Se construye un LMS multitenant con panel central para la editorial y sub-paneles por institución. Los colegios acceden al contenido digital de las series contratadas —mini-juegos React, evaluaciones y materiales por unidad— con sistema completo de gestión para docentes y estudiantes.

🏢

Editorial — control total

Panel maestro: colegios, series, licencias, contenido y analíticas globales cross-institución.

🏫

Colegio — espacio propio

Subdominio propio. El admin gestiona grados, paralelos, docentes y estudiantes de forma aislada.

📚

Docentes y estudiantes

Mini-juegos interactivos, evaluaciones programables, seguimiento de progreso y mensajería en tiempo real.

Stack definitivo: Frontend en Next.js 15 (React, App Router, RSC). Backend en NestJS + TypeORM + PostgreSQL. Todo TypeScript — los tipos de la API se comparten entre frontend y backend vía un Nx Monorepo. La decisión de NestJS no es solo por continuidad: es la arquitectura que permite migrar al nivel complejo (microservicios + Kafka) sin reescribir, solo extrayendo módulos.

1.2 · Series y estructura educativa

Contenido y estructura institucional soportada

Series educativas soportadas

Easy English — Grados 1° a 11°
Start English — Grados 1° a 11°
Easy Science — Grados 1° a 5°
Ciencias Naturales — Grados 1° a 5°
Ciencias Sociales — Grados 1° a 5°
Matemáticas — Grados 1° a 5°
Nuevas series que la editorial agregue

Estructura institucional soportada

Colegios con 1 curso por grado
Colegios con múltiples paralelos (3°A, 3°B, 3°C)
Primaria completa: grados 1° a 5°
Secundaria completa: grados 6° a 11°
Docentes asignados a múltiples grados
Carga masiva de estudiantes por Excel/CSV
Sin límite de instituciones activas

2.1 · Arquitectura en capas

Stack completo — Nivel Avanzado

CDN / Edge

Cloudflare CDN + WAF

PoP Bogotá · DDoS · SSL

Cloudflare R2

Assets sin egress · S3-compatible

Web Push VAPID

Push PWA sin app nativa

Frontend

Next.js 15 · App Router

SSR · RSC · CSR híbrido

TanStack Query v5

Server state · cache

shadcn/ui + Tailwind 4

Paneles admin / docente

Canvas API + React

Mini-juegos interactivos

PWA (next-pwa)

Instalable · offline parcial

Chart.js + AG Grid

Dashboards · tabla notas

Backend

NestJS · Monolito modular

Módulos extraíbles → microservicios

TypeORM + migrations

Entidades tipadas · rollback

@nestjs/websockets

Socket.io · mensajería RT

BullMQ

Colas async · scheduling

Passport + JWT

Auth multitenant · guards

Swagger / OpenAPI

Docs API auto-generadas

Datos

PostgreSQL 16

DB transaccional · ACID

Redis 7

Cache · BullMQ · WS sessions

ClickHouse

OLAP analítica · eventos

Monorepo

Nx Workspace

Next.js + NestJS un solo repo

libs/shared/types

DTOs compartidos FE ↔ BE

GitHub Actions CI/CD

Tests · build · deploy auto

Vitest + Playwright

Unit tests · E2E tests

Sentry

Error tracking ambas capas

Resend + React Email

Transaccional · templates TSX

UptimeRobot

Monitoreo endpoints críticos

Nivel Complejo — se agrega encima sin reescribir: Apache Kafka · Kubernetes · LangChain + pgvector (RAG) · LiveKit (WebRTC) · Snowflake

2.2 · Nx Monorepo — la clave de la arquitectura

Un solo repositorio, tipos compartidos, un CI/CD

El monorepo Nx no es solo organización de código — es la decisión que hace posible compartir interfaces TypeScript entre Next.js y NestJS, y que permite extraer módulos NestJS como microservicios independientes en el nivel complejo sin cambiar su código interno.

lms-editorial/ — Nx Workspace

TypeScript · pnpm workspaces · turbo cache

apps/web

apps/web/ Next.js 15

apps/web/app/ App Router pages

apps/web/components/ UI compartida

apps/web/games/ Mini-juegos React

apps/api

apps/api/ NestJS

apps/api/src/auth/ AuthModule

apps/api/src/content/ ContentModule

apps/api/src/evals/ EvaluationsModule

apps/api/src/messaging/ MessagingModule

apps/api/src/analytics/ AnalyticsModule

libs/shared — clave de la arquitectura

libs/shared/types/ Interfaces TS compartidas

└─ evaluation.dto.ts

└─ user-response.dto.ts

└─ unit-content.dto.ts

└─ institution.dto.ts

libs/shared/utils/ Helpers comunes

libs/shared/constants/ Roles, estados

libs/ui

libs/ui/ Design system compartido

└─ shadcn components

└─ game components

Ventaja al escalar

Nivel Avanzado:

AuthModule en apps/api

llama a ContentModule

directo (in-process)

Nivel Complejo:

AuthModule → su propio

proceso + Kafka

El código no cambia,

solo el transporte.

⚡ Los DTOs de libs/shared/types son la única fuente de verdad. Si el backend cambia EvaluationDto, el frontend Next.js falla en compilación antes de llegar a producción. Cero errores de integración API.

Por qué NestJS y no Express u otro framework Node: NestJS tiene un sistema de módulos con inyección de dependencias que replica exactamente la arquitectura de microservicios — solo que todo corre en el mismo proceso. Cuando llegue el momento de separar un módulo, @nestjs/microservices permite cambiar el transporte de in-process a Kafka con un cambio de configuración. Express no tiene ese concepto — hay que reescribir la comunicación desde cero.

2.3 · Ruta al nivel complejo

Cómo se escala sin reescribir

Nivel Avanzado — hoy

NestJS monolito: todos los módulos en un proceso
Comunicación interna: llamadas directas entre módulos
PostgreSQL único para todos los datos
BullMQ para tareas asíncronas
ClickHouse recibe eventos vía HTTP
Un solo deployment en Railway o AWS ECS

Nivel Complejo — futuro

Kafka reemplaza las llamadas directas entre módulos
Cada módulo NestJS se mueve a su propio proceso/pod
PostgreSQL se shardea o se separa por dominio
K8s orquesta los pods y gestiona auto-scaling
LangChain + pgvector para IA sobre el contenido
LiveKit para videoconferencia integrada

3.1 · Tabla de funcionalidades

Funcionalidad	Estado	Detalle
Gestión de usuarios, roles e instituciones
Panel Super Admin de la editorial (multitenant)	✓	Gestión de colegios, series, licencias y analíticas globales
Panel Admin por colegio — subdominio propio	✓	Cada colegio accede a su espacio aislado. Sin visibilidad cruzada
Panel del docente	✓	Cursos asignados, evaluaciones, progreso de estudiantes, mensajería
Panel del estudiante	✓	Contenido de su grado/serie, evaluaciones y mensajes del docente
Multi-paralelo por grado (3°A, 3°B, 3°C)	✓	Sin límite de paralelos. Cada uno es un curso independiente
Docente asignado a múltiples cursos y grados	✓	Un docente puede tener 4°A, 4°B y 5°A simultáneamente
Carga masiva de estudiantes por Excel/CSV	✓	Plantilla descargable. El sistema crea las cuentas automáticamente
Autenticación JWT + guards por rol (NestJS Passport)	✓	Tokens con refresh. Cada rol ve solo lo que le corresponde
Gestión de licencias con vencimiento automático	✓	Fecha inicio/fin. Acceso bloqueado automáticamente al vencer
Contenido y recursos didácticos
Mini-juegos interactivos en React + Canvas API (6 tipos base)	✓	Quiz imagen · Clasificación · Audio-card · Drag&drop · Completar · Identificación
CMS de contenido para la editorial (sin código)	✓	La editorial carga y organiza el contenido de cada unidad desde un panel
Docente agrega URLs externas (Wordwall, Kahoot, Quizlet)	✓	Link visible como tarjeta en el dashboard del estudiante
Docente incrusta iframes (H5P, Educaplay, LearningApps)	✓	Embed dentro del LMS con whitelist de dominios seguros
PWA — instalable en tablet y celular sin app store	✓	Instalable en Android e iOS Safari. Push web incluido. Offline parcial
Evaluaciones y control docente
Evaluaciones predefinidas por la editorial	✓	Disponibles por defecto en cada unidad. La editorial las carga desde el CMS
Docente habilita / deshabilita evaluaciones	✓	Control total por curso sobre qué contenido es visible
Programación con fecha y hora de cierre automático	✓	BullMQ cierra la evaluación automáticamente al llegar la fecha
Docente personaliza evaluaciones de la editorial	✓	Copia editable privada. El original de la editorial no se altera
Docente crea evaluaciones propias desde cero	✓	Banco de preguntas del docente. Tipos: opción múltiple, V/F, completar, abierta
Corrección de respuestas abiertas (manual por el docente)	✓	El docente revisa y califica. El estudiante ve la nota y el comentario
Límite de tiempo y orden aleatorio de preguntas	✓	Anti-trampa básico: cada estudiante ve un orden diferente
Comunicación y retroalimentación
Mensajería docente ↔ estudiante en tiempo real	✓	WebSocket vía @nestjs/websockets + Socket.io. Tiempo real sin recargar
Retroalimentación escrita del docente por evaluación	✓	Comentario por actividad. El estudiante lo ve en su perfil
Notificaciones por email (Resend + React Email)	✓	Nueva evaluación, vencimiento próximo, retroalimentación recibida
Notificaciones push web (PWA — VAPID)	✓	Push en el navegador del celular o tablet sin app nativa
Analítica y reportes
Dashboard del docente: progreso de su curso	✓	Notas, completitud por actividad, estudiantes inactivos. Chart.js
Dashboard institucional: comparativo grados y paralelos	✓	El admin del colegio ve el desempeño general de su institución
Dashboard global de la editorial	✓	Uso por colegio, serie más activa, licencias próximas a vencer
Eventos de uso a ClickHouse (analítica OLAP)	✓	Cada acción del estudiante genera un evento. Sin afectar PostgreSQL
Exportación de reportes en PDF y Excel	✓	El docente exporta notas de su curso. El admin exporta reportes institucionales
No incluido en este nivel
Retroalimentación en audio o video del docente	✗	Módulo adicional — 2–3 semanas
Gamificación: puntos, insignias y logros	✗	Módulo adicional — 6–8 semanas
App móvil nativa (Flutter o React Native)	✗	Propuesta separada. La PWA cubre el 80% del uso móvil
Videoconferencia / aula virtual integrada	✗	Se puede vincular Google Meet o Zoom sin costo. Integración nativa = nivel complejo
IA generativa (corrección automática, RAG, rutas adaptativas)	✗	Nivel complejo — requiere pgvector + LangChain + LLM API
Portal de padres de familia	✗	Módulo adicional — requiere definición de alcance

✓ Incluido en el precio ✗ No incluido

4.1 · Módulos entregados

Setup del Nx Monorepo + CI/CD + entornos

Configuración del workspace Nx con Next.js + NestJS. Librerías compartidas de tipos (libs/shared). GitHub Actions para tests automáticos en cada PR y deploy a staging. Entornos desarrollo, staging y producción configurados.

Nxpnpm workspacesGitHub ActionsVitestESLint + Prettier

Sistema de autenticación y control de acceso

NestJS Passport + JWT con refresh tokens. Guards por rol (editorial / institución / docente / estudiante). Restablecimiento de contraseña. Primera sesión con cambio obligatorio. Middleware de tenant para aislar los datos de cada institución.

NestJS PassportJWT + RefreshGuards por rolMulti-tenant

Panel Super Admin de la editorial

Gestión de instituciones: crear, editar, suspender, asignar series y licencias. Creación de cuentas de admin de colegios. Dashboard analítico global. Reportes cross-institución. CMS para cargar el contenido de cada unidad por serie y grado.

Multi-tenantCMSLicenciasAnalytics global

Panel admin del colegio

Creación de grados y paralelos. Carga masiva de estudiantes (Excel/CSV + plantilla). Matrícula de docentes y asignación a cursos. Dashboard institucional con comparativo entre grados. Exportación de reportes PDF/Excel.

BullMQ (CSV)Multi-paraleloSubdominio propioReportes

Dashboard del estudiante y navegación de contenido

Vista de series, unidades y actividades disponibles. Tarjetas de contenido (mini-juegos, evaluaciones, enlaces, embeds). Progreso personal por unidad. Notificaciones de nuevas evaluaciones y retroalimentación del docente.

Next.js RSCTanStack QueryPWANotificaciones

Motor de mini-juegos React — 6 tipos base

Componentes React reutilizables: quiz opción múltiple con imagen, clasificación por categorías, audio-card (escucha y selecciona), drag & drop, completar texto e identificación de imagen. Retroalimentación visual/sonora, registro de resultados en la API, navegación entre preguntas.

React + Canvas API6 tiposReutilizablesResultados API

Panel del docente — evaluaciones y seguimiento

Vista de todos sus cursos. Habilitar/deshabilitar actividades. Programación de evaluaciones con fecha de cierre automático (BullMQ). Creación de evaluaciones propias (banco de preguntas). Personalización de evaluaciones de la editorial. Calificación de respuestas abiertas. Dashboard de progreso por estudiante y por curso.

BullMQ schedulingBanco preguntasAG Grid notasChart.js

Mensajería en tiempo real y notificaciones

Chat docente ↔ estudiante vía WebSocket (@nestjs/websockets + Socket.io). Retroalimentación escrita por evaluación. Historial persistido en PostgreSQL. Notificaciones in-app con badge. Email con Resend + React Email. Push web VAPID para la PWA.

Socket.ioResendPush VAPIDIn-app bell

Analítica ClickHouse y reportes exportables

Pipeline de eventos desde NestJS hacia ClickHouse (sin afectar PostgreSQL). Dashboards con Chart.js: progreso por unidad, tasas de completitud, promedios por grado. Tabla de notas con AG Grid. Exportación a PDF (pdfmake) y Excel (exceljs) desde el panel del docente y del administrador.

ClickHouseChart.jsAG Gridpdfmakeexceljs

PWA + configuración de infraestructura + lanzamiento

Configuración PWA completa: manifiesto, service worker, caché offline parcial, push VAPID. Despliegue en la opción de infraestructura elegida por el cliente. CI/CD de producción. Documentación técnica del monorepo y de los módulos NestJS. Manual de usuario por rol (PDF). Capacitación al equipo de la editorial.

next-pwaDockerInfra elegidaDocumentaciónCapacitación

5.1 · Fases del desarrollo

Mes 1 · Discovery y arquitectura base

Diseño UX/UI, monorepo y fundamentos

Levantamiento de requisitos con la editorial. Diseño completo en Figma de los 4 paneles (editorial, colegio, docente, estudiante). Setup del Nx Monorepo: Next.js + NestJS + libs/shared. Base de datos: esquema TypeORM, entidades y primeras migrations. CI/CD desde el día 1. Entregable: prototipo Figma aprobado + monorepo funcionando en staging.

Mes 2 · Autenticación y gestión institucional

Auth multitenant + paneles de editorial y colegio

Sistema completo de autenticación JWT multitenant. Panel Super Admin de la editorial (colegios, series, licencias). Panel Admin del colegio (grados, paralelos, docentes, carga masiva de estudiantes). CMS básico de contenido. Entregable: la editorial puede crear colegios y el admin del colegio puede cargar su estructura.

Mes 3 · DEMO, Contenido, mini-juegos y evaluaciones

Motor de juegos React + motor de evaluaciones NestJS

Dashboard del estudiante con navegación de series/unidades. Los 6 tipos de mini-juego en React + Canvas API. Motor de evaluaciones completo: predefinidas, programadas, banco de preguntas del docente, personalización, respuestas abiertas. Registro de resultados. Entregable: un estudiante puede acceder al contenido, hacer un juego y completar una evaluación.

Mes 4 · Mensajería, analítica y panel docente

WebSocket + ClickHouse + dashboard completo del docente

Mensajería en tiempo real vía WebSocket. Retroalimentación escrita. Pipeline de eventos a ClickHouse. Dashboards con Chart.js. Exportación PDF/Excel. Panel del docente completo: progreso de estudiantes, gestión de evaluaciones, programación con BullMQ. Entregable: flujo docente-estudiante completo funcionando en staging.

Mes 5 · PWA, notificaciones y pruebas piloto

PWA + push web + QA con colegios reales

Configuración PWA completa (service worker, offline, manifiesto). Notificaciones push VAPID. Notificaciones por email (Resend). Pruebas funcionales con 2–3 colegios piloto reales. Corrección de bugs y ajustes de UX según feedback. Prueba de carga: 2,000 estudiantes en examen simultáneo. Entregable: plataforma validada por usuarios reales.

Mes 6 · Producción, documentación y capacitación

Lanzamiento + soporte inicial de 30 días

Despliegue en la infraestructura de producción elegida. Documentación técnica del monorepo (arquitectura, módulos NestJS, guía de despliegue). Manuales de usuario por rol en PDF. Capacitación al equipo de la editorial. Soporte activo durante el primer mes de operación real.

6.1 · Opciones de infraestructura

DevGrafik configura e instala el sistema en la opción elegida. La configuración está incluida en el precio de desarrollo. Los costos mensuales los paga la editorial directamente a cada proveedor.

Opción A · Recomendada

Servicios especializados

$310–$520

USD/mes · sin app móvil

Railway · NestJS API
Vercel · Next.js frontend
Neon PostgreSQL · scale-to-zero
Upstash Redis · por request
Cloudflare R2 + CDN
ClickHouse Cloud
Resend · email

Opción B · AWS todo-en-uno

Un solo proveedor

$480–$780

USD/mes · sa-east-1

ECS Fargate · NestJS
Amplify · Next.js
RDS PostgreSQL Multi-AZ
ElastiCache Redis
S3 + CloudFront
SES · email
CloudWatch · monitoreo

Opción C · VPS propio

Servidores propios

$95–$180

USD/mes · requiere DevOps

Hetzner Cloud × 3 VPS
Docker Compose
PostgreSQL self-hosted
Redis self-hosted
MinIO · object storage
Cloudflare Free · CDN + WAF
Requiere DevOps editorial

Los costos de infraestructura no están incluidos en el precio de desarrollo. Son gastos operativos mensuales que la editorial paga directamente. DevGrafik hace la configuración inicial como parte del proyecto. Se recomienda la Opción A para equipos sin DevOps dedicado: Neon PostgreSQL tiene scale-to-zero real (costo mínimo fuera del horario escolar) y Railway escala el NestJS automáticamente durante picos de exámenes.

7.1 · Cuadro de inversión

Inversión total de desarrollo — Nivel Avanzado

LMS Editorial · Next.js 15 + NestJS · TypeScript end-to-end · 10 módulos · 6 meses

En pesos colombianos

$ 75.000.000

COP · precio fijo

El contrato se firma en pesos colombianos. Precio fijo: no varía por tiempo o complejidad dentro del alcance acordado

Duración

6 meses

Tiempo de desarrollo

Equipo de 5–6 desarrolladores. Entregables verificables al cierre de cada fase

Plan de pagos sugerido (4 cuotas) 30% a la firma — $22.500.000 COP
30% al aprobar prototipo Figma (fin Fase 1) — $22.500.000 COP
20% al completar Fase 3 (juegos + evaluaciones) — $15.000.000 COP
20% al lanzamiento en producción (Fase 6) — $15.000.000 COP

¿Qué incluye el precio? Diseño UX/UI completo en Figma
Desarrollo de los 10 módulos entregables
Tests automatizados (Vitest + Playwright)
Configuración de infraestructura inicial
Documentación técnica del monorepo
Manual de usuario por rol (PDF)
Capacitación al equipo de la editorial
30 días de soporte técnico post-lanzamiento

ROI estimado: Con 50 colegios clientes a $150.000 COP/mes de licencia, la editorial genera $7.500.000 COP/mes. El desarrollo se recupera en ~25 meses. Con 100 colegios, en ~13 meses. Además, cada colegio que adopta el LMS tiene un costo de cambio mucho mayor que uno que solo compra el libro físico — aumenta la retención y los contratos multi-año.

7.2 · Términos y condiciones

Alcance	El precio cubre las funcionalidades marcadas con ✓ en la tabla del Capítulo 3. Cualquier funcionalidad adicional se cotiza por escrito antes de iniciar.
Cambios de alcance	Hasta 2 ajustes por fase sin costo, siempre que no superen el 10% del esfuerzo de esa fase. Cambios mayores se cotizan y aprueban por escrito.
Propiedad del código	Al completar el pago total, la editorial recibe el código fuente completo (repositorio privado en GitHub a nombre de la editorial) con historial de commits.
Infraestructura	Los costos mensuales de hosting, bases de datos y servicios de terceros son responsabilidad de la editorial. DevGrafik configura el entorno como parte del proyecto.
Garantía de calidad	Todos los módulos se entregan con tests automatizados documentados. Bugs reportados en los primeros 60 días post-lanzamiento se corrigen sin costo adicional.
Soporte post-lanzamiento	30 días de soporte técnico incluido. Soporte extendido disponible bajo contrato de mantenimiento mensual independiente.
Confidencialidad	DevGrafik mantiene absoluta confidencialidad sobre el contenido, datos de usuarios y lógica de negocio de la editorial durante y después del proyecto.
Vigencia de la propuesta	Precios y condiciones válidos por 30 días calendario desde la fecha de emisión.

7.3 · Lo que no incluye el precio

✗Costos mensuales de infraestructura (hosting, bases de datos, CDN)

✗App móvil nativa — propuesta separada ($45M–$75M COP adicionales)

✗Gamificación: puntos, insignias y logros (módulo adicional)

✗IA generativa: corrección automática, RAG, rutas adaptativas

✗Portal de padres de familia (requiere definición de alcance)

✗Mini-juegos adicionales más allá de los 6 tipos base

✗Licencias de software premium de terceros si el cliente las elige

Al firmar esta propuesta, la editorial acepta el alcance descrito en el Capítulo 3, el precio indicado en el Capítulo 7 y el plan de pagos acordado. DevGrafik se compromete a ejecutar el proyecto según el cronograma del Capítulo 5 con los 10 entregables del Capítulo 4.

Contrato de aceptación — Propuesta N° DG-LMS-2026-002

Fecha de emisión: Abril 2026 · Válida 30 días · Next.js 15 + NestJS · $185.000.000 COP

Por parte de DevGrafik — Proveedor

Firma representante legal

Nombre completo

NIT / Cédula

Día

Mes

Año

Por parte de la Editorial — Cliente

Firma representante legal

Nombre completo

NIT empresa

Día

Mes

Año

Propuesta N° DG-LMS-2026-002 · DevGrafik · contacto@devgrafik.com · www.devgrafik.com
Stack: Next.js 15 + NestJS + TypeORM + PostgreSQL + Redis + ClickHouse · Nx Monorepo · TypeScript end-to-end
La firma de ambas partes convierte este documento en acuerdo de inicio de proyecto.

PlataformaDigital deAprendizaje

¿Qué se va a construir?

La plataforma en una página

Editorial — control total

Colegio — espacio propio

Docentes y estudiantes

Contenido y estructura institucional soportada

Series educativas soportadas

Estructura institucional soportada

Arquitectura TypeScript end-to-end con ruta al nivel complejo

Stack completo — Nivel Avanzado

Un solo repositorio, tipos compartidos, un CI/CD

lms-editorial/ — Nx Workspace

apps/web

apps/api

libs/shared — clave de la arquitectura

libs/ui

Ventaja al escalar

Cómo se escala sin reescribir

Nivel Avanzado — hoy

Nivel Complejo — futuro

Alcance funcional completo del nivel avanzado

¿Qué entrega DevGrafik exactamente?

Setup del Nx Monorepo + CI/CD + entornos

Sistema de autenticación y control de acceso

Panel Super Admin de la editorial

Panel admin del colegio

Dashboard del estudiante y navegación de contenido

Motor de mini-juegos React — 6 tipos base

Panel del docente — evaluaciones y seguimiento

Mensajería en tiempo real y notificaciones

Analítica ClickHouse y reportes exportables

PWA + configuración de infraestructura + lanzamiento

Plan de trabajo en 6 fases — 6 meses

Diseño UX/UI, monorepo y fundamentos

Auth multitenant + paneles de editorial y colegio

Motor de juegos React + motor de evaluaciones NestJS

WebSocket + ClickHouse + dashboard completo del docente

PWA + push web + QA con colegios reales

Lanzamiento + soporte inicial de 30 días

Tres opciones — el cliente elige

Servicios especializados

Un solo proveedor

Servidores propios

Precio, plan de pagos y términos

Aprobación de la propuesta

Contrato de aceptación — Propuesta N° DG-LMS-2026-002

Por parte de DevGrafik — Proveedor

Por parte de la Editorial — Cliente

Plataforma
Digital de
Aprendizaje