Premium

Plantilla LMS Next.js con IA y clases en vivo

Learnio es una plantilla LMS Next.js full-stack con backend NestJS, asistente de IA, clases en vivo, pago con Stripe, cuestionarios, certificados y árabe RTL.

Plantilla LMS Next.js con IA y clases en vivo

Todo incluido

Full Stack

Sitio para estudiantes + Panel de administración e instructores + API NestJS con TypeORM y autenticación

$179
Por separado: $277Ahorra $98
Documentación
O compra una sola parte desde $79
  • Uso en proyectos comerciales ilimitados. Trabajo para clientes incluido.
  • Pago único, actualizaciones gratis
  • Factura para empresas con tu NIF o número de IVA

Compradores Recientes

Actualizaciones en tiempo real

t****u
Compra verificada
Hace 4 días
C*****n
Compra verificada
Hace 4 semanas

Países Principales

Basado en ubicaciones de compra

Algeria
Compras
50%
Brazil
Compras
50%
  • Uso en proyectos comerciales ilimitados. Trabajo para clientes incluido.
  • Pago único, actualizaciones gratis
  • Factura para empresas con tu NIF o número de IVA

Learnio es una plantilla LMS Next.js full-stack con backend NestJS, asistente de IA, clases en vivo, pago con Stripe, cuestionarios, certificados y árabe RTL.

Compartir:

Learnio reúne el descubrimiento de cursos, la enseñanza y el progreso de los estudiantes en una sola plataforma de aprendizaje full-stack: un sitio web para estudiantes en Next.js, un panel de gestión en Next.js y una API NestJS detrás de ambos. Clases en vivo, un asistente de IA para administración, pago con Stripe, cuestionarios, tareas y certificados, en inglés y árabe con temas claro y oscuro.

Demo del sitio para estudiantesDemo de admin e instructor
Student website overview, light
Student website overview, light. The Learnio home page with course search and the catalog entry points
Student website overview, dark
Student website overview, dark. Course search and the catalog entry points on the home page, dark theme
Management dashboard, administrator overview, light
Management dashboard, administrator overview, light. The administrator's overview in the light theme: platform totals, enrollment activity, top categories and the AI assistant widget
Management dashboard, administrator overview, dark
Management dashboard, administrator overview, dark. The administrator's overview: totals for courses, students, revenue and enrollments, the enrollment activity chart, top categories and the AI assistant widget
Abrir el sitio para estudiantesAbrir el panel de gestión
El paquete

Construye tu plataforma de aprendizaje alrededor de tu marca

Una base conectada para una academia en línea, un portal de formación o una plataforma de cursos, con código fuente que adaptas a tu proyecto. El paquete full-stack incluye tres aplicaciones.

Sitio para estudiantes en Next.js

  • Catálogo y páginas de curso
  • Perfiles de instructores y blog
  • Un panel de aprendizaje personal
  • Pago de cursos de pago

Panel de gestión en Next.js

  • Herramientas de administración para toda la plataforma
  • Un espacio para instructores con cursos, estudiantes y actividad docente
  • Tarjetas de resumen, gráficos y registros con búsqueda

Backend NestJS

  • Autenticación, cursos e inscripciones
  • Progreso, evaluaciones y mensajes
  • Pedidos y correos electrónicos
Asistente de IA

Pon un asistente de IA dentro de tu trabajo de administración

Pide al asistente de administración que consulte información de la plataforma, cree borradores de cursos, actualice registros admitidos o programe actividad docente.

The AI assistant before a question, light
The AI assistant before a question, light. The admin assistant's empty state: the greeting, the model picker, the composer and suggested questions about the platform, enrollments, courses and classes
The AI assistant before a question, dark
The AI assistant before a question, dark. The assistant's empty state with the greeting, model picker, composer and suggested questions, dark theme

Conectado mediante herramientas MCP

Sus herramientas MCP conectan la conversación con las acciones de gestión admitidas, incluidas analíticas seleccionadas mostradas como gráficos.

  • Consulta cursos, instructores e inscripciones a través de la API
  • Crea un borrador de curso con una sola petición, título y descripción en árabe incluidos
  • Funciona con Google Gemini, OpenAI o DeepSeek, con tu propia clave de API para el proveedor que elijas
  • Revisa el contenido y los cambios generados por IA como parte de tu flujo de trabajo
