Let's build a weather app in Laravel. In the process, we'll take a look at two approaches of incorporating JavaScript into our application. We'll take a look at using Vue.js, and then we'll take a look at using Livewire with Alpine. You'll see the workflow for both approaches, and you can choose what you like to use in your apps. We'll be making use of Tailwind CSS for styling, and for the APIs, we'll be making use of the OpenWeatherMap API for the weather, and Algolia Places for the city search. So a quick demo of the app, pretty simple.

use of the OpenWeatherMap API for the weather, and Algolia Places for the city search. So a quick demo of the app, pretty simple. It shows weather information for a given city, and you can see it defaults to Toronto here, but we can search for any city, say Orlando, and it should grab that weather information from the API. So we'll start off with the styling in this video, and then we'll start building the app after that. Okay, I have a blank Laravel app here, so let's start off by installing Tailwind CSS quickly. So let's go ahead and npm install it.

quickly. So let's go ahead and npm install it. And while that's going, let's add a CSS file. So this will go in resources, CSS, main.css. Let's make a new file, main.css. Let's paste that in, and let's go to our webpack.config.js, or using Laravel Mix, and let's add this to our webpack.mix.js file. And let's just paste that in here. Okay, okay, let's save that. Should be done.

Okay, okay, let's save that. Should be done. And let's just see if everything is working. So we'll just work with welcome.blade.php, and let's import our style sheet here. So let's put it right here. So it'll be in css/main.css, and let's get rid of all of this. And let's just see if Tailwind is working. So bg-blue-500. Okay. All right, I have to run my watcher.

Okay. All right, I have to run my watcher. So let's do npm run watch. Okay, let's see if this works. Okay, so Tailwind is working. So I have a reference screenshot here for our design. So I'm just going to dump everything in the welcome.blade.php, and we'll put it in a component at the end of this video. So let's just grab everything here, and let's start from scratch. So let's start off with a background color.

So let's just grab everything here, and let's start from scratch. So let's start off with a background color. So I'm going to say bg-blue-200, and my IntelliSense isn't working. I think I forgot to add my Tailwind config. So I'm going to do that right now. So it's just npx tailwindcss init. Okay. And let's see if my IntelliSense works now. Nope. Okay, so I restarted VS Code, and everything seems to be working now.

Nope. Okay, so I restarted VS Code, and everything seems to be working now. So let's give it a min height of screen. And let's see if the background works. Actually, this should just work. So let me open up Chrome. Okay. So let's make use of Tailwind's new gradient classes here. So I'm going to do bg-gradient, and the direction I want is to top-right. And the initial color I want is, let's say, blue-200, and we can say to blue.

So I'm going to do bg gradient, and the direction I want is to top right. And the initial color I want is, let's say, blue 200, and we can say to blue. Let's make it a dark color so you can see it. And that should be a nice gradient. And there you go. So I'm going to change this to something more subtle. Okay, cool. Okay, I'm going to make another container here. Let's give it a margin-top. And I'm going to extract a Blade component later on.

Let's give it a margin top. And I'm going to extract a Blade component later on. But for now, we'll just start in here. So the width I used is width 128, which is a custom width. And we'll add that in a second. So let's say width 128. I want it to be centered. I want it to be dark gray, text white, make it small text, and let's make it rounded and overflow hidden. Okay.

overflow hidden. Okay. And we have two sections. We have the currentWeather and the futureWeather. So let's add that to our markup. And I'm going to name this currentWeather. And we can end it here. And let's make another one for futureWeather. So let's just duplicate that and let's say future. So let me add that custom width.

So let's just duplicate that and let's say future. So let me add that custom width. So tailwind.config.js, and I'm going to extend the spacing scale. So spacing, I have 128 and that is 32rem, okay? And I think I stopped my watcher. So actually, I'll just run npm run dev here instead of my watcher. Okay, that's done. Let's see if this renders anything. So let me just put something in here and see if this works. Okay.

So that's going to be the second flex item of this. Let's just say icon for now. Okay. Next, we have the future weather. So let's work on that. So it looks like just a bunch of rows. So let's go down here. And the background is slightly lighter. So bg-gray-800. And let's give it some padding.

And whatever you add in here will be used. And the class for that will be grid-template, whatever you name here. So let's add this and I'll show you what I'm talking about. Back to our code and back to our tailwind.config.js. Actually let me copy this entire thing. I think I missed the grid-template-columns. So we'll put it underneath the spacing. And I'll just use one of these. I don't need this plus sign. So I'm going to make use of that same size.

I don't need this plus sign. So I'm going to make use of that same size. So 2, 8, 2, which equals 12. I'm going to make use of the fr unit. And I'm going to name it, I'm going to name it weather. And like I said, let's do 2, 8, and 2. So like this. Okay, so let's save that. And let's run our npm run dev again. And now I should be able to use grid-template- weather.

And let's run our npm run dev again. And now I should be able to use grid-template-areas. Oh, wow. That's compiling. Instead of using Flex here, we can make use of that new class. So grid-template-areas. Sorry, it's not grid-template-areas. It's grid-cols. And let's also make sure to add the display:grid class. So it's just grid.

What am I doing? So each, let's look at the design here. Each list item should have three direct children. So we should have one for the date, one for the weather, and one for the high and the low. So let's add three sections in here. So the first one is the day. And I know this is going to be text-gray-100. So let's add that. The second one is the description.

So let's add that. The second one is the description. So let's say clearSky. And the third one is the high and the low. And they have their own lines. So let's also write a line. So textRight. And let's put another div for the high. And I'm just going to grab this. Okay.

Actually, this section should have the icon. So that has to be flex as well. So the icon there. So let's undo that. And let's add flex to this. flex items center. And the first flex item will be the icon, which I'll just say icon for now. And this will be clear sky.

So I'm going to grab all this. Cut that out. Let's wrap these two in a flex. So let's say div. And let's put the class here. Or those classes I just copied. And that should be the same. Okay. But now we can add another one after this. And make it absolute.

So it's all the way down here. So we have to make this relative. Okay. And let's say bottom 0 as well. Okay. And we can give it margin-bottom of 2. margin-right of 2. To bump it over a bit. And let's make it text-ss. And that looks good to me.

And let's make it text SS. And that looks good to me. Okay. The last thing I want to do is extract a Blade component. So I'm going to grab what we did here. Cut that out. And let's call it weather-widget. And we'll close that. So let's go ahead and make a component: php artisan make:component.

So let's go ahead and make a component. php artisan make:component. We called it WeatherWidget. Okay. And let's go into there. Say WeatherWidget. And just paste everything in here. Okay. And this should still work. And it does.