Project Overview 0:00You've now reached the final project for Laravel from scratch. Our job is to build a Twitter clone over the next handful of videos. And if we take a look at the design, you can see the basics of what we'd need. A user, of course, can sign in, they can create tweets, they can have friends, they can like tweets, they can view a profile. All of the essentials you'd expect. Alright, let's get started from scratch. But real quick, let's take a look at the help. So notice the auth flag. This allows us to install the framework, but also the authentication scaffolding. Install With Authentication 0:31So notice the auth flag. This allows us to install the framework, but also the authentication scaffolding. And that's what I want. Alright, let's cd in there, and open this in my editor. So right off the bat, if I visit my routes file, you'll see we already have the authentication routes, and in my resources views directory, a layout is now available. So if I open this in the browser, here's what we get. Okay, let's go ahead and configure my database. My SQL is fine. We're going to call this Tweety. Configure Database and Migrate 1:03My SQL is fine. We're going to call this Tweety. And now if I switch to TablePlus, let's add a new database here. And finally, I can migrate. php artisan migrate. Alright, switch back, give it a refresh, and we're all set to go. Now, back in my editor, we'll register our first account, John Doe. And we're signed in. Okay, but next, if I switch to Zeppelin, we're going to do a little bit of design. And I like to use the Tailwinds library for that. Add Tailwind via Mix 1:30Okay, but next, if I switch to Zeppelin, we're going to do a little bit of design. And I like to use the Tailwinds library for that. So if I go to tailwindcss.com, let's go to get started. And we can start by pulling it in through npm. So I will run that. And while it's doing its thing, next we'll do Laravel mix setup. And you can see we do mix.postcss, and then we require Tailwind. So we can grab that. Or by the way, if you're using LESS or SAS, you can grab one of those two snippets. But I'll switch back and browse to our webpack.mix.js file.Or by the way, if you're using LESS or SAS, you can grab one of those two snippets. But I'll switch back and browse to our webpack.mix.js file. And we'll just paste this in here. Alright, so compile our JavaScript and then also compile this CSS. Alright, so now in my resources directory, I can add a new file in a CSS directory called main.css. Alright, let's see what the next step is. Add Tailwind to your CSS. Alright, use the Tailwind directive in these three places. So I'll paste that in.Alright, use the Tailwind directive in these three places. So I'll paste that in. And we should be good to go. So if you need to, you can install the rest of your dependencies. And if we run npm run dev, this should compile everything down. Alright, so now in my public CSS directory, here's main.css. And you'll see all of the Tailwind specific code, like margin top, all of that. So now in our views layout file, let's go ahead and import it. So I'm going to completely swap out the scaffolding that Laravel provides, because I don't want to use Bootstrap. Replace Layout and Welcome 2:55So I'm going to completely swap out the scaffolding that Laravel provides, because I don't want to use Bootstrap. Anyhow, let's switch back to Firefox. And we've lost a bit of our layout, but that's okay. It won't take long to bring back. So if I go to welcome.blade, you'll see it has its own doc type. And that's fine. I'm not going to tweak this too much. We'll instead say Tweety. And then right down here for the links, what we'll do is grab, let's see.We'll instead say Tweety. And then right down here for the links, what we'll do is grab, let's see. So here's all of the routing information. I'm going to instead bring this down here. Let's see if we can do this. Get rid of the div. And we'll say, alright, if we have a login, we already do. So I don't need to check for that. If you're signed in, let's show the home page. If you're not, show a page to login and also a page to register.If you're signed in, let's show the home page. If you're not, show a page to login and also a page to register. Alright, let's see what that looks like. Refresh. And there we go. In fact, Lyric has let's get rid of that. That's dumb. Alright, so now I can go straight to the home page, and we can get started building this out in the next episode.and we can get started building this out in the next episode.