Create a course draft through the AI assistant, light
Create a course draft through the AI assistant, light. The admin assistant reading the catalog and creating a draft course through MCP tools, with the card that opens it
Create a course draft through the AI assistant, dark
Create a course draft through the AI assistant, dark. A course draft created by the assistant through MCP tools, with the card that opens it, dark theme
Cursos

Convierte el contenido de tus cursos en una experiencia de aprendizaje

Crea cursos, ordena secciones y lecciones arrastrando y soltando, gestiona los materiales y controla qué está en borrador y qué está publicado.

Curriculum builder, light
Curriculum builder, light. Sections and lessons ordered with drag and drop, with draft and published states and a curriculum overview
Curriculum builder, dark
Curriculum builder, dark. Drag-and-drop ordering of sections and lessons, with draft and published states, dark theme
Lesson player, light
Lesson player, light. A lesson playing with the course content beside it, progress, and the next lesson one click away
Lesson player, dark
Lesson player, dark. The lesson player with the course outline beside the video and the next lesson one click away, dark theme

Aprender a tu ritmo

Los estudiantes ven las lecciones, vuelven a la última que abrieron y siguen su avance desde su panel de aprendizaje.

  • Lecciones de vídeo, lectura, cuestionario y tarea
  • Notas personales guardadas en cada lección
  • Recursos descargables junto a las notas
  • Progreso contado lección a lección
Lesson notes and resources
Lesson notes and resources. A student's own notes saved on a lesson, with its downloadable resources on the tab beside them

Páginas de curso que explican el curso

  • Qué aprenderás y a quién va dirigido
  • El temario, el instructor y las reseñas
  • Precio, número de inscritos y botón de inscripción
  • Un catálogo con búsqueda y filtros por delante
Course page
Course page. A course with what you will learn, who it is for, the syllabus, price and enroll action
Clases en vivo

Clases en vivo autoalojadas

Imparte clases en vivo en tu propio servidor de reuniones, con estudiantes e instructores uniéndose directamente dentro de tu plataforma de aprendizaje. Mantén tu experiencia de enseñanza bajo tu marca, con control sobre tu infraestructura de reuniones.

Requiere un servidor de reuniones configurado por separado. Los costes de alojamiento no están incluidos.

Live class, instructor, light
Live class, instructor, light. An instructor hosting a live class inside Learnio on a self-hosted meeting server, with host controls
Live class, instructor, dark
Live class, instructor, dark. The instructor's view of a live class with host controls, dark theme

Un solo calendario para clases y entregas

Los calendarios de curso reúnen las sesiones en vivo y las fechas de entrega de tareas.

  • Sesiones en vivo y fechas de entrega por curso
  • Ventanas de acceso programadas alrededor de cada clase
  • Los instructores programan sesiones desde el panel
Course calendar
Course calendar. Live sessions, assignment deadlines and finished lessons on one calendar

Dentro de la clase

Pantallas previas, ventanas de acceso programadas y controles de anfitrión sostienen el flujo de una clase en vivo.

  • Una pantalla previa antes de entrar en la sala
  • Controles de anfitrión para el instructor que dirige la clase
  • El asiento del estudiante en la misma sala
  • Configura el servidor de reuniones para tu despliegue
Live class, student view
Live class, student view. A student's seat in the live class, joined from the course calendar
Mensajería

Mantén conectados a estudiantes e instructores

Da a los estudiantes un lugar propio para preguntar sobre sus cursos. Las conversaciones conservan su historial, sus imágenes adjuntas y sus indicadores de no leído.

Course conversation with an image attachment, light
Course conversation with an image attachment, light. A student to instructor thread with saved history and a picture in it
Course conversation with an image attachment, dark
Course conversation with an image attachment, dark. A course thread with saved history and an image attachment, dark theme

Notificaciones que llevan a algún sitio

Las notificaciones llaman la atención sobre lo que cambió, y cada una abre aquello a lo que se refiere.

  • Mensajes nuevos y cambios de sesión
  • Tareas calificadas y certificados emitidos
  • Una bandeja de entrada del instructor limitada a los cursos que imparte
Notifications
Notifications. New messages, session changes, marked assignments and issued certificates in one list
Evaluación

Evalúa el aprendizaje y reconoce el progreso

Cuestionarios, tareas y certificados, desde el editor de preguntas hasta una página pública de verificación.

