I created this website as part of a technical test before joining one of the companies I worked for.

At first glance, it's a simple challenge, aiming to assess basic web developer skills such as consuming external APIs, fundamental knowledge of HTML, CSS, JavaScript, and UI/UX.

However, it was challenging for me because until that moment, I hadn't used Vue.js and Tailwind CSS extensively. So, during the 3 days of the test, I had to read a lot of documentation and transition my knowledge from Reactj.s to Vue.js.

To develop an application using Vue.js 3 and Tailwind CSS that allows viewing a list of movies from a home route "/", where each movie displays its title, synopsis, and poster image.

The test requirements are:

• There should be a filtering section that users can use to filter movies by at least two criteria.
• Users should be able to view the details of each movie from a route "/movieDetail/movieId". For example: trailer, budget, revenue, etc.
• The resource to be used to query movies is The Movie Database API.

Initially, I chose to use Nuxt.js as it would simplify the project setup and development process itself. However, I faced multiple hurdles when attempting to deploy the website to production.

To address this impediment as quickly as possible, I sought assistance from the Nuxt.js community on Discord, where some individuals volunteered to help me resolve the errors encountered during the site deployment.

Furthermore, my lack of experience in Vue.js development, coupled with the time constraints I faced, made building this website a significant challenge.

In this regard, documentation, videos, courses, and ChatGPT itself served as my primary resources for understanding certain concepts and progressing with the project.

• The ability to filter movies by year, genres, and combinations of these.
• Infinite scroll functionality. Whenever the user reaches the last movie, more results are obtained.
• Load optimization using Lazy Loading for images. Images are only loaded when the user is viewing them in the viewport.
• Persistence of filters even when the user navigates between routes. If the user filters a movie and moves to its detail page, upon returning, the filters used will be applied again.