All over YouTube, there are thousands

and thousands of React tutorials, but

very rarely do you see a genuine modern

React app built completely from scratch.

So, in this video, we're going to start

from absolutely nothing, meaning a

completely empty terminal to a

productionready React app. We'll use

technologies like React Query, Tailwind,

skeleton suspense loaders, API fetching,

interactive maps, light mode and dark

mode, responsive design, so it looks

great on this device, this device, and

this device, and basically everything

you need in order to build a modern

React app that looks and works great.

I'm going to have very minimal editing

of this video. It'll pretty much be a

raw cut of me building out the entire

project. It'll be split up into

segments. So, if there's certain parts

you don't care about or certain parts

where you want to see exactly what I do,

please feel free to skip around. You're

not going to offend me. In the

description, I'll link the GitHub to the

project so you can clone the repo and

check the whole thing out for yourself.

Without wasting any more time, let's get

right into it. Here's a quick snippet of

the project that we're going to be

building. It's a real-time weather

dashboard where you can access the

weather data at any latitude and

longitude coordinates across the entire

planet. We'll be using the open weather

API to get all this data and combine

everything we know about React to make

this a buttery smooth and highly

functional React app. Let's get it. To

create a new React app, go into your

terminal, making sure you're in

whichever folder you want this project

to be in, and run npm create beat at

latest.

V is a build tool that takes all of your

React files and builds them into the

actual app that you see on a web page.

This create V at latest command will

create a V project that gives us a great

starting point. Once we've run this

command, it'll ask us a couple of

things. First, okay, to proceed. We'll

say y for yes. It'll do that. Ask for a

project name. We'll just call this

weather- project. Something super

simple. It'll ask for a framework. We'll

say, of course, React. And for variance,

we're going to choose TypeScript. Uh

roll down V for for now, we'll say no.

We don't really need that. And then with

npm, we'll go ahead and say yes. And

there we go. It just created our V app

and it actually just launched it. If we

control-click the link that it gave us,

it'll take us to this page here. And

this is our web app. At least it's the

starting point. To actually get into

your code, go to open folder and open

the folder that you just created. So

whatever project name you gave it, go

ahead and open that folder. And this

will actually open up your code. Let's

zoom this out so we can see a little

better. And also just collapse this

agent window on the right. This

extremely simple process of running

mpmreate v at latest is my preferred way

of getting your React app up and running

super quickly. So, it's always what I

recommend to anyone watching. V is

pretty much the industry standard now as

it's a fast and super efficient build

tool. So, setting up this V project with

this boilerplate code is a perfect way

to start a React app. All projects that

you create with Vit are going to look

something like this. I'll zoom in so you

can see a little better. We look in our

file explorer over here to the left.

You'll see we have a couple of files and

folders. Most of these config files down

here you don't have to worry about too

much right now. They're just settings

for the overall project. What we really

care about overall is the source folder,

which is where we have all of our React

code. React apps built with V will

always have main.tsx as the entry point

to the React code. So it all starts here

in this file. We render out this app

component, which if we go into it, is

the code that we actually see on this

page over here on the right. So main.tsx

is the entry point for our React app,

but app.tsx is the primary component

that we're going to be working in. beat

has hot module reloading, meaning if I

change anything in the JSX here. I add a

bunch of characters and I save the file,

it'll update in real time on the page.

Got a couple other random things on here

like some anchors, images, divs,

whatever. But as promised, we're going

to start from a completely clean slate.

So, let's actually take all of this,

completely wipe it out. Crl S, and we'll

start completely from scratch with

nothing but a blank page over here on

the right, which also means I don't

really care about this count and set

count state. So, I'll get rid of that as

well. If we look, we have this app.css

file, which if we go ahead and open it,

you can see we have some boilerplate

CSS, but honestly, I really don't care

about it. So, let's go in here, app.css,

and let's just completely delete it. So,

we'll also remove this import so there's

no weird import errors. Go ahead and

save it. And we've completely

obliterated the app CSS file. Lastly, we

have this index.css, which again just

has some more boiler plate. There's a

bunch of random anchor, body, button,

and some animation stuff here at the

bottom in this CSS file that again, we

don't really care about. So, let's

actually delete everything from here up

to here. I don't want to completely get

rid of root just yet cuz we might use

some of this, but let's get rid of all

that and go ahead and save it. And now,

we've also wiped out that CSS file.

We'll still use some of this basic stuff

like this background color for now and

some of this font stuff because this

index CSS file is imported directly into

main.tsx, tsx, meaning anywhere we have

any React components in our code, we'll

use the CSS file. So, this is fine for

now. Let's go ahead and leave it alone.

We'll close it and let's go back to

app.tsx, which again is the component

that we actually care about. Right now,

our app on the right is running out this

app component, which obviously is

nothing cuz this app component is

nothing. And we have really no CSS

besides a few things that I just saved

from index CSS. So, we're starting

completely from a blank slate. We don't

have a template, no weird stylesheet

stuff going on, not a bunch of stuff

we're copying, just a completely blank

page. Now is where the fun begins. Let's

start by talking about some of the

infrastructure for this app. There are

two technologies or packages aside from

React itself that are going to make up

the core of this project. One for

styling and the other one for data

fetching. For styling, we're going to

use Tailwind and for data fetching,

we're going to use Tanstack query, which

is the same thing as React Query. So

before we get too far into our coding, I

want to get the infrastructure for these

two things set up right now so that we

don't have to worry about it later. So

let's start with Tailwind. If we

navigate to Tailwind's website and go to

the installation tab, the default

installation is 4v. So we can easily

just follow this guide. We've already

created our project using the mpm create

vatus command. So we can go ahead and

skip this first step. Next, it tells us

to install tail and css and at tail and

css/vit. We'll go ahead and take this

command, copy it, paste it over into our

terminal, and run that. Next, it tells

us to add this tailwind CSS to our V

plugins. So, if we go to our files, we

go over to our v.config.ts.

We go ahead and look in here. We already

have React as a plugin. So, let's just

add T and CSS as a plugin, just like

this. And go ahead and save this file.

Next, it'll tell us to import Tailwind

CSS into our index CSS file. So, we'll

take this import here, go back to

index.css

right here, and go ahead and just add

this import at the very top of the file,

and go ahead and save this file. And

then all we have to do is restart our

build server just in case. So, we'll

terminate this. Make sure to run npm

rundev again, which again is the run

command. That restarts our build server.

And now we are actually free to use

Tailwind in our app. So, we can go ahead

and close these. And that is all we need

to install Tailwind. It's a super simple

setup process to test this. and make

sure it works. If we go into app here,

let's just make this a div. I'm going to

give it a class name of size 32 and then

bg red 500. This is the whole point of

Tailwind. You can write styles in line

like this instead of having to have

dedicated CSS files. If I go ahead and

save it, you can see we have this red

square up here on our screen. So,

Tailwind is working perfectly. I can

change these in Tailwind, start messing

with it, and everything I do will be

Tailwind valid because we set it up

really easily. Cool. So, we know

Tailwind works exactly like it should.

If you're not super familiar with

Tailwind, just know it's a way of

writing super nice and convenient styles

inside the class name of your JSX

elements. Instead of just spamming CSS

files and random classes everywhere and

getting messy, we'll be using it

throughout this entire video. Now that

we have Tailwind added for the data

fetching part, we're going to add

Tanstack query, which some people still

call React Query, into our project. I

have two whole videos on Tanstack Query

if you don't know how it works that I'd

suggest checking out. But otherwise,

I'll assume you have at least a

foundational understanding of it as we

work through this video. This library is

also very, very easy to add. Just like

Tailwind, if we go to the installation

docs for tanstackquery.com,

we can look at the npmi command to

install it. So, let's go ahead and copy

this, go into our terminal, and install

tanstack query into our project. With

that done, there's only one more thing

that we need to do. If we go back to

main.tsx, tsx which again is the entry

point for our app. We need to set up our

query client in this file because

tanstack needs that in order to have

context to the queries that we're going

to be making. So in main.tsx, we'll

first want to make a new query client.

To do that, we'll just say const query

client

equals new query client just like this.

That is from anstack. And we're

intentionally doing this outside of any

sort of React component because we only

want it to be created once. We don't

want it to have any sort of rerendering

or nothing involved in the React life

cycle. And then what we'll do is

highlight our app here. Control shiftp

type wrap. And then we're going to wrap

this right here with a query client

provider just like this. We'll import

this also from tanstack like this. And

this component takes in a single prop

which is just called client where we can

pass in our query client. This query

client provider right here works just

like any other provider you would use

with context in React. It is just what

tanstack query requires to have a

functional query client. Now that's

done, we can close out of this file and

we've just got two huge foundational

steps out of the way. We have our

styling component installed and our data

fetching component installed. So we're

ready to go and use both. Speaking of

data fetching, how are we actually going

to do that? I mean, I know how to fetch

with Tanstack query, but what data are

we actually fetching? We want this

weather dashboard to show realtime

up-to-date factual data on our page, not

just some mumbo jumbo hard-coded

garbage. This is where open weather

comes in. This whole entire project is

not possible without them. Open weather

is a giant API that allows us to get all

sorts of accurate real-time and

historical weather information.

Openweathermap.org is where we can find

all the information about them,

including their API docs. If we open the

menu over here and go to the API page, I

can start scrolling and see all sorts of

different types of information that we

can get that's from weather. So, current

weather, hourly, daily. You can see

there's bulk downloads for stuff, solar

radiance, uh, history, weather maps, air

pollution, and all sorts of other APIs

that we can use from this site. Some of

these APIs are locked behind pay walls,

but the ones that we're going to be

using are completely free. The primary

one that we're going to be looking at is

this one call API 3.0, which is their

main one. Basically, what it will do is

it will give us the current weather at

any location, the hourly forecast, daily