Cuestionarios calificados en el servidor

Crea cuestionarios con preguntas, opciones de respuesta, puntuación mínima y límite de intentos.

  • Los estudiantes reciben resultados calificados en el servidor
  • Los cuestionarios obligatorios pueden formar parte de la finalización del curso
  • Intentos limitados, o ilimitados para practicar
Quiz editor
Quiz editor. An instructor building a quiz with questions, answer options, passing score and attempt limit
Quiz result, light
Quiz result, light. A completed quiz with its server-graded result
Quiz result, dark
Quiz result, dark. Server-graded quiz results with the pass mark and attempts, dark theme
Assignment grading, light
Assignment grading, light. Submissions for one assignment, one already marked with feedback and one being graded
Assignment grading, dark
Assignment grading, dark. The marking queue with grades and individual feedback, dark theme

Calificaciones, comentarios y certificados

Los instructores revisan las entregas, guardan calificaciones y dejan comentarios individuales. Los estudiantes que cumplen los requisitos reciben el certificado del curso.

  • Números de certificado y páginas públicas de verificación
  • Comparte un certificado, o imprímelo y guárdalo en PDF desde el navegador
  • Los certificados obtenidos reunidos en el panel del estudiante
Earned certificates
Earned certificates. A student's certificates, ready to share or print and save as PDF
Certificate verification, light
Certificate verification, light. The public page that verifies an issued certificate by its number
Certificate verification, dark
Certificate verification, dark. Public certificate verification by number, dark theme
Pago

Conecta pago, inscripción y correo

Learnio incluye Stripe Checkout, gestión de pedidos y control del estado del pago vinculado a la inscripción en el curso. También se incluye el código de integración de PayPal.

Checkout, light
Checkout, light. The checkout sheet with card and PayPal on offer; payment finishes on the provider's own page
Checkout, dark
Checkout, dark. The checkout sheet with card and PayPal on offer, dark theme

Inscrito en cuanto se liquida el pago

La inscripción sigue al pago liquidado, y la página de confirmación refleja el estado real del pedido.

  • Recibos de compra y confirmaciones de inscripción por correo
  • Integración con Resend para verificación de correo, restablecimiento de contraseña, recibos y confirmaciones
  • Plantillas de correo en inglés y árabe
Checkout confirmation
Checkout confirmation. The page a settled purchase lands on, once the server confirms the order

Los pedidos al completo

  • Cada pedido con su curso, método de pago y estado
  • Control del estado vinculado a la inscripción
  • Registros de pedidos con búsqueda para administradores
Order detail
Order detail. One order in the management dashboard with its payment method and status
Evidencia de pago de prueba

Registros del sandbox de Stripe y un recibo recibido por correo

Pagos de prueba correctos, el webhook de pago aceptado por la API y un recibo de compra tal como llegó por correo. Son evidencias de pagos de prueba, no cargos reales.

Successful test payments in Stripe
Successful test payments in Stripe. Stripe's sandbox transactions list with succeeded test payments; test mode, not live charges
Stripe checkout webhook received and order marked settled
Stripe checkout webhook received and order marked settled. The checkout.session.completed event accepted by the API with a 201 and the order reference marked settled; sandbox mode
Purchase receipt received by email
Purchase receipt received by email. The receipt email as it arrived in a test inbox after a sandbox payment
Roles

Da a cada rol las herramientas que necesita

Los administradores dirigen la plataforma. Los instructores trabajan con sus cursos asignados y nada más.

Administradores

  • Cursos, estudiantes, instructores e inscripciones
  • Pedidos, reseñas y contenido del blog
  • Personal, roles y ajustes

Instructores

  • Sus cursos asignados y su temario
  • Mensajes, cuestionarios y sesiones
  • Entregas de estudiantes por calificar

Operaciones diarias

  • Tarjetas de resumen y gráficos
  • Registros con búsqueda
  • Roles y permisos
Enrollment management
Enrollment management. The enrollments table in the management dashboard
Bilingüe

Empieza con inglés, árabe, claro y oscuro

Se incluyen interfaces en inglés y árabe, con diseño de derecha a izquierda para el árabe y temas claro y oscuro en las experiencias de estudiante y de gestión.

Student dashboard in Arabic, light
Student dashboard in Arabic, light. The learner dashboard mirrored right to left
Student dashboard in Arabic, dark
Student dashboard in Arabic, dark. The learner dashboard in Arabic with a right-to-left layout, dark theme

