What makes Ladder well really productive is that it comes with starter kits with complete user authentication, flow register, login, log out, verify email, forgot password profile settings and everything with just one click. In the previous episode, we installed later well with no starter kit, but this time we are gonna change that. I deleted the previous project, now I'm gonna create a new one while picking a starter kit. So when you say Laravel new your project name,

now I'm gonna create a new one while picking a starter kit. So when you say Laravel new your project name, it'll ask you which starter kit would you like to install, react View, or Livewire. Since we are using Livewire in tall stack, let me select live wire and it is asking me, which authentication provider do you prefer? I'll simply pick in authentication and would you like to install?

I'll simply pick in authentication and would you like to install? Would you like to use Lateral Vault? We don't know what that is yet, so I'll say no. I'll just select Pest and it's creating the same lateral project this time with authentication using Live Wire. Once it's done, it asks if I would like to run NPM install and NPM Run build for building the front end sets. I'll say yes. And now once

and NPM Run build for building the front end sets. I'll say yes. And now once again I can see the into the project. And let me open this in Visual Studio Code first and then run the command composer. Run dev here, let me close this. Open the terminal and run composer run theft. I'll keep this running in one tab while I open the other in the terminal. I'll close the terminal again

the other in the terminal. I'll close the terminal again and now the project is served in the browser. So let's open the browser. So if you open Palor test, the welcome page looks almost the same except now we have two buttons on the top right corner. Login and register. These are not just buttons, they completely work. So you can click on register

These are not just buttons, they completely work. So you can click on register and you can create an entirely new user here. Let me just quickly enter my details. I would like to choose my own password, password and create account. Look at this, you have a complete dashboard set up right here with some links and here if you click on your name, you can see settings as well.

and here if you click on your name, you can see settings as well. In the settings you can change your name email, you can even delete your account, you can change your password in the password tab. You can also change your appearance if your app supports it. Light mode, dark mode or system reference. Now you can build on this, you can modify this or completely removed. That's up to you but it's available for you.

or completely removed. That's up to you but it's available for you. Now if you log out since we've already registered, you can log in with the user created password log in and very directed to the same dashboard. Now let's look at the code and see what all has been added to make this possible. Let me open the explorer and here let's look at routes first. If you go to web, do PHP.

and here let's look at routes first. If you go to web, do PHP. Now apart from just the welcome view, we have dashboard and we have some more routes here. Now what is this? You see, you see something called as middleware. Middleware is a layer that checks or modifies the request before it reaches the route or the controllers. So here auth is the middleware being used to check if the user is authenticated or not.

So here auth is the middleware being used to check if the user is authenticated or not. Let's see, let's go back to the browser and I will try to log out and now let me try and access the dashboard route like so. Look, you're not allowed into the dashboard. It redirects you to login. So that's what the auth middleware is doing. Let's go back to the code. So here you can notice that uh, these routes here, settings

Let's go back to the code. So here you can notice that uh, these routes here, settings and profile, they are inside the auth middleware and so is dashboard. But we also see there's another middleware verified which makes sure that the user has his email verified only. Then it uh, lets you see the dashboard. You can use this feature if you want. And here you see some classes mentioned.

You can use this feature if you want. And here you see some classes mentioned. These are either lateral controllers or live I components. We're not gonna go into details of that right now, but let's look at the views. I'll close this. Go to resources, open views. And now you see there's a lot more than simply welcome Blade p hb. There's a dashboard blade file. There are some huge number of components with layouts

There's a dashboard blade file. There are some huge number of components with layouts and uh, some lot of blade files. There's something called Flux, which you don't have to know right now. And we have the live wire views here. There are some pass shields and lot more for the simplicity of this. Let's not talk about any of this right now. It simply go to dashboard blade PHP

