¿Qué aprenderás?
Este curso es la continuación natural del curso de Filament 4. Ya tienes el backoffice funcionando con toda la gestión de cursos, módulos, lecciones, artículos, categorías y usuarios. Ahora toca construir lo que los usuarios van a ver y usar.
Vamos a desarrollar el frontend público completo de la plataforma de cursos. Todo con Livewire 3 para la reactividad y Tailwind CSS 4 para los estilos. Sin frameworks JavaScript, sin compilaciones complejas, solo PHP y las herramientas del ecosistema Laravel.
Configuración del tema con Tailwind CSS 4
Empezamos configurando Tailwind CSS 4 con su nueva sintaxis. Definimos la paleta de colores usando variables CSS nativas, configuramos la tipografía con la fuente Outfit y creamos los estilos base para formularios. También preparamos las clases prose para renderizar correctamente el contenido enriquecido que viene del editor del backoffice.
Biblioteca de componentes UI
Después creamos la biblioteca de componentes UI que usaremos en toda la aplicación. Componentes Blade reutilizables como Button con sus variantes y tamaños, Card para contenedores, Badge para etiquetas de categorías y niveles, NavLink para la navegación, RatingStars para mostrar valoraciones, y los componentes más completos como CourseCard y ArticleCard que combinan varios elementos.
Sistema de autenticación
El sistema de autenticación lo construimos con Livewire. Formularios de registro y login con validación en tiempo real, mensajes de error inline, y toda la gestión de sesiones. Los usuarios pueden crear cuenta, iniciar sesión y cerrar sesión sin recargar la página.
Catálogo de cursos
El catálogo de cursos es uno de los componentes más interesantes. Un listado con búsqueda reactiva que se sincroniza con la URL usando el atributo Url de Livewire 3. Los usuarios pueden buscar cursos y compartir el enlace con los filtros aplicados. Añadimos paginación infinita con un botón de cargar más en lugar de paginación tradicional.
Detalle de curso
Para el detalle de cada curso mostramos toda la información relevante. El curriculum con los módulos y lecciones en acordeón usando Alpine.js, las valoraciones de otros estudiantes, el precio formateado, y un botón de inscripción que cambia según el estado del usuario. Si no está logueado le lleva al login, si ya está inscrito le muestra el botón para continuar aprendiendo.
Visor de lecciones
El visor de lecciones es donde los estudiantes consumen el contenido. Un reproductor de vídeo embebido que funciona tanto con YouTube como con Vimeo, detectando automáticamente la plataforma y generando la URL correcta. Una sidebar lateral muestra el progreso del curso con todas las lecciones y cuáles están completadas. El usuario puede marcar lecciones como completadas y navegar entre ellas.
Sistema de valoraciones
El sistema de valoraciones permite a los estudiantes inscritos dejar su opinión sobre el curso. Un formulario con estrellas clickeables y campo de comentario. Las valoraciones se muestran en el detalle del curso y se calcula la media para mostrar en las tarjetas del catálogo.
Blog
Finalmente construimos el blog completo. Un listado de artículos con paginación infinita, la vista de detalle con el contenido formateado usando las clases prose, y una sección de artículos relacionados basada en la categoría.
Modelos y base de datos
A nivel de base de datos creamos el modelo Enrollment para gestionar las inscripciones y una tabla pivote lesson_user para el progreso de cada estudiante. Actualizamos los modelos existentes con las relaciones necesarias y añadimos accessors para formatear precios, generar URLs de imágenes y convertir URLs de vídeo a formato embebible.
Todo el código sigue las convenciones de Laravel y las mejores prácticas de Livewire. Componentes pequeños y enfocados, separación clara entre lógica y presentación, y uso correcto de los ciclos de vida de Livewire.
Requisitos
Haber realizado el curso Gestión de Cursos con Filament 4
Conocimientos de Laravel, el Curso de Laravel 11 es suficiente
Conocimientos de Livewire 3, tienes el Curso Práctico Laravel Livewire 3
Conocimientos de HTML y CSS, puedes consultar el artículo HTML y CSS básico para desarrolladores Laravel
Conocimientos de Blade, puedes consultar la Guía Completa del Motor de Plantillas Blade
Conocimientos de Alpine.js, puedes consultar el artículo ¿Qué es Alpine.js y cómo integrarlo en Laravel?
¿A quién va dirigido el curso?
Este curso está dirigido a desarrolladores Laravel que quieren aprender a construir frontends modernos sin depender de frameworks JavaScript como Vue o React. Si ya dominas PHP y Laravel, con Livewire puedes crear interfaces reactivas manteniendo todo el código en el servidor.
Es ideal si vienes del curso de Filament 4 y quieres completar la plataforma con un frontend público profesional. También si ya trabajas con Laravel y quieres incorporar Livewire y TailwindCSS 4 a tu stack de desarrollo.
Si buscas crear aplicaciones completas con Laravel sin salir del ecosistema PHP, este curso te enseña cómo hacerlo con un proyecto real de principio a fin.
¿Qué hacer en caso de dudas durante el curso?
Los planes de suscripción trimestral y anual incluyen soporte a través del foro del curso.
Las dudas que se planteen en el foro del curso serán respondidas en un plazo máximo de 24 horas laborables.
Las dudas planteadas deben estar relacionadas con el contenido del curso y no con desarrollos personalizados que no estén relacionados con el curso.
Certificado de finalización
Al completar todas las lecciones del curso, obtendrás un certificado de finalización en formato PDF personalizado con tu nombre y un código QR de verificación.
- center_focus_weak Código QR con enlace al curso
- picture_as_pdf Descargable en formato PDF
- person Personalizado con tu nombre
star Disponible exclusivamente para suscriptores.
Valoraciones
2 valoraciones
hace 6 meses
hace 6 meses