forecast, minutely forecast, and a bunch

of other stuff. We're not going to worry

about minutely in this video, but we

will be using the current, daily, and

hourly weather information to populate

stuff on our page. If we click into the

API docs right here, I can show you

exactly how it works. If we scroll down,

it'll tell us exactly how to make an API

call with this link right here. I can

zoom in so it's a bit easier to see, but

it's just this URL that it gives us. All

we need to do is call this, pass in

latitude and longitude coordinates, and

give them our API key. But basically,

how we'll be able to click on different

areas of the globe and get the weather

information for anywhere in the entire

planet Earth is through these latitude

and longitude arguments that you can

pass into this URL. And we'll have some

other customization options like exclude

or whatnot that we'll also take a look

at. But for right now, let's focus on

this API key right here. If you try to

hit this whole URL right here, this API

with no API key, we're going to get an

error 400 telling us that we're

forbidden from accessing it. If you've

worked with APIs in the past and you're

familiar with them, you know this is

pretty much how all APIs work. If you

want to use the service, you have to get

a key through the service first that you

can pass through to each API call. To

get an API key for Open Weather, all you

have to do is click on this API key tab

right here. If you have not made an

account with Open Weather or you've

never used them before, go ahead and

create an account right now because you

can't get to this page without an

account. Before you create an API key,

it'll most likely ask for payment

information as well. But don't worry,

you don't have to pay a single dime.

Everything that I'm doing in this video

is completely on the free tier up to

2,000 calls per day. So, as long as

you're not spamming 2,000 plus calls

every single day, which you definitely

shouldn't be, it's completely free. They

just want the payment information in

case you go over. Once you've gotten

through all the logistics, like creating

your account and you get to this API

keys tab, you should be able to generate

an API key. My API key is right here.

So, what I'll do is go ahead and copy

this entire key because we'll be needing

it in just a second. What I will usually

do for storing API keys or other

sensitive information is go to my file

explorer and at the root level create a

new file that I usually call env.local

just like this where I'm going to be

storing my private environment

variables. You don't want API keys

leaking out to the public because then

people could spam with your key and end

up running up your credit card. So, it's

usually something that you want to hide.

And before anybody tries to get funny

and run at my credit card with this key,

I will be destroying it before I post

the video. So don't think about it. If

we take a quick look at our git ignore

file, you can see that any file that has

this.local on it is going to be hidden

from git. So this env.local is not going

to be pushed up. So we don't have to

worry about it being public. Luckily for

us, vit has a very simple way of doing

environment variables. We just have to

start the name with vit and then v will

recognize it. So for this we'll just say

v_api_key

equals quotes and then we'll paste in

the API key that we copied from open

weather and then go ahead and save this

file. Now anywhere we need to access our

API key we can use vit's environment

variable system to use this value in a

safe and protected way. Okay, now that

we have that let's take a second to

think about what we should do next.

We've created the basis of our React app

installing Tailwind and Tanstack query

in the process. So, we've got a blank

app page that we can start working on.

We also got an API key from Open

Weather, which permits us to call their

weather API to get the information that

we'll be populating our page with. In my

opinion, the next logical step here

would be to set up some functions that

we can easily call in our React

components that will fetch us the API

data from this link right here from Open

Weather. So, let's go ahead and do that.

We'll start with this API call here.

We'll write a function that will take in

latitude and longitude as arguments. And

then what it will return will be the

actual weather data. If we want to see

what the return value is going to look

like, we can scroll down to here where

it gives us the example of an API

response. And we know that this function

that we call is going to return

something of this format. So again,

it'll have stuff like the latitude,

longitude, time zone, current weather

data, minutely, hourly, and a bunch of

other stuff. So, just to reiterate, this

function will take in latitude and

longitude as arguments, and it will spit

back out the weather data for whatever

we pass into it. Let's go ahead and do

that. Now, normally I would want to

split up API functions into different

files and folders, but since we'll only

use a handful of different Open Weather

API calls, I'm just going to make a

single file inside of source here that I

will just call API.ts.

And in here is where we'll make our

functions that interact with Open

Weather. The first one will be the one

that we just talked about. So let's just

say it's going to be a function. We'll

say export async function and I will

call it get weather. Let's look back

over at our page over here and take this

exact link right here. So we'll go ahead

and copy this. Then we'll go back over

to our code. Let's say const results and

we're going to say equals await fetch

quotes and we'll pass in this link. And

actually instead of using quotes, we're

going to use template quotes. So we can

inject some stuff in there just like

this. And this will be our basic setup.

If you've interacted with any API or

backend before, you know that fetch is

the standard way in JavaScript of

interacting with HTTP to get responses

like that. If you want to, you can also

use something like Axios, but for this

video, we're going to keep things simple

and just use fetch. So, we're going to

fetch and we're going to give it the

open weather API link right here. Like

most fetch requests, we'll want to parse

this into JSON format. So, let's go up

here and let's just say const data

equals await res.json to parse it into

JSON format. Again, our API response, if

we look over here, is going to be an

object with a bunch of stuff. And if you

look closely, this actually is in JSON

format, which makes our life a lot

easier. Last thing we'll do is return

data. And this function is essentially

done for the most part. Very, very

simple. All we're doing is fetching the

open weather link, parsing that as JSON,

and then returning it. What this means

is if all goes well, I took this exact

link right here and pasted in here. So,

if I ran this in my app, I should get

this exact response object. Obviously,

the numbers would be a bit different

because it's probably a different point

of time that I'm doing this, but you get

the picture. There's a few things we

need to make our get weather function

actually work properly. The first

obvious problem is that this is just a

hard-coded link with hard-coded latitude

and longitude. In our case, we want to

be able to pass in latitude and

longitude, not just hardcode the value.

So, let's give this function some

arguments to take these in. You can do

this in two separate arguments if you

want, but I'm just going to put them

inside of a single object. So, I only

need to pass in one thing. I'll just say

an object expecting latitude and

longitude. And to make TypeScript happy,

we'll say its type is going to be

latitude, which is a number, and

longitude, which is also a number. All

that we're saying here is forget

weather. We're expecting a single

argument, an object, where we are

destructuring latitude and longitude. if

we want to use it in our API call

because we use the template quotes here

we can inject JavaScript directly into

the string. So right here where it says

latitude let's take this replace it with

dollar sign brackets and we can put in

latitude like this and for longitude we

will do the exact same thing. Now the

latitude and longitude that this API

calls will be directly decided by

whatever latitude and longitude we pass

into this function. For the last thing

we need to do this exact same thing for

our API key. And this is where the

environment variable that we just made

comes into play. At the very top of this

file, but outside of this function,

let's make a variable for our

environment variable. All I will do is

say const API key

equals to properly use vit environment

variable system. All we have to do is

import meta.env

and then whatever the name of our

environment variable is. We named ours

v_i_key

just like this. So now this variable has

our API key. If we go back real quick to

our env.local, you can see this is v_i

key. So we just want to make sure this

matches one to one right here. So now

anywhere where we want to use our API

key, we can just use this const right

here. What that means is in our fetch

over here, instead of doing this random

app ID thing, all we have to do is get

rid of this, make this also dollar sign

curly brackets, and pass in API key just

like this. Now we're not only passing

through latitude and longitude from our

function arguments, but we're also

passing in our API key that we're

storing in our environment variables.

And now this function is good to go. Now

that we have the essentials, this

function get weather will actually work

now and return to us weather data from

open weather, assuming we pass in valid

latitude and longitude coordinates.

However, there's one more quick thing I

want to change. First of all, I prefer

to have my weather units in Fahrenheit.

So after longitude here, I'm actually

going to make another argument. I'm

going to say ampers units equals

imperial just like this. If we scroll up

in the API, it mentions this. If you

look here in units, you can pass in

standard, metric, or imperial. So, I'm

going to use imperial. But for your own

app, feel free to use whatever you like.

There's also this exclude right here. I

mentioned that we're not going to be

using the minutely data, so we might as

well exclude that. So, in addition to

doing the units imperial, I'm going to

add another one. I'll say amperand

exclude equals minutely just like this.

And we're also not going to use alerts.

So let's do comma separated and go ahead

and exclude that as well. So now we've

customize this function to do what we

want and have all the essential things

like passing in latitude and longitude

and returning the data that open weather

gives us back. And now that that's done,

we should actually be good to go for

this function. We can take in latitude

and longitude. We fetch the open weather

using those coordinates by passing those

in to the fetch call while also passing

in our API key. We parse that data as

JSON and then we return it so that we

can use it in our React components.

Let's make sure this file is saved and

now close it and head back over to our

app and take this function for a test

drive. In our app component, we're going

to make a use query for this API call to

see if it's actually working. So up here

at the top, how we normally do use

queries with tanstack query is we'll say

const we'll extract data out equals use

query and then we need to pass in a

query key and a query function. We'll

make sure this is imported from

tanstack. So for our query key, we don't

really care for right now. I'm just

going to say weather. And then for our

query function, this is just going to be

the function that we just wrote. So

we'll say parenthesis like this call get

weather. And like we just did with get

weather, we'll import it. Remember that

it is expecting a single argument that's

an object that contains a lat property

and a lawn property. So right here we'll

just say lat I don't know 50 and also

lawn 50 just like this. We're just hard

coding them for right now to make sure

it works as expected. And then in our

JSX to make this super simple. Let's get

rid of this div right here and let's

just go in here and let's just

json.stringify

data. That way we can at least see it on

the page. Let's go ahead and save this

now and head over to our page. And we

can see boom, we have this huge wall of

text that now has a bunch of weather

data. I'm not going to individually

parse through everything in this massive

text wall. But if you look at the very

top right here, you can see the response

open weather gives us at least says lat

50 and lawn 50. So we know it's the

right coordinates, which gives us a time

zone in an area of somewhere in Asia. If

