🌟 Code by Lesson Instructor ---- 👉 Githu Repo 👈

---

Options about de lazy load and slots. (See @stephangadzhev 's comment here )

💫 First Option. (CSS) -- 👉 Githu Repo Tag 👈

⭐ Second Option ---- 👉 Githu Repo Tag 👈

@StephanGadzhev I think that in this case, the checkbox is being used for illustrative purposes. I've been looking for information, and all of it suggests either placing the checkbox outside the slot or removing lazy loading—which, of course, leads to another problem: communication between the card and its parent container to pass the value so that the values within the $selected array can be updated.

One clever solution I found involved placing the checkbox outside the $slot and then using the CSS absolute property to position it where desired.

Another solution is to use more code with dispatch and the on attribute.

💫 First Option. (CSS) -- 👉 Githu Repo Tag 👈

<!-- pages/post/⚡index.blade.php -->
@foreach($this->posts as $post)
<div class="relative">
    <livewire:pages::post.card
        :post="$post"
        :wire:key="$post->id"
        :lazy.bundle="$loop->iteration > 9"
    />

    <div class="absolute top-3 left-3 z-10">
        <flux:checkbox
            class="mt-0! cursor-pointer"
            wire:model.live="selected"
            value="{{ $post->id }}"
            wire:key="select-{{ $post->id }}"
        />
    </div>
</div>
@endforeach

⭐ Second Option ---- 👉 Githu Repo Tag 👈

<!-- pages/post/⚡index.blade.php -->

<!----- add php code  --->
use Livewire\Attributes\On;

public array $selected = [];

#[On('post-selection-changed')]
public function updateSelected(int $postId, bool $checked): void
{
    if ($checked) {
        $this->selected = array_values(array_unique([...$this->selected, $postId]));
        return;
    }

    $this->selected = array_values(
        array_filter($this->selected, fn ($id) => (int) $id !== $postId)
    );
}

<!-------  The foreach    ---->
    @foreach($this->posts as $post)
      <div>
        <livewire:pages::post.card
                :post="$post"
                :selected="in_array($post->id, $this->selected)"
                :wire:key="'post-card-'.$post->id"
                :lazy="$loop->iteration > 9"
        />
      </div>
    @endforeach 

<!----------------------------- ------------------->

<!-- pages/post/⚡card.blade.php -->

<!-- add php code -->
public bool $selected = false;


<!--- the checkbox wherever you need it --->
<flux:checkbox
    class="mt-0! cursor-pointer"
    wire:model.live="selected"
    wire:change="$dispatch('post-selection-changed', {
        postId: {{ $post->id }},
        checked: $event.target.checked
    })"
/>

On the initial render, elements that are over the first using :lazy.bundle="$loop->iteration > 9" do not include the checkbox while loading. This happens because the card component is not present during the initial load. When the lazy-loaded component finishes loading, the <flux:checkbox wire:model="selectedBookings" :value="$booking->id" /> still does not appear because it was never part of the initial DOM. I see that in the video is the same. if you scroll down you will see that the checkbox are missing.

What is the correct way to handle this so the checkbox reliably appears once the lazy-loaded component is loaded?

Here you have the Github repo - Chapter 11 - Forwarding Attributes for anyone who wants it, there is some aesthetic variations

Here you have the Github repo for anyone who wants it, there is some aesthetic variations

@lara_dev_1970 Thanks

@lara_dev_1970 hi. I searched the github repo https://github.com/laracasts/Tweety/tree/master and couldn't find the code for this episode. Seems like they had a project and abandoned it... No support whatsoever, which translates in long hours of research to learn some topics but far worse it's to replicate the code on windows and vs code. Thank you so much

Here you have the Github repo for anyone who wants it, there is some aesthetic variation

We'll see how the rest of the course develops, but right now I don't understand the logic of this point, because right now what's being passed is static data.

Otherwise, without knowing what will happen to the code later on.

