Okay, let's get started. Laravel. New. Let's call our app LC. Voting. Now, I personally like starting with the design, as that dictates the features of the app and things like models and relationships. Other people like starting with the database design and defining all the models first, and that's totally fine as well. I've done this in the past, but whenever I did, I always asked, what does the design

and that's totally fine as well. I've done this in the past, but whenever I did, I always asked, what does the design look like? I'm also a very visual person, so seeing a pretty design in the browser makes me feel like there's progress being made. So we know we're using Tailwind CSS, but we also know that we need an auth layer. We have several options here, but the two major ones are Breeze or Jetstream. I'm going to be making use of Breeze since I just want something simple, but Jetstream should work as well. Make sure that if you're using any of these packages, you install them first before writing

should work as well. Make sure that if you're using any of these packages, you install them first before writing any code. If you install them at a later point, they will overwrite several key files like your routes file. And if you don't have version control set up, you've lost all your progress. So let's go ahead and install Breeze first. Let's go into our app, LC Voting, and for Breeze, let's go ahead and set that up. So Composer, acquire it, and let's Breeze install it when it's done. So yeah, this will install Tailwind.

So Composer, acquire it, and let's php artisan breeze:install it when it's done. So yeah, this will install Tailwind. It will set up a layout file for us, and I believe it also installs Alpine. Let's go ahead and php artisan breeze:install everything. And let's npm install, and npm run dev. Okay, that's done. Let's go ahead and open it in VS Code, and let's set up our database while we're here. Let's make a new one called LC Voting, and let's go ahead and set that up in our database. Create a new one here, LC Voting. And let's go ahead and php artisan migrate.

Create a new one here, LCVoting. And let's go ahead and php artisan migrate. And now this should render correctly in our browser. So LCVoting.test. And we can see the links here. Okay, cool. So let me just zoom out a bit because I'm at a lower res here. And like I said, Breeze sets up a master layout. So if you take a look at resources, views, layouts, you'll see, I believe there's two here.

So if you take a look at Resources, Views, Layouts, you'll see, I believe there's two here. Yeah, so one for the actual app and one for the guest. So when you're not logged in. So let's make a few changes here. So normally when you log in, you're redirected to the dashboard, which you can find here. But in our case, we just want to redirect to the main page, because this page can be viewed by everyone and you don't have to be logged in. So let's go to our RouteServiceProvider. And let's change the redirect to the main page here.

So let's go to our RouteServiceProvider. And let's change the redirect to the main page here. Okay, and let's go ahead and create our first page. So let's go to our routes file. And we no longer need this dashboard. And let's make a new view called index. And this will be this page right here. So I'm using an app called Zeppelin for the design. And this has everything you need. So as a designer, you would export your designs from Figma or Sketch into this app.

And this has everything you need. So as a designer, you would export your designs from Figma or Sketch into this app. And as a developer, it has everything you need, like colors, you can see the size of this particular box here, and all the assets you need. So let's go ahead and create this page. Sign in the index, and maybe later we'll put it into a folder. But for now, I'll just put it in the views directory, index.blade.php. And we are going to extend the app layout, and we'll make changes to this as well. So just copy that, paste that in here. And let's save this and save the routes file as well.

So just copy that, paste that in here. And let's save this and save the routes file as well. And let's take a look at our layout. So app.blade.php. And all of this scaffolding is fine. Let's change the title to Layer Cast Voting for now. The font that's being used is the same font on the Layer Cast site, and that's Open Sans. So let's change this to Open Sans, Open+Sans. So that's our Google font import, and we'll add that to the Tailwind stack in a second. And here we're importing our CSS and our JavaScript.

and an item on the right, and let's give it some padding as well, px-8 and py-4, okay? And the first flex item is going to be the LairCast logo, so let me just add that. Say LairCast logo, we'll add that in a second. And the second flex item is the avatar. So again, for now, I'll just put a default avatar and just make an img tag in here. Actually, let me just paste that in because we're going to make use of Gravatar for our avatars. So more on Gravatar later, but this is the hash of the person's email. And if that doesn't exist, you can specify a default image. And MP is a mystery person.

And if that doesn't exist, you can specify a default image. And MP is a mystery person. I don't think we did this FY thing, so let me just erase that. And I have some width and some height on this and rounded-full, so it's a circle. So let's see how this renders back to our page here. Okay, so that looks good. So now let's add the login and register or the logout links up here. So if we go to our welcome.blade.php, we can take it from here. So let's look for login here. And you can see if there is a login route, then it shows these links.

So let's look for login here. And you can see if there is a login route, then it shows these links. So let's copy this. Okay. And this should work correctly back to our nav here. Let's put it right above here. Okay. And since we're not logged in right now, this should show login and register, and it does. But we don't want it to be fixed, so let's get rid of that. Okay.

You don't want this. We want logout. So let's go ahead and add that. So this should be within this navigation blade component. And there is a form here so we can log out. So let's just grab this and let's replace the dashboard here. So instead of this, let's just use this thing, this form that I copied. And instead of this dropDown link component, let's just make it a normal link. Okay. And that should work.

Okay. And that should work. And it does. Let's see if we can log out here. And it looks like it does work. Actually, let me fix this syntax here, since it's not a Blade component anymore. And this link doesn't really matter, but let's just put it in curlies. And now that should render like a link and it does. Cool. Okay.

So let's go ahead and add it in our site. So it is an SVG, so we can add the code directly inside our own code here, or we can add it as an image file. So for me, for icons such as this Chevron and this clip, I usually add those inline. But for things like logos, I just add them like a typical image. So let's do it that way. So up here for the logo, let's go ahead and add an image tag and let's just say an asset logo. Sorry, the asset should be, I think I have a snippet for that, do I? It's going to be in, let's put it in the image folder and it's a logo.svg.