we go back into our code here and

instead of doing 5050, let's do 1025 for

example. Go ahead and save it. Refresh

this page and you can see now we have

lat 10 and lawn 25 which is somewhere in

Africa. This stringified data is

obviously super super hard to read

because this is not really, you know,

the intended way of printing all this

out. But if we go over here, rightclick,

inspect, and at least open up our

network tab. Oops. At least open up the

network tab here. Go ahead and refresh

this and look at this. You can see we

get it all in a nice JSON format. So

it's a bit easier to read if you want to

see what's going on. If I just zoom this

in a little bit, you can see we have

again the lat lawn, the time zone, we

have the current weather data. So stuff

like the sunrise time, sunset time, we

have the temperature, we have the due

point, visibility, all this other stuff

that pertains to the current weather

information. Then we have hourly, which

is an array of all the hourly forecast

data. So this would be the forecast for

the first hour, forecast for the second

hour. You get the picture. And then if

we actually let's say collapse this

here, you can see next we have our daily

data which is pretty much the same

thing. It's an array where each object

represents one day. This is day one of

our forecast. Here is the second day.

Same thing. And I think you kind of get

the picture on what all this data is.

This is a hugely important part of our

app that we just got out of the way. Our

React app is now interfacing with an

external API, grabbing the appropriate

weather data depending on what we pass

into the get weather function. This is

super cool. It's a huge part of a React

app that we just dealt with. Before we

go any further though, however, we

should fix something. If we go over to

data here and we hover it, it's going to

say the type is of type any. And this,

for one, is completely expected.

Whenever you make an API call and then

you parse it as JSON and then just

return it because you're parsing just

pretty much a raw response string as

JSON and returning it. TypeScript really

has zero way of inferring what the

actual data type looks like. Working

with data that has type any is generally

a big no no with modern TypeScript apps

primarily because it makes it so easy to

try and access things that don't

actually exist and it just leads to a

lot of potential errors. If you've used

quite a bit of TypeScript, you know that

having smart types where you can get

IntelliSense and you can know what

properties exist and what you can and

can't do is super super helpful as a

developer and lacking it makes

developing 10 times harder. So, let's

fix this type any and make sure data is

the actual response type that matches

what we're seeing over here in the

network tab. The way that I prefer to do

this is by using ZOD. If you don't know

about ZOD, it's basically a type

validation library that will ensure all

of your API calls are typed properly, so

you don't have to work with type any

everywhere in your code. It'll also

throw errors if your API response

doesn't match the type that you give it

to ensure 100% type safety. This isn't

hard to set up at all. If we go to the

Zod docs, it tells us to install it. All

we have to do is run npm install zod.

So, if we go into our terminal, let's

just run that here and install Zod into

our project. And then what I will

typically do is in our source folder, I

will create another folder that I will

call schemas. And in here, I can put all

of my ZOD schemas. If you want to know

how Zod works, let me show you real

quick. In this file, I'll make a new

schema. I will just say weather

schema.ts

just like this. Basically, to make a ZOD

schema, all you have to do if you want

to make an object is say something like

Z.Object. If you want to make an array,

Zarray string Z dotstring. You get the

picture. Basically, what we'll have to

do with ZOD is go to our API and find

what the response is going to look like.

So, for open weather, it's going to look

something like this. And then we'll have

to make a schema that matches all the

types. So, it'll be an object that has,

for example, latitude, which is a

number. So, Z dot number in Zod.

Longitude is also a number. America/

Chicago is a string. So, Z.String. And

you get the picture. Basically, we're

just building out a ZOD schema to match

the exact shape of the open weather

response. I'll be honest, I'm super

lazy. So, instead of going hand by hand

and going every single one of these

properties and then making a schema

thing for it, what would be easier is

just to use something like chatbt to

generate a schema real quick. What I'm

going to do is actually copy this entire

example response here. So, we'll go

ahead and just copy this entire sample

response object. Go to chatbt,

paste that in here. I'm going to say

please make me a zod schema that matches

this exact shape minus I don't want

minutely and alerts. So I'll do this and

it should spit out a schema that pretty

much matches the exact shape. So we're

going to take this actually exactly at

face value. Let's see we got all this.

Yeah. So we'll take this copy it and in

weather schema let's just paste that

entire thing in. So, it's 100 lines, a

lot of stuff, but again, doing this by

hand is super tedious, and I don't

recommend doing it. I'd rather just use

something like JPT to do it for me. So,

if we go ahead and save this now, we

have a weather schema that is hopefully

valid. If it's not valid, this will

throw errors. So, a good test would be

to just plug it in and see if it works.

Again, like I said, just quickly going

over Zod. For each field, we'll just

want to map to the Z type or the Zod

type. So, like Z.tring for time zone, Z.

for the offset. DT is the time. So Z dot

number and you get the picture. Almost

all of these are just numbers. So having

Z dot number is super super simple. So

this actually isn't a crazy ZOD schema

even though it looks a little bit

complicated. So how to actually use a

ZOD schema is once we have our schema

defined, we can go back to our API

function which is get weather and

instead of just returning data like we

are here, what we can actually do is we

can return the weather schema. So we'll

say weather schema. Make sure we import

that from the schema we just made.

Parsse and then we pass in our data just

like this. Now, if we go ahead and save

this, we're going to parse through our

schema. And we're assuming that data is

going to match this schema shape. So, if

we go over to app now and we hover over

data now, data should be the exact

correct type. If we go ahead and head

over to our page here and just refresh

this, it looks like we're not getting

any breaking errors. So, I think it's

safe to assume for right now that this

schema is right. Hopefully chat GBT

didn't just sell a short and it gave us

a correct schema. If it's wrong for

whatever reason, we'll have to correct

it going forward. We're not going to get

any sort of weird type any. And by doing

this, we're likely going to avoid a

bunch of future type issues. Anywhere

now in React land that we want to use

this data variable, we can use

IntelliSense to know what properties we

can and can't access. For example, if I

want to access the current weather data,

I try and do something like data do

whatever. IntelliSense now knows that I

can access current, daily, hourly, or

any of these things because data is

typed properly. That's something that's

going to be really helpful going

forward. Sweet. Now that that's out of

the way, what do we do next? Now that we

have the current, hourly, and daily

weather information fetching the way

that we want it to, I think the next

logical step would be to create and

style the components that are going to

be holding this information. We could

handle all the data fetching at once and

then save all the styling till the very

end, but sometimes doing that creates a

monstrous amount of styling. if you save

it all to the end that I tend to not

like very much. So, I'll break down each

section of the page with functionality

and styling before moving on to the next

section. Here's what I kind of figured

and envisioned for our end product. You

want to have a dashboard that has

multiple cards on it, each of which

holds weather information like hourly

forecast, daily forecast, current

weather, and you get the picture. It

would make sense logically if we made

this a single card component, and then

the inner content of each card would

just be the card's children. That way we

have a sharable and reusable component

that we can use for all of our stuff on

our dashboard instead of having to

rewrite a bunch of code. With that being

said, let's go over to our file explorer

and in our source folder, let's create a

new folder called components where we're

going to make all of our primary React

components. And because we'll end up

having different types of components,

I'll make yet another folder inside of

components that I will just call cards

just like this. And inside of cards,

let's make a component called card.tsx.

If you have the React Shortcuts

extension in VS Code, you can just type

TSR RFC, which stands for TypeScript

React Functional Component. Press enter

and it actually makes a skeleton for the

component to avoid you having to write

some of the boiler plate because we want

each card on the dashboard to have the

same outer styling, but be able to

change the inner contents of it. We'll

give this card a children prop just like

this. And instead of rendering our card

right here, we will just render out

children. And to make TypeScript happy,

let's make sure we add it to our props.

So we'll say children which is of type

react node just in case we need to add

more customizable styling later. I want

to make this div that holds the children

different from the outermost div of this

whole component. So if I highlight this

whole div right here, control shiftp and

type in wrap. I'm going to wrap it in a

second div. And before we get any

farther styling this component, let's

see what these cards look like if we

pass in some data that we already have.

So let's go ahead and save this card

right here. Let's go into app.tsx.

Instead of rendering out data just being

stringified, let's actually do something

else. For now, what we're going to do is

wrap this all in parenthesis to make

sure it is valid. And let's actually

break this into three separate chunks

here. So, we'll render out card just

like this.

And then let's copy and paste this

twice. So, we have three cards on our

page. And then for each one of these

cards, I'll pass in data that we're

already getting from Open Weather. So,

for this first one, what I'll do is I'll

just pass in JSON.stringify stringify

and I will pass in the current weather

data which if we hover data is just data

current. So I'll do data.curren and then

for these next two cards I want to pass

in hourly and daily. So I'll take this

copy and paste it. This will be data

hourly because again if we hover data

here we can see hourly is this array and

daily is the exact same thing. So we'll

do data daily. Typescript will say this

can possibly be undefined. So, let's

just add a question mark here to each of

these to make TypeScript happy. And if

we go ahead and save our page, now we'll

have three cards for each type of data,

both the current, hourly, and daily

weather. Nothing really looks different

right now since we haven't added any

styles, obviously, but at least now our

data is broken out into cards. So, let's

now go back to the car component we're

working on and get some styling for

this. So, using Tailwind on this

outermost div, let's give it a class

name. And generally the first thing I

like to add to new components,

especially ones that have a background

color and some borders, is padding. So

we'll add a class name, we'll have P4

for padding, just to create some

separation between the content and the

outer edges. And then we'll also give it

rounded XL to make a little bit rounded.

And we'll say BG zinc 900. Go ahead and

save it. And it still looks pretty

horrible because you still can't really

see any sort of separation, but we're at

least getting somewhere. It still looks

pretty horrible because there's just

this massive text wall. So let's go to

app and instead of stringifying the

entire thing like this, let's actually