/* resources/views/components/layout.blade.php */

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="color-scheme" content="dark" />
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    <title>{{ 'WorkLarcast - '. $title ?? '' }}</title>
</head>
<body class="bg-pixl-dark text-pixl-light flex gap-8 px-4 sm:h-dvh sm:overflow-clip xl:gap-16">

@php
    /* Define an array of routes where the Post button should be shown */
    $array = ['profile', 'otherPage', 'anotherPage'];
    /* Check if current route is in the array to return true or false */
    $showPostButton = collect($array)->contains(
        fn ($route) => request()->is($route)
    );
@endphp

<!-- Navigation -->
<x-partials.navigation  :showPostButton="$showPostButton" />

{{-- Main content --}}
{{ $slot }}

<!-- Sidebar -->
<x-partials.aside />
</body>
</html>

/*  resources/views/profile.blade.php (for example) 
At this point  you don`t need  @props([ ]) to pass variables
*/
<x-layout title="Profile page">
    <!-- Start Content --> 

      <!-- End Content -->
</x-layout>

@ageorge28 I think theme is One Dark Pro

Notes and personal opinions

✱ Code

✱ When you are coding in laravel with componentes you can pass data an varibles directly, like this:

<x-cart.product :cart="$cart" :product="$product" :any_variable="$any_variable" />

This way, you don't need to put into component:

@props([
    "product",
    "cart",
    "any_varibale",
])

✱ CSS

Buttons looks better with hand cursor:

class="cursor-pointer"

GitHub Code:

Laracast Github - Frontend Mentor Challenge with Laravel

Simon Vrachliotis Githb - Frontend Mentor Challenge with Laravel

It would be very good if they explained the development on more than one platform, and above all on generic ones, like shared hosting with Cpanel... etc.

@Niush No it's not. Tailwind uses 'cursor: default' for buttons as a default. Even says so in the documentation you linked to 😉

Nice series!

You forgot cursor-pointer on the buttons ;)

This is a very good time to point out that the subtract and add items buttons need accessibility. You can add a title to the svgs <title>Substract Item</title> or add an aria title to the button. Something to remember on the remove item in the checkout section as well.

Yes it's a bit pedantic in a lesson like this but I find it's one of those things that can get missed if you're not on top of it all that time :)

This returns Call to a member function totalQuantity() on null. when there are not session into table cars.

To solve: cart/index.php

Your Cart ({{ $cart?->totalQuantity() ?? 0 }})  

 @if($cart) 

<aside class="relative p-6 h-full">
    <h2 class="text-red font-bold text-2xl inline-flex">Your Cart (<span>{{ $cart?->totalQuantity()??0}}</span>)
    </h2>
    @if($cart?->totalQuantity())
        <x-cart.active :cart="$cart"/>
    @else
        <x-cart.empty/>
    @endif
</aside>

create_productos_table.php

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration {
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::create('products', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('category');
            $table->string('image');
            $table->unsignedInteger('price_cents');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::dropIfExists('products');
    }
};

ProductSeeder.php

<?php

namespace Database\Seeders;

use App\Models\Product;
use Illuminate\Database\Seeder;
use Illuminate\Support\Facades\File;

class ProductSeeder extends Seeder
{
    /**
     * Run the database seeds.
     */
    public function run(): void
    {
        $data = json_decode(File::get(database_path('seeders/data.json')));
        foreach ($data as $product) {
            Product::create([
                'name' => $product->name,
                'category' => $product->category,
                'image' => str_replace('./assets/images/', '', $product->image->mobile),
                'price_cents' => $product->price * 100,
            ]);
        }
    }
}

@jdworks yes, and Webstorm too. But if you see the terminal messages you can read:

Files in the public directory are served at the root path.
Instead of /public/fonts/DepartureMono-Regular.woff2, use /fonts/DepartureMono-Regular.woff2.

