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.
Overview
Syllabus
- Styling
- What We're Building
- Style the Index Page with Tailwind CSS
- Make the Index Page Responsive
- Style a Single Game Page with Tailwind
- Make a Single Game Page Responsive
- The Video Game API
- Fetch Game Information from the IGDB API
- Improve Performance
- Skeleton Loader
- Use the API to Fetch Details for a Single Game
- Refactoring
- Refactoring Views
- Refactoring Views: Part 2
- Refactoring to Blade Components
- Testing
- Testing With HTTP Fakes and Livewire
- Animations
- Animating the Rating Progress Bar
- Animating the Rating Progress Bar: Part 2
- Alpine
- Search Dropdown Autocomplete with Livewire
- Search Dropdown UX with Alpine.js
- Modals with Alpine.js
- Wrapping Up
- PurgeCSS
- Conclusion
- Upgrade the IGDB API to v4
Taught by
Andre Madarang