take that string and let's just take the

first 100 characters for each one of

these. So I'll add this slice 0 to 100

for each one of our cards. And now it's

a lot easier to see. We can at least see

where each card begins and ends. This

makes it a bit better, but let's

actually make this fragment right here

into a div. And also give this a class

name. And let's give each of the cards

some separation. So we'll say flex flex

column

layout. and we'll give gap eight to

create even more separation between the

cards. Go ahead and save it. And now

that's even better. If we now go back to

our card component, let's add a couple

of more things. First and foremost, the

majority of the time you have an element

that is kind of close to the color of

its background, like these cards here,

adding shadow can generally be good

because it helps create a layered look.

It makes the cards pop out against the

background. So on these cards, we'll

also just throw a shadow. We'll try MD

for now. Save it. And that creates just

a slight separation against the

background. Next up, let's think for a

second about how we want these cards to

actually be used. We know each of these

cards is going to represent one portion

of our data. So, I'll have one card for

current weather, one for hourly, and one

for daily. How do we know which card is

which just by looking at it? Well, the

most clear way to show which card is

which would be to give each card a

title. That way, the user knows which

card they are actually looking at. If

all the cards are going to have a title,

it would make sense just to put that

title in this card component here and

have each render of this card pass down

a title prop. That way we know what to

display. So what I mean by that is

inside card above the children here,

let's make a header. We'll say header 2

for right now. And let's say it's going

to display title. Title will come from

props. So we'll add title to our props

here. And to make TypeScript happy,

we'll say that title is going to be a

string. To make this title actually

stand out like a header, let's go on to

this. Give it a class name and let's

give it text 2XL and then font semibold

to give it a sort of titleish look and

go ahead and save this card. If we now

navigate back to our app, TypeScript is

going to complain because we said title

is a required prop, but we're not

passing it in here. So for each one of

these cards, let's actually pass in the

title. For the current weather card,

let's give it a title prop. And we'll

just make these all strings. This will

just say current weather. And then for

other two, let's do a similar thing for

the hourly card. Instead of saying

current weather, this will just say

hourly forecast and we'll specify that

it is 48 hours. And then for our daily

information, we will just put this as

daily forecast.

Go ahead and save it. And now our cards

have a title on them, which we've just

done through this title prop. Super

simple. We need a bit more separation

between the title and the actual

information of the card. So let's go

back to our card component here. And on

this class name here, let's give it

flex, flex call, and gap 4. That'll make

sure the title always appears above the

children with a decent gap between them.

Save it. And it looks a little bit

better. Some more separation. We may

come back to this shared card component

in a bit to change or add some things to

it. But for now, let's actually work on

getting the specific card set up. So,

the daily card, hourly card, and the

current card. So, we'll go ahead and

close out of these files, go back to our

app, and let's ask ourselves, starting

from daily forecast, what do we actually

want this card to look like? Well,

before we figure that out, preferably, I

wouldn't have to build out the entirely

daily card within this app component

because then that would get a bit

bloated. So, let's actually make a new

component for this card specifically.

So, inside of this cards folder that we

already made, let's make a new file.

We're just going to call it daily

forecast.tsx

like this. We will ts RFC the same

shortcut we used before to make the

component like this. And now we have our

daily forecast card. Let's go in here,

take what we already have for this card,

like this. Let's cut it, paste it into

this component. Make sure to import

card. Go ahead and save it. And instead

of rendering out that, we will render

out this component. We just made an app

daily forecast just like this. So we

just componentize the card. We'll do the

same for the other two, but for right

now, let's stay focused on daily

forecast. However, having this in a

separate component only introduces one

problem in this component. I have zero

context to any of the weather

information that I'm fetching in the app

component up here in the use query. I'm

trying to access this data right here,

but I haven't fetched data in this

component. So, I have no idea what data

even is. To fix this, I'm going to do

something that might seem a little bit

strange at first. I'm going to take this

entire use query that we already have in

app and I'm going to copy and paste it

verbatim into this component right here.

Making sure to import use query and also

to import get weather. And now if we

save it, it should at least fix the

error. So now we can see our page again.

The reason I took the same exact use

query and just copy and pasted it into

this component is that as long as these

two use queries have the exact same

query key, which they both do, they're

both weather. then it should only query

once because these app and daily

forecast components will mount at the

exact same time. Even though it's two

separate use query calls, it's smart

enough to still only fetch the data

once. Here in a little bit, we'll be

refactoring it and taking this use query

out of the app completely. But still,

it's not a problem for right now. Like I

said, we're not going to be double

querying because we have the exact same

query key in both of them. And actually,

instead of using use query, I'm actually

going to change this to a use suspense

query instead. Later on in this video,

we're going to add skeleton loaders. So,

I want suspense boundaries around each

one. You'll see what I mean later by

this, but in order to do that, we'll

need to have this be a use suspense

query rather than a regular use query.

More on this later. All right. Now,

let's put our creative caps on for a

second. From a very rough standpoint,

what do we want this card to look like?

Keep in mind before you roast me, I'm

not a graphic designer, so this drawing

is not going to be super pretty. What I

was thinking is we would have our card

here in this rough little box like this.

And open weather in its doc says that

the daily forecast is an 8-day forecast.

So in my mind, this card would be broken

out into rows like this. One row for

each day. For each row, we'd have a

couple of things from left to right. The

first thing we would have on the very

left side for each row is the day of the

week like this. So Monday, Tuesday,

Wednesday, whatever. Then next to it, we

could have an icon like for whatever the

weather's going to be for the day,

whether that's sunny, cloudy, rainy,

whatever. Here, I'll draw a little sun

in here. is not super amazing, but you

get the idea. And then we would have

three more numbers for the rest of the

row. We would have the average temp, so

for example, like 73 degrees. We would

have the min temp, so something like 61.

And then the max temp, so something

like, I don't know, 77. And each row

would roughly, for the most part, look

like this. So we have the day of the

week, followed by an icon, followed by

the average, then the min, then the max,

and this would be eight times because

there are eight items in our daily

forecast. Again, show me a bit of mercy.

I'm not a graphic designer, so I know

this, you know, doesn't look fantastic,

but I think you kind of get the idea.

So, let's take that very rough draft

design and translate it into JSX using

Tailwind. So, the first thing I'll do is

just wipe out our data here entirely. We

don't care about it for right now cuz

we're going to format it. Let's make a

div inside of here first. And let's give

this div a class name of flex, flex

call, and gap 4. That will create each

of our individual rows. Now inside of

here is where we want to map over each

row. So we create a new item in the

flexbox for each day. But basically for

each day we want to render something

out. The way we normally do that if we

have an array for example when we hover

over data we want to look at daily

information. You can see daily right

here is going to be an array of objects.

So what we can do is we can say data

daily map just like this. And then for

each day we're going to map something.

For right now, we'll say each day is

just mapping over a div.

Just so we don't forget, let's throw a

key on this div. And something that will

be unique with each day is actually the

timestamp, which is just this dt. We can

say that the key is just dayd

just like this. Now the question is how

do we want to style each row? Because

this div right here is representing each

row for each day that we have. Well, we

want to space everything out evenly. So

let's give it a class name of flex

justify between. That'll make it in a

flex row layout and space everything out

evenly. Now, what do we want to have

inside each row? If we look back at our

design, remember that we wanted five

things. First, we want the day, then the

icon, and then the three numbers, the

average, the min, and the max. So, let's

make an element for each one of these

five inside this div right here. For the

first one, the day of the week, let's

just make it a p tag for right now. And

we're just going to say date. For the

icon, let's make an image tag just like

this. And let's give it a source. Now,

how we can find the icon for each day is

if we go to our weather schema here and

we look at our daily information,

you can see that we have this weather

array at the very bottom that has an

object that has this icon on it. So,

this icon is what we can actually use to

display an image. If we head back to the

open weather API and we control F on

this page just for icon and we go down a

little bit, you can see we have this

weather.on icon field, which matches

exactly what we're looking at in our

schema. Right here, it says how to get

icons. If we just click on it, it takes

us to this page, and it tells us to get

icons, we just need to use basically

this URL right here. Here's a quick look

at all the different icons we can get.

So, obviously, this would be something

like sunny or clear sky, daytime versus

night. We have cloudy, we have rainy,

stormy, snowing, you get the idea. So,

let's actually take this exact link that

it gives us and go ahead and copy it.

And if we go back to our code here,

let's go to the source, make this a

string with back to quotes, and go ahead

and paste it in. However, if we just

keep it hardcoded to be this 10D at 2x,

it's going to be this image right here,

this 10d.png. So, this little rainy

icon, and that's not ideal. Obviously,

it shouldn't be hard-coded. We want this

to be dynamic. So, let's actually

replace this entire 10D at2x with dollar

sign quote to inject our own expression

into here. And let's pass in the actual

icon that we're getting from the

response. Like I just showed you a

second ago. If we look at the daily

information and we look at weather, we

have this array and then an object

inside the array that has icon. So it's

pretty deeply nested in here. Now, one

thing I will point out is that weather,

like I said, is an array because

technically over the course of the day,

there can be multiple weather

conditions. We're not going to worry

about this for right now. Let's just

assume we'll take whatever the first

weather condition is. In other words,

index zero in the array of weather. So

what that means is that day that we have

right here represents this Z.Object. So

to access the icon, we need to do day

dot weather at the zero index dot icon.

So let's do that. So for the source

here, we will say day do weather. And

it's nice that we have this type with

zod because now we have intellisense.

Say weather. take the zero index and

we'll do do icicon just like I said. And

just to be safe, we'll give this an alt

here. That will just say weather icon.

Go ahead and go back to our app and now

save this. You can see we have date,

date, date, all this. And we actually

have the weather icons already on this

card. I want these icons to be just a

little bit smaller. So I'm going to give

it a class name for the image. And let's