We all know the quality of Jeffrey's courses, but this one certainly falls short of standards. It's unacceptable that Jeffrey's face takes up as much screen space as the code editor itself, especially considering the lack of essential line numbering (and no Soft-Wrap), the absence of a reference to the current file, and the lack of a Git repository. The screen changes so quickly after writing code that you don't even realize you've finished, and the same goes for imports. It seems this is a demonstration of how quickly the instructor uses the IDE, and that the student's learning isn't the priority.

Lessons like this are incredibly frustrating, especially for non-native English speakers.

I don’t like this lesson. It’s difficult, but not because the topic itself is complex — it’s because there are many errors in the code. As a student, I run into these issues and initially assume that I’ve misunderstood something. But after spending several hours debugging, making two attempts, and carefully watching the video to the end, I realized that the same issues exist in Jeffrey’s code — he’s just not as thorough with testing as I am.

This really slows me down and makes it harder to absorb the material. What’s especially frustrating is that this lesson contrasts sharply with the rest of Jeffrey’s courses, which are usually clear and well-explained.

Everything fails, even following lesson second to second!

This is pretty disappointing for being part of a paid Laravel course to be honest.

Obviously frontend stuff is unavoidable and I appreciate the initial intention behind bringing AlpineJS in, but it has led to this, an entire episode of refactoring ugly rushed inline Javascript inside quotes with no linting or syntax highlighting, in a tutorial that's supposed to be about a full-stack PHP framework.

When you're teaching PHP & Laravel, you're amazing. But the next time you re-do this course, please do better on the frontend.

I wish I knew the file Jeffrey is working on, without that or the source code it's somewhat hard to follow along

Indeed a very complex lecture, in my opinion due to the nature that most stuff is specific to "alpine.js". Apart from that it would really help a lot to use an IDE/editor where the filename is permanently visible.

Authorization Policies & Group Routes

Group all with middleware and group routes policies whit "can"

  Route::middleware('auth')->group(function () {
    Route::get('/ideas', [IdeaController::class, 'index'])->name('ideas.index');
    Route::post('/ideas/store', [IdeaController::class, 'store'])->name('ideas.store');
    Route::can('work-with','idea')->group(function () {
    Route::get('/ideas/{idea}', [IdeaController::class, 'show'])->name('ideas.show');
    Route::post('/ideas/{idea}', [IdeaController::class, 'destroy'])->name('ideas.destroy');
    Route::get('/ideas/{idea}/edit', [IdeaController::class, 'edit'])->name('ideas.edit');
    Route::post('/ideas/{idea}/update', [IdeaController::class, 'update'])->name('ideas.update');
    Route::patch('/steps/{step}', [StepController::class, 'update'])->name('step.upddate');
  });
    /* *** SessionController *** */
    Route::post('/logout', [SessionsController::class, 'destroy'])->name('logout');
  });

Changes in this tag

1️⃣ Create file resources/views/components/form/repeater.blade.php

2️⃣ Replace Code in resources/views/idea/index.blade.php

3️⃣ Better Image Upload showing image before upload

✅ Git Repo For This Lesson

✅ Repo this lesson in GitLab

( with some variants ) 👉🏻 Here

✅ Repo in GitLab

( with some variants ) 👉🏻 Here

Repo in GitLab (* with some variants ) 👉🏻 Here

Repo in GitLab (* with some variants ) 👉🏻 Here

Repo (with some variants) 👉🏻 Click HERE

⭐ Button filters with IdeaStatus enum colors when activate.
⭐ Button filters with x when is active.
⭐ Button filters remove filter when second click .
⭐ Blade Heroicons Install.
⭐ DebugBar Install.

For verifying that the request status exists in the IdeaStatus enum, PHP has a nice built in method that Claude Code showed me:

$status = IdeaStatus::tryFrom($request->status ?? '');

It will return the value if it exists or null otherwise.

Repo for this lesson : https://gitlab.com/JuanJota/idea/-/tree/IdeaCards?ref_type=tags

Another version