De derecha a izquierda, de principio a fin

Personaliza la marca y amplía las traducciones para tu público.

  • Diseños escritos con propiedades lógicas, que se reflejan en árabe
  • Mensajes de next-intl divididos por funcionalidad e idioma
  • Cifras, fechas y relojes se mantienen de izquierda a derecha dentro del texto árabe
  • Usa el selector Claro / Oscuro sobre las capturas para comparar cada interfaz en ambos temas
Student website in Arabic
Student website in Arabic. The home page in Arabic with a right-to-left layout
Bajo el capó

Construye sobre una base full-stack conocida

Next.js 16, React 19, TypeScript, Tailwind CSS 4 y un backend NestJS modular.

Frontend

  • Next.js 16 App Router, React 19, TypeScript
  • Tailwind CSS 4
  • TanStack Query para los datos de la API
  • React Hook Form y Zod para los formularios
  • next-intl para la localización

Backend

  • NestJS con módulos por dominio
  • TypeORM con SQLite para desarrollo local
  • Compatibilidad con configuración MySQL
  • Tokens JWT separados para estudiantes y personal
  • Seeders de base de datos y contenido de ejemplo

Experiencia de desarrollo

  • Documentación de instalación para las tres aplicaciones
  • Dependencias fijadas a versión exacta
  • Una capa de API por frontend, consumida mediante hooks de consulta
  • Datos simulados para que un frontend funcione antes que la API
Antes de lanzar

Lo que configuras tú

Learnio es una plantilla de código fuente, no una suscripción de alojamiento gestionado. Configura tu alojamiento, tu base de datos, tu almacenamiento de medios y los servicios externos que decidas usar.

Pagos

  • Tus propias cuentas y credenciales válidas de Stripe o PayPal
  • Configuración de webhooks
  • Pruebas de extremo a extremo antes de aceptar pagos reales

Correo

  • Tu configuración de Resend
  • Un dominio de envío verificado

IA y videollamadas

  • Tu propia clave de API para Google Gemini, OpenAI o DeepSeek
  • Un servidor de reuniones que configuras y alojas tú mismo
  • Los costes de alojamiento y de los proveedores no están incluidos
Explora

Explora Learnio antes de construir

Recorre el sitio para estudiantes y el panel de gestión en modo claro y oscuro. Las páginas de inicio de sesión de la demo rellenan una cuenta de demostración por ti. Las capturas usan datos de ejemplo, y las capturas de Stripe muestran el modo de prueba.

Demo del sitio para estudiantesDemo de admin e instructor
Ideal para

Construye tu próxima plataforma de aprendizaje con Learnio

Creadores de cursos y coaches en líneaEmpresas de formación y academiasBootcamps y escuelas con cohortes en vivoTutores y coaching individualAgencias que construyen un LMS para un clientePlataformas bilingües con árabe y RTL

Especificaciones Técnicas

Framework

Next.js 16

Versión de React

React 19

Estilo

Tailwind CSS 4

TypeScript

Sí

Responsivo

Móvil, Tableta, Escritorio

Período de Soporte

Lifetime Incluido

Consejo Pro: Todas las plantillas incluyen documentación completa para ayudarte a comenzar rápidamente.

Preguntas frecuentes

¿Qué recibo al comprar esta plantilla?
El código fuente completo del paquete que elijas, descargado desde tu panel personal justo después del pago. Hay una factura de empresa disponible para cada compra.
¿Puedo usarla en proyectos comerciales o de clientes?
Sí. Cada plantilla de pago incluye una licencia Comercial que cubre proyectos comerciales ilimitados, incluido el trabajo que entregues a tus clientes.
¿Recibo actualizaciones después de comprar?
Sí. Las actualizaciones son gratuitas. Las nuevas versiones aparecen en tu panel, donde puedes volver a descargar tus archivos en cualquier momento.
¿Incluye soporte?
Sí. El asistente de esta página responde en segundos y el soporte por correo está incluido en cada compra, en support@aniq-ui.com, con respuesta en 4 horas.
¿Puedo probarla antes de comprar?
Sí. Esta plantilla tiene una demo completa en línea, enlazada arriba en esta página, para recorrer la versión real antes de decidir.

Precios

Elige tu paquete