just say size eight. Go ahead and save

it. And now they're a bit smaller, which

makes our card not so huge. Now, let's

get the average temp, the min temp, and

the max temp. If we look back at our

schema here and we look at this temp

object, you can see we have day, min,

and max. So, we're going to use these

three numbers right here. So, let's

actually make P tags for all three of

these. So, after the image here, let's

make a P tag right here. And the way we

can access that is we can say day.temp

day for the average for the whole day.

Day.temp.day

just like this. We'll go ahead and copy

this. Paste it twice. This will be

day.temp.min

and this will be day.temp.mmax.

Now if we go ahead and save it for each

day, we have the average for the day,

the min, and the max in that exact

order. I think it might look better if

the min and max fields are slightly less

visible and pop out less than the actual

average for the day because the average

for the day is what's more important. So

for the min and max, let's actually give

these a class name. And for each of

them, let's just say text gray 500

slash75 to make it slightly transparent.

And we'll give this actually to both of

them. Go ahead and save it. And that

just grays them out a little bit. With

this pretty simple component that we

just made in this daily forecast, our

daily weather information is now

actually looking pretty nice and

presentable with the obvious problem

right now being that we're just putting

this date string here instead of the

actual day of the week. So let's address

that. So let's replace this date here

with a JavaScript expression. And again

inside of here if we hover day the

actual date will be given to us by this

DT. Now DT is going to be in Unix time

which is why it's a number and not a

date object. So what we can do to

actually make this a date is inside this

expression we can say new date just like

this. And inside of here we want to pass

in day.dt dt* 1,00 and that's because

this date constructor that we're using

in JavaScript expects dates to be in

milliseconds not seconds but the dt that

we get from open weather is in seconds

once we've done this we can say to

locale date string just like this if we

go ahead and save this now this will

convert each one to a date string so we

can see right now 10:23 10:24 1025 you

get the picture each row has its own

respective day now however I don't want

this to be day of the month. I'd prefer

for it to be the actual day of the week.

So like Monday, Tuesday, Wednesday. So

how can we get that? Well, all we have

to do is change the arguments here that

we have in this two local date string

function. We can pass in undefined for

this first argument because we don't

want to pass in any local time zone

information. But for the second

argument, we'll make it an object. And

one of the first things we'll do is just

give it weekday

short just like this. for date strings.

This second argument that we're making

this object right here has a couple of

different customization options. One of

them is weekday, which can either be

long or short. Long means something like

Monday, Tuesday, Wednesday, and short is

just the abbreviation. So, M O N TU and

so forth. So, if I save it now, instead

of having the day of the month, we just

have the day of the week, but

abbreviated. The day I'm filming this on

is Wednesday, so it makes sense the

first day in the forecast would be

Thursday because that's tomorrow. And

again, we have 8 days. So, it's Thursday

going all the way to the next Thursday.

Let's now clean this component up just a

little bit more. First things first, I

don't really want fractional

temperatures. So, I don't want 96.24.

I'd rather just have it say 96. To do

that, what we can do is for each of

these temperatures, we can just wrap

each of them in math. Just like this. Go

ahead and copy this for each one.

Wrap them all. And now, if we save it,

we have integers for temperatures and no

more decimals. I also want to put the

units for each one. And I actually just

learned that if you're on Windows,

something cool that you can do is you

can actually do alt and then 0176

on your numpad to actually do the

degrees symbol. That's pretty cool. And

then I'm using Fahrenheit, so we'll do

degrees Fahrenheit. We'll take this and

we'll add this to the other temperatures

as well. That way for each one, we are

saying degrees Fahrenheit. Now, if we

look at our rows, you can see that not

everything is aligned perfectly. For

example, the start of this 98 degrees

Fahrenheit is not left aligned with this

91° Fahrenheit. They're a little bit

off. You can see that even more so with

this 94 right here. It's jutting out to

the right when compared to 91 and 96.

This most likely stems from the fact

that our weekday names on the left side

are not all the same length. For

example, Wednesday or WED is longer in

width than Tuesday is. So, we create

this weird kind of offset look. One

quick workaround to this is that all the

entries in the left column here like

Thursday, Friday, Saturday are all a

fixed width. So to fix that, let's go to

our P tag for our day of the week. Throw

a class name on it and give it width

nine. Now if we save it, everything

should now be aligned because we're

ensuring that each of these has a fixed

width. So the other ones are starting

all at the same point. Nice. So

everything is aligned great now. And

that's actually going to be it for our

daily weather card. Just to do a quick

recap so we're all on the same page and

understand what's going on in this daily

weather card. We're first just

inheriting from the from the shared card

component that we're going to use for

all of our cards. Again, this is pretty

basic. Just has a title plus children

and some stuff like roundedness and

padding. But the daily forecast card

specifically just has one div that is

flex flex call. So we map out each one

of our rows like this in a flex column

layout. To get each day, all we have to

do is data. map that actually gives us

each day and then for each day we can

just map out the information. Flex

justify between is to make each row in a

actual row layout making sure that

everything is spaced evenly apart. And

then we just have elements for each of

our items like the day of the week, the

icon, and then our three temperatures,

the average, min, and the max. However,

one thing I'm actually seeing real quick

that can be a super fast optimization

thing is getting rid of this div right

here because it's a little bit

redundant. I'm a pretty big hater of

having divs that are unnecessary because

I think it makes the code a bit harder

to decipher and fix later on. When I say

this div is redundant, I mean that if we

look at our card component here, we

already have this div right here that is

wrapping the children. Then when we

inherit it like this, we're wrapping

another div around children as well. So

it's like we're essentially double

wrapping it, which doesn't really cause

problems, but also it's not the best way

of doing it. The easiest way to fix this

and a way that I like to handle this is

go into our car component here and let's

give it another prop here. It'll be an

optional prop though. We are going to

call children class name just like this.

Capitalize the N. And it'll be an

optional string. We'll also dstructure

it out of here.

And then on this div, let's give it a

class name. And this class name is going

to be, you guessed it, children class

name. Now, if we go ahead and save this

file, instead of having this redundant

div, we can actually take the style

exactly, which is just this flex flex

call gap 4. Let's paste it up here so we

don't lose it. And we can actually wipe

this div out completely. And instead, we

can give it another prop, the children

class name, where we just paste this in.

Now, if we save it, it'll behave the

exact same. We did just add a prop to

the card component, but we completely

removed a redundant div, which in my

opinion makes it easier to read in the

future. Now that we have the daily

forecast done, let's move on to the

hourly forecast. Like the daily

forecast, let's go over to our file

explorer and inside cars, we'll make a

new file, call it hourly forecast.tsx.

We'll do tsrfc to create the component.

And just like daily, we'll make this be

a card that inherits from our shared

card component. If we go back to the

drawing board, here's what I was

thinking for our hourly card. We'll have

a card that is quite a bit longer than

it is tall just because for hourly we're

going to have 48 hours. So, there's

going to be a lot of stuff. So, it's

going to have to be able to scroll side

to side. I was thinking for each hour we

could have something like the actual

hour number. So, like I don't know,

might not do military time, but let's

say we do military time. We'll have the

number. We'll have the icon for what's

going to be during the hour. So whether

that's, you know, sunny, cloudy,

whatever. And at the bottom, we'll just

put the actual temperature we expect it

to be. So for example, 74° Fahrenheit.

And this will be for every single hour.

So basically, it's the opposite of what

we're doing for daily weather. Instead

of having a bunch of rows that kind of

go in a vertical format, we're going to

have a bunch of different columns that

go in a horizontal format. So we'll have

hour one right here, hour two right

here, three, four, and you get the

picture. And it's going to scroll side

to side. That should be honestly super

easy to do. So let's go ahead and get

started. We will do the exact same thing

we did for daily forecast by taking the

same query from app. So let's take this

exact same suspense query from daily

forecast and let's copy and paste it in

here. Making sure to import the suspense

query and importing our API function.

Again, I want to emphasize that because

all of these components are mounting at

the same time and share the same query

key, we're not actually going to make

multiple network requests. It's only

going to make one. even though we have

multiple use queries. I mentioned just a

second ago that we want this hourly card

to be in a horizontal format, meaning we

want it to be in a flex row layout. So

to do that, we can kind of copy the

similar thing we did for our daily

forecast with the children class name,

but instead of doing flex flex call,

we'll just do flex flex row. So if we go

back here, let's give it a class name.

And we will just say flex and let's do

gap six. I could add flex row here, but

flex row is the default. So technically

it's the same as just not having it at

all inside this card. Now just like we

mapped over the daily data using this

data.map,

let's do the exact same for the hourly.

Again, if we look at data, you can see

it's an object and we have this hourly

that's an array kind of in the same vein

as daily. So what we can do is we can

say in our card here, we're going to do

data.ourly hourly dom and then for each

hour we're going to map out a div here.

Art is going to complain because we're

missing the title prop. So let's

actually go to app, take the title that

we already had for the hourly forecast,

take this and we will just put it back

into here. So now we can make card happy

again. Now let's ask ourselves for each

hour that we're mapping over, what do we

want to display? Well, in the little

rough draft design that I just drew out,

each hour just have the time, the icon,

and then the actual temperature all

stacked on top of each other. So, in a

vertical layout. To get this vertical

layout, we can give this div a class

name. Let's give it flex flex call. And

we'll give it a gap of two. The gap

isn't going to be huge, just enough

great separation. But this should at

least set up a reasonable column layout

for each individual hour. Just like the

daily forecast, we'll first display the

date, except instead of being an actual

date like Monday, Tuesday, Wednesday, it

will be the time of day. It only makes

sense if we're doing hourly forecast to

have this be the actual hour in

question. So, we'll make this a P tag

right here. And similar to daily, we

will make this new date calling the date

constructor. And just like day, the hour

