Project page

The challenge

The challenge of this college project involved integrating a Vue.js frontend with a Lumen API to create a web application that displays Valorant agents. Additionally, we needed to integrate a second call to an external Valorant API to retrieve detailed agent information, necessitating careful coordination between our frontend, custom API, and the external API. Furthermore, we needed to implement features to enable users to view agent details without navigating to a different page, alongside proper error handling and loading indicators for an enhanced user experience. Ensuring responsiveness across devices was also a priority.

Image of Zima Bottles

Solution

Our solution effectively integrated the Vue.js frontend with the Lumen API, enabling the seamless retrieval and display of Valorant agent information. We coordinated a second call to an external Valorant API to retrieve detailed agent data, enhancing the user experience. Implementing features for viewing detailed agent information without page navigation, alongside error handling and loading indicators, improved user interaction. Furthermore, our solution prioritized responsiveness, ensuring a consistent experience across various devices. GSAP animations were used to enhance the visual appeal and interactivity.