Este sitio web lo realicé como parte de una prueba técnica previo a mi ingreso a una de las compañías en las que trabajé.

A primera vista, es una reto sencillo, donde se busca evaluar las capacidades básicas del desarrollador web, tales como el consumo de APIs externas, conocimientos elementales de HTML, CSS, JavaScript y de UI/UX.

Sin embargo, fue retador para mí, ya que hasta ese momento no había utilizado tanto Vue.Js como Tailwind CSS. Por lo que, durante los 3 días que duró la prueba, me tocó leer bastante documentación y llevar mi conocimiento de React.Js a Vue.Js.

Desarrollar una aplicación utilizando Vue.Js 3 y Tailwind CSS, que permita visualizar un listado de películas desde una ruta home "/", donde cada película muestre su título, sinopsis e imagen de póster.

Requisitos de la prueba:

• Deberá existir una sección de filtrado que el usuario pueda utilizar para filtrar las películas por al menos dos rubos.
• Se deberá poder visualizar los detalles de cada película desde una ruta "/movieDetail/movieId". Por ejemplo: tráiler, presupuesto, recaudación, etcétera.
• El recurso que se deberá utilizar para consultar las películas, es la API The Movie Database.

En un principio, opté por utilizar Nuxt.Js ya que me facilitaría la configuración del proyecto y su desarrollo en sí mismo. Sin embargo, tuve múltiples impedimentos a la hora de hacer el despliegue a producción del sitio web.

Para solucionar este impedimento con la mayor agilidad posible, me apoyé en la comunidad de Nuxt.Js en Discord, donde algunas personas se dispusieron a ayudarme para solucionar los errores que tenía al desplegar el sitio.

Por otra parte, al no tener experiencia desarrollando con Vue.Js sumado a la falta de tiempo que tenía, hizo de la construcción de esta página web todo un reto en sí mismo.

Para esto último, la documentación, videos, cursos y el propio ChatGPT fueron mi guía para el entendimiento de ciertos conceptos.

• Posibilidad de filtrar películas por año, géneros y combinación entre estos.
• Funcionalidad de scroll infinito. Cada vez que el usuario llega a la última película, se obtienen más resultados.
• Optimización de carga utilizando Lazy Loading en las imágenes. Las imágenes únicamente se cargan cuando el usuario las está visualizando en el viewport.
• Persistencia de los filtros aunque el usuario se mueva entre rutas. Si el usuario filtra una película y se mueve a su página de detalle, al volver, los filtros que haya utilizado se aplicarán nuevamente.