also has a DT. So, we can say hourdt

times 1,00 to get the actual date. And

then to get the time, all that we have

to do is call to local time string just

like this. Before we go any further,

just so you can see how this looks,

let's actually save this file real

quick. And in our app, instead of

rendering out this card, just like we're

rendering out daily forecast, we're also

going to render out hourly forecast. And

now, if we look at it, we can see right

here on this hourly forecast card, we

have a bunch of times. We have 8:00

p.m., 9:00 p.m., 10 p.m., and you get

the idea. Back to our hourly forecast

component. right underneath this timer

here. We want to have an icon for the

weather just like we have for daily. So,

if we go to daily, you can see we have

this image right here. And I think

because we're going to reuse this, it

might be a good idea to actually make

this its own component. So, to do that,

it'll be super easy. Let's just take

this image tag. I'm going to copy it

exactly. Go into our file explorer and

in the components folder, let's make a

new file just called weather icon.tsx

tsrfc again to make this component. And

then in here, let's just return what I

just copied, the image element. And now

what we can actually do is instead of

hard- coding this dayweather icicon that

we're doing, we can just pass in source,

which we will just make a prop to this

component. So we'll say source and

source is going to be a string. So

essentially now we have a sharable

component that we can use between both

our hourly forecast and our daily

forecast. We can implement it in both.

If we go to daily forecast, let's get

that real quick. We'll just take this

source right here, which is the

dayweather zero icon. Let's copy this.

Let's actually get rid of this whole

thing and just render out weather icon

in its place, giving it a source of this

right here. Now, if we save it, it

should behave in the exact same way with

just being a reusable component. So now

that we have it in the daily forecast,

let's copy it and let's paste it

verbatim inside of the hourly forecast

right here, right underneath our date.

Go ahead and import it. And the only

major difference is that instead of

being data weather icon, it'll actually

be hour because the format is going to

be similar. We have this hour object.

Inside of that, we have this weather

array. We're going to take the first

index of it and then grab icon. So now

if we save it, boom. Now, each of our

hours in our forecast has its own icon.

And that, my friends, is how you

speedrun shared components in React.

Anyways, let's get back to the hourly

forecast. The last thing we're missing

in here is our actual temperature, which

should just go right underneath the

weather icon. Let's make another P tag

right here. And for the temperature, all

we have to do for each hour, we can

access it with this temp right here. So,

it's super simple. All we have to do is

say hour.te. However, just like the

daily information, I want to have a unit

on it. So, I'll take this degrees

Fahrenheit right here, add it to the

end, and I also want this to be rounded.

So, I'll do math.round just to make sure

it's an integer and not a decimal. Now,

if I go ahead and save it, we also have

the temperature for each item. The next

obvious problem you might notice is that

now our page has a huge scroll bar

because shocker, our content is just way

overflowing all this. We don't actually

have a proper scrolling container set

up. So, all the hours are literally just

overflowing the side. Clearly, this is

not something that we want. A super easy

fix for that is on this children class

name here. All we have to add is

overflow xc scroll just like this. Now

if we save it, this is going to scroll

within the container. So now the actual

container itself is scrolling. The page

itself will still actually scroll

because this top card is still messing

us up. However, this component itself,

the hourly forecast, is no longer

causing the entire window to scroll.

It's going to be a super long list

because like I said, there's 48 hours of

forecast, which means there's 48 of

these objects. So, yeah, we got a lot of

horizontal space here. Let's quickly

improve some of the styling to make it

look a little bit sharper. First of all,

I don't love that the time right here is

overflowing or wrapping down. I wouldn't

want the 8:00 to be on a different line

than the PM. Doesn't really look very

good. So, what we can do is go to the P

tag where we're doing our time. Let's

put a class name on here. And all we

have to do is give it a white space. No

wrap. Just like this. And now it's not

going to wrap anymore. For each hour, I

want all the items to be centered, not

left aligned. As you can see here,

obviously this weather icon is not

centered directly under the time. So

that's something we can super quickly

fix. If we just go onto this outer div

right here, flex flex call, and we give

item center. That'll make sure

everything is centered within the

column. And each of the hours feels a

little bit cramped right now. So I'm

actually going to add P2 to create a

little bit more spacing for each hour.

And this is already looking quite a bit

better. The very last thing is I

honestly don't like this time format

right here. I think having the 800 0

just seems super redundant. These are

just extra zeros right here. We don't

need them. So to format our time, we

could do something pretty similar to how

we handled the dates on daily forecast.

Inside of our two local time string,

we'll again make the first argument

undefined so that this stays relative to

your local time zone. And for the second

argument, we'll again pass in an object.

And for this one, all we have to do for

the options is give it our numeric just

like this. We'll also give it minute

two digit and then we'll give hour 12

true. If we save our file now we can see

our times are just formatted like this

without the two extra zeros. And that

ladies and gentlemen is our hourly

forecast card done. There's a chance we

could come back to it later to make some

improvements or changes. But with what

we have right now, this is working

great. We can see the forecast for all

the next hours. So, we have 8:00 p.m.,

9:00 p.m., 10 p.m., and I can scroll if

I'm curious about any hour in the next

48 hours. Super crisp, super smooth.

Now, on our page, or other words, in the

app component, we're displaying both the

hourly forecast and the daily forecast

in the exact way that we want it to.

Theoretically, given any latitude and

longitude coordinates, I can now see the

hourly forecast for that exact area and

what the next 8 days are going to look

like. So, we've already made tons and

tons of progress from where we started.

But, let's keep going. The last big

chunk for this dashboard is getting the

current weather information. We already

have hourly and data. Let's get the

current weather component set up. Just

like the other two, same process we're

getting familiar with. If we go to our

cards, make a new file. Let's call this

one current weather.tsx

tsrfc to generate the component. And

same pattern as before. We're going to

take the exact same suspense query and

add it to current weather. I know I keep

saying this and reiterating it. Don't

mean to beat a dead horse, but as long

as they have the same query key, it's

not going to be making multiple network

requests. They're going to share the

exact same query. Let's go ahead and

just save this component now. And let's

render out current weather. And here we

finally have individual card components

for all three. And just to make sure

actually we have the same title. Let's

not forget this real quick. Let's do

title. And for here, make sure before

you forget to render out the card, the

same share card you've been using this

whole time. And we will pass in this

title. Oops.

Pass in this title right here. Just like

this. Now, if we go ahead and save it,

go back here.

And we can just make this current

weather. And now it's happy. And we have

it on our page. The main question is

now, what do we want this current

weather card to actually look like?

Let's once again go back to the drawing

board for this current weather card.

Here's kind of what I was thinking. This

card, unlike the hourly forecast, but

similar to the daily forecast, is

probably going to be a bit taller than

it is wide. What we could do for this

card is right at the top center of the

card, have the temperature in big bold

letters. So, for example, something like

this, right in the middle, just so it's

very obvious and sticks out to the user.

Immediately under that, we could put the

current weather condition. So something

like I don't know this can say cloudy

and then we'll have the icon that

corresponds to that exact condition

either to the side of it or directly

under it. So for cloudy you know it'll

be some cloud like this and an icon and

then right under this to fill up more

space. We'll probably put what the time

it is at the actual location that we're

looking at. Again with their app we're

going to be able to see the weather for

anywhere in the entire world. So it's

probably nice to know what the actual

local time is there. So, let's say I

don't know, it's 14:52:00.

That can be a time under it. And it

won't be quite as big as the

temperature. This should be a little bit

smaller. So, this is not quite to scale.

And then at the bottom, maybe we just

have a few stats kind of in a row. So,

we could say like right here, maybe what

the temperature feels like. We could

say, you know, maybe humidity is in this

box. And then we could say, I don't

know, something like wind speed or wind

degrees or something like that. And this

could be just a very rough outline. So,

we'll have all this in a flex flex call

starting from the top because it's all

kind of in a vertical layout. Since we

want all this to be in that vertical

layout, let's go into our code here.

Make sure we have our card. It's

annoying sometimes how prettier your

formats these. And we'll give it a

children class name of flex flex call

again just to make it all vertical. I

also want to make sure that all this

stuff is centered. So, I'm going to give

item center just like this. Now that we

have this, let's get the rest out of the

way. For the first section, like I just

mentioned, we'll have the temperature in

big bold letters. So, let's replace this

current weather right here with an H2,

not H1 because I'm going to reserve that

for bigger headers later down the road.

And here, we need the current

temperature. So, how do we get that?

Well, if we look at data, we can see in

the current object here, we have this

temp number. That is the current

temperature. So, to get it, all we have

to do is say data.curren.temp

just like that. Same as all the other

ones, I also want to use degrees

Fahrenheit. So, we'll take this exact

same unit. And just to keep things

consistent, we'll also do math.round

just like this. So, now if we save it,

we'll have the current temperature of

wherever we are. Right now, it says 74°.

So, wherever in the world is 10

latitude, 25 longitude. It's apparently

74° F. This temperature right now looks

way too tiny and out of place. So, on

this H2, let's give it a class name.

Let's give it some pretty fat text.

We'll say text 6xL because we want it to

be quite big. And I'll also give it font

semi-bold just to make it pop out a

little more. And text center just to

make sure it's centered. So now that

looks quite a bit better, way easier to

see. Next up, let's get the weather

description and the weather icon. I'm

going to want the big bold temperature

and the weather icon and description all

in the same div just for organization

purposes. So let's actually wrap this H2

here. Wrap it in a div. And for this

div, just to create some separation

between them, let's make sure this is

all vertical. So we'll say flex flex

call. And we'll also give it gap 2 for

just a little bit of separation. So if

we go ahead and save it, it now has its

own div that we can also put the icon

and the description inside of. We

already made a share component for the

weather icon, which again is called

weather icon. So let's take this, copy

it, and just paste it right here, making

sure to import it. And then for the

