Okay, now that we have some data to work with, we can start scabbling out our storefront. So we'll start off by creating a new Livewire component. So let's head over to our terminal and run php artisan livewire make, and let's call our component storefront. Okay, that's all done. Now let's move over to our routes file. And by default, you can see that we currently have a welcome route, which is set on the base URL, and there's a dashboard route, which requires you to be logged in as a User. And in this case, we won't need this now. So let's just comment this out.

And in this case, we won't need this now. So let's just comment this out. So we got our welcome page, and currently it returns a view. Now instead, we want to return our Livewire component. So when you're using Livewire, you can use individual components that you can include inside your page, for example, a contact form. But it's also possible to use full-page components, and that's what we're going to do right now. So whenever we visit the root of our website, we want to show the full-page Storefront component. And all we have to do is reference the component class here. But whenever you pass a Livewire component to a route, Livewire will automatically take

And all we have to do is reference the component class here. But whenever you pass a Livewire component to a route, Livewire will automatically take the necessary actions in order to make this component a full-page component. So let's switch to the browser and take a look. So when we visit our webshop, you can see that we currently get a notification. This is because I disabled the default routing, but there are some other things in play here. So our full-page Livewire component is trying to load our layout.app.play.php. And when you use Jetstream, there are two layouts files. There's a guest.play.php and an app.play.php. So one is for when a user is not logged in, and app.play.php is used whenever a user is logged in.

There's a guest.play.php and an app.play.php. So one is for when a user is not logged in, and app.play.php is used whenever a user is logged in. Now, given we're building a webshop, there is the option to log in, but we don't want to have separate environments. We want our store to be available for both guests users that are not logged into their account, and we want it to be available to those who are logged in. But this means we need to make some changes to the default files that ship with Jetstream. That's what we're going to do right now. So first, let's look at the directory structure. These are all the files that get shipped with Jetstream by default.

So first, let's look at the directory structure. These are all the files that get shipped with Jetstream by default. And if we open our layouts directory, you can see that here are the two layouts that I referenced earlier. So right now, our store front is trying to use the app.blade.php. If we open up this file, you can see that it's currently trying to load the navigation menu, and that's where the current exception is coming from. If we switch back, you can see that in our navigation menu, it's complaining about this route not existing. So as you can see right here, we have a component blade view called navigation-menu.blade.php. And this is the one that's causing the issue.

So as you can see right here, we have a component Blade view called navigation-menu.play.php. And this is the one that's causing the issue. So when we take a look at this file, you can see that we are referencing the dashboard route here. It's wrapped on our logo, and we have a navigation link as well that's referencing our dashboard as well. And we're referencing some Jetstream features here, which require users to be logged in. Now, in our case, we're building a webshop, so we don't have a separate environment, sort of say, for our user and for guests. The layout is going to be the same. So in this case, we want to make some changes to our app.play.php to ensure that we can use it for both when a user is logged in,

So in this case, we want to make some changes to our app.php file to ensure that we can use it for both when a User is logged in, but also when a User is not logged in and visiting our webshop as a guest. So first, let's update our navigation and our route to our dashboard that is currently wrapped on our logo. So let's open up our routes file, and let's make sure that we name our route. And let's just simply call this home. Now, let's make sure that we update the route references. And if we now switch back to the browser and try to reload, you can see that everything is working, but it's now throwing an exception because we're trying to reference a User which is not available because we're not logged in.

you can see that everything is working, but it's now throwing an exception because we're trying to reference a User which is not available because we're not logged in. This has to do with the current drop-down. So what we want to do is to only show this drop-down whenever we are logged in. So we can use the auth directive to wrap our navigation to ensure that it's only being rendered whenever we are logged in. So let's go all the way down to the closing div. It's right here. And let's say end all. Okay, let's give it a try.

And let's say end all. Okay, let's give it a try. And it's working, but I see that we've got to update one of our references. Let's make sure that this is set to home as well. Now give it a try. And now we get an attempt to rebook the name on null, and that's because we have a profile link as well. And let's also make sure that we wrap this with the auth directive. And there we go. So now we can use our layout file for when we're logged in, but also as a guest.

And there we go. So now we can use our layout file for when we're logged in, but also as a guest. So in this case, whenever we are logged in, you'll see that a navigation will show up showing all the Jetstream features that we can use. Finally, let's update the dashboard title and change it to home. Okay, so if we take a look at our example store, we can move on and start listing our products. So let's move back to our editor. Let's open up our Storefront component.

