Build a Video Game Aggregator

Series Episodes

1. Styling (5)
   1. What We're Building

      2m 50s

      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.
   2. Style the Index Page with Tailwind CSS

      32m 08s

      We’ll start off by styling the game index page using Tailwind CSS. We make use of Tailwind’s latest features, including transitions and the space-x utilities.
   3. Make the Index Page Responsive

      5m 26s

      In this episode, we'll review a variety of techniques for making the index page responsive.
   4. Style a Single Game Page with Tailwind

      15m 52s

      Next up, we'll move on to styling the single game page that shows various details of a game.
   5. Make a Single Game Page Responsive

      3m 01s

      Next, we'll use Tailwind and its CSS grid responsive helpers to make the page for a single game responsive.
2. The Video Game API (4)
   1. Fetch Game Information from the IGDB API

      26m 38s

      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.
   2. Improve Performance

      22m 11s

      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.
   3. Skeleton Loader

      14m 08s

      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.
   4. Use the API to Fetch Details for a Single Game

      18m 47s

      In this episode, we'll use the videogame API to fetch the necessary information for a single game page. We'll add genres, a game summary, video trailers, screenshots, and similar games.
3. Refactoring (3)
   1. Refactoring Views

      11m 04s

      Let's move on and take a look at a particular refactor that involves moving most of the logic out of our views.
   2. Refactoring Views: Part 2

      17m 26s

      In this episode, we'll continue our refactor by cleaning up the view for a single game page.
   3. Refactoring to Blade Components

      4m 55s

      In this lesson, we'll leverage Blade components to remove any repeated code from our views.
4. Testing (1)
   1. Testing With HTTP Fakes and Livewire

      12m 11s

      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.
5. Animations (2)
   1. Animating the Rating Progress Bar

      13m 16s

      In this lesson, we'll make use of ProgressBar.js to make our circular rating widget animate and count up to the correct score.
   2. Animating the Rating Progress Bar: Part 2

      14m 00s

      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.
6. Alpine (3)
   1. Search Dropdown Autocomplete with Livewire

      17m 08s

      Next, let's implement a dropdown component that searches for games using Livewire.
   2. Search Dropdown UX with Alpine.js

      10m 45s

      Let's continue working on our search dropdown by making it more user-friendly with basic keyboard accessibility.
   3. Modals with Alpine.js

      12m 35s

      Next, we'll implement a modal for the game trailer, as well as a modal for the game screenshots.
7. Wrapping Up (3)
   1. PurgeCSS

      2m 07s

      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.
   2. Conclusion

      1m 14s

      And that's a wrap! Join me as I say goodbye while providing a few ideas for how you might extend this application.
   3. Upgrade the IGDB API to v4

      9m 27s

      This series used version 3 of the IGDB API; however, since publishing, version 4 is now available. In this supplementary episode, we'll review the necessary upgrade steps.