Back Button Frameworks
Build a Video Game Aggregator

Build a Video Game Aggregator

In this series, we'll build a video game app that pulls data from the IGDB API and displays game information such as popular titles, coming soon, videos, and screenshots. We'll explore a variety of front-end features with Laravel and other technologies, including the HTTP client, Tailwind CSS, Livewire and Alpine.js.
Intermediate
14 episodes
3h 19m
Begin
14
Latest Episode in This Series

Added 4 days ago

Animating the Rating Progress Bar

In this lesson, we'll make use of ProgressBar.js to make our circular rating widget animate...

Watch
Build a Video Game Aggregator

Build a Video Game Aggregator

In this series, we'll build a video game app that pulls data from the IGDB API and displays game information such as popular titles, coming soon, videos, and screenshots. We'll explore a variety of front-end features with Laravel and other technologies, including the HTTP client, Tailwind CSS, Livewire and Alpine.js.
Begin
14
Latest Episode in This Series

Added 4 days ago

Animating the Rating Progress Bar

In this lesson, we'll make use of ProgressBar.js to make our circular rating widget animate and count...
Watch

Your Teacher | Andre Madarang

Visit Website
https://laracasts.s3.amazonaws.com/avatars/andre-madarang.jpg's avatar
Greetings! I'm Andre, a full-stack web developer and Laracasts instructor. My other hobbies include playing guitar, videography and gaming.

  1. Section 1 Styling

    1. EPISODE 1

      Run Time 2:50

      Free

      What We're Building

      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.

    2. EPISODE 2

      Run Time 32:08

      Free

      Style the Index Page with Tailwind CSS

      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.

      View the source code for this episode on GitHub.

    3. EPISODE 3

      Run Time 5:26

      Free

      Make the Index Page Responsive

      In this episode, we'll review a variety of techniques for making the index page responsive.

      View the source code for this episode on GitHub.

    4. Next up, we'll move on to styling the single game page that shows various details of a game.

    5. EPISODE 5

      Run Time 3:01

      Make a Single Game Page Responsive

      Next, we'll use Tailwind and its CSS grid responsive helpers to make the page for a single game responsive.

      View the source code for this episode on GitHub.

    2.

  2. Section 2 The Video Game API

    1. 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. EPISODE 7

      Run Time 22:11

      Improve Performance

      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. EPISODE 8

      Run Time 14:08

      Skeleton Loader

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

      View the source code for this episode on GitHub.

    3.

  3. Section 3 Refactoring

    1. EPISODE 10

      Run Time 11:04

      Refactoring Views

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

      View the source code for this episode on GitHub.

    2. EPISODE 11

      Run Time 17:26

      Refactoring Views: Part 2

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

      View the source code for this episode on GitHub.

    3. EPISODE 12

      Run Time 4:55

      Refactoring to Blade Components

      In this lesson, we'll leverage Blade components to remove any repeated code from our views.

    4.

  4. Section 4 Testing

    1. EPISODE 13

      Run Time 12:11

      Testing With HTTP Fakes and Livewire

      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.

  5. Section 5 Animations

    1. EPISODE 14

      Run Time 13:16

      Animating the Rating Progress Bar

      In this lesson, we'll make use of ProgressBar.js to make our circular rating widget animate and count up to the correct score.

      View the source code for this episode on GitHub.

    6.
Series still in development robot

*Series still in development. Check back often for updates.

Want us to email you occasionally with Laracasts news?