So let's move back to our editor. Let's open up our storefront component. And let's first start by fetching our products. So in this case, we want to query the database for all of our products. And there are a few ways how we can do this, and I prefer to use computed properties. Computed properties allow you to do certain intensive tasks like fetching data, and Livewire will ensure that no matter how often you call this method or try to attempt to read data from this computed property, it will always return the same data on a single request.

or try to attempt to read data from this computer property, it will always return the same data on a single request. So if you would call this method five times, it will always return the same data five times instead of querying the database five times in a row. Let's use a computer property you have to adhere to a certain syntax when naming your method. So we're going to start with that, and now the name of our properties, in this case, products, and we'll end with property.

and now the name of our properties, in this case, products, and we'll end with property. Now, this is a sort of magic method. So inside our blade file, we can now do this, products, and it will actually reference this method. So let's simply do productQuery, and we'll get everything in the database. So now if we head to our blade file, we can give this a try and say foreach this product, and let's simply show the productName. So now if we switch to the browser and reload the page,

and let's simply show the product name. So now if we switch to the browser and reload the page, you can see that we now get all these different products. And again, if you would call this five times, it will only execute that database query once. Okay, so if we take a look at our example store, we know that we have a product image, we have the title of our product, and our price, and we need to, of course, do a little bit of styling as well. Now, given there is plenty of work to do,

and we need to, of course, do a little bit of styling as well. Now, given there is plenty of work to do, we're not going to cover Tailwind CSS in depth in this course. If you'd like to learn more about Tailwind CSS, head over to tailwindcss.com, and there are a ton of resources on learning how you can use this framework. In this course, we're going to apply some basic styling so our store looks pretty nice, but if you want to go further,

so our store looks pretty nice, but if you want to go further, definitely head over to the website of Tailwind CSS to learn more about advanced styling. In our example store, we have three products per row. In our example, let's do four. We're going to create a grid, and we're going to use four columns. It should be okay. And we want maybe a gap of four.

It should be okay. And we want maybe a gap of four. So the styles weren't updating because I wasn't running php artisan serve at this time, so just make sure that you start it up. And now when we switch back, we should get the correct results, and there we go. Our products are now across four columns, but it's probably best to add some sort of container. So if we switch back to our layout,

but it's probably best to add some sort of container. So if we switch back to our layout, we can simply head over to our main slot, and let's add a maxWidth so we can center the content. Maybe we do maxWidth to xl. Let's set the automatic margin on the horizontal axis, and I can see our products are centered. Maybe do 4xl. Let's leave it at that. Next, go back to our storefront.

Let's leave it at that. Next, go back to our storefront. We want to make sure that we have a little bit of margin at the top, and let's say 12. Yeah, that looks okay. Okay, so now we already have our title. We want to have our price and our image. So let's add some simple styling here. Let's make sure that our title is emphasized a bit more. So let's make our font medium.

Let's make sure that our title is emphasized a bit more. So let's make our font medium. Let's make the text large, make it look better. Now below it, we want to have our price. Okay, we'll get to formatting the price later on. Let's change the color of our price a little bit. Let's say text-gray-700, maybe 700. That looks fine, and let's make the font size a little bit smaller. Okay, now we need to make sure

a little bit smaller. Okay, now we need to make sure that we can reference our product image. Now, as you may recall, we've set up a relationship with our Product and Images, but in this case, we only want to return one Image. Let's set up this relationship. Let's head over to our Product model. You can see here we have our images, and now let's say public function image().

You can see here we have our images, and now let's say public function image. This will return one image. We use the hasOne relationship. Now, there are multiple images associated with a product, so we need to make sure that we only return one. We can use the ofMany method on our relationship to ensure that we only get one from many, and in this case, based on whether the image is featured or not.

and in this case, based on whether the image is featured or not. Now, if we switch back to our view, we should be able to call path on our image. Let's take a look, given that our images don't exist. You can see that we're now referencing the image based on what we set up in our seeder. So let's download some demo images from our sample store and make sure that we put these in the public directory. Now, watching me download 12 sample images is a bit boring,

and make sure that we put these in the public directory. Now, watching me download 12 sample images is a bit boring, so I've paused the video real quick. You can go ahead and download any images you want, and make sure that you put them in the public directory inside the media folder, and then it should look something like this. Not all the images match up with the description, but that's fine. It's just for demo purposes.

but that's fine. It's just for demo purposes.