لاراول

ایجاد یک سیستم بازی ویدئویی

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.

سطح متوسط 21 جلسه آموزشی 04:27:00 ساعت
01
قسمت 1

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.

02
قسمت 2

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.

03
قسمت 3

Make the Index Page Responsive

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

04
قسمت 4

Style a Single Game Page with Tailwind

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

05
قسمت 5

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.

06
قسمت 6

Fetch Game Information from the IDGB API

Let's make use of the IGDB API to pull in the necessary game information for our index page.

07
قسمت 7

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

08
قسمت 8

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.

09
قسمت 9

Use the API to Fetch Details for a Single Game

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

10
قسمت 10

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.

11
قسمت 11

Refactoring Views: Part 2

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

12
قسمت 12

Refactoring to Blade Components

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

13
قسمت 13

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.

14
قسمت 14

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

15
قسمت 15

Animating the Rating Progress Bar: Part 2

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.

16
قسمت 16

Search Dropdown Autocomplete with Livewire

Next, let's implement a dropdown component that searches for games using Livewire.

17
قسمت 17

Search Dropdown UX with Alpine.js

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

18
قسمت 18

Modals with Alpine.js

Next, we'll implement a modal for the game trailer, as well as a modal for the game screenshots.

19
قسمت 19

PurgeCSS

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.

20
قسمت 20

Conclusion

And that's a wrap! Join me as I say goodbye while providing a few ideas for how you might extend this application.

21
قسمت 21

Upgrade the IGDB API to v4

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.