Un solo pago por el código fuente completo, tuyo para modificarlo y publicarlo.

Todo incluido

Full Stack

Sitio para estudiantes + Panel de administración e instructores + API NestJS con TypeORM y autenticación

Qué incluye

Comprado por separado$277
Ahorras$98
$179

O compra una sola parte

Sitio para estudiantes

El sitio para estudiantes en Next.js 16 por separado, con el catálogo, las páginas de curso, el pago y el panel de aprendizaje

$79

Panel de administración e instructores

El panel de gestión en Next.js 16 por separado, con gestión de cursos, personas e inscripciones, el espacio del instructor y el asistente de IA

$99

API Backend

La API NestJS por separado, con TypeORM, auth JWT, inscripciones, evaluaciones, pedidos, webhooks, correo y un seeder de un comando

$99

Pagos seguros y protegidos con Paddle

Recibirás un recibo con IVA por correo electrónico después de la compra.

Plantillas Relacionadas

Plantilla de restaurante Next.js con pedidos online y panel de cocina - Next.js Restaurante template preview - Aniq-UI

Restaurante

$179
Restaurante
Full Stack
Nuevo
IA

Food Studio es una plantilla de restaurante Next.js full-stack: un sitio de pedidos con carta, combos, carrito, pago y seguimiento de pedidos, un panel para el equipo con pedidos, carta y cocinas, una API NestJS, herramientas de IA para las fotos de los platos, e inglés y árabe con RTL.

Ver Plantilla
Plantilla de sitio de pedidos para restaurantes en Next.js - Next.js Restaurante template preview - Aniq-UI

Sitio de pedidos para restaurantes

$79
Restaurante
Sitio de pedidos
Nuevo
IA

Un sitio de pedidos para restaurantes en Next.js 16 con menú, combos, creador de comidas, carrito, pago, seguimiento de pedidos y cuentas de cliente, en inglés y árabe.

Ver Plantilla
Plantilla de panel de administración para restaurantes en Next.js - Next.js Restaurante template preview - Aniq-UI

Panel de administración para restaurantes

$99
Restaurante
Panel del equipo
Nuevo
IA

Un panel de administración para restaurantes en Next.js 16 para gestionar pedidos, el menú, categorías, clientes, cocinas y el equipo, con un estudio de IA para fotos de platos, en inglés y árabe.

Ver Plantilla
Ventajas técnicas

Hechas para cada pantalla y cada usuario

Cada plantilla premium es responsiva, accesible, rápida y tipada desde el primer commit, para que tu lanzamiento parta de código listo para producción.

01 · Diseño

Diseño Responsivo

Diseños para móvil, tableta y escritorio con un solo conjunto de componentes, un menú móvil y zonas táctiles de 44px.

Saber más: Diseño Responsivo

02 · Inclusiva

Accesibilidad

HTML semántico, controles etiquetados, un anillo de foco visible con el teclado y soporte para movimiento reducido.

Saber más: Accesibilidad

04 · Tipos

Soporte TypeScript

TypeScript estricto en cada aplicación, con props, respuestas de API y modelos de datos tipados.

Saber más: Soporte TypeScript

Características de Nivel Empresarial Incluidas

Experiencia del Desarrollador

  • TypeScript 5.0+ con verificación estricta de tipos
  • Arquitectura de componentes de servidor y cliente
  • Guía de inicio rápido y documentación de funciones

UX y Rendimiento

  • Sistema de diseño responsivo mobile-first
  • Marcado accesible con ARIA y navegación por teclado
  • Renderizado rápido con componentes de servidor y recursos optimizados

Mantenimiento y Soporte

  • Soporte incluido con su compra
  • Actualizaciones regulares de seguridad y framework
  • Estructura semántica optimizada para SEO
Leer la guía para desarrolladores
world map

Comunidad Global de Usuarios

Únete a miles de desarrolladores en todo el mundo que confían en Aniq-UI para sus proyectos. Nuestras plantillas se utilizan en todo el mundo para crear experiencias web impresionantes.

InicioPlantillasBlog
Aniq-uiAniq-ui

Preferencias de Cookies

Utilizamos cookies para mejorar tu experiencia de navegación, analizar el tráfico del sitio y personalizar el contenido. Al hacer clic en "Aceptar Todo", consientes nuestro uso de cookies para análisis y publicidad personalizada.