All right, so before we switch over to the terminal to install Laravel and Livewire, why don't we actually begin within Zeppelin? Now, you'll see here, behind the scenes, I worked with the designer for Laracast, Adrian, to create some initial branding. My only instructions were it should be called CodeBreaker, and it should be pretty kid- or family-friendly. And this is what he came up with, and I think he did a pretty good job. All right, so to get started, I'm going to grab the logo here, and you'll see I can save it as an SVG. And why don't we just put it in our desktop?

and you'll see I can save it as an SVG. And why don't we just put it in our desktop? All right, cool. So now, let's open up the terminal and install Laravel. We're going to call our project CodeBreaker. And you can see at the time of this recording, what do we have? Version 10.2.6 of the framework. All right, cool. Now, I will cd in there, and let's begin by moving the logo from the desktop into the public folder.

Now, I will cd in there, and let's begin by moving the logo from the desktop into the public folder. All right, now I can open this within my editor. All right, very cool. We have a fresh Laravel app, and again, here is the logo. Okay, so why don't we do this? Let's begin within our resources/views directory, and we have this initial welcome page, and we can access that by visiting CodeBreaker.test, if you have Valet or Herd installed.

and we can access that by visiting CodeBreaker.test, if you have Valet or Herd installed. As you can see right here, pretty cool. But now, I want to start with a layout file. So within our views directory, let's add a new components folder, and within it, we will add layout.blade.php. And at least to start, I'll add some fairly boilerplate wrapper HTML, and this will be our main slot. Okay, so now if I switch back to the welcome page, I could replace all of this with our layout component,

Okay, so now if I switch back to the welcome page, I could replace all of this with our layout component, and I can say, Hello World. All right, switch back to the browser, give it a refresh, and that looks good. All right, cool. So the next step is to pull in both Livewire and Tailwind CSS. So let's do that now. If I visit the home page for Livewire, livewire.laravel.com, we can go into the quick start,

If I visit the home page for Livewire, livewire.laravel.com, we can go into the quick start, and yeah, it looks like we need to require it like so, and then we can instantly begin creating components. All right, so let's do that now. Okay, so we have Livewire 3. Next, let's grab Tablewind. And again, if we visit tablewindcss.com, we can go to the documentation, find a framework guide for Laravel, and yeah, here's what we need.

we can go to the documentation, find a framework guide for Laravel, and yeah, here's what we need. So we already have a project. It looks like we now need to install Tablewind, postCSS, and autoprefixer, and then we can initialize the tablewind.configuration file. All right, so I will paste that in. All right, that looks good. Next, if I switch back, we want to update our tablewind.configuration file to include all of the paths that Tablewind should be aware of for our templates. Okay, so I will go down to tablewind.config,

to include all of the paths that Tablewind should be aware of for our templates. Okay, so I will go down to tablewind.config, and within content, I can paste it here. And again, this is a Laravel-specific framework guide, so these should work just fine. Look for all blade files, all JavaScript files, all view files. Again, that will probably be irrelevant for this project, but we'll keep it in there just in case. All right, cool. Let's switch back. We now need to visit app.css and add the various Tablewind directives.

All right, cool. Let's switch back. We now need to visit app.css and add the various tailwind directives. So I will copy that, and we can go into resources/css/app.css and paste that in. All right, cool, and I believe, yeah, now we just have to start our build process. Cool. So let's close this down. We will then install our development dependencies. It looks like I've already done that. And I can now run npm run dev, which will create the initial Vite server. But now, of course, if I switch back to Firefox, we won't see any difference whatsoever,

But now, of course, if I switch back to Firefox, we won't see any difference whatsoever, and that's because I haven't yet pulled in the compiled app.css file. So that's our next step. Let's go into our layout file, and why don't we first call this codebreaker. And then right here, yeah, I can use the Vite directive to reference our app.css file. All right, so now we should see some small changes, and we do. And, yeah, here you can see it's applied a browser reset or normalizer. But, yeah, nonetheless, within Welcome, we could add any classes here, like text-red, text-extra-large.

But, yeah, nonetheless, within Welcome, we could add any classes here, like text-read, text-extra-large. All of this stuff will work just fine, which is great. All right, so now we have Laravel installed. We have Livewire installed. We have Tailwind CSS installed. Why don't we finish up by creating an initial component? And don't worry, we're still figuring this out. Maybe we'll change the component name shortly. But I need some kind of component to, like, create our code, right?

Maybe we'll change the component name shortly. But I need some kind of component to, like, create our code, right? Because remember, that's what we're doing here. We're going to have some text area for the parents or whoever to write some message, and that message will then be converted into various symbols or code that the child has to break. You know, you've done these millions of times when you were a kid in school. So why don't we say, and real quick, if I run php artisan, we will have a new Livewire namespace available after we installed that. All right, so in our case, we're going to make a new Livewire component.

we will have a new Livewire namespace available after we installed that. All right, so in our case, we're going to make a new Livewire component. php artisan livewire make. And, yeah, again, why don't we just start with create, something like that. And we can change that later once we understand a bit more. But I try not to get too bogged down in the early stages because you don't really know what you're doing yet, do you? So don't spend a bunch of time thinking about a name when probably in a couple hours that name will come instantly to you. It doesn't matter.

when probably in a couple hours that name will come instantly to you. It doesn't matter. All right, so you can see, excuse me, let's get rid of this. You can see we now have our Livewire component class as well as the corresponding view. So that means right here we could go ahead and import it, like so, Livewire create code. And if I click through here, you can see I can go directly to that file. And I'll show you where that is. It's within views, Livewire create code.

And I'll show you where that is. It's within views, Livewire create code. All right, here is my Livewire component. So notice at the moment I'm not even trying to build anything. I'm just getting all my ducks in a row. I'm getting everything set up so that in the next episode we can start writing HTML and php. All right, let's come back to Firefox, give it a refresh. Or actually, because we have our VEET server running, I don't even have to refresh it, which is cool.

Or actually, because we have our VEET server running, I don't even have to refresh it, which is cool. And I can see that we have our Livewire component. So yeah, just a quick little refresher on how this works. If I go into app/Http/Livewire, here's our component. We could have the obligatory count example. And then right down here within the corresponding component, why don't we have the count? All right, so we are defining a value within a PHP class, and we're setting it to zero, and then we're displaying it.

All right, so we are defining a value within a php class, and we're setting it to zero, and then we're displaying it within the corresponding template as you see here. And then, of course, the magic is I can do things like this. Maybe we have a button called increment. I can then register an event listener where I say, when you click on this, why don't we increment the value? So now this will effectively call an increment method on the corresponding component class. So we could add it right here, increment,

on the corresponding component class. So we could add it right here, increment, where I then say this count ++, and that will then re-render the template. All right, back to the browser. Yeah, it's not going to look pretty, but it does work. We are now incrementing that value without triggering a full page refresh, which is pretty cool. And you can even do stuff like this, where maybe you want to be extra sure,

And you can even do stuff like this, where maybe you want to be extra sure, so you could say wire:confirm. Are you sure about that? Are you sure about that? Come back, and yeah, you get this stuff for free. Cancel, and that will, of course, cancel the increment. Okay, so I think that's pretty good. We have our logo. We have Laravel. We have Tailwind. We have Livewire. We have our Vite server up and running.

We have Tailwind. We have Livewire. We have our Vite server up and running. I think we're all set. So in the next episode, I'm going to actually start writing some code.