Simon did a fantastic job taking Adrian's excellent design and turning it into HTML and CSS. Now it's my job to take what Simon did and turn it into a Laravel application. So let's get started. Of course, the very first thing that we need to do is take the repository that Simon created so that we can install a Laravel app. And there's really only one way that I know to do that. First, we of course need to clone the repository

And there's really only one way that I know to do that. First, we of course need to clone the repository and I'm going to use GitHub Desktop to do that. So that's Laracasts Laravel workshop. And after we clone this repository, the very first thing that I want to do is create a branch, because the last thing that I want to do is mess up Simon's work because we are going to install a Laravel app. So this branch is going to be for moving things around so

because we are going to install a Laravel app. So this branch is going to be for moving things around so that we can create that application. So let's cd into Laravel workshop. I'm gonna fire up explore, because I'm gonna move things around. Basically I'm going to take everything but the get folder and I'm going to put that inside of a new folder called I guess Simon's work, because that's exactly what it is. This way I don't mess anything up.

I guess Simon's work, because that's exactly what it is. This way I don't mess anything up whenever we install Laravel, and it's not so much the process of installing a Laravel app, it's moving things around after the fact. So I'm going to create a new app called Laravel Workshop. We could call it Pixel or whatever, but I'm gonna call it Laravel Workshop. And we want a get repository.

but I'm gonna call it Laravel Workshop. And we want a get repository. Now we're gonna take practically all of the defaults. I don't have to type anything for the defaults, but it's habit of mine. And this is going to be just a bare bones Laravel application. We're gonna build views, uh, Blade components, you know, that kind of thing. We're also going to build the logic for this application,

blade components, you know, that kind of thing. We're also going to build the logic for this application, but we're not going to use any starter kits or anything like that except, you know, the very basic starter kit. If that is a starter kit, is it? I, I don't know. I'm just trying to fill time as the installer copies and, and puts the files wherever they need to go. Once again, we're gonna take the defaults. We want a SQLite database.

Once again, we're gonna take the defaults. We want a SQLite database. And as far as running npm install and npm run build, I'm gonna say no primarily because we are going to take these files and copy them back into the Root Laravel workshop application. So it's gonna look like this. We have this Laravel workshop here. We're gonna come in here. We are going

We have this Laravel workshop here. We're gonna come in here. We are going to essentially take everything but the GI folder because we want the original GI folder from the repository that Simon created. So we're gonna take everything but that GI folder, we're gonna cut it, then we're gonna paste it back inside of the main Laravel workshop application. And with that done, we can delete this Laravel.

of the main Laravel workshop application. And with that done, we can delete this Laravel workshop folder that was created by the Laravel installer. So now we have our Laravel app, but before we do anything, I do want to go ahead and commit this just so that if we ever need to roll back anything we can. And as far as the message is concerned, install Laravel app and let's open up our code editor because we do need to take a look at some files.

and let's open up our code editor because we do need to take a look at some files. Like for example, if we open up Simon's work and let's open up the v config. There's nothing out of the ordinary here. Let's open up the vt config for our Laravel app. And there are of course some differences. For example, the Laravel vt plugin is used here, but let's open these up side by side because really I don't think we need to do anything.

but let's open these up side by side because really I don't think we need to do anything. Everything that is given to us by Simons config should already be default for the Laravel installer. So here's the tailwind, here's the defined config. As far as plugins are concerned, we're using Tailwind CSS, and then there's the setup for the Laravel plugin. So our VT config is going to be fine. However, let's open up the package,

So our VT config is going to be fine. However, let's open up the package json file from the Laravel installer and let's open up from Simon's work. And the main thing that I'm concerned with are the dependencies. There are of course some differences as far as the tailwind versions are concerned, but I think you're gonna be fine there. So let's just copy over the prettier references.

but I think you're gonna be fine there. So let's just copy over the prettier references. And for the most part, I think that's that's gonna get us, so from here, we should be able to hop on over to the command line. Let's run the npm install because we didn't do that whenever we installed the Laravel applications. So this will of course install all of the npm dependencies so that then we will run the build command. And after we run the build command,

so that then we will run the build command. And after we run the build command, let's run the npm run dev so that we can run to the browser. And let's try this out. The URL should be Laravel workshop test. We should see the welcome view, which that's great. We can at least know that our Laravel application is working as it should. But I also want to go ahead and pull in the work that Simon has done.

But I also want to go ahead and pull in the work that Simon has done. And for right now, we are going to take the easy way and we're just going to create a couple of views. So let's create a new file. We'll call one feed.blade.php. Let's create another file called profile.blade.php. And all we are going to do is take the files or more specifically the content of the files from Simon's work and paste them into those views.

or more specifically the content of the files from Simon's work and paste them into those views. And this should at least give us an idea that everything is working as it should. But of course, there are some things that we need to do here. Like for example, instead of referencing just the style.css, we need to use the @vite directive to pull in resources, css/app.css. And while I'm typing this, I'm also thinking

css, app, css. And while I'm typing this, I'm also thinking that we should probably look at the css. So before we do anything else, let's do that. But let's go ahead and let's copy this directive. Let's put it inside of the feed view just so that we can say that we have that done. Then let's take a look at Simon's work. So we have the Styles css, that's kind of an important thing.

So we have the styles.css, that's kind of an important thing. Let's copy that. Let's put it inside of resources/css/app.css. And let's just replace everything so that. Now let's create a couple of routes so that we can view the feed and the profile. And we will just have the URLs for feed and profile. So these will be GET requests for feed to where we will simply return our feed view.

So these will be GET requests for feed to where we will simply return our feed view. Then let's copy and paste that so that we can easily create the route for the profile to where we return the profile view. So let's hop on over to the browser so that we can go to /feed. And that doesn't exist. We need just feed, not feed two. And there we go. We have our feed. Everything is being loaded incorrectly, so uh,

And there we go. We have our feed. Everything is being loaded incorrectly, so uh, we can be happy with that. Let's duplicate this so that we can see the profile and sure enough, everything looks like that it is working as it should. Now of course, we haven't really done anything major yet. All we have done is transferred Simon's work into a Laravel application. So let's commit this.

a Laravel application. So let's commit this. Our message will be just transferred Simon's feed and Profile, and then we need to merge this into the main branch. And I can very easily do that by going to the current branch, setting it as main so that we can then merge installed Laravel into Main. And then once that's done, I'm going to delete the install Laravel branch because there's really no need to have

And then once that's done, I'm going to delete the install Laravel branch because there's really no need to have that branch going forward. It's just going to clutter our list of branches. And now that we have two views, the feed and the profile, we can start to extract the layout and any other components that we might need.