actual icon, if we go into data, look at

the current information. It's pretty

much the exact same thing as the other

two. We have this weather object or

sorry, weather array of objects. We'll

just take the first index, the icon. So

instead of doing dayweather, all we have

to do is data.curren.weather

just like this. And now we're good to

go. If I go ahead and save it, boom. Now

we have a weather icon. I want this

weather icon to be centered. So I'm

going to actually add item center on

this div right here. And that'll make

sure it's centered directly below the

temperature. However, right now, this

icon honestly looks really tiny compared

to the actual temperature with how big

the text is. Let's make it a bit bigger.

One problem we're going to run into with

that though is if we try to modify the

size of the weather icon directly, we're

going to modify it every single place

that it's used. And I don't want to

change the size of how it is in the

hourly and daily forecast. So, what I

can easily do to make this more

customizable is add a class name prop

that can be optional. that will just be

a string and we'll also pull class name

out of the props here meaning dstructure

them that we can use to pass in our own

custom styles. The way I typically

handle custom class names like this is

with a tiny package called clsx which is

a super tiny utility function that just

resolves conditional class names like

this instead of having to do some ugly

string interpolation because let's be

honest string interpolation looks super

scuffed. To get CLSX, all you have to do

is go into your terminal. Make sure you

have a new one open and just run npmi

clsx just like this and it'll get it

added to your project. Again, it's a

super super tiny utility. It's not a big

package we're installing. Once you've

done that, literally all you have to do

is just make your class name an

expression like this. And you're going

to wrap it in clsx as if you're calling

it like a function. You just want to

make sure you import it from clsx. Now

what we can do in addition to having

size 8 which will be our default style

is any custom class that we pass in we

can just put on top of it and this CLSX

function will actually resolve this. So

if we pass in a class name it'll just

get appended to the same class name and

if we try to override the size it will

override it. Meaning it's size 8 by

default but if I want to pass in

something bigger or smaller I can. So

now if I go ahead and save this file and

I go back to current weather I can give

this weather icon our own custom class

name. And instead of defaulting to size

eight, let's actually say, I don't know,

size 14. Go ahead and save it. And now

our icon is quite a bit bigger without

impacting the size of the icon on hourly

forecast and daily forecast. So that's a

quick sneak peek into how I handle

conditional styles for when I need to do

my own custom class names where it's

maybe the same in a lot of spots, but

has slight variations in other spots.

Now, if we go back to our current

weather component, right underneath the

icon, I want to put the actual weather

condition that we're in, like cloudy,

sunny, rainy, you get the picture. To do

that, all we need to do is add, we'll do

an H3 for this one cuz it should be

slightly smaller than the uh

temperature. And to get the description

for the current weather, it's actually

pretty similar to how we get the icon.

We hover over data, look at current, and

go to weather. You can see we have this

description right here. What we can do,

we can actually let's just take this

exact thing right here and we'll say

data.curren.weather at

index0ero.escription

just like this. Now, if we save it, we

have the weather description. This one

in particular says scattered clouds.

Let's make this look a little bit nicer

by adding a class name here. Let's add

capitaliz so it capitalizes the first

letter of each word. Then we'll also

make it text XL. So, it's still

relatively big, but not nearly as big as

the actual temperature. Save it. And I

think that looks quite a bit better.

Underneath the temperature, the icon,

and the actual weather description,

let's get the time figured out. When I

say I want to put a time on this card, I

think it would be good to put the actual

local time of wherever we are. Because

to me, that would make sense in the

context of the current weather

information. So, if I want to look at

somewhere in Germany, the time it gives

me for this card would be German time

zone, not an American time zone like my

own. I like to have it so that we have

in big letters saying local time and

then right underneath it have the actual

time itself. So to do that we can

actually go under this main div we have

right now and let's actually make

another div just like this and we will

give it a class name of flex flex call

and gap 2 to create this sort of layout.

We'll make the first thing in here a p

tag and this is just going to say local

time right underneath it. Let's make

another header. So it's going to be

similar size to our description. So

we'll say H3 and this is going to have

the local time. There's a couple of

different ways that we could do this.

However, the way I'm going to do it

using the time zone that is actually

returned from data. So if we hover over

data, you can see we have this time zone

string right here. This is actually very

useful if we want to get the local time.

A way we can do that is by inside of

here making a JavaScript expression and

we can say new int l just like this dot

date time format. For the first

argument, we're going to pass in a

string that is en- us since this is my

preferred format. And then for the

second argument here, just like all the

other dates that we've worked with,

we'll make an object that we can

customize. In here, we'll say hour is

going to be twodigit. We'll also say

that minute is the same thing. We also

want it to be twodigit. And just like

hourly, we'll make our 12 true. And then

to get the actual local time zone of

wherever we are and not my time zone,

what we can do is give it a final option

that is just time zone just like this.

And that will just be data time zone

because again we hover data, we have the

time zone right here. So we pass that in

as another option to our date and this

will actually create our date for us

completely using the local time of

whatever the time zone is that comes

back from our call. You'll notice this

whole thing right now is going to be

highlighted red because a date itself

can't be a React node. We need it to be

a string. So to actually format it as a

string, what we can do is after this big

chunk right here, we can just say format

and inside here can say new date and you

want to pass in the actual time of the

date. So we'll say for the time it is

stored in data.curren.dt

that is the current time. So we'll do

that data.curren.dt dt* 1,000 like

always. And now if we go ahead and save

it, you can see the local time of the

coordinates 10:25 or whatever we have in

our query right here is 4:26 a.m. It

looks a little bad right now like this,

like a bunch of just kind of jumbled

text. So, let's style it up. We go down

here for our local time for this P tag.

Let's go ahead and give it a class name.

We'll say text XL. And then for the

actual time itself in this H3, we'll

also give it a class name. and we will

say text 4XL and also give it font

semibold just so it sticks out quite a

bit. Now if we go ahead and save it, the

text is quite a bit more readable.

However, now this time just got way

bigger. This local time is offc center.

It looks kind of weird. So all we have

to do is just add text center to this.

Just like this. And now it's back to

looking good. The only last thing now to

do on this current weather card would be

to add the three quick sections at the

very bottom. getting the feels like

temperature, the humidity, and the wind

speed. These will all share the same

style. So, this will be super simple.

We'll go down here below this div and

make yet another div. We will give it a

class name of flex justify between so

that each of these three little sections

spaces evenly from each other. And then

for each little section, we'll have

another div. For each of these, we'll

give it a class name of flex flex call

gap 2. All we're going to do for each

one of these divs is just give it a p

tag that will say, for example, for the

feels like temperature, we'll just say

feels like. And then for what it

actually feels like, meaning the

temperature, all we have to do is data.

Oops, crap is an expression here.

Data.curren dot. You can see we have

feels like right here. So, we can just

use that. We want to keep the same

consistency with the units. So, we'll do

degrees Fahrenheit. And we will also

math.round around this whole thing. Now,

if we do this for our first thing, we'll

see feels like 72°. Clearly, it doesn't

look very good yet, especially because

there's only one element. So, let's make

some styling to fix this in this flex

flex call div right here. Let's make

sure we also throw item center to make

sure they are vertically aligned with

each other. Still does not look very

good because there's only still one item

there. So, let's actually take this div

chunk here. I'm going to copy it and

we're going to paste it twice because

each section is going to look very

similar to each other. The second one

instead of saying feels like is going to

just be humidity and instead of doing

the data.curren.slike,

what we can do instead is just replace

this with data.curren

dohumidity. This is not going to be

degrees Fahrenheit. This is going to be

a percentage. So we'll use the percent

symbol. And then for this one, this also

is not going to be feels like. This is

going to be the wind speed, which we

will just call wind. And then we can

replace this whole thing with just data

current windspeed just like this. Wind

speed in imperial units is going to be

miles per hour. So we will just say m.

Now if we go ahead and save it, we have

three different things. The feels like

temperature, the humidity, and the wind

speed. Obviously still looks pretty

horrible, but at least we have all of

our data here. To fix this weird

styling, let's make sure that this flex

justify between div right here is width

full to make sure it takes up the entire

space of the card. We save this now

spaces it out so it takes up the whole

card. Next, I want these numbers in the

bottom section like the feels like

number, the humidity percentage, and

whatnot to stand out against their

labels. So, on each label to make it

slightly darker and less in your face,

I'm going to throw a class name on it

and I'm just going to give it text gray

500. Just like this. And we'll actually

copy and paste this class name on the

other labels as well. Go ahead and save

it. And now they don't stand out against

the numbers so much. Makes the numbers

pop a little bit more. And lastly, it's

pretty clear that each of these items,

so like this whole item at the bottom

next to this time, next to the stuff

right here is not separated out with any

space at all. So all is kind of just

cluttered. So if we go back up here to

our card where we have the children

class name, let's actually throw a gap

on here. Let's just give it, I don't

know, gap four for right now, just to

make everything a bit more spaced out

and a little bit nicer. Actually, maybe

let's do gap six. Honestly, now our card

is looking pretty good. It doesn't look

perfect yet, so we may also revisit this

in a bit with the rest of our cards. It

looks a little bit awkward right now

because these cards are so wide, but for

the actual finished dashboard, these

cards aren't going to be taking up the

whole width of the page, so it's not

going to look so stretched out. It'll

look quite a bit better. So, for now,

let's move on. The only last card that I

want to make for this dashboard that's

going to be consuming information from

the API is just a card that displays

some of the extra information that we're

getting back that we're not currently

using. If we go to the weather schema

and we look at it, we obviously have the

daily and the current and the hourly.

However, there's a lot of things here

that we're not actually going to be

using. So, for example, we have like the

sunrise and sunset time. We have, I

don't know, the clouds. We have the wind

degrees. Basically, just a bunch of

fields that aren't being used at all.

