In this series, we'll build a video game app that pulls data from the IGDB API and displays game information such as popular title, coming soon, videos, and screenshots. We'll explore many front-end features with Laravel and other technologies including the HTTP client, Tailwind CSS, Livewire and Alpine.js.
View the source code for this episode on GitHub.
Next up, we'll move on to styling the single game page that shows various details of a game.
Let's make use of the IGDB API to pull in the necessary game information for our index page. We'll start by making requests in our REST client and familiarizing ourselves with the API's query language. Then, we'll move on to using Laravel's HTTP client to pull that information into our Laravel app and display it on the index page.
Let's take a few moments to review how we might improve the performance of our app. We'll start off by looking into making single requests to the video game API. We'll also review how to asynchronously load components using Livewire. Lastly, we'll take a brief look at caching our requests.
Next up, let's build a skeleton loader to replace the loading spinners for when we are waiting for the returned data from the API. You’ll notice that several big sites, like YouTube and Facebook, use this very pattern.
In this lesson, we'll leverage Blade components to remove any repeated code from our views.
In this video, we'll take some time to test our application. I'll show you how to fake an HTTP response and assert against that fake data. We'll also take a look at testing our Livewire components on the main index page.
Let's get our progress bar to work on the main page with Livewire components. To do this, we can make use of Livewire's event system.
As we now begin to wrap up this series, let's take a few moments to optimize our front-end assets for production by leveraging PurgeCSS to remove any unused classes in Tailwind CSS.