Aprende a desarrollar una aplicación web completa con Vue.js 3 consumiendo información real desde APIs públicas. Durante el curso construiremos una SPA moderna que integrará tres módulos inspirados en The Simpsons, Pokémon y Yu-Gi-Oh!, cada uno con sus propias estrategias de búsqueda, paginación y visualización de información.
Comenzaremos desde la creación del proyecto con Vue.js y Vite, preparando una arquitectura frontend organizada mediante vistas, componentes reutilizables, servicios, helpers y rutas. Trabajaremos con Composition API, Vue Router, Axios, Bootstrap 5, Bootstrap Icons y SweetAlert2 para construir una aplicación clara, responsive y fácil de mantener.
A lo largo del desarrollo aprenderás a:
-
Consumir APIs REST públicas utilizando Axios.
-
Organizar un proyecto Vue.js con una estructura profesional.
-
Crear componentes reutilizables para búsquedas, paginación, carga y resultados vacíos.
-
Implementar navegación mediante Vue Router y rutas dinámicas.
-
Construir listados y vistas de detalle.
-
Aplicar búsqueda local y búsqueda remota.
-
Trabajar con paginación proporcionada por una API.
-
Crear paginación frontend utilizando propiedades computadas y slice.
-
Controlar estados de carga, errores de red, respuestas vacías y registros inexistentes.
-
Diseñar interfaces responsive utilizando Bootstrap.
-
Compilar una aplicación Vue.js con Vite.
También utilizaremos ChatGPT como asistente de desarrollo durante las diferentes fases del proyecto. Aprenderás a apoyarte en la inteligencia artificial para comprender errores, analizar respuestas de las APIs, mejorar la estructura del código, generar ideas de implementación y resolver dudas, sin reemplazar el aprendizaje de la lógica y los fundamentos de Vue.js.
El curso está organizado por fases. Primero construiremos toda la funcionalidad con una interfaz sencilla y verificable. Después realizaremos una mejora visual final, optimizando las tarjetas, los detalles, el diseño responsive y la experiencia general de la aplicación sin alterar la lógica previamente desarrollada.
No necesitas crear un backend, configurar una base de datos ni implementar autenticación. Todas las solicitudes se realizarán directamente desde el frontend hacia APIs públicas que no requieren credenciales.
Al finalizar, tendrás una aplicación Vue.js completa, modular y publicada en internet, además de una base sólida para desarrollar tus propios proyectos utilizando APIs REST reales.
