Del lanzamiento a la experiencia de estudio
Desarrollé el front-end de Modo Fluente, de Michela Ensina, conectando un sitio público de marketing y ventas con una aplicación autenticada para acceder a los materiales adquiridos. El trabajo freelance comenzó en mayo de 2026 y la entrega inicial se completó en julio.
Mi alcance incluyó arquitectura front-end, componentes reutilizables, integración con la API, interfaces adaptables y publicación de ambas aplicaciones. Trabajé con Marco Ryan, responsable de la API Laravel y de los flujos de compras, almacenamiento y autorización en el servidor. Adapté las interfaces a la identidad visual y al contenido proporcionado y aprobado por Michela.
Dos aplicaciones, necesidades diferentes
Organicé el front-end en un monorepo con npm workspaces y dos aplicaciones Next.js App Router, publicadas de forma independiente en Vercel.
El marketing necesitaba espacio para la oferta, los mockups del producto, las secciones editoriales y las llamadas a la acción. El área del alumno necesitaba navegación predecible, biblioteca, herramientas de lectura y estados claros para el uso recurrente. La separación permitió diseñar cada experiencia sin imponerles la misma composición ni el mismo ciclo de publicación.
Ambas consumen la misma API REST. La interfaz de estudio presenta los accesos y la disponibilidad de materiales devueltos por el servidor; la elegibilidad de compra y la autorización pertenecen al contrato del backend.
Preparar el lanzamiento
Implementé la landing page de ventas, la página Sobre la profesora y los estados de presentación previos y posteriores al lanzamiento. El recorrido comercial reúne la guía, los materiales de apoyo, el planificador semanal y los enlaces al checkout externo de Hotmart.
Para la lista de espera, construí un endpoint del lado del servidor en Next.js entre el formulario y la API Laravel. Valida y normaliza los envíos, convierte registros duplicados y fallos del servicio en mensajes útiles e integra la confirmación por correo mediante Resend cuando está habilitada. La configuración de lanzamiento permite pasar de captar interés a dirigir a las visitantes hacia la compra.
Una interfaz de aprendizaje autenticada
Construí los flujos de inicio de sesión, primer acceso, recuperación de contraseña y sesión, con un cliente de API y una capa de sesión compartidos. Dentro de la aplicación, una estructura adaptable conecta el panel, la biblioteca, el progreso y la configuración de la cuenta. Los tokens semánticos sostienen los temas oscuro y claro, mientras que la navegación móvil mantiene cerca las principales tareas de estudio.
El panel reúne el progreso, los materiales recientes y un punto para continuar estudiando. Los filtros de la biblioteca ayudan a encontrar contenidos por tipo y estado de finalización. Completar un material o deshacer esa marca actualiza el progreso mediante la API.
Para los PDF, implementé un lector integrado con PDF.js, renderizado en canvas adaptado al ancho disponible y a la densidad de píxeles, estados de carga y error y liberación de recursos. Separé la lectura principal de las descargas de archivos de apoyo, siguiendo los permisos devueltos por la API. Las páginas de material también admiten vídeo incorporado y archivos complementarios.
Mantener la biblioteca
Implementé la interfaz administrativa para listar, crear y editar materiales, subir archivos, confirmar eliminaciones y vincular contenidos a productos. Los formularios conectan metadatos, ajustes de publicación y controles de descarga de los adjuntos con la API existente, con mensajes de carga, validación y error.
La entrega inicial puso en producción el sitio comercial y la experiencia de estudio. La colaboración con Michela orientó ajustes de composición, contraste, jerarquía de componentes y comportamiento móvil durante el trabajo.