So let's add that on the body itself. So usually I make use of Tailwind's default grays, and for the most part, I'm doing that here. But for the actual background, I took the exact color from Zeppelin here. So I don't know where the color is in the actual app. So I'll just use my color picker here. So f7, f8, fc. So let's go ahead and add a class for that in Tailwind. Let's say bg-gray-background. Okay, and let's go to our Tailwind config.

Let's say bg-gray-background. Okay, and let's go to our Tailwind config. So this was added by Breeze. So let's go ahead and extend our color scheme here. So let's go to theme, extend, say colors, and let's add, what did I name it? I named it bg-gray-background. So let's say bg-gray-background, and let's paste in our value here. Okay, actually, there should be a number sign here. And while we're here, let's go ahead and look at Tailwind's default theme and add some colors here.

And while we're here, let's go ahead and look at Tailwind's default theme and add some colors here. So I believe it's called default-config or something like that, so default-config.stub.js in the node_modules folder, and let's look for colors here. So we're not going to use all of this, but we will take some of this. So let's grab this, black, white, and gray as well. So let's copy this, let's paste it into our Tailwind config, let's put it above our custom gray. And instead of cool-gray, which is the default, I'm going to make use of true-gray, which was introduced in Tailwind 2.0, okay?

And instead of cool-gray, which is the default, I'm going to make use of true-gray, which was introduced in Tailwind 2.0, okay? And you can see it says Tailwind CSS colors is not defined, so we have to import that up here. So const colors = require('tailwindcss/colors'), okay? So that should work, okay? And make sure to npm run dev after you make changes to your tailwind.config.js. Okay, let's see if the background changed. Actually, let's go ahead and change the font to Open Sans while we're here. And one more time.

Actually, let's go ahead and change the font to Open Sans while we're here. And one more time. Or you can run npm run watch as well, okay? And let's see if the font and the background color changed. So it looks like the color did not change, I think I know what I did wrong. Let's check the font. So the font is Open Sans now, so that worked. So yeah, we don't need to add the BG here, Tailwind will add that for us. So it's just gray background. Again, npm run dev.

And we can either use Grid or Flexbox for this, and I'll just use Flexbox since it's pretty simple. So we can see the width of this, it's 281 pixels, so I believe 280 plus 1 for the border, so 280 plus 700 is 980. And I believe there is a margin here of 20 pixels, so that's 1000 pixels. So usually I just make use of Tailwind's default container, but in this case we'll try to follow the design here. So it's 1000 pixels altogether, so let's go ahead and do that. So back to our app, Blade, after our header here, let's go ahead and start a new section here.

So back to our app, Blade, after our header here, let's go ahead and start a new section here. So let's make it a <main> tag, and this is the container, but we'll override the size of the container. Let's make it mx-auto to center it, and it has to be Flexbox, so the two columns are next to each other. And for now, actually let me make the two columns. So this will be the first column, let's just put some text in here. Let's say lower arm 100, and same for the second one, say lower arm 200. Okay, so let me just put inline styles for now and then we'll move it to Tailwind later.

So I'll make a new maxWidth utility, since it doesn't go this high, so I'll say maxWidth custom, and we'll convert this to rems. So 1000 pixels to rems. I have this utility here that converts pixels to rems. So let's say 1000 pixels is 62.5 rems. So let's add a new maxWidth utility on the tailwind.config.js, so tailwind.config.js, let's extend maxWidth underneath the colors here, maxWidth, and let's say custom, like I named it, is 62.5 rems, 62.5 rem, okay? And let's make sure to put a comma here. And for the other widths, 280 pixels to rems is 280, 280 pixels, 17.5 rems, so 17.5 times

And I believe margin-right-5 is 20 pixels. And you can see in the Tailwind IntelliSense that it is. So let's get rid of this style. And for 700 pixels for this one, again, it uses pixels to rem, 700 pixels, 43.75 rems, so 43.75 times four, 43.75 times four is 175, so let's add that as well. So let's get rid of this, class="width-175", okay? Let's go ahead and add that in the Tailwind config. So we are extending the spacing scale. I said 70 for the first one, so that's 17.5 rems, and 175, that's 43.75. Okay, so now it's npm run dev again, and see if everything looks the same, okay?

I said 70 for the first one, so that's 17.5 rems, and 175, that's 43.75. Okay, so now it's npm run dev again, and see if everything looks the same, okay? And this should be exactly the same, and it is, cool. Okay moving on, let's see what's common between the two views. So if we go to the other view here, you'll see that this and also the addIdea form is the same. So that belongs in the master layout. So let's put a placeholder for the form for now. So here, the form goes here, addIdea form goes here, add some text here, okay? And let's work on this for now.

Actually let's make it a nav. So nav, flex, items, center, justify between, and I have it as text, extra small, and the one on the left, I made it an unordered list, so let's go with that, flex, uppercase, font, semi-bold, and let's say space, x, 10. Okay, let's add a list item here, let's add a class on the list, actually let's put the class on the link itself, class equals, let's put the actual title in there first, so first one is allIdeas, and I think there's a number beside it, yeah, 87, okay? And let's just see if that renders first, okay, and I'm gonna add the colors in here now. So we have a blue here, which is the main primary color, and you can see the hex value.

looks off now, so let's make that a bit darker, so text gray say 700 maybe, okay so that's better, so yeah I think that's a good place to break, we've installed Breeze, set up our layout and started the design, and everything is looking quite good, okay so in the next video we'll continue, so let's go ahead and make a commit, so I'll try to make a commit after each episode, so you guys can follow along, it might not be entirely clean, I might have to make some changes in between episodes, but I'll try my hardest to keep them clean, so say git add, oh it's not even initialized yet, so git init, and say git add, git commit, to let's say initial setup and design.