So now that we have the basic scaffold for what we want to create with this method, why don't we finish this section by directing to the new listening party? Because theoretically, this is where people can then access this shareable link to listen to the podcast in real time once the listening party has started. This is where everything's going to happen. The chat's going to happen, the reactions are going to happen on this listening party room, for lack of a better word. So why don't we redirect to that? Because we already have this listening party, and we just technically just want to show that model in a new route.

Because we already have this listening party, and we just technically just want to show that model in a new route. And that's what we'll do. We'll do return redirect, and we can say at listeningparties.show, why don't we call it that? And we can pass in the listeningParty. In this case, we're going to use route model binding to pass in the listeningParty. And instead of actually, if we go into our web.php route, instead of doing a new Blade view, we're going to use a full page component within Livewire Volt. Very similar to how Livewire works where you can have full page Livewire components, that's

we're going to use a full page component within Livewire Volt. Very similar to how Livewire works where you can have full page Livewire components, that's just the Livewire class passed in, Volt has that functionality as well. In order to start that, we're going to create a new layout, a new Livewire layout, because while there are layouts given to us within Breeze, you can see here there are views and then layouts, we're not going to touch those, and we're going to have this full page component with Volt, specifically with a layout that's going to be our real-time listening party layout. So to start that, and the one that Volt will use out of the gate, we can start with php artisan Livewire:layout.

So to start that, and the one that Volt will use out of the gate, we can start with php artisan livewire Layout. Okay, that's created a new view, components/layouts/app.blade.php. And all this is customizable within Livewire and within Volt. You can specifically tell Volt within those full page components which layout you want to use. I'm just doing this so that we have a separate one for listening parties, again, so that we don't have to change the ones automatically set up by Breeze for auth if and when we pull that in. So we have components/layouts/app.blade.php.

that in. So we have components, layouts, app.blade.php. We're going to, in our home, we're going to bring these scripts in, so the WireUI scripts and then the Vite scripts. There we go. And I'm going to say, hey, this is the listening party. We'll change that title probably later on down the road. That's not as important for an app like this. So why don't we, now we can create a new route that links to a new Livewire Volt component. So we say php artisan in our terminal, php artisan make Volt.

So why don't we, now we can create a new route that links to a new Livewire Volt component. So we say php artisan in our terminal, php artisan make:volt. If I have a full page Volt component, I usually like to put them in pages/ whatever those pages directories are. So in this case, this is maybe listening parties or, yeah, we can say listening parties or just parties. pages/parties/show. So that way we have a Livewire component at pages/parties/show.blade.php. If we're sticking true to cruddy design, the show is what we're doing. We're showing the model of a new listening party so that people can join that listening.

If we're sticking true to cruddy design, the show is what we're doing. We're showing the model of a new listening party so that people can join that listening party. So for our route, we can just say Route, and we want to show the maybe parties / and here we can pass in the model, so it's ListeningParty. And then we can pass in the pages.listeningparties.show route. There we go. And we can bring in the Volt component. So use Livewire / Volt / Volt. That looks good.

So use Livewire slash Volt slash Volt. That looks good. And now in our pages/show, here's where we can accept any models, any route model binding that is being passed to this page in the Livewire public function mount. So first we want to set the public and we can say that this is the ListeningParty model. We can set this to listeningParty because that's what we're bringing in. We'll bring in that specific model here slash model slash listeningParty. And then in public function mount, it's really simple to accept this route model binding. We say listeningParty is listeningParty. And then this listeningParty is this is listeningParty because we're passing that in to the.

We say listeningParty is listeningParty. And then this listeningParty is this is listeningParty because we're passing that in to the route here in our dashboard here, redirect route to the listeningparties.show. Let's make sure we have this named. So in our web, we want to name this, oops, we want to name this and we want to name that listeningparties.show. Perfect. And I think we called that parties.show, right? Yes. So not listeningParties.

Yes. So not listening parties. We called it parties.show. Let's just keep it for consistency. We'll call it parties.show instead of listening parties. So parties.show, perfect. And now we should be all set in our parties.show to accept this and we can just display it on the page. So if we say something like listeningPartyName, we should see this on the page after we redirect.

So if we say something like listeningPartyName, we should see this on the page after we redirect. After we create that listeningParty, we're redirecting to this route. So why don't we test it out? So this is a, my first listeningParty. We can add the podcastEpisodeURL and set a startDate, create ListeningParty EpisodeNotFound. Well, let's go ahead and fix that. That's in our dashboard. And then we can bring in the use App\Models\Episode.

That's in our dashboard. And then we can bring in the use App\Models\Episode; So now with that created, second times the charm, my first listening party, set that here. There we go. Just note in the previous episode, when we made a bunch of different migration changes, make sure you run php artisan migrate:fresh. I also did have to change from this. This is technically incorrect. It should start with nullable and then we can set constrained and cascade on delete.

This is technically incorrect. It should start with nullable and then we can set constrained and cascade on delete. So those are the two changes we made in order to get this started. So now that we're actually creating the initial start for a listening party and getting an episode URL, we're going to, in the next episode, start scraping that information, getting it all ready to go on the backend so that we can start displaying it on the front end and on the listening party page. This is where the real time magic starts to happen.