File app/IdeaStatus.php

<?php

declare(strict_types=1);

namespace App;

enum IdeaStatus: string
{
    case PENDING = 'pending';
    case IN_PROGRESS = 'in_progress';
    case COMPLETED = 'completed';

    public function label(): string
    {
        return match ($this) {
            self::PENDING => 'Pending',
            self::IN_PROGRESS => 'In Progress',
            self::COMPLETED => 'Completed',
        };
    }

    public function colors():string
    {
        return match ($this) {
            self::PENDING => 'text-yellow-500 bg-yellow-500/10 border-yellow-500/20',
            self::IN_PROGRESS => 'text-orange-500 bg-orange-500/10 border-orange-500/20',
            self::COMPLETED => 'text-green-500 bg-green-500/10 border-green-500/20',
        };
    }

}

File resources/views/components/ide/status-label.blade.php \

<span @class(["inline-block text-xs rounded-full border mt-2 px-2 p-y-1 text-sx font-medium",
    $status->colors(),
])>
            {{  $status->label() }}
</span>

//File resources/views/components/card.blade.php \
<a href="{{route('ideas.show', $idea->id)}}" {{ $attributes(['class'=>'border border-border rounded-lg bg-card p-4 md:text-sm'])}} >
    <h3 class="text-foreground text-lg">{{$idea->title}}</h3>

    <x-idea.status-label :status="$idea->status" />

    <div class="mt-5 line-clamp-3">{{ $idea->description }}</div>
    <div class="mt-4">{{ $idea->created_at->diffForHumans() }}</div>
</a>

File resources/views/idea/index.blade.php

<x-layout>
    <div class="text-muted-foreground">
        <header class="py-8 md:py-12">
            <h1 class="text-3xl font-bold">Ideas</h1>
            <p class="text-muted-foreground text-sm mt-2"> Capture yor thoughts. Make a plan.</p>
        </header>
        <div class="mt-10">
            <div class="grid md:grid-cols-2 gap-6">
                @forelse($ideas as $idea)
                    <x-card :idea="$idea"/>
                @empty
                    <h2 class="text-4xl font-bold text-purple-600 ">No ideas at this time</h2>
                @endforelse
            </div>
        </div>
    </div>
</x-layout>

Repo in GitLab : https://gitlab.com/JuanJota/idea/-/tree/BrowserTestingRegistrationFormsWithPest?ref_type=tags

@RJdie27
In phpStorm check Settings->Tools->Web Browsers and Preview.
Into the section Reload behavior make sure that On Save is selected

Repo for this lesson in GitLab https://gitlab.com/JuanJota/idea/-/tree/TailwindThemeSetupAndInitialUI?ref_type=tags

Git for this lesson in Githlab: https://gitlab.com/JuanJota/idea/-/tags/DesignYourModelLayer

The audio translation is NOT synchronized with the video. ☹️

Very good course. 👏

@Bulat Auth::id() worked for me

@jeffreyway Random question: do you have a plugin installed for your editor that creates the clickable links in the terminal?

@priya_N_E Everything that is found between the tags will be captured by the slot variable, you don't need to declare it. This is so because that is how Laravel is programmed.

@lara_dev_1970 Solution: Add:

                       
                        ->decimalPlaces(0)

        Slider::make('priority')
                        ->required()
                        ->minValue(1)
                        ->maxValue(10)
                        ->pips(Slider\Enums\PipsMode::Steps)
                        ->decimalPlaces(0)
                        ->step(1)
                        ->fillTrack()
                        ->tooltips()
                        ->default(0),

Slider::make('priority')
                        ->required()
                        ->minValue(1)
                        ->maxValue(10)
                        ->pips(Slider\Enums\PipsMode::Steps)
                        ->step(1)
                        ->fillTrack()
                        ->tooltips()
                        ->default(0),

When the slider is in position 4 & 7 the tooltip shows 4.9999999999 or 6.99999999999