Let's not talk about any of this right now. It simply go to dashboard blade PHP and replace this entire file. So I'll delete whatever is there here right now and instead based our Tailwind and Alpine app that we created in a couple of episodes ago. So I'll go back to that project, copy the entire index html so you can switch to ranch episode six, index html within the public folder. Copy the entire thing and paste it here.

html within the public folder. Copy the entire thing and paste it here. Now we'll have to make some changes for this to work. The first one being now the styles are no more in style css. Let me remove that. Instead we have these styles in resources, css, app css. As you can see this imports tailwind, CSS. So this is the input file of Tailwind. You can see all these settings here.

So this is the input file of Tailwind. You can see all these settings here. Once again, you don't have to go into details. Now to process these front-end assets, there's something called wheat. We use wheat to process this and um, you can do that using the at Wheat directive in Blade and specify the sources that you'd like to process. So here the path is resources as you can see,

and specify the sources that you'd like to process. So here the path is resources as you can see, resources in the root slash css slash app dot css. At the same time, we would also like to process js. There's nothing in JS right now. You can see it's blank, but in case we have something, it gets processed. So let's mention it. Anyway, I will copy this, paste it here, change CSS to JS

Anyway, I will copy this, paste it here, change CSS to JS and app js for now, let's leave this Alpine script as it is later. Once we uh, turn this into a live wire component, we'll not have to install Alpine separately. It comes bundled with live wire for now, let's leave it here. Let me check if Composer run. Dev is still working. It is. So this also builds the assets just in case.

Let me check if Composer run. Dev is still working. It is. So this also builds the assets just in case. Let me stop it and start it again. Composer run Dev. Right? And now let's go back to the browser and try and log in. Once you log in, you'll be able to see the exact same app layout and it works as well because we have installed Alpine. Click on this. Yes, added bookmarks. This is great. Let me just make one change to this layout.

Click on this. Yes, added bookmarks. This is great. Let me just make one change to this layout. That is, it stretches from end to end right now. Lemme change. Uh, let me add some styles to make it restrict to a particular worth. So right here to the body, I'm going to add a max worth of five xl, that's about 64 m or thousand, uh, 24 pixels. And also I'm gonna center it using margin X Auto right MX Auto.

And also I'm gonna center it using margin X Auto right MX Auto. And this is much better. Now we have this nav bar, but none of these links work. We'll have to make this logout button work very important. And this logout button worked when we had the sidebar here. So let's look for that implementation. You can click on command P in VS code in Mac. If you're using Windows, you can click Ctrl P to search for the files.

If you're using Windows, you can click Ctrl P to search for the files. I'm gonna search for sidebar dot blade PB and I'm gonna find logout. Yeah, this is where it is. Here's the logout form. Let me copy the entire form and paste it here in this list item. And here, instead of the flux menu item, I will use the same button of ours.

And here, instead of the flux menu item, I will use the same button of ours. So replace this with the button and let's go back and try this and it works. Now it's time we change this welcome view. Go back to welcome Blade pb. I'll close these two files open. Welcome Blade pb. Again, this has a lot of things we can remove. Starting from here. Let's remove all these icons and the styles.

Starting from here. Let's remove all these icons and the styles. This is a lot. We're gonna collapse it, remove all the styles, and instead uh, use the wheat directive. Once again, we can copy this from the dashboard, um, file that we just created. Copy this, paste it here. And here we need the header, it has dashboard login and everything.

And here we need the header, it has dashboard login and everything. Collapse header. Let's retain this, but let's remove everything inside main. So looks like we have to diffs. We can remove all of that. We can remove these glasses. And here simply add a hedge one tag with our Heading Talent tool. Let's style this with tailwind using say text six XL font bold and also text color,

Let's style this with tailwind using say text six XL font bold and also text color, which is text Amber 600. That's great. And let's add a simple paragraph here with the tagline that says, discover roles worth your skills. And let's style this as well. Add a simple margin. Yeah, small margin at the top and the color text. Zinc 500. Maybe let's center this text using zinc text center.