We've got plenty of real estate to work

with on this dashboard. So, let's

actually use these other pieces of

information on a final card that we'll

just call additional info. So, going

back to our cards folder, we'll make a

final component in here that we're just

going to call additional info.tsx

tsrfc to make the component. And we'll

go ahead and save this file. Close this.

And just like the other ones, we'll make

it inherit from the same card. And for

this title, we're going to give it a

title of additional weather info, just

like this. This card is just going to

have some additional weather

information. So, it's not going to be

anything crazy. We're not going to go

really weird with the styles. We'll keep

it pretty basic. So, let's actually wrap

this back in parenthesis here. Fix this

annoying formatting that prettier always

does. And then in here, what do we want

to do? Well, in terms of design, I was

thinking about just making it something

super simple. We'll just have all of our

additional fields laid out into columns.

So, we'll have a card like this, and

we'll have some columns that are just

going vertical like this. For each

individual column, what we can do is we

can just have the label. So, I don't

know, like, you know, wind speed here on

the left, wind speed, and then on the

right would be the actual number. So,

this is not anything crazy, just super

simple. for like cloudiness, we could do

cloudiness, whatever, and then have some

number here. And we would do that for

each of the different pieces of

information that we have. Super super

basic layout. So to create this vertical

layout here, let's give our card some

children class name. We're just going to

say flex flex call. Let's make the gap a

little bit bigger this time. We'll say

gap 8. Now the question is, how do we

actually want to render out the

information inside of our component

right here? I could write each field

individually since they're all going to

be a bit different, but then I'd have to

spam a bunch of the same JSX and this

component would look a little bit messy.

I prefer being able to map over

something. That way, we only have to

write the core JSX in one spot. I mean

by that is at the bottom of this file,

I'll make a new variable. I'm just going

to say const rows and it'll be an array.

And in here for each of these rows, I

think we should make an object with two

properties. We'll have label and then we

will also have value. Label will be what

the user actually sees and value will be

what it's actually called from the API.

So for example, let me show you what I'm

talking about. If we take the same exact

suspense query. Let's go ahead and get

it into this card as well.

Making sure to import our stuff. And if

we now hover data, we can see that

current has something for example like

clouds. In this case, the label will say

something like cloudiness and value

would be clouds. So it maps to this

property. So what I can say for this is

for label I will say cloudiness and

we'll do percentage just so we know the

unit and then the actual value itself is

just going to be clouds. We just want to

make sure this value matches exactly how

it's going to look like in the response.

And we basically just want to do this

for all of our fields. But let's pick

out a few important fields that we want

aside from cloudiness. We look at data

here. We can see that in addition to

clouds we have UVI. So I think we can

include UVI. Let's take the wind degrees

because that'll be the wind direction.

We'll also take uh let's take pressure

up here. And then we'll also get sunrise

and sunset. So that would make six total

properties that we're getting, which I

think should be plenty. I'm lazy and

don't feel like writing these out

individually. So I'll ask Chad GBT to do

it for me. And here is what it cooked

up. So for each of these, we'd have the

same thing where we just have the label,

which is what the user sees, and then

what it actually is on the endpoint. So

this should be good. I pretty much just

gave it the response structure and asked

it to just take those six fields into

account. And now we have a label and

value for each thing. Now that we have

this rows array, what we can do is we

can go back to our car component here.

We can make an expression and we can say

rows.m map. And then for each row, we

want to oops for each row like

everything else just map out a div here.

For each row, what do we want it to look

like? Well, I mentioned we wanted to

have it be flex just to between. Let's

go ahead and do that. And all it's going

to be is something super basic. We'll

have two spans inside of here. Span one

is just going to be the actual label

that the user sees. So, row.

And then the second span that we have is

going to be the actual value from the

endpoint. If we make sure that our

values match up one to one with how we

have them declared in our schema and we

look at it, I can just access

data.curren.clouds

for example to get that particular

number. So the way that we can do this

in our map, we can say data.curren

at value. And it's really that simple.

Actually, it's not that simple. It needs

to be row.value, not just value.

However, we're going to get a TypeScript

error here saying that it has any type

and it's going to complain with the

polong thing that is basically just

caused by the fact that this array is

not declared as const. So, if we just

say as const, it'll actually just get

rid of that error completely. We're just

telling Typescript that this array is

never going to have anything pushed or

popped from it. It'll always be this.

So, it can safely assume the type is

never going to be anything different.

And just to clean things up a little

bit, I like to dstructure things

wherever I can. So instead of doing row

just like this, let's actually

dstructure both label and value out of

here. And instead of doing row label and

row value, we can just use them directly

after dstructuring. And then before we

forget, like all mapping, we need to

make sure we throw a key on this. So

let's throw a key. And we'll say our key

is just equal to, I don't know, the

value because that's always going to be

unique. So let's go ahead and save it.

And now let's actually render out this

card under dashboard so we can actually

see what we're working with. So let's go

back to our app here. And right under

daily forecast, let's render out

additional info just like this. Now if

we save it, scroll down, we have this

additional weather info card, which is

the component that we just made. So this

is nothing crazy. It's actually a pretty

basic component. Let's style it up just

a little bit. For the label, let's give

the label a class name. And I'm just

going to give it a class name of text

gray 500 just to make it a little bit

less obvious than the value itself.

We'll also want to convert this sunrise

and sunset numbers you see down here

into actual dates. Having them as Unix

time doesn't really do anything for us.

But basically, we need to format these

as actual dates and the other ones as

numbers. So, that's going to be a little

bit of an issue with the way that we

currently have it. What I like to do

when it comes to something like this is

I make a separate component that just

formats the values. Instead of doing a

nasty turnary or conditional inside of

this expression, right below this

component, I'll actually just make a

super simple new one. We'll say function

format component

just like this. This is just going to be

another React component. To format each

thing properly, we'll need to know the

value and the actual number that we have

for that value. So, we'll make two

props. We'll say value and number. And

to make TypeScript happy, we'll say

value is going to be a number. Sorry,

string. And then number is obviously

just going to be a number. For most of

these fields, we just want the raw

number. So by default, we can just say

return number like this. However, above

this return, specifically, if it's a

date, we want to do something different.

So what we can do is we can say if the

value is equal to sunrise

or the value is equal to sunset then we

want to return a formatted date. So

we'll say return new date and we will do

number times 1. Again just converting

the actual date time to a real date

object. And then just like before we

will call to local time string. We go

ahead and save it. Just get a little bit

of formatting here. makes it a bit nicer

to read. We'll do the same thing as

before. Undefined for the initial

options. Pass in the customization for

the second argument here. Oops.

Sometimes this formatting gets a little

bit uh bit funky. I want to map exactly

what we have for our hourly forecast.

So, it's the exact same. So, if we go in

here, see what the options are for this.

Let's actually just take everything we

have inside of here, copy it, and we

will actually just put it exactly

verbatim inside of here. Now, if we go

ahead and save this, this component

should be good to go. If I was using

this customization options right here in

a bunch of different spots, I'd probably

extract it out into its own utility. But

because we're only using in two spots, I

don't really think it's that big of a

deal to just copy and paste it. Again,

essentially all this component is doing

is normally we're just going to return

the number to format that number

directly. However, if it's a date,

meaning if it's sunrise or sunset, then

we're going to actually format it as a

date. So now what we can do is we can go

up here and inside of this span right

here, we can actually just completely

replace this by rendering out format

component just like this. For our props,

we obviously need value and number. For

value, it's going to be just a direct

one one. It's going to be the actual

value and then number is going to be

what we had before which was data.curren

at value just like this. That's the

actual corresponding number from the

endpoint. Now if we save it, boom, we

have the rest of them formatted as

numbers, but the sunrise and sunset are

now formatted as dates just the way that

we wanted it. Before we call this card

good, there's one more thing that I want

to add to it. All of our other cards

have some sort of icons in some capacity

like the weather icons. It makes them

look a lot less bland and a bit more, I

don't know, sophisticated or styled. But

this card right here is just displaying

text. So, it looks a little bit boring,

at least when compared to the other

cards. What we can do is we can actually

add some quick SVGs to make these look a

little bit cooler. If I head over to

svgroup.com,

I can see all sorts of SVGs that I can

just get completely for free. For

example, for cloudiness, I can search, I

don't know, cloud in here, and I can

take any one of these icons and use them

as a cloud SVG in my app. So, real

quick, offscreen to not waste your time,

I'm going to find an SVG for each one of

our six categories and get them added to

our repo. All right, so I found an icon

for each one of our things. We have this

cloud for cloudiness, pressure for

pressure, sunrise, and sunset. We have

UV, and then we have wind. These will be

super easy to add to our project. So,

basically, all that I'm wanting to do is

in this additional info card, for each

little field that we have, I'm wanting

to have an icon next to the label. So,

for cloudiness, we'll have little cloud.

for UV index will have a little UV

symbol and you get the idea. Just a

little icon for each one to make it look

a little cooler. How do we render out

SVGs as React components? There's a

couple of different ways we can do it,

but by far the simplest way and the way

that I like the most with VIT is using a

super tiny package called SVGR. If you

look up SVGR, you can find this page

called Vit plugin SVGR. Let's get this

added to our project real quick by

taking this command right here. Go ahead

and copy it. Open up our terminal. Paste

it in, run it, and now we have SVGR and

we're ready to use it in a super simple

way. All we have to do is do exactly

what it says right here. Basically, just

add it to our plugins like how we have

React and Tailwind. If we go to our V

config here, we already have React and

Tailwind. Let's now just add SVGR like

this. This will be imported from the

plugin. Looks like TypeScript isn't

recognizing it for the import, but it

should be imported just like this. What

this tiny little package allows us to do

now is actually import SVGs as React

components like it says over here right

in the docs. You basically just import

it and you add question mark React and

it'll actually import it as a React