Zinc 500. Maybe let's center this text using zinc text center. And let's see what this looks like. If everything works. Refresh. Yeah, this is, this is simple enough for now. So now we have a new homepage and if you log in we have a nice dashboard, simple dashboard. These links don't work yet. Let's change that. So go back to dashboard Blade bhp. We have simply given hash as the link.

So go back to dashboard Blade bhp. We have simply given hash as the link. So let's change that now instead of hard coding this as a dashboard, because we don't know where in which path we might add this link. Instead of that, we can use the route method in Blade. If you have to use functions, you can use these curly braces like so two curly braces. And here let's use the route method and specify the name of the route that is dashboard.

And here let's use the route method and specify the name of the route that is dashboard. If you open your route file, you'll see that the name given to this view, this route is dashboard. You can change this to whatever you want and you can change this as well. But this will get translated to the particular URL. Let's do the same for um, bookmarks as well. Let's redirect it to route bookmarks, which we don't yet have.

Let's redirect it to route bookmarks, which we don't yet have. So let's create that as simple as copying the same dashboard layout and changing it to bookmarks. I'll use Command D to select all these multiple instances of dashboard and change them to bookmarks. And now it's complaining that this view bookmarks is not found because it doesn't exist.

that this view bookmarks is not found because it doesn't exist. You can simply say quick fix and create the missing view. It'll create it exactly where the dashboard, uh, view is inside the views folder. So now, um, let me simply say bookmarks and see if it's working. Refresh the page, click on dashboard. We stay where we are. Click on bookmarks and we are seeing the particular view. Now what we want here is even this bookmarks page should

Click on bookmarks and we are seeing the particular view. Now what we want here is even this bookmarks page should have the exact same layout with the exact same navigation bar for that. Thankfully we don't have to repeat this entire markup. Instead we can use play components and layouts. Let's see how to do that. Open the file explorer. And within this components folder you can create components and within the layouts you can create entire layouts, which has the head, the script, the styles,

and within the layouts you can create entire layouts, which has the head, the script, the styles, the meta tags and all of that. If you open layouts, this already has app and auth layouts. Let's change that because we're not using the layout that came with the starter kit. So whatever this is, let's remove the entire thing and instead copy whatever is in the dashboard until maybe body or even until main copy this entire thing

until maybe body or even until main copy this entire thing because we will need that layout for both dashboard and bookmarks. I've copied that, pasted it here and let me close body also close HDMF. Alright, now this is where we, uh, are going to add our main content of the dashboard or the bookmarks. So here we use those curly braces and use this variable called slot.

So here we use those curly braces and use this variable called slot. Now whatever we mentioned here in dashboard blade PHP will come here. Let's see how to do that. Now since we have already copied this and put it in the layouts, we can remove everything from nav till the top, retain only main here, and once again, remove the body and HDML.

retain only main here, and once again, remove the body and HDML. Now we have to specify here at top which layout we are using and that can be done using Xen and name of the layout using Xen Layouts app because app play PHP is the layouts file. So once you do this and also use the closing tag, close this the same way you would close any other HDML tag. Once you do this, whatever is

the same way you would close any other HDML tag. Once you do this, whatever is inside this layouts will get placed here in the slot. Let's verify if that's working. So refresh the page and yes, we have dashboard exactly as it was before. Let's go back and now we can use the same layout in bookmarks as well. Let's copy Xen Layouts app and close the tag.

Let's copy Xen Layouts app and close the tag. Now here we can once again, uh, copy just a part of it, not we are not gonna repeat it. Um, we are just going to copy this main here, sorry, within this and close the main tag. Let's change this to bookmarks and change this text to these are your favorite rules. Okay, I think we leave this as it is

your favorite rules. Okay, I think we leave this as it is and uh, come back to it later. This is great. Let's save both the files and refresh. Go to bookmarks and now you're able to see bookmarks here. Come back to dashboard. This is what you see. We'll move forward in the next episode.