🔴 Let’s Build an AI Weather App with ChatGPT-4 (Next.js 13.3, React, Tremor 2.0, StepZen, GraphQL)

[Music] welcome back to another episode I am so excited for today's video you guys have no idea the amount of work I've put into these builds back to back to back they're getting better and better and they're getting bigger and more complex and AI is involved now and we're using chat gpt4 crazy stuff let me know what you're watching from right now let me know if you're excited to be back on the streams you know how we do it we're gonna info weekly videos right now so smash that Thumbs Up Button subscribe if you haven't already and get ready for one hell of a fun build get ready for this guys we are building the gpt4 weather app powered with open AIS gpt4 we're using xjs 13.2 using typescript we're using camera 2.0 we're using all the good stuff right here I see everyone tuning in let's take a look at the let's take a look at the demo right now check this out guys boom naturally I have to start off with Dubai look at this hey I can see everyone tuning in we have Nigeria La Dubai Czech Republic Cameroon France Philippines that's what I'm talking about we're hitting millions of views on this channel every month that's crazy look at this guys we've got our lovely lovely weather app right now and this is something I want everyone to have on their bloody portfolio because it's such a good way to Showcase your skill set fully responsive build look at this works perfectly on a phone we've got these lovely nice graphs that are Dynamic responsive look at that it just looks absolutely beautiful I just skipped through a different page there we go and guys something I want you to pay close close attention to is that this right here this is literally not me writing this this is a generated G pt4 prompt that is going to have been created based on the weather information so you have a full news report this is something you're playing live from the pop fam headquarters in Dubai bringing you the latest update on the weather conditions in our beautiful city and it goes ahead and literally breaks down the weather now let's go ahead and do a little demo of this let's go to the United Kingdom and we're gonna go to my first home London boom and wait for it look at that super fast Dynamic oh it's just so beautiful and this is all working off next year as 13.2 we have the chat GPT API step then is powering this so yes we're using a graphql interface if you're wanting to learn that this is the video for you we have Tremor 2.0 for these beautiful UI pieces like right there like you can see here all these These are on lovely little call outs and these nice little cards everything that you can see here Tremor 2.0 Tailwind TSS to style it all and just look at that guys absolutely beautiful and it's actually really useful like it actually works really really useful Brian says this could be my first app for my domain hosted in AWS 100 dude I don't see why not this is absolutely amazing of a first world to go ahead and do so we're gonna go back to the United Arab Emirates and let's go to somewhere else let's go down to um let's do Cowboy right and look if we don't have the information it's going to have a dynamic fetch so right now what's happening is it's crunching the numbers it's generating an AI summary using the GPT open AI API and then just very shortly boom just like that it has it and what it will do now is it caches that page so that the next time we go back to this page super fast right so if I go back a screen look at that London super fast forward the screen caliber and then it's going to revalidate that page every 60 seconds or whatever the hell you want to set it to so that way no user will ever have to wait that long time again so absolutely incredible this is honestly like now we're hitting builds which are just in a different League of complexity in regards to how what they can do I'm gonna make everything easy for you so you can feel free to follow this along if you're a beginner but let's go ahead and break down some of the text that right here we have gpt4 you guys know how we do it I have access to it you can also just for it so that way you know in case you don't have access yet to gpd4 completely fine you can do this entire build with GPT 3.5 turbo and it just works just as good so don't worry about it right you can actually do it with all those things as well let's go ahead and show you showcase steps in so steps in is the guys that have made this video possible is how I'm able to go ahead and take this incredibly like complex data from quite honestly there's a lot of data that we're going to get from this API it's called open material it's a free weather API and this thing gives us a huge dump of information and we're gonna go ahead and pull it through with a beautiful graphql interface and step sense taking all the complexity out of it now what is steps in it allows us to build graphqls easily right so we can build a graphical backend super super easily and we can do it with a simple CLI command they have support for things like MySQL postgres databases no SQL rest or just if you just want to have a color request and then you want to go ahead and you know you want them to do the hard work they do it right so it's very easy to go ahead and use it they automatically generate our schema do all of that hard stuff for us and then we have a really nice dashboard that we can go ahead log into do all that good stuff now you also get up to 300 000 monthly requests for free you get email chat support included and you get 10 back ends just in their free plan so if you go ahead and sign up in the first link in the description we've got a little treat for you over there so make sure you go ahead and do that it also helps to pop a fan grow so make sure when you're signing up to step 10 at this part of the build then you can go ahead and sign up with the first link in the description so make sure you check it out and we can go ahead and get started now I have something new in this build which I haven't actually used before trema 2.0 now they introduced me to this I actually love this thing it is so nice and clean Frank what is up man I see you in the chat good to see you in the house look at this we have a react component Library I get so many com like so much demand for this right I have so much demand for can you use a component library and I was waiting to find one which perfectly integrated with Tailwind CSS with next year so that way we don't have to mess around with the kind of you know like we're battling between Tailwind CSS and component libraries typically not anymore this is where Tremor 2.0 came in it's absolutely phenomenal you guys can see here we have these beautiful looking components so you guys can see like we've got these lovely components you've got these little tabs you've got all everything you need for kind of a dashboard look at these and what I love the most is honestly not just the fact that it's really beautiful to look at I also love the fact that it's so simple to actually Implement so you guys will thank me so much because if you've ever used anything like chart JS or any of those kind of react charts modules you'll find that sometimes it can be a little bit complicated but I'm gonna make it super super easy quick little demo one more time to Showcase you guys how fast this website is Bam just like that we get a brand new AI summary so really really powerful somebody says is this really live you're damn right it's live okay so we got loads of good stuff coming now I'm gonna be moving at a fairly decent speed in this video but remember it's going to be up on the channel forever afterwards so do not worry if you need to go ahead and pause I might always add timestamps to the video but remember guys if you want to go ahead and take your beginner level skills all the way up until you're getting your first job that kind of reaching that kind of you know Pro level then definitely come and join us at Papa react.com forward slash course and you can join our community and course zero to four stack hero go ahead check it out for yourself all the links are in the description and I'll let the I'll let the video do it so its own talking right see some of our members for yourself they absolutely love it and I can hands on heart say we've had over a thousand students now land jobs absolutely crush it and take their skill set from beginner levels all the way to Landing their first jobs and I can honestly like say that is my biggest achievement in my life so far to see that many Student Success like succeed so absolutely incredible we have so many modules inside of here over 100 hours of content check it out zero to full stack hero you will not be disappointed and before if you haven't already heard about this don't forget to check out the University of code every single day I am sending out little challenges in your inbox and you can go ahead and check them out and receive them for absolutely free if you go ahead and sign up right so signing up to the University of code it's a monthly subscription for that package and you basically get new brand new coding challenges every day with the solution the next day so I mean I don't know what more do you want you have a full course full full community and you have an entire YouTube Channel full of free build so you know how we do it also welcome Sohail tehrani to the pop fam specialty good to see you man we have Ghana in the house this is amazing and guys I just want to say I read every single one of your comments and I damn well appreciate every single one of you so this is going to be an absolutely huge build today and yeah we have so much to cover I'm gonna go ahead and start things off by getting a little breakdown on the screen so that way you guys can see what we're about to build so what I want to do here I had um I was teaching a few things before so what we're going to do here and I was actually teaching that inside of zero to full stack here we run coaching calls us if you want to be a part of that link in the description to join our community check this out we also have some members in the chat right now that's what I'm talking about Jay screenshot that Gian Carlos says I started following something five years ago and I seriously started a reaction Journey uh a year ago I received a software engineering position and I received a weekly offers over ATK thank you sunny I love you I love you too Jake screenshot that that is absolutely phenomenal that is the purple Farm energy that we are talking about that is absolutely amazing so here I see you dude thank you for those comments right so so what does this build consist of we've got react in the house we have next JS 13.3 in the house right so we're actually using the brand new API Roots so if you want to know how to use those this is the right place to be we are using gpt4 in today's video but don't stress you can use 3.5 turbo so you don't need that early access if you haven't got so I got it yet we're going to be using steps then to build a graphql endpoint right so we're going to be using a graphql endpoint which will then be powered by something called Apollo right then we have the Tremor 2.0 Library this is going to allow us to create this beautiful looking UI that you see right here then we've got Tailwind CSS so if you don't know what this is oh boy you're in for a treat I'm going to teach you all about it then we have typescript and finally we're going to be deploying it on our amazing the cell platform right so if this is going to be deployed afterwards I'm going to show you how you can actually get this live and up because I want you all to have this on your portfolio because it is beautiful and it's a perfect demonstration of how you are using AI techniques with the latest and greatest like next year's 13.3 steps and you know telling CSS typescript that good stuff so let's go ahead and jump into today's video remember if you haven't already check us out at zero to full stack hero and check out the University of code I promise you you will not be disappointed now first thing we're going to do is start our app so let's go ahead and I think it's time to push into this build so I'm going to go ahead mix up the music a little bit if you sign up to a newsletter in the description you actually get the entire newsletter I always get people ask me I literally get this question all the time okay so what we're going to do now is if you haven't joined any of these streams before we're going to get into our Flow State we're going to start coding we're going to build this project out bit by bit and I'm going to show you my thought process as to how you are going to go ahead and craft this incredible app yourself okay and I'm going to break it all down don't worry about it we're going to do this very strong okay first thing I want you to do is run this command now if you haven't got MPX you're gonna need to install node okay in this case I've already got it now I like to actually use at Canary instead of the latest but you can feel free to use whatever the hell you want all right so in this case I'm going to open up my terminal now if you're using on Windows you can use that I'm going to use a terminal on Mac I like to put everything in an organized fashion so I like to put inside of my build folder there we go and then I'm going to go ahead and run that command so at Canary that's what I like to do then we're going to give it a name right now you don't even have to put a name here but I'm going to go ahead and give it a name I'm going to say this is going to be the steps in weather app YouTube okay hit enter to kick start things off now you should get a prompt now I want you to understand that if you're watching this video in the future there is a high chance yes you might have a different prompt popping up right now or it may not work don't stress out okay just use the create next app template and then install things like typescript and Tailwind CSS following the instructions on the website I really get that a lot of the time so definitely don't stress out when you kind of get that uh that situation Joseph says so the idea if we talk about negotiation with clients and knowing your values of death Joseph we actually talk about that in zero to full stack here on pretty much every single coaching call which is every Wednesday so check it out link is in the description all right would you like to use typescript with this project yes would you like to use yes link with this project yes Tailwind CSS yes would you like to use the source directory no and would you like to use the experimental app directory I want to use it so yes import aliases these are amazing this is how you can import more efficiently we're going to click yes and then we're going to go ahead and let it do its thing right so Jay just dropped the link in the chat right now to go ahead and join our course make sure you go ahead and check it out I honestly can't stress enough I'm so damn proud of that Community we have the best the best best family of developers on the planet period right I I promise you that it's hands down the best okay let's go ahead and wait for this to get started a lot of the time what you might have found was the old template that I used to use stopped working and yes I experienced that as well so that's why sometimes you might have to use a different template in this case I'm using this one right now okay so let's check this out so we're now going to CD into that new directory so CD steps in weather app dash YouTube okay now I'm inside then I'm going to go ahead and type in code dot this will bring up my code editor which is vs code and it will give me my starter template now what I want you to do is open up a separate window or a second screen if you have one and basically set up your windows so you can effectively work in such a fashion okay now the first thing I also want you to do is go ahead and remove that's fine I'm going to make it a little bit bigger so you guys can see what I'm doing let me know give me some feedback if that's all good and we're going to be using next year's 13. so as you can see we have the new app directory whereby everything inside of it is a server component okay so to spin this app up first things first we're going to go to app then we're going to go to the page.tsx and as you can see there's some code in there now I want you to do the following I'm actually going to cut off my previous app because it was running I'm going to go to output and I like to Simply close that one and close the debug console to make it very clean I'm going to close my previous app that was running I have taken screenshots for reference so that way we can actually go ahead and do it pretty nicely right give me one second okay so at this point now we're gonna go ahead and if we do command B you can see we have a package Json now if you have a yawn a lock file you will be using yarn I'm using npm so in this case npm run Dev this will spin up my app on my localhost 3000 okay so at this point I want to allow it yep because we are using typescript and then I want to go ahead and pop this open so I want to have if I go back here I'm going to create a new Chrome window pull it over here and I'm going to go to localhost 3000 now what we should see here as you can see it's running in my server over here we should see our first starter template now if you are at this point well done give yourself a pie on the back because honestly some people can get messed up in this area so make sure you get to this point very well what the hell just happened whoops game just dropped in a 10 euro donation thank you dude that is awesome because hey son you're awesome I love your projects would love to see a project with Super Bass and PG Vector Jay screenshot that because that way I can go ahead and actually give that a try but thank you I appreciate you and uh yeah I'm gonna buy some sushi tonight with that so thank you very much now what we're gonna do is we're going to keep this open and we're going to clean things up so our first things first everything inside of the main we're going to go ahead and delete so we're going to scroll all the way down go to the div and we're going to get rid of it right I'm going to type in H1 and then we'll say let's build a gpt4 weather app right this music is sick oh my God another one okay I'm gonna pop stop that's when the music we're not going to cover errors in the chat right now so let's build a GPT for weather app now at this point you should see this what I want you to do is we're going to have a clean slate so I'm going to clear out the class names and I'm also going to clear out anything up here so you should have a very clean uh section right here now because you can see here it's black you might be wondering but I don't have any stars so first thing you want to do is head over to globals.css and I want you to go ahead and delete everything underneath these three lines okay now what you'll see is you should get back to a if we refresh you should have a white screen with a very blank uh text piece of text at the top okay Kakashi says do you work for some company or do you own your that you have your own I have my own and it's called the papa fam as you could have guessed right so yeah we have our own company and this is what we do all right so now one thing you should be aware of is you just want to make sure obviously it was working for us but here you want to go ahead and type in something like tech66 know just see that it's working okay so these are utility classes and this is the power of Tailwind now if you I haven't got these auto complete so for example when I'm typing and you see these autocompletes that we have right here then you're going to need to go ahead and install the following so you want to go ahead and type in tailwind and what you want to do is grab the first one here so tell when insert it oh my God tell ncss intellisense I I see you oh wow we got more donations Mr Frank I appreciate you this is so sick because a 10 donation my contribution to the Papa react Sushi fund the worst thing is I'm on a diet as well but thank you so much I appreciate you man that's so cool uh Frank's always representing absolutely Legend right so at this point we're going to go ahead and install that which we've already done and I also want you to get this one I always mentioning it every time because it's just such a good um extension but here the es7 react Redux Snippets okay make sure you do this this will allow us to create files very very fast now we're going to take a sort of a nice breakdown structure to this app okay so what I've done is I've actually created a few screenshots for reference and I'm going to go ahead and pull those screenshots up right now so what I want to do right here is I'm just going to go ahead and pull up my screenshots and then I'm I'll bring it onto screen so that way we can see it so here I have some design references so here we have the entire website so as you can see this will be like the city name at the top we have our lovely sort of you know our chat GPT summary then we have our different statistics now this is a really good build now like there was the main purpose of this build one you're using things like graphql You're creating your own graphql interface secondly you're creating an admin dashboard like experience for your user but you're making it more interesting because you're adding the element of AI involved and what you're going to then show employers or anyone who's looking at this from inside your portfolio is your ability to you know take on the latest and greatest bits of tech bring it together and build something really beautiful so do not underestimate this build okay then we have the mobile UI so in this case you can see that this one will look really nice on a phone so I'm going to go ahead and pull it up like this we can see everything sort of stacks up on top of each other on the phone so we're going to go ahead and build that as well and then we have the loading of weather information screen so this will be the very simple home page if you haven't selected any City but otherwise it will go ahead and pull up the City View All right so this is going to be the main City View that you'll be seeing inside of this build and do not be underestimated this is a very big build okay we have actually a lot to do here so we have we have to get very busy right now so we have hundreds of people watching across platforms it's absolutely incredible okay so first things first what we're gonna do we're gonna go ahead and actually keep that reference open because that was very silly I need that reference so I'm going to go ahead and open up another screen here and pull this over here okay and now we're going to keep this in frame and what I want to do is my first screen let's actually conquer something like this right so I want to actually build build out this sort of drop down menu now the whole purpose of this drop down menu is I should be able to select the country and then what I will see and remember it's a reusable component so the same component is being used here I will select the country and then it will show me the city and I will be able to select a city inside of that country now after that happens it should redirect me to the page in which you see right here so first things first I think we should knock out the home page okay so that's exactly what we're going to do so the home page let's go to our page.tsx and then at the home page we are going to go ahead and start building things out now uh where did I go yeah so here now as you can see these elements right here this is actually called a card element from Tremor UI right so that Tremor 2.0 and I'm actually going to go ahead and get that up and running right now so for this page element I'm actually going to convert it to a client-side component you can actually you know you can actually pretty easily wrap what I'm about to do inside of a client command instead of making the entire page but for the essence of time we're going to go ahead and keep it fairly straightforward now the second thing is the only reason I'm doing this is why is because Tremor 2.0 has not been updated yet to support uh client components out of the box so that way we have to tell it it's explicitly a client component so what I'm going to do is go to tremor.so I'm going to install tremor so installation you can see if we go to next.js you can see as you as you can see here it says since we have not fully migrated nexjs13 you need to go ahead and use the um wrap your terminal in another component by using the use client directive Okay so we've already done these steps we're going to install Tremor into our project okay so let's go into our project command J I'm going to split my terminal in fact I'm just going to open a second terminal so the first one's got my server running and the second one I'm going to say npm install Tremor react okay so once that's done we are then going to go ahead and we've already done the Tailwinds up because that was already in the template we then need to actually go ahead and extend our content here like so so we need to grab this selection right here really nice and then we're going to go to our Tailwind config and you can see where we have our content we're actually just going to paste that line and what this is doing is it's including Tremor files in that transpiration right so when it sees any Tailwind utility glasses it's also going to go ahead and convert those as well so that's what we've got to do there that's done nice we've already got this set up pretty neat and we can just start our run a server which is great okay now you can go ahead and do this so I actually did get this error in a few different areas so what we can do here is we can actually pop this in because I actually didn't I forgot to do this to be honest with you because I actually did get that error that is coming up with um so we're gonna go to our next config as well and where we have the experimental we're just going to copy this in as well okay and now I want you to do is make sure that you go back to your initial terminal because you just changed the um the config file I want you to cut your terminal and I want you to control C so go into your terminal Ctrl C and I want you to npm run Dev to restart your terminal okay now with that done we're going to go back to our app we're going to refresh and we're going to make sure that the app is loading okay if we get an error at this point we know we need to fix it so take things at this granular speed let me know if the speed is pretty good we also just destroyed 200 likes so let's keep on going guys I want to get those likes up so keep smashing the like button if you are watching uh and you're and you're enjoying the content guys I'm not joking it's absolutely ridiculous how crazy you guys are loving the AI content right now over a million views just on our AI content in the past month that's nuts that's actually nuts right and 36 million minutes of watch time I I am speechless I appreciate you guys beyond belief right so you can see our app works successfully that is amazing okay so at this point we're now going to go ahead and do command J to hide that okay so first things first we need to import some of the elements that we require from Tremor um the Tremor component Library okay so I've gone ahead and pulled those in great now what I'm going to do is I'm going to go ahead and pull in a card so I'll show you how we can Implement a card so if we simply pop a card in like so what you'll now see is that there is simply a card wrapping this element right so you can very subtly see it right so there's a card wrapping it okay so at this point now what I'm going to do is I'm going to use the text element and I'm simply going to type in weather a iron you can feel free to name it whatever you want okay it's completely up to you I'm then going to go ahead and use the subtitle component all right so I'm going to go ahead and use the subtitle component and this one will say powered by open AI next.js 13.2 or it's actually 13.3 and uh yes that's correct that 13.3 10 CSS Tremor 2.0 and more and as you can see now we get their nice little UI that's really nice okay and then what we can actually do is start what's really nice is that these tremor.so components actually are built with Tailwind TSS in mind so you can just directly extend they also have their own colors and so forth colors they also have um and it wasn't the size it was colors yeah I don't know if is it font size no so you can just change it like this you say text for example 6xl and then you'll get your nice and bigger text okay so we're just going to go ahead and style this out a little bit right now we're going to say the text should be centrally aligned text should be centeredly aligned and the margin bottom for this one should be done and now we've got a little bit of spacing bolting it out that looks very clean right for the subtitle we're going to go ahead and say that it should have a class name of text extra large and it should be detect centrally aligned okay very simple very straightforward and then what I have underneath here is a divider now this divider is simply going to have a margin on the y-axis of 10 okay so we should see Ayla a nice little divider now so everything is fairly straightforward fairly easy to go ahead and comprehend underneath here we're going to have another embedded card and this is where we're essentially going to have the country live right so this card right here so you can see where we're going towards right so if we go ahead and pop the card in right now you can see the card is on the screen and then here we're going to have the city picker uh component right so we're going to go ahead and actually create that custom component very shortly now for the class name for the card I'm gonna have a background background which is a gradient and all we got to do here is we've got to specify the from color and the two color okay so I'll show you so we say background gradient to the bottom right okay and then we say from this color to this color all right and you can actually choose whatever color you want I've just got two very similar shades of blue and it kind of is very subtle you might not be able to tell but that's exactly what we've done here okay now what we're going to next do is we're going to go over to uh the top and we're going to start styling this out so that way we've got the surrounding uh stuff like correctly done so here I'm going to go ahead and change this to a div because we're going to go ahead and update our main thank you so much to din parahoo for the donation I appreciate you guys absolutely crazy with the donation today it's flying it's so awesome to see um I appreciate you all I'm gonna go and bring the music a little bit up as well what let's see I'm gonna oh that's it I like this kind of stuff it's about all right so we've got the um div class Name six six I don't know why I put 66 out there okay I'm gonna say Min height of screen okay and then that's gonna bring out and then we're gonna say background gradient and we're going to use the same gradient effect that we previously used okay so I'm actually going to go ahead and pop that in like so so I'm gonna pop it in just like this I'm going to pull that in over here and what you'll see is that it's now using the maximum height of the screen so we set the minimum high as the screen and then we're going to say padding should be 10 right now it's touching the sides we do not want that okay we want to have a bit of breathing room so Paddington Flex Flex column and really it's up to you with this with this Essence right what we're going to do is flex column because there's one child here and by doing this we can say justify that one child in the center with this little hack and what it will do is it will Center that evenly so we don't have to you know worry about how to deal with any of the calculations it just does it nicely okay and then you can put a Max width constraint if you really want to and so forth if you are going to do that it's very simple you just do Max width uh like 3XL for example and then you can see right here so that's actually done it for the entire children you might not want to do that you if you want to do that you would simply do it here new deline Max with the 4XL and then your MX Auto to maximum Center okay and what this will do now is it will restrict that box so that way it doesn't take up the entire sides in the design you saw it took up the entire size sometimes acting up messy so you might want it like this okay so things looking pretty decent so far absolutely good and with that said we're going to have a quick little two second water break uh while I read the comments you can see everyone's saying um everything's hyped up today it's pretty cool don't forget smash that like button we're almost at 300 likes already and it's not even been 29 minutes that's absolutely crazy right jump back into it we're gonna go straight over to the city picker right so let's go ahead and create a city picker component so first thing I want you to do close the app folder click on the package Json folder so that you're at that level now when you create a folder called components inside of the components folder and it's also worth mentioning that only component made in this folder is also going to be a server component by default anything in Nexus 13. 13 and above is actually um uh is actually using um a server components by default notice that when you start using duperative patience my friend patience all right all right so we're going to say cep City pickup see picker dot TSX boom there we go rfce there we go and yeah just like that now I do want to mention anyone who's just tuned in the area which GPT is actually going to be amazing for is it we are actually this is literally me providing a huge block of data to this to the GPT prompt and it goes ahead and gives me an amazing summary just like this based on all of the weather information that is actually Game Changer incredible powerful sort of thing to happen right so we're going to be doing that in just a second like shortly so we've got our cpf picker function uh functional component so we're going to go ahead and pop that in like so and those aliases that we saw earlier is this now what this is doing is you don't have to go ahead and do the traditional you know upper level upper level upper level so forth rubbish now what you can do is you've already automatically set it as an alias and what this does is inside of your typescript config you can set the path now what it says is if you have your at forward slash symbol it automatically goes to the home root directory and that's really handy because then you don't have to go up and up and up level you just go ahead and simply do at component and so forth and at Live or at API and so forth like anything you need to do is just to jump to the top level you just right really cool and you can actually add custom ones any of that good stuff so I recommend you really do get used to using that now as you can see our city picker is there so the next step is to naturally build our city picker okay so this city picker right here we're actually going to need something called country state city now I'll show you what this is this is actually an npm package now as you can see here npm and JS we've got the country state city package you can see it's quite a popular library and what this is really good at is it gives us a list of all of the countries all of the cities and we're going to use that to populate our drop down a select menu okay so first things first we need to install this so how do I do that we go ahead and mpmi Country state city so I'm going to go ahead pop this over on the side come on Jay bring up my terminal pop into my second terminal and then we're going to do npm I country state city now this is installing that dependency into our project then what I want to do is pull in that dependency just like so so let's go ahead and do that right now boom now we have our country and our city right now we are going to need some client interaction uh components here like such as state and so forth so we are going to convert this to a client component okay so in this case that way we can have things like State and so for I'm not going to go too far into that if you are interested in any of those things remember definitely check us out at zero to full stack hero the course and Community the link is in the description I teach everything about nextgs so if you if you're finding this like way over your head check us out and I promise you it will break everything down inside the community okay Roger freezing I see you we got Alex stroma oh we've got some Papa fam members in the house that's what I'm talking about awesome stuff guys we're about to smash 300 likes as well destroy that like button if you're watching the replay we're probably at a million views at some point right now because that's how these videos are growing right so next things next thing we're gonna do is we're gonna go down to um our we're actually gonna go ahead and install the select react select Library as well because we're going to need a select field right so in this case the next one we're going to do is the react select a library so this is a really handy library and it's very good for things like drop downs now what's good about it is you can simply type into it as well and it handles the type search select sort of functionality that we might need which is something which you're going to need a lot of the time right so we're going to go ahead and install this into our dependency remember yarn if you're using yarn you can use that we're using npm so let's go ahead and do it like so pull this up install it like this and now we have a react select inside of our project and as you can see they've got a nice demo of the the sort of type of data that you have to pass it in so what I always recommend is that you get very good at transforming the error again we actually have a lesson about this inside the course but you can see that this is how the data is expected to come in so we have to go ahead and just customize our data so that it pulls into that in in that shaping form okay and that's pretty much as simple as it is so now what we can do is we can go ahead and head over to our code we can start using this stuff so first thing I want to do is import the select library at the top so just like so import the stack library and then I'm going to go ahead and actually Define the options that you saw just there so remember these options right here I'm actually going to convert all of the cities that we've previously installed from this country State sea into that format so how do I do that well it's very simple I can say const options equals country right so country dot get all countries okay what this will do is it will return all of the different countries so if I click into this you can see I've got I countries and it will get have all of these bits of information inside so name phone code ISO code flag everything like that Etc we're going to map every single country into the following ships of parentheses and then brackets and then we're going to open out now here what I want you to do is remember there's two types of information that we need we need a value and a label okay so the further value is going to include an object and inside of the object we're going to have latitude longitude and ISO code okay so these following data then we're going to have the label and for the label I'm just going to use the country name so this is the options in the in the state that we need it okay the next thing I'm going to do is I'm going to go ahead and pop in my um my select field here right so we're going to have the select flow that we previously talked about then we're going to have the options right and we're going to Simply pass in the options from the above right that we went ahead and created now if we go ahead and hit enter now what I want you to do is I want to I want you to just test it on your site okay so go over to your site and as you can see how look at that we already have all the cities inside so this is a great point to sort of test your logic see if it's working and so forth right and you can see you can click in and it saves it and so forth right so at this point you now are pulling in all the countries inside of your app okay the next step we now we need to do is we now need to monitor the user so that way when they go ahead and click into this right so when they click into it we're going to store that piece of state and I'm going to show a city now what we're going to do is on that City selector we're then going to have um all the cities from the determined country that you've selected so if you select Angola it's then going to show the cities corresponding to Angola and so forth okay so let's go ahead and do that right now as well so first thing we're going to need to do is actually have a piece of state to track the user's input okay so the first one we're going to do is have a selected country piece of State okay so this is going to be a option right so we're actually going to create a new type called option very shortly and then we need to actually import the u-state hook so what is this option right so the option is actually going to be the type that I actually went ahead and defined here so value label and so forth so I'm going to go ahead and show you how we can do that right now so we're just going to pop that in and this is a typescript definition and what's really good about this is it's actually going to go ahead and make it so that we can type protect the when we're sort of you know messing around with things so that way we can be sure that we're not going to make a type error in the start without kind of you know moving ahead James title says morning all I cannot wait until the weekend is over to check this out I can't wait until the weekend to say cheers I'm talking about dude I see you that's awesome and Joanna Juan says is typescript better than JavaScript yes in a lot of Essences remember it's a superset of JavaScript so you need to have you need to know JavaScript to use typescript right it doesn't work without knowing JavaScript but it's going to protect you in the type checking domain next up we need a selected city right so it's going to be the same principle uh in this case it's going to be a city option however so and this is going to be a city option now a city option slightly a different values and I'll showcase system right here so we've got the type option over there then we've got our city option the value in this case would be latitude longitude country code name and state code then the label will be string okay so not far off it but now we've got a C option and our option so we're pretty much prepared for the next step okay all right now the final step after that is we're going to have a router now the router is because what we want to do is once you've selected your country then you select your city I want to basically take that information and redirect you to the page where it's like forward slash London forward slash longitude forward slash latitude so I'm actually going to pop send you to a page where it's your city then it's your coordinates on in the URL and then that page is actually going to be cachable and so forth and there's a reason why we chose to do this architecture because of the way that the API works and everything like that but it works pretty nicely and you'll see for yourself now be careful when you import your router do not make this mistake you see if I did it this approach this is importing from next router we do not want to do that we want to import from next navigation since we are using next year's 13. so don't make that mistake I promise you it will bite you later on so you want to be a little bit cautious about that okay so what I want to do now is inside this select field I'm going to go ahead and map our value so we're going to say value equals con selected country okay then what I'm going to do is I'm going to say on change right and I can simply pass in something like handle selected country and I need to create this function and this is going to be a function which is going to be responsible for handling the when I've selected it okay so in this case what we're going to do is we're going to say const handle select the country and then the prop would be the selected option in this case we can rename it just simply to option and this will fire off when the user selects a country okay so in this case handle selected country then what I would do here is I will set the selected country two oops nope set sorry the selected country to the option okay and I want to set the selected City to know and the reason why I do that is because if you change the country you want to actually reset your City Section okay in case you kind of went backward afterwards we're almost close to Smashing that three years like remember smash that like button if you're watching this video I love and appreciate every single one of you all right everyone's super focused right now that's what I like to see so at this point we are going to check that this still works you see there we go we're still getting our selection of value so nothing yet has broken okay then I'm gonna just simply enforce that the text is black as we tend to use this in a few different areas later on okay so that's looking pretty neat so far after that I'm going to have a label on top of it we're actually going to have the um a label like so also a label and this is for the country and this is going to be country like so okay and then I want to have a globe icon now I do want to use something called hero icons inside of this build okay so what I want to do is I need to install that now here are icons are how we get these lovely icons inside of our app and the icons in question right here are things like this and they're also something used by the Tremor Library so if you are installing Tremor what you will find is that we are actually needing to install the hero icons package like so okay now you can install version 1.06 I'm actually just going to install hero icons react like that and then we can go ahead and continue on so here icons react okay and just like I just want to double check the versioning that I have on mine so you guys can get the same versioning so because I understand that sometimes things get updated so here icons 2.0.17 that is correct okay so that's the value I'm using right now so now we can start using uh the required um icons inside of our build so what I want to do here is I'm going to import it into my file so I need the globe icon inside of my file so I'm going to go ahead simply pop in the globe icon like so now here you can see we actually need to install the type definitions for this so as you can see here sometimes you need to go ahead and import install them separately so let's go ahead and run that command types here icons react and then it should install the um type definitions for us I believe we might be able to do it this way let's see if it does it right so sometimes I get this a bit of annoying issue I'm actually going to Showcase how I did it in just a second let's go to our package Json and should have actually pulled those in to be honest with you what I think happened here was if I go back to my package Jason yeah so what's happened here is hero icons has been installed but the actual default here icons has not been installed so what I want to do is I actually wanna install just the basic hero icons as well okay so in this case I'm going to say npm I hero icons okay let's added the package let's go back to our file and see if we have our type definitions yet we should do to be honest with you let's go back yep so now okay that's a bit annoying we don't have it yet let's go ahead and debug it let's see so I've got my hero icons 207 and I have my hero icons reacting okay so the reason why is because I actually did opt in to use the one that they recommended so what we're going to do here is I'm going to delete this dependency and I'm instead going to replace it with the one that they're recommending just for this demo so that way we can kind of progress on I don't want to spend too long on this so we're going to install this version of the hero icons package okay so we're simply going to go ahead and use that recommendation there and what you will see is if we go ahead and oh we can actually don't save that one go back into the file now we should have our hero icons 1.06 and then our hero icons here 2.017 yeah and there we go it's got rid of it okay so for the demos purposes that is completely fine uh you can feel free to debug it kind of get past that bit fine afterwards right so now back to our build I don't want to spend too long on things like that because we have a lot of cool things to do right so in this case I'm going to import the globe icon into my files we already did that at the top and then I will pull it in like so and I simply style it up accordingly okay now I'm gonna go ahead and start the div like so we're going to say class name Flex items should be Center essentially I space X of two and then the text should be white with an opacity of 80 bam just like that it goes in right so it looks clean and then here I'm going to say space y of 4 for every child component that I have okay so in this case you see how they spaced out a little bit okay so that's looking pretty good already I really like the look of this and what I want to do next is I actually made a little mistake here so I actually want to wrap the entire selection of things that I have here so everything up to div yeah and then I want to go ahead and do space y of two I thought it looked bigger there we go nice okay and then what I want you to do is I actually want you to go ahead and very simply copy this so copy this pop it in like so okay and there you have two you have country and Country Now the second one I want you to change it to city but here I'm going to add a conditional and what I'm actually going to say is I'm going to say selected country and and then I've got my parentheses and what this is saying conditionally render this only if you have a selected country so everything that we just copied I simply want to take it paste it inside of that okay now if I refresh this page you'll see that I don't have the C but at the minute I pick something boom it shows a city now the city we need to go ahead and change it to the value is going to be the selected City and then the on change will be handle selected City instead okay now handle selected C very similar push let's go ahead and create a different file up here we can say const handle selected City equals this is going to be option but this time we're going to use the city option type definition okay and then we're actually going to say set selected City to the option that we pass in and afterwards remember I said we're actually going to redirect the user so what I want to do is I want to prepare us for that so I'm going to say router.push forward slash location okay I'm actually going to do back ticks here so I can have some string interpolation for slash location and then I'm going to go ahead and actually push through the name forward slash latitude forward slash along the tune okay so location and then I'm going to go into it and I'm going to say option dot value dot latitude okay forward slash option dot value dot longitude right and then that one we close up now as you can see they've automatically added this optional chaining in the event that option isn't working okay so um live debugging mode for sunny is like this a nice awesome Baja what is that he goes what is the weather in Prague now we can actually check that in a second I will definitely go ahead and share I've actually stopped running down but I will check it once I get the app running good to see you here dude so in this case we've got this running now what I'm going to do is I'm just going to comment this out just for now while we're testing it because I don't want it to redirect me otherwise it will say a 404 redirect okay now here for the options we actually have the city now as you can see I've actually just punched it in over here um and that's so you can't see sorry I need to show the Showcase there so we're actually going to create a city options now as well so for the city options I'm actually just going to do it inline to Showcase what we can do here but for the options I'm going to go ahead and say City right so imagine let's just separate that we're gonna say City dot get cities of country and then here I'm going to pass in the iso code okay so this is actually getting the selected country value dot ISO code now ISO code is like the sort of you know representation of that country by a special code and then what we'll do is we conditionally chain off of it say map and then we get all the values back from it all right so at that point we will get the city or cities and then we can go ahead and do the following so I'm actually going to just call this one state for now I'm going to do a parentheses and return an object and inside of that object I've got a value and a label just like we previously did before so it actually longitude country code name state code and label if you really want to make things a bit easier you can feel free to rename state to something like C but in this case you can see we're just mapping it in line I'm just showing you how you can do it in line you can feel free to refactor this have it in a user fact that kind of thing you know as you wish it's completely your call okay so now we have handles like to say with value that there we go and then we've got our options so at this point we should be pretty good so let's try out guys we're going to go over to somewhere like the Dubai so in this case when it's a United Arab Emirates and I should only see series now four yes the UAE this is perfect let's go to uh United Kingdom and now here we should see things like you know London so if I type in there we go so that we only get the cities in London that's perfect if we go to somewhere completely else like you know we could say ow uh let's go to Portugal for example Portugal say is a load up right amazing stuff right so you can see now it's working in a way that we wish so why the final step is I can simply go ahead and uncomment this right.push and then let's see if it redirects us so pay attention to this the URL at the top let's go ahead and go to for example Dubai so United Arab Emirates Dubai and then now what you'll see is we should get redirected to that location and as you can see on the screen what we are seeing is you should be seeing something like this HTTP localhost 3000 forward slash location four slash a uh latitude and then longitude okay so we need to create a dynamic endpoint which will support this so let's go ahead and do that okay so that section is done we also just destroyed 300 likes and that's what I'm talking about guys keep on going the energy is absolutely wild that's crazy right so at this point we have our home screen done so we can navigate to our first city so this is where the real fun comes in right this is where we're actually going to start building our back-end infrastructure our graphql API all of this good stuff and then this is going to go ahead and get things in WoW Chris rizner says huge inspiration Sunny thanks for all the work you do help me land a job last September as a software engineer Jay's already screenshotted it because he knows me too well that is awesome Chris thank you for sharing that absolutely incredible stuff that's what I'm talking about proper fan we're getting people's jobs that's it and that's what the energy is about quick little water break before we Dive Right In okay so doing absolutely amazing right now guys first it says syrup what's up all right I'm gonna change the music a little bit as well I like to have a little bit of a mishmash there we go okay let's just do something different okay let's do this one right so next thing we want to do now is we want to go ahead and build out that second screen okay so I want to have some kind of screen that supports it so we don't get a 404 okay so how do we do that so if you're not sure on how to do Dynamic routes especially at that level I will make it so easy for you that you'll honestly be like wow that's so easy okay so we're gonna have a forward slash location because that's how we do the the naming structure here so for the root inside the app folder we have a forward slash location this will be resembled by four slasher location on our website inside of that what we do is we have square brackets to determine to basically specify that there is a dynamic value that will be supported so in this case we're going to say the first one is City then clicking on City we're going to create a new folder and inside of there we're going to say latitude right so a lat and then inside of there we're going to say long okay and the reason why I've done this one this structure is because I'm going to be caching based on city light and long okay so this is really really clean so glassdo says what did you use to create that marker I actually coded this this is code this is just a screenshot but I did actually do this with um um I did actually do it in um I got the design from dribble which was awesome I joined the pop fam two weeks ago that's what I'm talking about man good to see you I hear you man all right so at this point we are going to uh inside of that long we're gonna go ahead and add a new file page.tsx planning to combine the webscape project with this one this weekend Jay screenshot that that is awesome uh use case for uh our friends over right there so we're gonna go ahead and add that in page.tsx and this will create a page at that point rfce stream says you just don't get old he goes I've watched you tears ago uh before the few days you're just looking at the same age thank you dude I appreciate it all right so at this point this is going to be we're gonna call this one um Let's uh what did I name this one I'm just gonna call this one the you can really name this one whatever you want I don't really matter here we're just gonna call this the weather page right so weather page get rid of this and then you can say welcome to the weather page right so now we should have a page at that route and this time to test it so provided you did it all correctly let's go to somewhere like Albania let's go to Bosch and then you can see for 400. so let's just double check location and then we have everything correctly set up let's let's have another look at what we have here so let's just confirm that it's in the correct folder so it is in the long folder what we may need to do is hit save one more time go back refresh okay so we don't have support yet in the correct place so City lat long let's have a look we've got page.tsx 4 D4 okay that's all good that's looking fine and we are returning our div that's completely fine as well this complete this cut our server off on the first one we're going to cut our server we're going to npm run Dev one more time see here is not in the URL oh thank you guys that's what I'm talking about ah there you go look at that as I love debugging on live stream right that's so cool right that's what I'm talking about so that's the power of hair programming right so that's where I've forgotten it so thank you so much for pointing that out guys here we have our issue we don't have the city so option that's how you know what that's actually incredible that you guys are watching to that degree so so nice all right so we have our city picker here and I believe it is just like that yep so option.value.name now we are doing it correctly okay nothing that's phenomenal when I think about that and I think that you're actually watching it to that degree that shows me how committed the papa fam is I find that incredible right so we're gonna hit save here now let's go ahead and restart our app I think it's rebuilding yep there is it's rebuilding so we should see our home page in just a short second I was just testing you guys exactly Jay's got his spawn right so at this point we're gonna go to Albania we're gonna do uh we can do anywhere a leap and Arch and now what we should see is welcome to the weather page let's go that's what I'm talking about and remember that's so if you get to that point don't stress just do what I did there and speak to your community uh no no just go ahead and debug it right see there is always a reason why something's not working now how do I get access to that City that longitude that Latitude right so because I'm going to need that later on so how do I get access to those things well actually we get the props come through here so the props actually contain a few and pieces of information right so really what we're going to do is Define our props and I'll showcase it to you so the props come through in the following shape and you can check for yourself but it includes the params as part of the arguments right so in this case we've got C lat and long which come inside of it so what we can actually do here is an es6 destructuring technique where we can break open our object we can get the params out and then we can break open that and we can get the city the lat and the long okay and then welcome to the weather page and then what I can do here is I can simply just pop out City I can say a lot long and just to Showcase to you that it actually shows that then we can see here welcome to Bernard with the Latin long right so perfect stuff okay so at this point now what we want to do is we are going to actually get the back end setup right so we have our city we have our latitude and our longitude okay so what we're now going to do is we're going to use the free weather API provided by open Meteo but we're actually going to do it in a way where we basically are going to set this up on a back end supported by step then now steps in is going to do a really cool job here because what we're going to do is we're going to use the free weather API to basically Define our optimal curl request so for example I've clicked in a car request here so you can actually go onto the website openmateo.com and then you can click on this right here to sort of demo it out now you don't need a key which is awesome it's a completely open API and as you can see we have a ton of information that comes back now remember what I said we have loads of information so you know that summary that I showed you earlier so remember the summary that I showed you from chat GPT so precisely this one you will not believe it but really what I'm not joking when I say this all I did was pass in this information I cleaned it up I passed it in and then it defined this so from that information gpt4 is going to give us all of that nice beautiful summary just like this so that is absolutely incredible right uh Alby says you made me a little famous thanks bro amazing stuff and I love that right so what we're going to do is we're going to take this Co request and we're basically going to just go ahead and give the hard work to um steps in stepson is going to do all of the hard work for us okay so first thing I want you to do is in the the first link in the description is a sign up link to steps in I want you to click it steps in will then open up this page right here right so you'll see start for free create an account now I've already created an account so I'm just going to Simply go to my dashboard so I can head over to my dashboard once you've created your account and you're inside your dashboard you can simply go ahead and you'll see you've got a bunch of different endpoints and you have your nice sidebar now this is really cool you can go ahead and explore this for yourself but you can see we can they give you tons of different endpoints it's really really awesome to go ahead and use okay now what I'm going to do is I'm going to go ahead and uh set steps in up inside of our project so I'll show you how to get started so we have any documents over here and then what we can do is you can simply use this to read and check out I'm going to click install and set up install step stem so in this case I've already installed it globally but you want to run this Command right so steps in now what we want to do is head over to our code and I want you to do the following I want you to go into packages and they're also at this level I want you to create a folder called Step Zen and then inside of your terminal I need you to do the following I need you to go ahead and simply open up a second terminal and CD into that so CD into steps in now be very careful because now we're inside of this directory okay and there's a reason why we do this because when we're initializing it we want to essentially create two separate areas right so one for the steps and back end and then we've got an xjs app right I didn't say front end backing because some people might get confused but the back end is essentially our steps and folder then what you want to do is Step then login now before I do that I'll show you how easy it is because what they've done here for you is you can simply go ahead and follow the documentation so once you're on steps into the website head over to the steps and docs add this link right here at the top then I want you to go ahead and click instance app and read down here now the reason why I say this is because they give you the commands and they even give you your keys and everything to get logged in so you want to go ahead type in steps and login into your uh into your um terminal I've already done this so I'm not going to repeat that then it will say what's your account name you simply pop in your values you simply pop in your admin keys and so forth and it will give you your key here as well and you can also get your key um from the steps and dashboard and then yeah you can log into your account okay now once that is done we're going to go ahead and do a quick start with steps on accepts and import CLI so I've already logged in so now what we can do is you see where it says steps and import curl and so forth steps and import MySQL we're actually going to do a cal authentication request okay so I'm going to show you how we're going to do this so I've actually got an ideal perfect string here and I'll show you how I've defined it so um what I want to do is head over to the free weather API we're going to click on features we're going to click on API and documentation and as you can see here you can actually select all the things that you want additional variables like the UV index and so forth the weather code and even things like daily information so current weather with temperature settings wind speed and so forth with the time zone all that good stuff and then it will give you a pre-built URL okay so in this case if I was to select a c for example London okay and then click here and say time zone is required you have to give it a time zone so I believe we could do something like Europe London and then you can do again let's just do London like here and now what you'll find is if you go down here ignore this craziness it will give you a perfectly formatted API URL now if I was to call this URL for example if I click it here what you'll find is it gives me all the weather information I've requested okay so I've saved you a little bit of hustle here because what I've done is I've actually created a URL that you can use for yourself now I'm going to go ahead and keep this very simple I'm going to put this on the screen I've also gone ahead and actually included it in the papa GitHub repo inside of a testcal.txt file okay so if you don't want to do the longness of this I'm just going to Showcase it on the screen right now by saying test curl.txt I'm going to paste it in like so so this is the text this is essentially the color request that I'm gonna run okay so all you can do is two options at this point you can stop the video and you can go ahead and copy this or you can simply get the public GitHub repo and do that and basically find it in the testcode.ts txt file now I've submitted on to get a repo right so this right here or you could build it yourself based on these parameters right so we're going to copy this call request so if you click it you can see it gives me a bunch of information and this is a great way to start things off okay so next up what I want to do is I want to go over to my terminal so we're going to go simply back save that file I'm going to close it and now I'm going to do steps in it this is the first step I'm going to do steps in it this will initialize a steps in directory inside of here what would you like your endpoint to be called melting camo is completely fine and then you can see it's create a step then config.json for us right so very simple to be honest you can actually just skip that step and do the next bit J says in it so here we can say steps in import curl and then what I want you to do guys is literally paste in your call request now what's amazing about steps end is that from this information a few things are going to happen right so I just want to showcase to you if you are stuck and you have no idea where to go you can actually get all of this information I'm talking about right now over here so even if you have authentication headers you can bypass them by passing in your authentication with the dash dash header argument okay now you can go ahead and import and what's really amazing about this guys what it will do once I hit enter is it would basically read the response create a perfect schema which will represent that information and then it will create a graphql API that will literally allow me to select and deselect the information that I want from this request now that is damn powerful so we're going to go ahead and do that right now I'm going to hit enter bam and what we'll see is it will go ahead and it will import a schema into step then so let's go ahead and go to our steps in and as you can see I've got the cow I've got index.graphql okay now as you can see look at this guys absolutely phenomenal it's found and it's determined all of the different data types now don't get confused this is graphqr not typescript but you can use this to then go ahead and create type definitions yes but this is literally gone ahead and done all of the hard work for us so you see that entire crazy object that I just showed you previously so this one right here it's gone ahead and created type definitions from all of that right so no joke current weather current weather is day you can see everything is literally been converted over to a type definition or schema and then it's giving us a query to go ahead and Showcase from right so and you can see the endpoint is here and then you can pass in the following parameters right so this is absolutely amazing right so we're going to go ahead and type in steps and stop and what this will do is it will deploy our Ur our steps in um API as well as set up a local host instance for us so this will get set up at localhost 5001 melting camera for us for you it'll be a little bit different but now if I go to the Explorer you can see I've got my query and I can go ahead and simply select the pieces of information that I want but you would have to go ahead and pop in the current weather daily hourly longitude latitude and time zone and then you can basically go ahead and select what items you want back so I will show you how to do this but right now if I was to do this you'll see it needs these pieces of information to go ahead and do that but I've actually done that for us so I'll go ahead and show you how we can do it next so that's step then already set up so in a nutshell so easy so so easy to get a graphql endpoint if you've ever done graphql work you'll know that's painful to do by yourself stepson just made that like easy mate right so absolutely easy stuff so quick little water break smash the like button if you found something pretty useful there and then we're going to go ahead and show you how you can actually consume that from the next JS app foreign awesome right now uh I'm really loving the energy that we have in the chat as well and yes absolutely um awesome stuff so all right so what we're going to do now is we're going to go over to our application we already have our steps in API and it's worth mentioning as well in the steps and um dashboard you will see your new endpoint being deployed okay so that new endpoint that we just went ahead and deployed was called something camel melting camel so you can actually go ahead and play with it and interact with it here as well so it's something which I really like about stepson because imagine you're away from your computer you still need access to your API you still need to know what the hell is going on or you want to play with something just see if you can fetch some data you want to purify your queries all that good stuff you can actually access it completely from the steps in dashboard and you see how easy that was to implement okay so it's really really awesome in my eyes okay so at this point now I want you to do the following so we are going to create our type definitions from this because we're actually going to use this in the front end as well right so what I've done here is I like to grab this pull it to the right okay and then command B and then what I want you to do is close everything and at the top level at the packages never I need to create a new file I'm going to call this the typings dot d dot TS so these are all of your type definition files and the reason why I've got a left and right like this now is because I'm basically going to go ahead and map things over right so you can see right here we've got a temperature wind speed and so forth for this one I'm going to go ahead and create an interface to map that right so you can see there we've basically essentially mapped it over for the daily units I'm going to do the same thing okay so for daily units I'm going to do the same thing I've essentially mapped it over so you can see where we had typically a float before now I've got a string of value okay now um you can go ahead and really play around with this as much as you want I believe that this could be an array actually but in this case for now it's completely no sorry this is a string this is a string yeah this is the daily units so this is actually this value right here so I've actually gone ahead and skipped one so in this case the daily would be the following so for the daily units we're actually going to have so this is going to be the daily representation then we go down we've got our daily units and you see typescript is slightly different definitions but it's not too hard to follow up and you guys can feel free to type these out yourself or again the access is in the GitHub repo now for the hourly we've got this so this is essentially the one-to-one representation of hourly then we've got hourly units and we've got the root which essentially connects all these together so we've got hourly units let's go ahead and Pop That in as well and then we've got the root so let's go ahead and pull that in as well okay nice all right so that's the route yeah and you can see the root is actually connecting to our other interfaces at the top so that's essentially gone ahead and created one-to-one type definition mappings now why is that important because now when we pull the information in on the front end using the Apollo client which we'll do in just a second we're actually going to have an easy time of basically going ahead and safely accessing that information with our typescript definitions otherwise imagine trying to access all of that it will be like was it dot current weather and all this kind of stuff it gets pretty nasty whereas when we got our type definitions down it's actually pretty easy to go ahead and use to the point where I was able to do it without constantly looking back right so it's actually very very powerful doing that so we can now close our graphql and now we need to set up our consumer so what we've essentially got our back end up and running now what we need to do is essentially create a Apollo client on the front end so Apollo client this is what we're going to be using inside of our app so I want you to go over to Apollo and you can feel free to read it out yourself you want to click and get started and you can install the dependencies inside of your project so we're going to go ahead and install the Apollo client inside of our app so come on Jay and I want you to go into you see right now we have the first running on xjs app the second running on stepcent at the steps and route we're going to create another one and you can you have to make sure you're in the correct directory so this is in the correct directory do LS just to make sure so you want to be at the top level then we want to do npm install Apollo client okay uh Baron said humor crazy you make it a look and sound easy honestly dude I appreciate it I appreciate the the kind words but yeah it's all just practice time patience right because Channel says there's no interface Chrome wave include estate property um I just want to actually check that so we have the current weather yes you're correct I don't know why that came out actually to typings typing so D dot yes and I actually current weather is they so actually okay good job Let's do let's go ahead and grab this what we can do here is the temperature integer so this one yes you're correct actually that actually has a number in it good spot weather code yes that's that's a very good spot so make it OCD perfect there you go good stuff right so I missed a little type of definition there so that that's insane people are that clear oh that's awesome man I am actually so happy that people are watching to that degree thank you all right so this point we installed the Apollo client uh South Africa now what is up and now what I want to do is I want to go ahead and create so close everything up go to the top package that Jason and I'm going to create a new file called Apollo client Apollo client allows us to essentially create a connection to our uh back end right so the the back end that we just deployed with graphql so here I want to go ahead and do two things I want to import the things I need so very straightforward I'm then going to go ahead and um create a type definition for the client so the client is going to be an Apollo client or it could be a no value and at the beginning we're just going to initialize it with nothing and this is for a server pattern so don't worry I'll explain that afterwards but we're going to say export const get client and this is a Singleton pattern because basically we're going to use this to go ahead and get an instant of the client when we're using our app so whenever I want to go ahead and interface with the graphql API we can go ahead and do it that way so I'm going to say const client equals and you could have done that if client check if you really wanted to but it's a new Apollo client and then I need to go ahead and pass in a URI so in this case it's giving me a URI that's not correct what we want to do here is basically you can set up your environment variables but I'll keep it very straightforward and easy for you for now so for now we're just going to set it up for this one but you can do a check to make sure that if you're in development you'll have this one otherwise you'll have your production one but for now I'm simply going to go ahead and put this in yeah in fact no I'm not I'm going to do it properly I'm going to go into my photos I'm going to dot m dot local to set up an environment file and here I'm going to say API and score URL and I'm going to pop that in there okay now that means that we've got our URL defined in this variable heading back over here we're going to say process.m dot API URL and that way when we deploy it we will actually have things correctly set up which is much better uh doing it right then we say cache new in memory cache and then we say headers this bit I want you to be extra extra extra careful attention to um we're gonna go ahead and pop in an authorization key okay so I'm going to pop in an authorization key like so okay and then just like so and uh wherever I messed something up so there we go now as you can see we need to create a next public steps in API key right no I'm not actually sure if this needs to be next uh public but we'll check it out so next public uh steps in API key so where do I get my key from I will show you so let's go over to my step Zen dashboard so we're going to go over to the steps in dashboard and then what I want to do is I'm going to hide my screen for a second after I click this but you want to click on the account tab so I'm clicking on the account Tab and then what I have here is an API key so on the account tab you'll see the following okay so I'm going to Showcase some of it but you'll see an account you'll see admin key and you'll see API key so I want you to copy this value okay copy this value and then paste it inside of the value here so copy it and paste it inside this value okay let's go ahead and do that right now so I've gone ahead I've copied it and I've pasted it into that value okay then what I've done is I've closed my environment file right so now I've saved it and we have access to it there okay and then I'm just simply going to go away from that page that way I don't leak my plan by accident okay cool so at this point I have my step Zen key all set up as well so this means every time we send a request it's going to go ahead and include the authorization headers inside and it's Gotta Be appended by a API key to begin with right or prepended all right so once that's done we're going to return the client cool yeah and then this function right here we can export it that's perfect okay so at this point now we're not actually using this clients we can get rid of that my bad all right so we can actually go ahead and get rid of that it's easy and if you do want to do it you can actually say client and then say if client and just directly assign the client like this you could do this and then say if there is no client and so forth I'm just going to keep it relatively simple now and create a new one each time but yes for optimization purposes you could do that okay so let's go ahead and get rid of this for now cool so at this point now we have um somebody said how are you making the graphql back and we've already done that with steps in so the backend is actually already created here which was super fast and easy it was that easy to do it so this is actually a graphql back end and steps in is handling the entire procedure for us to get up and running which is why it's so powerful it's unreal all right so now what do we need to do well now what we want to do is essentially create a query from our front end to the back end okay so we're going to call this one the fetch weather query okay so how do I do this well I'm going to create a folder called graphql and then inside of my folder I'm going to have queries okay so queries now here I'm going to have a folder called a file called Fetch weather oops feather fetch weather queries dot TSX okay dot yes sorry this is not RFC there we go yeah cool now at this point we're going to have basically our query that we're going to make to graphql now how can I make this easier for you so what I want you to do is remember we have this link to click into step Zone I want you to click it okay now if you go over to the export button you can see we actually have a really nice kind of cell up here so what you could do is you could go through click every single one and then you'll get a nice kind of query over here now that's exactly what I did I went ahead and clicked through each single one so you can actually go and do this and you see how it's building this out right so you can feel free to do that in the same way um and then it will go ahead and build out the perfect query to get you everything obviously you don't have to do this if you don't want to overfetch but in this case I just want to showcase something to you right so once you've done all of that get all of this information included all right so you can go ahead and select them one not sure if there's a quicker way of doing that if you can select them all can you don't nope no you can't okay that's fine we're going to do the same thing you can use chat GPT 3.5 don't worry if you haven't got access to gpt4 yet I see a question already in the chat don't worry about it you can do that I'm just going to click all of these just to make your life a bit easier Okay cool so at this point you can see we've got our conditions there and then we've got everything else here so I want you to just copy this right so copy that entire thing in fact copy up until it says const get query right so copy that entire thing all right so I've actually already done this and what I will do is I will showcase it to you with a few minor differences yeah so I'm gonna go ahead and pull that in at the top right now so just like so so where's my code here we are I'm gonna hide everything and then paste it in so at this point you've got gql so I need you to install a few dependencies at the top and I'll show you I modified here okay so we I've changed the name here to fetch weather query and then you can see where we have gql right and if this isn't being highlighted for you just need the graphql extension very simple just install it but you've got the query so everything else was pretty straightforward everything else was the exact same as yours the only different thing now would be the parameters that you pass in here okay so current weather we're just going to say string and then well we're going to give the following values here so latitude longitude and time zone we simply say string with a exclamation mark now for the daily and hourly you can feel free to get this code from the propagator Reaper or just pause the video and copy it yourself but these are all the different values I I'm attempting to get from the daily readings from the hourly readings and you can feel free to use that as you wish okay Mathias says bro I like it I review this live after work thank you thank you for being awesome dude I appreciate you almost at 400 likes let's give this video to a 500 likes at least guys then we're gonna go to a thousand we're just going to keep growing right so absolutely incredible stuff so we're going to go ahead and Export this now so we're going to go all the way down we're going to say export default fetch weather query okay so just like that I have a query now okay so let's test this out how can I actually go ahead and make a call to my query and you're probably wondering this is where it gets really hard now how is he going to do that well it's actually this is where it gets pretty easy right so in fact we've actually done all the hardware because stepson made it so easy for us that now we actually don't need to do much work right and I'll show you exactly what I mean so what we can do is the first step now what I love about nexjs13 is that we have server components by default this means at the functional component highest level you can do async away that's Game Changer that is absolutely Game Changer stuff so this makes things like you know fetching from our next graphql backend using step then super easy right you can do fetches all that stuff at the highest level so let's go ahead and pull in the information so first things first I need to actually go ahead and pull in the get client right so by default this hasn't this does not say use client which means this is a server-side rendered component because that's the default Behavior then what I want you to do is I want to say const client equals get client okay and simple as that and then what we need to do is we are going to go ahead and say const and we're going to say data we're going to extract the data like destructure Alexa and we're going to go ahead and say oh wait now you can see we don't have an asynchronous so we need to make this asynchronous we're going to say await client dot query okay and then we've got an object that we passed in here now the first thing we're going to do is say query and we're going to say fetch weather query so remember that query that we went ahead and created earlier this one right here we're actually pulling that through here okay then we need to pass in the variables right so the variables in question here are actually like so we're going to say the current weather all right so what I'm going to do just to make this extremely clear is I'm going to pop this on the side so you can actually see what I'm doing right so remember these these different values so the current weather so the current weather is actually going to be true okay so what I'm doing here is that this is essentially mapping here so what I'll do is I'll write out and then I'll draw this out right so I'm going to do current weather and then we're going to say longitude so in this case it will be a longitude equals long and then we'll say latitude equals lat and we'll say time zone in this case I'm just going to hard code it to GMT okay but really what's Happening Here is we've got a nice little connection going on because we've got the current weather being mapped over here we're passing it through the longitude is being passed here the latitude is being passed here um we've got the time zone being passed here and then the daily and the hourly have got default values based on these right because I only I always want these to be set values so you see how we're doing this right so that in that way we're going ahead and we're passing it through now what I want you to do to test that this is working I want you to firstly go ahead and say const results and we're going to map this to root remember that that interface we created earlier on so if we click into it remember the current weather all that kind of stuff the type definitions we're going to map it to room and then we're going to say equals data dot my query now you're probably wondering why is it on my query because remember when we actually had our query inside of um steps in in our uh schema the data is returned under my query so inside of the response it will be under my query okay and then what I want you to do is console log those results and what we should see is a beautiful thing so now if I go over to my website so let's go over to create uh weather app and then we're going to Simply go ahead and remember this is being rendered on the server so you won't be able to inspect it because it's server side rendered so now what we do is we pull open our terminal we go to our next JS app we clear it all and then we refresh and just like that guys look at that we have all the information coming through so here we have the longitude and latitude of this address so 19.8 125 so uh in this case 19.8 I think that's fine here so 40.8125 so it's done the closest they can to it which is perfect Time Zone GMT perfect okay that's absolutely amazing and then we've got the temperature the weather code the wind speed the Direction all that good stuff that's what I want to see right then we got the hourly temperatures and everything so this is perfect right amazing amazing stuff so now what we can do is we can actually go ahead and start passing that information and then eventually what we'll do is we'll clean up some of that data pass it to gpt4 gpt4 will create a summary of that data by using the chat completion API and then it will pass it back to us so I guess the next step that naturally to do is build the beautiful UI that you see right here using the data that we have got back so let's do exactly that okay so command J to hide this my Moto mode says Hey Sunny thanks for inspiring someone giving us these amazing tutorials are they gonna be man projects in the future and can we use Express in hgs firstly there's no need to use express NHS because you already have API endpoints in the new route.ts file structure you also had it in the old Pages forward slash API structure so you don't need Express anymore and secondly mom projects in the future perhaps who knows uh in fact next GS is my stack now so I just find no reason to go back um so yeah let's carry on guys so we have the div now what we're gonna do is this left hand section we're going to call it the information panel right so this is going to be a information panel so I'm going to do here is I'm just going to say information panel and I'm just going to assume that this is a component that we're going to build so I'm going to kind of comment out just to draft things up we already know that we get the weather page here so I'm going to go ahead and move that out of the way and then what I will do is I will start building things out as I wish right so what I'm going to do is probably leave out this left hand side and showcase this first and then we can build out the left hand side and introduce our functionality as required so first things first open up a div another div inside and here we're gonna have a H2 so actually here I'm gonna have another div we have a H2 saying today's overview okay and then we're gonna have a P tag and you can feel free to customize this with you know Tremor components if you really wanted to and so forth I want to say last updated at and then remember we actually have access to that data now which is returned so I can actually go ahead and do really cool things here I'm going to go ahead and change the music up a little bit it's a bit too hectic for me while I'm focusing there we go that's a bit more calm I think right so at this point we've got the um last updated app and then I'm going to say and we're gonna pass the date that came Max with a new date and I'm going to say results Dot and this is what I love about typescript right so we say current weather dot time thank you Jay I don't know at that time we'll say two Locale string okay and then here I'm gonna have in Brackets I'm gonna say again results dot time zone okay and now what you can see is it says last updated app so the data that we fetched was last updated at this time zone right so it was last update in 1970 is not correct which means that we have made a mistake that means that no date was provided back for this um for this uh location so that's actually the beginning of the Unix timestamp so current weather was not successfully returned then which is fine we can probably change that afterwards so we'll have a look at that afterwards and modify that but for now I will leave it there and we'll fix it afterwards Okay so um that's fine for now and then I'm gonna start styling out so this P tab this div is going to have a padding bottom of five this div is going to have a padding of five and then the H2 is going to have a text extra large font board okay the P tag is gonna have a text small text Gray of 400 boom and we should start seeing things change up there we go that looks a lot better already cool and then what I like to do is I click on this one to know where I'm at okay and where we have the panning uh five this one I want you to click in so we want to stay in that level Okay so here I'm gonna say a div and here I'm gonna have something called a call out card okay now the call out card here is going to be the GPT summary so this is going to be referred to as a call out card this is also going to be a call out card okay now because um the Tremor 2.0 has not yet introduced uh direct support for next year's 13 that we have to go ahead and create a wrapper component for it so which is not which is completely fine so inside of components I'm going to create something called a call out card component.tsx rfce to create our call out card component and then we can go ahead and do the following now this call out card will accept two props it's gonna have a message prop so we're destructuring and a warning prop we need to Define these type definitions like so so I'm going to go ahead and say type props equals and we're gonna have our message and then we're gonna have a warning which is a Boolean now the warning is optional it doesn't have to be included okay but what we need to do is as I mentioned this is a wrapper so it allows us to have the use client directive okay so that's basically going to allow it basically say that you have to essentially render on the clients of the browser okay then what I'm going to do is I'm going to pull in two different icons right now what I'm going to do here is instead of pulling out this I'm gonna instead render a call out card so I'm going to render a call out card so this one's just gonna be called call out it's a self-closing component and then the title here is going to be the message that we pass in the title um the icon is basically going to say if it's a warning it'll have the exclamation icon otherwise it'll be a check Circle icon and then the color very similar approach we're going to have again if it's warning it's going to be a rose color and then if it's a success it's going to be a teal color right and then a little bit of styling to kind of make it finishing touches look good class name margin top of four cool so we've got our call out card ready and it's reusable as a component so let's go ahead and do the first instance of it so here we're going to have our call out card so let's go ahead and pop this in like so we're going to say call out card and then I will pop this in and I'll say message right so here now we've got messages here my nice little pop-up so we've got message and here I'll just say this is where GPT 4 summary will go yep and as you can see wait for it we should get a lovely look at that amazing and what's really nice about this if I simply pass in a warning right now you'll see this will become a nice red message as well so we're going to use that later on for such things like the UV is too high and so forth okay so we're moving at a very good Pace right now guys and we're almost at 400 likes to destroy that live button if you haven't already well after this div we're going to move down we're gonna have another div now for all of these individual cards we're going to create a component called stat card okay and then we're going to reuse that component and that's going to have a title metric and a color prop associated with it okay so let's go ahead and do that right now so come on B we're simply going to go into the common components and we're going to say stat card dot TSX rfce inside of here oh this is an old track if any of you ogs will know this one when I launched the papa farm this track was banging so we're gonna have a water break right here and smash the like button if you know what I'm talking about the energy is absolutely not when we launch zero to full stack hero again link is in the description to the best time of developing me on planet when we launched it this was the track that dropped When the Beat when the doors open to the first ever announcement of the course it was absolutely incredible yeah you know oh it's so cool Jay just dropped the link in the chat if you want to join us head over to property.com to absolutely level up your coding game why so for the stock card we are going to oh that's that brings me back so many memories that is crazy so here we're gonna go ahead and say the following so I need to go ahead and import the card so firstly we're going to say use clone and then we're gonna go ahead and import the following and then we've got our props so we're gonna say type props and let's define what the props are please can you do a building material UI I will definitely consider it we've got a title prop a metric prop okay and then we've got a color now the color is optional but the color it has to be basically defined by one of these colors so there's a reason why I had to do it this way I'll show you so we've got Indigo slate gray zinc neutral Stone red orange Amber and so forth and I'll show you why I've decided to go and go down this route right really they should have had a color option inside the trimmer but these are all the colors that they support all right so in this case I've just defined a myth and then we're going to destruct we're going to say title metric color from the props and then here we're going to say it's a card with text inside of it whether that is the title I'll drop the volume down just a notch and then we've got the metric component which is our metric element right here just like so now that looks pretty good so far so the color now I'll show you what happens here so if you do decoration color what you'll find is if you hover over it you'll see oh if you click into it rather you'll see color right now I can't actually pull this color value um but what you'll find is the color values is a read-only store of these values so what we've done is a type definition from that color right so this color I couldn't pull it in right but in this case I mean maybe we could let's actually give it a try if I can that's such a silly mistake color oh my God can we do it no way okay let me see color is okay oh my God okay you can do it so don't ever underestimate yourself all right don't do what I did that was a silly mistake you can I thought so I was like all right it's a color yeah nice in this case we say color that's good and this is going to be um expression yeah there we are nice and we're going to say decoration color and let me just restart the music I don't know where we are oh yeah that's some this is nice and chill all right so we've got the decoration color then we're gonna have the decoration on the top and the decoration all it is is that line right so you want to have a different color line for each one it's quite a nice little Finishing Touch right um Mark says Legend that's what I'm talking about I did I appreciate you so let's head over here now back and what we can do is we can use our reusable component to actually Define those stat cars and I will show you just how easy this is now there's a there's a point that I want to prove here right when I talk about reusable components it's for a purpose right because it's so easy to then build amazing uis like this if you do it once correctly so now we built a start card so I'm going to show you how we can basically reuse it in different use cases so in this case we've got a stat card so let's go ahead and use it right here so start card I'm gonna import it from the top so start card and then we've got some components we have to pull in so in this case the tie tool here will be I'm going to say maximum and then we've got the metric itself now the metric itself here I'm actually going to go ahead and copy the values we're going to do a little bit of string interpolation and with a little Celsius kind of degree sign so here we've got two fixed and you can see we've got this little Celsius kind of degree and then we've got color equals and if I do this you see we get all the colors nice all right so color now if we do this and refresh we should see look at that oh my God like look how nice that is simple clean effective right and you see where I'm pulling it from the daily results now what I'm done here is I've passed it in from the daily resource the zero Index this means today uh one would be tomorrow two would be in two days from now and so forth so you can feel free to use that information however you wish but this is how I've done it okay so now what I'm going to do is pop this in on I've got another one here for minimum temperature which is using 2m Min and you can see look it's just so clean right it's so so clean right Patty says every lesson in the course is well explained and changes my coding skills and problem skills so amazingly I've already proved it this course is worth for a developer long life learning part that's what I'm talking about that's an OG Papa file member inside if you are interested join zero to full stack here a link is in the description I'm not joking these are orange students saying this that's what I love so much right the next one we're gonna have is a UV index and I put this inside of a div for a specific reason though and I'll show you why so we've got the UV index what I'm going to do is I'm actually going to basically pass a value and what that value is is the so forth so I'm gonna go ahead convert a number to a number so I'm converting this value the UV index Max for today to a fixed value now what I've done is I've converted it to a number so I can do a numerical comparison here against five so if it's greater than five then I will show a call out card saying the UV is high today with a warning message okay so in this case UV is seven so this should be high yeah perfect and if it was lower than five so for example if I made that 10 it had to be greater than 10 this will you wouldn't see that perfect right so now you've got a nice little kind of thing that pops in Solomon what is up dude good to see you in the house so we've got a number here there we go we've got that uh stat sorry up there we go and then I've got two more for the wind direction and the windscreen right so div and where are you we are going to be using CSS grid here as well right so I'm going to do stack card uh and in fact I'm just going to pop this in make it a little easier I've got two elements here stack card for the wind speed and wind direction so wind speed and wind direction okay I've got milliseconds and um or meters per second and wind direction with the degrees of the the direction that you're doing with different colors okay so really nice right now for this one I'm going to say class and this is going to be a flex container so I want them to be squashed into a row with a space of three and you'll see these will pop next to each other again the whole point is do beautiful things perfectly fast then you can reuse the components it makes the entire thing a lot easier right it looks very nice right this is very clean and then what I want to do is that uh div we can leave that parent div but this one at the top div right so the one that we first got the first div this is why I defined my CSS grid so first thing I want to do is grid right I want to make it a grid so if we do that by default nothing changed because it's by default grid one right grid columns one so I want to say is remember when you're doing any tell in CSS stuff it's mobile first so by default on the on a mobile it's going to be a column of one then as we hit an extra large screen then I want to go ahead and say then you go to a grid column two okay and then the gap between everything should be a five margin of two right so in this case it will pull in a little bit more so you'll see it pulls in a little bit more because of the margin two and the Gap 5 between everything is nice now when I hit past a extra large screen we should see boom it pops over there now this you're probably wondering so it looks really stretched out why because think about it once we actually get that sidebar in it won't be so I have so much room okay but that already is looking pretty beautiful right so on a mobile view on a bigger screen that's so clean right by using a CSS grid and a correct container management so I love it I absolutely love it right so we're almost there guys we're getting to where we want to get to now for the call out card with the summary goes I actually want to style that container so I just want to add a little bit of styling in I've just completely forgot margin and then around the F2 and margin bottom of 10. so give a little bit of spacing to move away quiet um right so in this case we've got this perfect stuff look at that that's already looking much more breathable okay good stuff now next up we have after all of these divs we actually need to make sure we do this correctly so the first div second div third divs first two second div third div after this one we're gonna have a horizontal row line you can actually change that for a divider if you wish but you're gonna have to wrap it in a component if you're using Tremor uh with a use client directive so in that case I'm just doing a horizontal line TCI little horizontal line there and then I'm going to have a div and this is where the charts are gonna go right so the charts are going to be space y of three because I want space between them you can even add a divider as well but I'm going to have the charts here so I'm going to have a temperature chart temperature chart I'm going to have a rain chart and a humidity chart so temperature chart rain chart and a humidity chart cool so we've got three different charts are going to go there these are going to resemble these three individual charts okay so we're actually making significant progress here I love it right so that's looking pretty good now at this point I think what we could do is do the information panel right so let's do the information panel then we will do the charts then we will do the gpt4 summary and so forth okay so we're actually doing some incredible stuff here make sure you smash the like button with 10 lakhs away from the 400 lakh Mark absolutely incredible uh you guys have been absolutely amazing so okay let's go so the information panel so we're going to go to our components we're going to say information panel dot TSX rfce boom I'm gonna go up here get rid of this and the information panel just for reference is this side part right and then on a mobile view this will become at the top right so we want it to be basically a mobile view and then on the side it's going to be our sidebar but we're going to call it the information panel because I'm weird like that all right um so we've got the information panel here and then what this will do is it will take a few props actually so I'm going to pass through the city the latitude the longitude and I want to pass in the results themselves right so the props are going to come through which means we're going to have to define the props like so um and then I'm going to go ahead and Define it here so I'm actually saved us a little bit of time I'm going to go ahead and pop in the props like so okay and then we're going to need a bunch of independencies there so I'm actually going to save us a little bit of time here by going ahead and popping it in like so uh we haven't got that one yet that's fine so we're gonna pull in the moon Icon Sign icon image and city picker okay now starting things off with this div we're gonna go ahead and get rid of that information we're gonna have a div inside of here with a H1 and H1 is going to have a city right now I have made a little helper function which will help us out a little bit um actually no I haven't no instead we're going to use a decode URI so in this case uh let's just pop in this we're gonna say decode uh sorry decode URI and we pass in the C and what this is is basically you know when sometimes you have escaped characters it essentially removes that escaped character from it so if it's like you know that that kind of weird symbol which represents a space sometimes it's like percentage 20 which resembles a space it basically gets rid of that so in this case it will get rid of that so let's go ahead and just pop this in so we can actually see it on our page so we go back to our page and we go to oh no sorry our location page and we uncomment this out and we import this in now if I hit save this will probably error out because yeah we don't have it I mean right now it's just undefined because I'm not passing in the city so we probably should pass in the values as we can so the city is equal to the city the results are going to pass in as the results the latitude we're passing in and the longitude is the long okay and now we should see the City by notch yeah there we go so that's the city that we started the everything off with so I chose a random C in the beginning and I will do just fine we've got the H1 here and we've got the P tag um and then I'm going to say long lot and then I will have the following I'll say long [Music] flat yeah now let's start this up let's go and say that this one should be a text extra small text should be gray 400 and then the H1 should be a text 6xl I want to be a much larger it's pretty dominant font should be bold for the surrounding div I want this to have a padding bottom of five and then the overall div I want this to have that blue gradient that we had previously in that initial screen text should be white and the padding should be 10 so I'm just going to pop that in save a little bit of time as you can see boom as soon as we pop that in immediately looking a lot a lot cleaner right so uh guys also we just blew over 400 likes that's what I'm talking about that's the energy I'm saying that's amazing right so absolutely awesome stuff you got the P the div there we go and now what I love about this is remember we actually went ahead and created um reusable components in the beginning from a uh which was a great use case for it because now we can go ahead and say City pickup right so in this case the city picker we can pop in and just like this watch super easily right just like that we have our city pick and this is the power and beautiful thing about this right because now if I type in something like United Kingdom let's do London watch this guys it will go ahead and fetch the information from London and just like that we have it right so amazing stuff you see how the numbers actually changed so if I did United Arab Emirates headed Dubai watch how the temperature changes that's perfect that's amazing we have to figure out this date as well afterwards it's fine for now right so Dubai perfect stuff okay so next up we need to go ahead and pop in the horizontal row I'm gonna say a margin on the y-axis of 10 separator right good stuff and then I'm gonna have a div with a div inside so we have a div inside of them I have a P tag or actually a Dev Insider there with a P tag inside the lab and this will have the date right so I'm gonna pass the date in the following format right so here I'm gonna go ahead and take the current day I'm gonna format it in GB and I'm gonna say weekend should be a long time numeric long and a day or the day numeric should be for the day so here we can see Friday 21st April right for example uh we can go ahead and do class name text should be extra large all right outside of this P tag we're going to have a time zone message so here I'm going to have the time zone and I'm basically going to go ahead and resolve the time zone from our current time format right so this is our current time zone that we are in right so the current time zone that we are in is so the current times on the I'm in is Asia Dubai okay so that's how you basically go ahead and get your current time zone fun extra light so that's a handy little uh built-in function in JavaScript if you did not know okay now outside this div in the total surrounding there we're gonna have margin top of five we're gonna have a flex items should be centrally aligned justify the space between everything space between all of those things that's 10 and then margin bottom of five and this is basically gonna represent afterwards this so you see like this kind of uh this Gap and so forth right so we have to put the the current time in now as well so I want to have where I have the time zone outside of that div this is where I will have a P tag and this one will have the current time and I want to have it in a 12 hour format not in the 24 hour format so this is how you do 12-hour format you say hour 12 true after you uh pass in to local time string you specify which time zone you kind of want I'm using GBP uh GB sorry and then you can do hour 12 through if you do our 12 false you will see a 24 hour clock all right so in this case you see 24 hours so it's completely up to you on how you want to do it but I know I actually have to add that question a lot of the time how do you do that so that's how you do it right class name here we're going to go ahead and say text XL on Bold we have some crazy Focus right now uppercase right there you go and just like that we have a nice little bit of text look at that that's looking beautiful all right now I do want to mention as well while we're here if you haven't already remember check out the University of code absolutely incredible resource um a little cheeky plug here because trust me it's one of the best ways to practice your JavaScript knowledge everyday coding problems is the way that you can practice that right remember it's not going to just come to you in a day by watching a video so coding problems every single day you get the solution the following day and I promise you it's going to be something that you can really benefit from and it's only 4.99 a month like a seriously crazy value we have to create coding problems every single day for you and we send them to your inbox like you're literally getting spoon fed how to how to develop as a developer so something I'd recommend you absolutely crush and destroy right who's coding along with me right now let me know so in this case we've got the uh that's looking great now after this div we're going to go ahead and pop a horizontal row with a bit of styling Stanley says yo love from Toronto keep up the good work brother that's awesome Hefty script says just tuned in I'm loving how clean the code is thank you so much bro I appreciate you we've got a div next with another div inside and then here we have an image now the image I've actually got a a clever kind of approach to this bit so we'll talk about the image in a second so this image is going to resemble this all right and what I've done here is I've created a little helper function which will sort out in a second but before we do the image we're going to have a div this div is going to have a P tag inside of it uh let's hit save and this P tag is going to have the current weather in fixed temperature right so Jose Suarez says is the University of code for beginners as well it's actually built for beginners so head over to papria.com forward slash University of code it is a completely beginner friendly yes what we actually do is we always give you a level for the challenge so you don't feel disheartened right so we'll give you some Advance some beginners every single day will challenge you in a different way and then you can slowly gravitate your level up and you get access to the University of code Community where you can actually chat away with other members who are also solving problems it's an awesome Community to be a part of and remember if you really get stuck feel free to join zero to full stack hero that's the OG place to be right that's where we literally go ahead and just crush it as a team of developers right so here what I'm going to do is sorry oh yeah so here I will now have here well we have clear sky and this image I have a helper function to help us achieve this so I need to actually create that helper function right so here I will say weather code so what am I talking about here well what we actually have is I need to go ahead and create a function called a weather code to string in the lib folder so what I want to do is I want to create a new folder called lib and this is like think of this now oops no okay I don't do it there go into a package.json create a new photo called lib yeah there we are go into your lib folder and create a function called weather code to string dot TS right now inside of this file what I've essentially done is I've created a very helpful helper function now I'm not going to go through every single detail here but I will explain essentially what I've done in a nutshell so here we have a simple mapping right so this is a simple mapping and all it does is it takes a key and it returns an icon and a label so if your key is zero it will return the icon co1d and it will return a clear sky label and what this is is basically certain weather apis return or like weather conditions right so some might return a weather code of 80. that typically has a label of rain showers and a specific icon associated with it so what I've done here is I've created a weather code to string so I'm going to scroll down and you can feel free to pause the video and copy this out or you have access to all of this inside of the proper GitHub repo right so this is a helper function that we've created to go ahead and help benefit us so I'm going to go away from that now and I'm going to use uh help a function okay so now what I'm going to do is I'm just going to Simply pop in the following so the image is actually going to get pulled from that but before we actually do anything like the image I'm just going to go ahead and use our helper function to get the label for the current weather code so I'm going to replace this with the following so I'm going to import my helper function from the top like so right and then I love that we're almost up 500 likes I absolutely love that all right so now you can see where the code to string we pass in the current weather code and then we get the label for it now if I go over here you can see 28 degrees clear sky right so in this case the API is returning a weather code we're then using our helper function to determine what the label is for it right now the image I've done the same thing but except I'm pulling the image from weatherbit.io images right so in this case what I will do is I will replace this with an image tag and then here you can see what I've done is I've concatenated so I've actually got a URL here and then I've concatenated the icon code and then it'll be dot PNG all right and then the alt tag is simply the label we've got width and height so I've got I've imported the image tag from the next image now we will get an error because we need to go ahead and white list weatherbit.io from our list of images to allow optimization from so in order to do this we simply go into our next config we go out of the experimental tab we say images domains oops images domains and we simply pop in with a bit out.io okay hit save close your term your server run your server once again because you've made a change to your next config and then do the following yes if you're using hero icons V2 then you would need to import the icons from here icons react 24 solid yes I agree with you that's correct yeah completely up to you on how you want to do that so at this point now what we can do is we can go back to our code and we can refresh okay so let's refresh this same weight on my ears today so as you can see now we should see a there we are perfect stuff right now if I go to London for example United Kingdom City and let's just wait for it type in London boom now you can see rain showers with a rain shower icon that's awesome nice so we've got our nice little uh our icon set perfectly working so we go to our div let's start styling out say Flex items Center justify between and now we should have things pushed across in the dev here we've got in this div we're going to say Flex items enter justify between Space X of 10. there we are and then we have our um let's just have a look yeah so that's perfect that's what we wanted and then we want to change our P tag here to be much larger so we're going to say text 6xl font should be semibold the P tag here should be text right font should be ultra light or extra light sorry and it should be text should be large and just like that we should have a massive difference here with this there we go that's looking immediately about all right so justify between justify between item Center or some stuff okay and with that said now it's looking a lot cleaner so I just want to check something here yeah so you can see that's perfect that's what we wanted yeah and now off to this div we want to do the following so after that div we can exit the div down so we can go from this div down outside of here and then we can start building out the rest of it so we've got a div here and then we are now building someone says Bob fam I love you I love you guys too right so after that we can have this area so the sunrise and sun set right so here we've got essentially two copied and pasted kind of setups right so I'm gonna go ahead and make this a little bit easier for you to follow by simply popping in a snippet and then we're going to show you how I break it down so you see this snippet right here so I'm just pasting it in right so you can feel free to revise the snippet and see for yourself what we've just added in but essentially what we did here was we added a div song icon in a bunch of styling in which is just the colors and then we've got a div with a flex inside of it we've got the children one of them into Sunrise we've got a P tag to represent the time and you can see justify between has pushed these across from each other and then you've got the sun icon around it so the sound icon is next to it then you've got the P tag and then you've got the div sorry we'll justify between and it's Flex one so it takes up the majority of the room okay we've got the exact same approach for the other Moon icon except that it won't be sunrise it will be sun set right so what I want to do is go outside of this div simply pop that in like so and now we have the sun set as well nice now at the top level Dev I want to say space should be between each white child and we're going to say padding on the y axis of five and now this is your space to use that and I'll give a bit of padding around it there we go so just like that absolutely beautiful and we have our sidebar essentially complete we just now need to make it appear to the side of the screen when we have the setup correct which means that we have to go to the page.tsx so this is our page for the entire page so now heading back over to that page I want to go ahead and basically configure the surrounding div so this is where everything gets styled out so this div is where the magic happens we say by default on the mobile should be Flex column so it should be in this view okay then what we want to say is firstly it should be a Min higher screen so that way it will always fill up the color of the screen but on a medium screen or above it will change into a flex row now let me show you what happens so as we hit our medium screen boom look at that very nice now the only issue we have here is that this div does not use flex one so how do we fix this we simply go over to the div here which is using that remainder of that space we say Flex one padding of five and I'm going to say on a large screen padding of 10. now let's give it a try we go over here now you can see it's using up the full space and it's got the uh appropriate padding so look at that absolutely beautiful that is absolutely lovely okay really really nice right so look at that it's just so clean come on like so so clean you know that I remember it let's go back to Dubai bam all right we've got to Abu Dhabi I'm sorry enough is this Albania uh initial one go to Armenia I'm just picking random cities here right so United Kingdom back to London because London's obviously got great weather right always raining all right so at this point that's really good right so looking looking really good so let's get the correct time for some set and sunrise oh yes you're right actually so it appears that the API is not actually returning the um the correct times for this yeah you're right so it's 4am um so wherever I put the sunset sunrise so let's go to the information panel and right now at the bottom where is it sunset sunrise okay so it looks like my API call that I initially made was maybe a little bit wonky this is the same 4am 4M oh that's because it means so it's not actually pulling in the correct dates I believe all right we can debug that at the end for sure we can debug that at the end yeah so this is actually what is returning and as you can see the time zone the time was actually being returned here and then yeah we should have had it back and then if we go to Sunrise you can see Sunrise yes we are getting time back which is interesting we're not getting the correct time now okay I mean we'll have a look at that we'll come back to it uh I will check to make sure that we actually conquer that bit because I do want to get that right in fact I just want to check the URL that we initially called so this was the URL that we initially called um so I have a feeling we're not passing in the correct details into our query so I just want to check something let's go to our fetch weather queries Tunisia in the house what's up Rich weather queries right so I'm just going to check something right now we have the weather code temperature and all that good stuff this guys just like so I just want to double check that I have this perfectly written yep so that's the exact same and then when I call it is the next question so when we have the page and then where is it it's here so uh in page let's have a look let's just double confirm this so the variables that we pass through is the same yeah uh okay so it's interesting I'm not quite sure to answer I think to be honest what could have happened is it could have Maybe let's go ahead and disable the cache and refresh interesting we'll have a look as to why that happened afterwards so right now my yeah my time isn't seem to be rendering correctly interesting all right um let's carry on and we'll come back to it so I think the next natural step is the charts let's get the charts down and then we've got GPT summary and then we are good for deployment which is amazing all right so let's do first up is the temperature chart so for the temperature what we will do is create a component so temp chart dot TSX and this is essentially going to be once we do one of them honestly it's very easy to replicate right so rfce and this is going to be a temperature chart it's going to take uh the score up get rid of this it's going to be a used client because we are using some stuff from Tremors we're going to import the things that we need we're going to have a type props and this will have the following inside of it we'll have results which is of type root okay temperature charts is going to be the results okay that's the prop that comes through it and now we need to do the magic binder so firstly let's just show what we're going to render so here it's going to be it doesn't matter if it's TSX yes because TSX is essentially saying you're returning jsx as well right so it's TSX right so in this case we've got the card and that's weird I'm getting the card and then here I want to have the title this title will say temperature and UV index because it's going to contain both the temperature and UV index now feel free at this point as well to also pause and go over to tremors.io to look at the line graph documentation they actually break it down really easily really nicely and then you can come back here to kind of you know inspect how I've done it but here I'm going to use something called an area chart and then we've got to do a bunch of things right so we have to give it a bunch of information so we have to firstly provide the data now the data here we have to map it into its correct format and we also have to do the same thing with the hourly information now the hourly information that comes back from the API if we go up to hourly what you'll find is that this has information for every single hour one two three four five six seven eight nine ten eleven twelve all the way up for like you know a very long time we only need the first 24 to get the day right so what we will do here is we will say well basically we're going to only get the first 24 right and we're going to change each of them to a 24 hour um time instead so we're going to say const this is called Data transformation right it's going to say cons hourly equals results dot hourly so results could be you know we have to protect ourselves dot time dot map right and for each bit of time all I'm doing is I'm returning so I'm directly returning a new date whereby we pass through the time and we'll say two local string oops got two Locale string yep and then I'll say dot en US and then I'm passing in the hour is numeric and the hour 12 is going to be for false because I want to be in a 24 hour sense and then what we're doing is we're mapping through at that point and then we're going to slice now what the good thing about this is I want the first up until the 24th value so this will give me every all the only the first 24 hours right from this so I'm basically correcting this down now and this will basically become zero zero zero one zero two zero three zero four all the way up into 24. okay so that that's actually a really nice little trick you don't know you you may not know yeah so in this case the next one is we need to prepare the data so the data has to be in a specific format so I'm going to map through those hourly things that we just went ahead and uh provided then I'm going to go ahead and say in each hour and we also have the index and I'm going to return a object so I'm doing parentheses with a curly brackets inside first key is going to be the time and this is going to be the number wow so I'm passing the hour as a number okay second is going to be the different things we want to have on our graph so you know our y uh our x-axis so in this case we're going to map against the UV index or the actually this is going to be the time will be the x-axis the y-axis is going to be the UV index and the temperature so in this case it's going to be UV index and this is gonna have yep so it's gonna be UV index and it's gonna have the results the hourly UV index and it's going to be high yep and then we're gonna have the temperature as well now the temperature I'm going to say temperature and I want to have C4 Celsius okay and this is going to be just like so hourly temperature tumors and then it's I so now what we're doing is we're mapping through and we're putting the data in the perfect way in which area chart expects it okay so let's start styling out so class name is going to be margin top of six and then this pass through the data so the data is coming through like so we're going to say that we should show The Legend we want the index so what is the x-axis essentially well this is going to be the time right so this is going to correlate to that sort of time then we have the categories now this is going to have to exactly match the key values here so temperature and UV index then we've got the colors now each one that we pass in inside this array will correspond to so yellow will be for temperature rows will be for UV index then we have the minimum value the minimum value here we want to set to a manual value of zero and then we've got the value formatter so in this case you can format each of the values now I've essentially just made it very simple so every time you look at a value on that graph it's going to format with a value of Celsius right so yes I know it doesn't it's not going to be UV it's going to be Celsius but for this one instance I'm letting it go right just for demo purpose right so it's completely fine but I'll show you it'll make a lot of sense what happens and then the wax his width is like essentially padding on the y-axis for the legend right so we have our temperature chart so now if I go to my page and I simply replace this with the temperature chart like so and then we pass through the results right so the results will be the results here I go to my local host I hit save and I refresh and hopefully we'll see how this goes so now you can see oh look at that guys so in bernage right now it's pretty wild actually oh my god oh so this is 444 okay so the time is not being passed correctly so we've won the same issue that we had previously so I need to inspect and debug so right now the data coming back is not returning the results that I expected to right so what we need to do here is actually I need to actually go ahead and inspect my results so I want to inspect firstly the daily units so let's just go ahead and console log just a daily refresh and I want to have a look what's Happening Here so if we go all the way up here you see it's quite quite intense actually how much we get so let's look at temperature so what is our x-axis firstly let's have a look so let's go to our temperature chart so temperature chop and then we mapped hourly dot time okay so hourly dot time is what I had to inspect so let's have a look at that hourly so we're debugging right now so hourly dot time and let's have a look at what values are coming back right so I'm going to go ahead and refresh and you can see no so we're not actually getting any time back so this is a bit of a problem that we have to fix right so why are we not getting our time values back is the question that is the golden key so right now I believe it's because we're not doing the execution of that query correctly so let's have a quick check at our code and let's have a look what's happening so it's because we did not we did not do our setup correctly I believe with our query so let's go back to our this is good yes let me go to our Apollo client that's fine no sorry steps in uh Co index here we are right so we've got the forecast we've got our current weather our daily our hourly our latitude longitude and time zones right and then we've got everything here now I think what I've done is I've made a mistake with the way I'm reading the information so I have a feeling my type definitions might be wrong so we have time is date time and I just need to double check that everything is correct as in what I saw before so hourly dot time so hourly so like hourly and then we go to the hourly time is daytime so I'm just checking on my other machine so hourly daytime string so I believe the issue here is actually that the time is being passed as date time here when in fact it should actually be a string value so this is going to cause an issue so we're going to change this to a string value and then what I also want to check is um that we have that correct in other areas so we're going to change that to a string value and then where we have time here that's great sunrise and sunset should have also been string values so this this and this or should also be string values right so not date time but string values I believe that's what's happened here so let's now do the call again so refresh and let's it would have cached the page so you would have to refresh with disabled cache on the network tab and boom look at that guys that's what debugging is about oh yeah got the timeout so we got the correct time now which is banging it's just the hourly market so my size function is clearly not working here this is doing the entire day this is like days and days and days of there which is not right okay so we have to now get this correct so basically go through your schema and make sure that it's not date time it's string so you can remember it's trying to interpret itself so very easy fix that but we found it so now what I want you to do is go over to your um this is now we need to go over to our temperature chart and we need to basically find where I'm slicing because this is what I'm basically screwing everything up so where I messed it up was here so let's cut out the slice let's do this so for now if I map through where's my ending map so my map finishes here what I was making the mistake of is I was slicing here which is not correct afterwards we want to slice here 0 to 24. that's correct now what you'll find is if I hit a refresh boom that's what I'm talking about guys now I'm slicing the correct values so look at that so now we're getting 24 up into 23 that's perfect so this is kind of midnight one two three four five up until 11 o'clock on that night that's amazing that's exactly what I wanted I'm very happy with that right now at this point you could also you could obviously slice if you didn't want this you could do like one up until 25 or whatever you want to do it's completely your call okay um violin says I just want to drop you a quick message to say thank you for teaching react.js and great builds your teacher style is really easy to follow and I learned so much from his tutorials thank you thank you so much that's absolutely awesome and um yeah I appreciate you for that that's absolutely a very nice comment for you to say so thank you so much okay but this is uh this is good this is very good right we're making good progress here so now we have our temperature graph nailed in and you can see here look that date format is putting a Celsius on the UV index if you really want to make this perfect honestly what you do is you go to your date format and you just return the number right because you already got the Celsius in the in them the other bit but if you wanted it to say Celsius and by the way what you'll find here is when you re you have to refresh sometimes for the responsiveness to kick in right because you are rendering over off so you may get little issues like that but it's completely good right and even if you go here sometimes you see like it doesn't refresh but if you refresh when it rebuild it will get it perfect okay so don't stress it is responsive right so in this case UV index perfect okay now let's do the other graphs so we've got this graph down and I want to do the exact same thing but for another graph so I want to copy My Graph and I'm simply going to go ahead and change my temp chart to oh this reminds me of the twitch days so we're going to change this one to rain chart now rain chart dot TSX and what I'm going to do is I'm inside a range chart now I'm going to go through and just refactor some things so I'm going to say chart this is going to be called um my range chart okay uh the exact same things are going to apply we're gonna have the same slicing happening for the hours except here we're only going to have one uh in uh indicator here and we're gonna have a rain percentage rain percentage and what we're doing is we're saying hourly precipitation probability right go back down here we say chances of rain chances of rain okay and then for the area chart here we've got the exact same situation except for here what we're going to do is we've only got one index we don't need this one we can keep it as an array it doesn't really make it too much of a difference and this one has to exactly match up with this so we pop that in there get rid of the second one and data formatter we can actually go ahead and safely say its percentage now for the percentages your max value is going to be 100 your Min will always be there so that is how we always work in percentage world so rain chart there we go now what we can do is we simply import it into our page so go back to our page head down to where our other one was and we say Ranger like so passing the results like so and just like that we now I'm just going to make my camera a little bit brighter there we go and just like that we have chances of rain zero so let's look somewhere where it's likely to rain right so you can imagine where I'm thinking United Kingdom all right so London always has rain right now today yep I told you it always has rain right so in this case like 87 chance of rain at four oh the timing's also messed up here oh God okay so I fixed it and then I broke it so where did I fix them what happened okay let's have a look so okay I've gone back to not fixing something so let's go back to our steps in call I had this all fixed no come on oh okay so the reason being sorry why you might see this so this is a very good learning point what happens is it's caching right so you actually did everything perfectly but you had a cash value in the Page hit the refresh button with this disable cache and then you will get the fresh data so that is something you have to be very careful of okay so disable cache in the network tab when you're deving you want to make sure you actually update that because now you can see that it was fine but you'd sit there for ages trying to figure out what the hell is going on right someone says check for Serbia Belgrade Serbia Belgrade let's see oh there you go nice there you go I'm seeing I'm with you dude um really good stuff all right let me know Kakashi if that's correct but in this case now what we can do is a final one which is actually the um the humidity chart right so we're going to do the same approach guys we're going to go ahead into our rain chart then we're going to go ahead and we're going to rename it to humidity chart all right humidity chart dot TSX right so humidity chart we're going to change range chart to be humidity humidity okay and then we're now going to go ahead and just basically Swap this out with the information from the humidity right so fairly straightforward all we're going to do here is swap out where it says rain I can press command D to get multi-cursors humidity change the precipitation probability to the relative humidity two minute marker and then it's still going to be percentage and everything else is pretty good except the color here I want it to be till okay hit save and this one the max value we're not going to have a zero oh actually we are because it's going to be I guess it's going to be up to 100 so that would be pretty handy to have it there and then what we do is we simply go ahead and we take our humidity chart we pass through the results just like so and we make it a self-closed component we hit save and we go ahead into our page and we see for ourselves the results and I think I've forgotten one thing yeah I've forgotten to change chances of rain but you see the humidity is there uh let's just go into the temperature and yes you could probably make a responsive um you know you could probably customize this with different props so that way you're not you know passing in the same kind of data because you could make this a reasonable component really right this one will be humidity levels so humidity levels awesome stuff now just like that we have humidity levels looking bomb right so that's absolutely beautiful right and then the UV index is 6.2 if it's high but otherwise it feels lower than that it wouldn't be so someone let me know if it's uh if someone says a summation program seems to be wrong sometimes no so the time is actually correct but it's offset against um Dubai time so in Dubai at 342 it would be your Sunrise that's essentially what's happened right so that's where the offsets happened and the sunset in Dubai 531 would be belgrades um Sunset so that's actually what's on there so what you're doing is you're looking at this in regards to so for for me that would be your sunrise that's essentially what's happened yeah um okay so next up guys we have the fun part the part where you've all been waiting for and everyone's been very patient I must say yeah so now what we're gonna do is we are actually going to go ahead and create um the chat GPT section of the build right so now we're actually going to go ahead and pass in the data from that massive Json that we had we're going to clean the data then we're going to create an endpoint which communicates with open ai's API and then we're actually going to use gpt4 and you can use GPT 3.5 to go ahead and create the summary and the summary will be looking like this and it will essentially go ahead and provides a perfect breakdown of what the hell is going on right so really really amazing stuff uh time zone is in Asia to buy yes this is um Asia Dubai yeah this is 527 is Asia Dubai that is correct um there you go so let's come around so at this point now um so it's doing it relative to me okay so that's what I was trying to say so now what we're going to do is someone says how are you I'm doing well thank you how are you all right so at this point we are going to also before I carry on let's actually Implement a loading right section so where we have um any loading situation right so uh in this case if you're at the home screen and you are initially loading for example a page right so if we go back to the home screen and you're loading a page right now you're just waiting okay so at this point what I might do is I'm going to use nxjs13 you've actually got this beautiful thing you can adjust the time zone um according to see chosen but I'm not getting into that right now because there's a lot of things we have to do you can feel free to extend it yourself do that right loading.tsx so rfce boom that should is relatively easy in the grand scheme of all of this stuff right so loading um and now what I'm going to do is I'm just going to have a simple loading now I'm not going to spend too much time describing how I built the loading screen it's very kind of straightforward in regards to the actual stuff that I'm putting on there it's just a div with a bunch of stuff inside of it and this is the styling we have so it's going to be a sun icon loading City weather information hold on we're crunching some numbers and so forth now I want to have the same loader it will actually carry over but I found that in some cases it was being a bit weird so I'm going to put the same loader in here now that means at this route we're going to load it and at this this route we're also going to load it but typically it should just kind of use the highest level one if it doesn't have one at a local level now with that said what we should find is anytime we have a blocking element for example this is a blocking element sorry this one is a blocking element it will go ahead and cause the loaded kick in so if we do country for example Albania we do something like um Delvin look at that loading City weather information boom nice right and then if we do Albania so I'm just doing Albany because it's there bro boom and if I did like United Kingdom because we already have a cash value it shouldn't actually load very much so it'll be London boom you see that because they already had the cash value so they actually need to load it right the only thing that I would recommend here is because you've got cached values you still want it to revalidate after a certain point in time so to make sure that it revalidates you can do a very simple change here go to the top simply pop in revalidate export cons revalidate 60. now every 60 seconds it will revalidate the cache simple as that now you've got ISR you've got incremental static regeneration of that static page so every 60 seconds it will trigger a rebuild of the cache page provided that someone has visited it so that is absolutely awesome right quick little water break and then we're going to go ahead and do chat GPT so we've actually implemented the Alby says you're the best bro thank you so much I appreciate you man right so at this point now we're going to create the endpoint for open AI all right so what we're going to do is we're going to use the new the brand new open AI um brand new nexjs13 Roots right so in this case you see in the app we have our API and we have a Hello route right so this is simply a hello sort of um endpoint right now I'm going to delete that because I don't really care about the hello endpoint and then I'm going to go ahead and create a new API endpoint called get weather summary get or whether summary okay and it's time to get where the summary the new syntax is all you need to do is type in root.ts cool and now inside of root.ts we are going to basically create a post request support right and what's nice about this is you can go ahead and you know support post requests get requests put update patch all that kind of stuff but here this is how you do a post request you could do the same forget and so forth right but we're going to do only a post request to support at this route very simple then what I want to do is I need to install open AI so we're actually going to be using open ai's API here so let's head over to open Ai and this do open AI documentation so API documentation and something I want to mention is that in the zero to full stack hero inside of our course we have actually gone through this extensively in recent coaching calls so I highly recommend if you're on the fence you kind of want to you know learn a bit more about this stuff and you want to do a deep dive check us out at zero to full stack hero or scan the QR code on the screen right now right and that's going to help you basically get dialed in with any of this stuff because we've done this loads and coaching calls so we're going to install open AI at the package so let's go ahead and do it right now so come on J and then I'm going to go ahead and pop in like so so remember make sure you're in the correct folder so the top level install open AI like so now while that's doing it we also need to have an open AI key all right so this is very important because you need to pass it inside of your requests right so what I want to do is go into my personal view API keys and so forth so I've got a few Keys here you can go ahead and create a new key now it's worth mentioning yes you do get a free tier I believe when you're using open AI so chat GPT 3.5 you're getting a free tier and it's also worth mentioning the chat GPT GPT sorry 3.5 turbo is extremely cheaper than a gpt4 because gpt4 requires a lot more kind of that calculation intensity I guess on their side to go ahead and process your input and output it's also slower than GPT 3.5 turbo so it's something worth mentioning so if you're testing this out I I ran up like five dollars but um you'll get a free quota here so you can probably use your free coil for as long as you want but I added a billing card to my account so I could just keep testing this thing I didn't care about paying ten dollars whatever so you can go ahead and do that right so in this case um what I'm going to generate a new secret key so I'm going to click on this I'm going to name my keys so I'm going to call this YouTube demo key and then I'm going to go ahead and create a secret key so I'm going to go ahead and create it right now you guys thought I was gonna give away my key didn't you then I'm going to copy that key right so now I've copied my key okay so copy that key and then you go back to this screen okay so now I've got my YouTube demo key here and then what I want you to do is go over to your environment file okay so head over to your environment file where's mine I'm going to click into it I'm going to hide some Delica environment Rafael information right now so I'm going to go ahead and hide some quick little information as I show you something so I'm just gonna pretend that I like I'm just gonna comment this out one second okay I don't know I do my little trick okay my trick don't work anymore um but what I'll do is I'm gonna hide this so I basically got rid of one of my keys and then I've gone ahead and said open you should have had your API your next public steps in API key here as well but now I've got my open AI API key and I will paste that value here okay so I'm going to go ahead and paste that value in so now I've pasted that value in and then I'll put back my old key the one that I've just removed a second ago so you should have in your environment file I'll just say it out loud you should have your API URL you should have a next public steps and API key I just have an open AI API key okay so those three things save and then close your file cool now we have our environments out okay so that's done and then we have our open AI should have installed correctly there we go it has installed right so cool so now what I want to do is I want to import two dependencies into my project boom like so and here you can see our open AI cannot find open AI or it's a corresponding oh yeah because now I need to actually create a helper file so at the top level at the package Json level create a open AI dot TS file okay now inside of this openai.ts file we are going to go ahead and create a little bit of a setup file for us right so this is very simple we're simply going to import two things configuration opening and the API then we're going to create a new configuration by passing in the open AI API key so this has to correlate to your environment key value okay so then you export it so you basically create a new open AI API configurable bypassing the configuration so this is your connection to open AI then we explore it so we can use it so heading back over here now if we do this why is this freaking out so at this point where's my open AI I should be completely fine I'm not sure why it's being weird yeah so there you go it's working okay yeah so we have our post request now so now we can do the magic stuff right so here I basically I'm going to pass into that post request some data in the weather data part of that Json object right so I'm going to pass through some whether they are in the body right so this is going to be weather data is going to be in the body in the body of the post request right so imagine that comes in in the body of the post request then what we'll do is we'll say const response equals a weight I open AI dot create chat completion okay so create chat completion now here's where the magic happens really right so the first thing you want to do is put the model in okay so model is going to be essentially it's going to be gpt4 if you have access to the gpt4 API I do have access to the gp24 API so we can use it but if you don't have access to it that's fine okay you can use the GPT 3.5 turbo which is available to everyone and it's also worth mentioning that this completely works fine with the build right so you can use gp2 3.5 as well right but I have got access to gpt4 so we can use that okay next up you will get a 401 if you try to do this with gpt4 and you don't have access to it right but you can request access on the website so in this case now we're going to go ahead and say temperature is going to be 0.8 this is a value between 0 and 2 and basically symbolizes how random or focused it should really be the number of responses we want is one we're going to disable the stream because we only want the entire value to come back in one go and then we're going to pass in the messages okay now the messages is an array of items right so we need to basically pass in the conversational aspect of what we're going to be doing so the role in the beginning is going to be the system message this essentially sets up what the context is for the chat so you can use the system message in a way to be like you you should pretend that you're a weather news presenter and you're going to present the news in this kind of way and all of that kind of stuff so you're basically setting it up before for the chats even begun and then you can provide a second piece of information saying hey actually here's the today's weather in this format and this is going to be the Json information and then what it will do is it will give us the response back right so it's going to be perfectly primed in a way to give us back the information that we're after so what I've done is I've been a bit Overkill here just text and like be a bit crazy about it but I've said pretend you're a weather news presenter presenting live on television be energetic and follow Charisma introduce yourself as Sunny so you can introduce yourself as whatever you want and say you are live from the pop-up Farm headquarters State the CEO that's providing a summary for then give a summary of today's weather only make it easy for the viewer to blah blah blah okay so you can go ahead and do that kind of thing yeah so um and provide you provide a joke regarding the weather assume the data came from your team at the news office and not the user because what was happening it was like it was saying to me oh based on the Json data that you provided and I didn't want it to say I just want to say hey tuning in we're from sunny at the headquarters of Hub Farm the weather today is so forth right so that's what we kind of wanted it the next one is you're going to pretend to be the user and the user is going to say the following the user is going to say we're going to do string interpolation here it's going to say hi hi there can I get a summary of the weather there's going to be something that's high there can I get some of today's weather use the following information to get the weather data and then what we're doing is we're stringifying the weather data so it becomes a piece of text right and really this is quite nice right so what this is actually doing is it's stringifying that data we're not going to pass the entire data in by the way we're going to clean it up so you're not going to pass that entire chunk because then you're you're running through your tokens like nothing right um and bear in mind that this can be token exhaustive right if you look at this this could be actually considered quite a lot of tokens so just bear that in mind okay so if you're going to run through your quota pretty quick and consider maybe adding a card just while testing this out that kind of thing right then we're going to basically get the response the data out of the response okay and then what we'll do is I'm just going to debug here so I'm going to say something like um data is and then data and that allows me when I'm debugging it it's actually a pretty handy thing that you can do and then all I care about is what did it reply right so next response data.choice is zero would be the first response that you gave us Dot message right and if everything was successful this would have the response for the summary inside of it okay cool so at this point now what we're going to do um is we're going to go back to my page and we're going to go ahead and create a clean up function so something which allows us to essentially clean the data so the reason why I need to clean the data kind of function is because I don't want to pass in the entire object right the entire results because the results is so big that charging Boutique and right now even on the um even on the gpt4 model it can it can handle up to 8K context or the bigger model can end up with 32k contacts but you're paying per that many I think it's like three cents per like a thousand uh tokens or something like that but the point is you're like we want to minimize it right we doesn't need all the data especially if it's only given me the things for today all right so we can actually save ourselves a lot of money all right so what I'll do is I'll go ahead and I'll create inside of our lib folder I'm going to create a clean data file and what this will do is just basically transforming it so it's a lot cleaner so we don't have a lot of the bloat behind it okay now what I'm doing is I'm saying clean uh const clean there unclean data equals and I'm passing in two things I'm passing in the data which is of type root and I'm passing in the city which is of type string okay and then what I'm doing is I'm returning I'm basically saying the following thing so I'm taking the following properties from the um uh I'm taking the following properties from the following so I'm stripping out the current weather at times on hourly hourly units and time zone abbreviation from data okay then I'm stripping out the following from current weather so then I'm getting the temperature wind speed wind direction weather code and time from current data work from current weather then I'm getting the sum specifics from the hourly because I don't care about daily and all that kind of stuff I just need from the hourly information I stripped out I need temperature snow for rainfall relative humidity precipitation UV Index right now with that said I'm going to return a new object only including some of this information right so I'm going to say return and then what I'll do is I'll return the current weather with a key value like this uh welcome to the stream Leo let's see we've got the current weather then I'm gonna have the hourly information which is going to be the following and what I'm doing here is I'm passing back the temperature snowfall rain relative humidity precipitation and UV index but I'm slicing only the first 24 hours worth of data so that way I'm not including all of the extra information because otherwise what's going to happen is you're going to have so much extra information but it just ruins your quota with chat GPT right and it's just pointless then we've got time zone city um a time zone abbreviation alieners and City I'm passing in and actually extending the object to so now we have not only a smaller object from the initial large results object but now it's also got the city uh character in so that way when I pass it to chat GPT or gpt4 it knows what it's doing okay so it knows what city it's in sorry that way it can kind of provide that useful information okay so now what do we do we go back and where we have the results here I'm gonna have a new variable called Data to send right all the results to send and what this would be is it will be we're going to say clean data I'm going to pass in the results and I'm going to pass in the city okay and that will be the clean data yeah and then what we'll do is I can get rid of this now I'm going to say const res equals await Fetch and now I'm going to make a call to my back end right now I'm also going to make a helper function here because what we need to do is we can't just say four slash API for summary because we're in a server function now the server function does not know where it is right it doesn't know if it's relative path is localhost or if it's relative pass if there is is the cell URL so I'm going to create one more helper function in lib and this is going to be called get base path right this will tell um our basically our code where the hell your base path is right so this base path is going to look something like this we're going to say export default get based path and what we're saying is if you're in the development environment it's going to be low cost 3000 otherwise and obviously you can then go ahead and even go further with the port number and what otherwise it's going to be https forward slash process and the cell and this is basically once you've deployed it that's where you'll be deployed to the cell will automatically be given to you and then that would be your base path okay and you can get some debugging issues when you're having this bit so make sure you take care okay so here what we'll say is we'll do the following we'll say uh get base path like so forward slash API forward slash get weather summary okay so four slash get weather summary and then we have the object and it will be a post object the headers are going to be content type application Json the body is going to be a stringified weather data so in this case we're going to pass remember the weather data is what we set up our route and we're actually going to give it the data to send not results okay so that way it's a lot more cleaner in when it's dealing with it now then we'll go ahead and get us back the GPT data right so what we can do is we can get the GPT data and pass it out so just like so and then we can go ahead and extract the content out of that message okay so we can extract the content out of that message now once we have that we can basically go down here and remember where we say this is where the gpt4 summary will go we can actually go ahead and straight away put that here now if we did all of that correct what we should have is a clean data function which will clean out the results into a smaller more efficient object we will then go ahead and make a request to our API which will then go ahead and pretend it's a weather presenter it will use gpt4 it will be connected to our correct configuration with our open API openai key and then it will return us the data which with the message inside of it and that will basically will pull the content from that message and then we will pass it into the call out card okay and now with that said we might have everything optimally done so clean data let's go ahead and refresh so it's loading the city weather information clean there is not defined okay so where is clean data I don't think I've actually exported clean the ls problem yeah I haven't so clean data yeah so we didn't export it my bad export default clean data and then we go down here import clean data and now let's give it a try guys so let's go ahead and remember you want to go ahead and disable your cache when you do your first reload clear this out so now it's loading the city weather information and remember what is probably going to take a little bit more time for in the initial run is that it's actually calculating the GPT summary and gpt4 is known to be a lot slower than GPT 3.5 turbo now this is using gpt4 right now to come back with the summary so let's see if it did it all right let's get hyped up because this is a moment of truth if it's gonna work this would be so cool but we're going to we're basically doing it for London right now it's generating that chat GPT AI summary using gpt4 it might take a little bit longer and I'll show you the speed difference with 3.5 turbo as well but remember once it's done it will only revalidate every 60 seconds so users won't actually see this every single time okay I just want to check something here um let's go back over here let's just see it did it um actually okay so it's come back with some data look at this guys it used up total tokens 983 um and it's doing it a few times over so let's see maybe I refreshed it a few times oh guys look at that ladies and gentlemen it's time for some weather action I'm Sunny coming live from the proper fam headquarters bringing you a fantastic summary of today's weather for the lovely city of London all right folks get ready because you got some interesting weather coming your way the current temperature is thinking at a cool 9 degrees Celsius yes it is with a wind speed of 9.2 there we go and then coming from the 11 116 degrees Direction awesome I think I messed that up that should be kilometers per hour as for the weather code it's a which means we've got some light rain showers and that's perfect to bang on we'll be experiencing some light rain but no don't worry snow levels because there won't be any snow for today in terms of humidity and then now for those of you are concerned about the UV index it will range from 0 to 5.4 so make sure you wear some SPF if you're going outside because it's if it's higher than three just to be on the safe side and then it even gives you a little joke right why don't meteorologist like to die in Outdoors because it's too windy but um okay that's jokes right so in this case no if I go to United Arab Emirates let's go to Dubai and hit enter now you can see it's loading City weather information for Dubai and remember as I said gpt4 will take a little bit longer right so just something to remember now I want to show you something once this is loaded it's really worth mentioning it will cache the previous page and it will do it for every 60 seconds based on if someone has visited so they won't see this long loading procedure right it's only the first user to ever hit that page so after that it will happen in the background and the user will see the previous summary and then every hour it would always be up to date so it's actually really really nice as to how this will work right so let's go ahead and see this right now so I have to remember again gpt4 a little bit slower I will show you the difference between 3.5 turbo and 4 but this is absolutely phenomenal because once this loads out it will be incredible and I'll show you again remember it will actually go ahead and have a really nice effect once you have the caching in place so let's go ahead and see um once that's done just give it let's give it some a moment right so this will go ahead and do its thing and the data is right so in this case it's still coming back from us all right so let's do this thing right uh again the demo goes always against me so right now there you go you can see it look good morning everyone this is sunny coming from a beautiful city of Dubai the current temperature is a warm 28 yeah we go win 15.6 kilometers oh yes I definitely change that as we progress our day temperatures will rise that's awesome stuff look at that the only thing is the time came back weird that's again strange and this means today is oh because I okay so again remember disable your cash right so let's refresh let's let it do one more build for that that was my fault again this is something which I'm really happy you actually saw because caching can be a bit of a concern especially when you're coding you might be like hang on all my code is sound why is this happening right um so yeah this can be a bit of an issue so uh area code is very several components yeah react context is when you're basically you're probably using a client you need to have a client component um you need to convert something to a client component again we cover this in zero to full stack area it's a bit difficult to tell you right now on the stream but definitely check out my next.js tutorial if you're getting errors like you know something is unavailable in server components on my channel it's an xjs13 crash course right it's basically a crash course telling you how to convert things over and that kind of stuff yeah so in this case we'll give this a second to do his thing and I will show you so um it's actually not too bad waiting for this in that sense so you don't like obviously this would be a bit long for a user in my opinion and again once you deploy to the cell it's worth mentioning that anything over 10 seconds in a cloud function requires that paid platform right so uh it can take a little bit extra so now you can see look the time came in after we cleared the cache and then bam look at that it's really really nice and it tells us that the buyer is going to be blazing hot essentially right hello folks sunny here coming to you live in the popular and now I want to show you something okay let's go back to London and then you're probably thinking oh no but it's going to load all that long time again bam see how it's really fast right once it's done it once it's cached it if we go back to Dubai boom that's what I'm talking about right so that's actually really powerful because now this will be cached on the vessel right or the cell side so what will happen is it won't have to go ahead and redeploy those or figure out those static assets it will only do it after 60 seconds uh whereby somebody will see this it will trigger the rebuild in the background and then the next person to come on will get the new version right but in this case in weather sense you don't really care if it's like you know a minute out or something like that it doesn't really make a difference right because you're getting the overall Day summary of weather so this is actually really really awesome so in this case you've got a nice little setup now I would probably recommend you change that revalidate to even a day because you don't need to know per hour the difference so I would probably change this to be like 60 times by 12 um 24 sorry so probably one for four e so every day it would pretty much revalidate but just so you can you know it's kind of doing this right um why not show about it after it gets fresh show it then too why not show all stuff about chat DBT 4 section after it gets fresh and show it too you can do remember right now the way we've implemented it is this so this is a blocking component right so I've just done it at that top level if you really want you can go ahead refactor it around change things up um it really is it's your call right honestly I want you to extend this app and change it up you can do it as you wish right now I've simply got a loader showing because it's blocking at the top level okay um so now what I need to do is I want to showcase something I'm going to show you the speed difference of if you haven't got gpt4 access how can you do this build right so all you need to do is change the model here to GPT 3.5 Dash turbo and there's other models as well right so you don't have to just use these but let's go ahead and try somewhere new now all right so sport sometimes says Smiles then you smashing it thank you so much dude Albania let's do um somewhere like samil so now notice the speed difference here right there will be a noticeable speed difference this will be actually a lot quicker than gpt4 although the answer may not be as profound but it would be something to just bear in mind it would also be a lot cheaper than gpt4 so you see how that was a lot faster yeah and it's still pretty decent right like I would still accept that fully right and then if we go to United Kingdom we go to London for example our previous value will still be cached I believe so yeah it's still cashed right and if we go back to United Kingdom and let's go to like for example Manchester right Manchester boom now you'll see again it's loading that one because it hasn't fetched that previously so this is a really nice balance between xjs13 some new features a lot of this sort of you know uh Magic behind you know ISR that kind of thing and how it can fetch and cash on the vessel side but um something to definitely mention Kakashi what if you saw info about last day town and we tried to access the latest response whichever would be the same um provided it's within the revalidation window yes but look at that it's a lot faster doing it from um GPT 3.5 I would recommend you probably use this for this approach because it's really not gonna be such a big difference except I'll be honest with you it'll be a lot cheaper to do GPT 3.5 okay but it's you can do it as you saw for yourself we can use gpt4 to get a really more like high level accurate remember gbt4 will give you a better answer it's a lot more of a higher trained model and so forth right um because like similar in Google how beautiful beach is that oh nice all right so in that case face that's awesome so let's I think at this point guys we are ready to deploy right so we're about to go ahead and deploy this bad boy of an app where I'm almost literally so close to 500 likes as well absolutely awesome like this video is gonna blow past a thousand I already know it right so this is absolutely huge let's go ahead and deploy this thing so first thing I want you to do is you can go into your um browser so you need to I'm going to show you a few ways right so you can you can actually go ahead and um inside of the cell sorry so you want to go to the cell and type in CLI so type go to Google type of cell CLI install this CLI right so you want to go ahead and install scoby I've already done it you don't need to I don't need to do it now at this point I'll show you a very easy way to install you can do it with GitHub but I'll show you an even easier way so at this point go to the top level of your app over here and I want you to type in the cell right now what this will do is it will set up a and build a kind of app for you so set up and deploy yes right now it's worth mentioning now I have set up a team okay if you did deploy it on on a normal hobby plan so the normal hobby plan will basically fail now the reason why it will fail is because when it does that chat GPT step that cool that functional that sort of functional um when I say cloud function is essentially when it uses it makes that request as a post endpoint it's going to take longer than 10 seconds and because it takes longer than 10 seconds to do that call it's actually not allowed in the hobby plan so anything over at 10 seconds you need a paid plan so you can go ahead and do it but you could basically dummy it up and make it a bit simpler so it maybe didn't take as long or use a simpler model which is even quicker but it might just not be as efficient or bad as as high quality on answer but in this case I went ahead and set up a YouTube Team on the cell and this one is actually going to allow you to go ahead and do it so on the cell you can do that I'm going to link to an existing project no project name steps in weather app YouTube directory yes and then so forth so when you deploy it on a team you don't have that limit of 10 seconds right want to modify these settings no that's fine and it will deploy now here is a bit I want you to pay attention to it will show you an inspect now this deployment will fail and I'll tell you why it will fail because we haven't got the environment stuff set up so I've got a trial you can also get a 14-day trial just to try this out as well so set up a team account so you just go here and you set up a team they blocked one of mine because they got spammed with a on a YouTube build but your personal account a hobby one will not be enough to get past that 10 second limit when you're basically using GPT right so now I want to go I want you to go to your overview steps in whether YouTube app and I want you to go to your settings and hear environment variables so here what I want you to do is go over to your environment variables and basically hit enter right so I'm going to hide the screen because I don't want to reveal my key so hit enter now you're inside your environment variables file I want you to select everything with command a and I want you to hit copy okay now once you've hit copy I want you to go back over to your um to this screen right here and I want you to paste okay so you're going to paste here so I'm going to go ahead and paste now so I'm pasting and then what we'll do is I'm going to click on save so it shows me three things environment production so I've actually pasted it in so I pasted those values in there and then it's got production uh preview development and then I'm going to click on Save okay and as you can see now I've got those three things now the only thing I need to change the API URL and the um yeah the API URL so this one I set it to your localhost by accident right so this one localhost so here what you want to do is you want to edit this because this has to be the actual value that we deploy our graph our steps and API to so here you want this to become this your API URL so when you start up your step then it will tell you what it is and this is your live steps in deployed URL on you and that automatically gets deployed for you every time you start it up right so we're going to go ahead and click save now I have my step 10 key I have my open AI key and I have my API Ro all set and then what we want to do is we want to re-trigger our build okay so we're going to go back to here and I'm going to go ahead and type in the cell dash dash prod cool and now we'll do that now once that's done I'm going to go ahead and do the following so let that do a thing and what I will do is after this build I will go ahead and cut my keys so that way it doesn't go crazy on the billing um because obviously it's going to be live afterwards so this will now trigger a build okay and then it will trigger the build and as you can see here it's going to start my build off and start basically preparing everything it needs to get it up and running okay so let that do its thing pretty chill this is oh one like away from 500 likes no way that is so cool let's go I'm gonna get some hyped up music okay let's see if it works right I'm guaranteed there's probably going to be an error but if it's not amazing yeah because there's always some error when you're dealing with this stuff that's yeah [Music] all right so assigning the domains let's click on it boom it gives me the URL let's go to the country I'm gonna go to United Arab Emirates Dubai let's see did it does it crash on me does it work does it you know okay okay I'm not super celebrating yeah I'm not celebrating just yet at this point if you're on a hobby plan it will likely fail because it will take longer than 10 seconds so yes you have to go to the the Pro Plan on the cell all right so the cell create a team make it a Pro Plan you get 14 day trials you can try out but let's see let's go that's what I'm talking about guys it worked that's so sick and it works on a production website you guys can feel free right now to go to the chat look literally go to that website look I just posted it in the in the chat yeah boom let's go there right now and it will work that is absolutely sick yeah so feel free for yourself and in the chat right now let me know is that page loading for you right I want to see right now is that page actually loading for you yeah and you guys can see for yourself on the live stream that I'm not capping that's a real website I just posted it in the chat so you can feel free check it out and let me know in the comments is about loading if it is loading amazing stuff yeah Steve James has loaded right away that's what I'm talking about yeah and even on the phone it will load you'll get the nice AI summary everything Eduardo says a nice jsons works perfectly that's what I'm talking about first time as well right it's an absolutely amazing stuff and uh Xiang says works perfectly thus the energy we need guys you see how the power of next JS 13.2 all that 13.3 all came together the caching the way it all works oh it's just beautiful with that said before I get absolutely ripped apart on uh Kakashi says let's check I'll let it go for like five minutes and then I'll cut my key otherwise everyone's gonna go crazy on that URL so when you if you're watching the replay of this it probably that URL will not work because I will actually cut my key um but yeah it sticks only well done there's so many things from you thank you for sharing it for free you're absolutely welcome squeezy and Simon Says awesome deep access works very well I'm so happy to hear that guys I've absolutely made my day and I want to show you guys as well make sure when you're in versa so yeah you're gonna have to have that Pro you can use the Pro trial yeah but the reason why if you don't have that Pro trial then it's going to cause you an issue right remember it's GMT by the way the time zone because I set it to GMT in the code remember you can set that to your local by adding additional code for free yeah but if you don't have this Pro trial your functions will time out okay so that's definitely something that will happen now if I go to live I can see probably people are probably trying to mess around with it so let someone checked out Nairobi someone's checking out so now someone just went to Nairobi someone went to divide by Prague look at this I can see who y'all I can see what ELO are doing mississaugiu Georgetown I draw look at that that's pretty sick I can let you see you guys using it I poker all right guys with that I think I need to actually cut that key because it's gonna go mad on my uh my quota so let's go to my I'll show you how to do it um what is it open AI you have like you have literally a few seconds and then I'm going and I'm cutting it off so I'm going to my API keys my YouTube demo key and I'm revoking that key so now if you try and do it unfortunately it will not work all right so I apologize guys I just don't want to get killed on that with that because obviously it's it's going to cost every time you do it it's a demo you get the point right but otherwise um let me go back now to probably and I want to go to the Departments and we should get a few errors I reckon now so let me know has it stopped working now because it probably would have stopped working now the good thing is though it will show you still the cached versions right so in this case yeah there you go it stopped now yeah there you go there yeah error yeah so now everyone's starting to get Lira Dubai would still work but there you go yeah no now it's time to cut through so you can see what I just did there right so when I revoke the key it was a lively demonstration of how it will stop the flow of happening because you now revoke that key which means that further attempts to go ahead and use that won't work right so it's just handy kind of to demonstrate that to you as well so if I was to go here now if I went to United I remember it it most likely would show me Dubai right unless it wouldn't because it was probably yeah it wouldn't I mean yeah nice yeah so that's actually that's actually perfect that's exactly what I wanted to show you guys um because I even got you a chance to Showcase how it would um how it would stop so um showing last day or after the refresh yes exactly yeah and in this case I don't think this will load okay it does work but okay I mean I'm gonna probably bring it I don't know we'll see anyway yeah uh jibron says your step-by-step process of teaching in your tour is truly impressively breaking down companies in a way that's easy to understand keep on the good about dude I appreciate you so much I love comments like that thank you so much um for your support I just want to see if this is actually gonna stop working because it should yeah now it's not working good yeah so now it's not working so this one shouldn't work Abby would unless someone went to Abbey Wood before right but this one should probably stop working now unless I've I'm looking at the wrong yeah no this one this one should stop working um unless it's got the key so Jay says it doesn't work yeah I just want to prove a point to myself here so I I know for for a fact but in this case you can see if we play the new logs we should get loads of errors here so we've got dat areas get weather summary next Abbey Wood there is palampur okay so it's still actually giving me the the things okay what I'm gonna do I'm just gonna revoke these keys because I feel like I might have slipped the key and then to be honest let's go and what does that say uh which of course okay okay that's fine so for now that's good I'll do the trick yeah cool with that said guys that was absolutely amazing uh you guys got to see a whole thing about it like a whole realistic use case of that entire build I want to see if I can take that down I'll take it down afterwards that's fine okay but otherwise um yeah this was huge that was a huge board right let's jump through what we talked about today in today's video right so not only let me get some some decent track behind it I think there's only yeah so that's fine this will do right so today we went ahead and broke down an entire crazy weather app right so Not only was it able to actually have a huge a beautiful UI that's fully responsive so you guys saw for yourself how we can go ahead and build something just like this oh there we go that's why it's come off here um Not only was it able to go ahead and you build time is fully responsive absolutely gorgeous to look at but we also got exposure to things like Tremor 2.0 right you also got exposure to steps in now step Zen was incredible for today because you saw yourself in such an app where it really can be complicated right to go ahead and actually build out a graphql endpoint or like a back end steps that made it like we didn't even have to think about it all we had to do was step zenkel import and then a minor change in the schema and the whole thing just worked we got an amazing like you know it simplified the entire process I'll be honest when I set up graphql endpoints I'm always like trying to remember how the hell to write the schema perfectly and all this kind of stuff now with deception's uh support you know it makes things so easy so I'm gonna be definitely doing more videos with steps and I truly find it's an amazing platform an amazing way to do things and you guys saw yourselves the true power behind next.js 13.3 right and next year is 13 and the way we can have this caching the revalidation the way the initial load might be long but if you have a lot of users it really won't matter because only one user is going to have to go through that loading screen and then it's going to be cached and it can revalidate so everyone will get this instant experience which is just Game Changer right it also means that you're not going to spam your GPT quota even if you had a million customers it's only going to go ahead and send the uh hit the GPT API if it's an uncached page right so all I would recommend then is you set your revalidate period a little bit higher right so that's all I want to go ahead and say but otherwise you guys learned a huge come on in today's build make sure you smash that Thumbs Up Button Tailwind typescript deployment to the cell Tremor 2.0 remember guys if you want to go ahead and absolutely you know Excel keep learning at this speed keep learning at this pace and check us out at Papa react.com forward slash course zero to full stack here as a community you want to be a part of we've got module content we've got a community we've eyes go ahead and do coaching calls every Wednesday so you can literally talk to me as we go ahead and build out projects just like this right so we've got some awesome members I see loads of them in the community right now in the chat Pat Pizza we've got Natasha awesome members of the community so it's absolutely amazing stuff right someone asked if I add a new API key after the stream and it will work fine I'll add a new API key after the stream but then I won't expose it and I'll probably take down that deployment because I don't want to have that deployment up because if that video blows up I'm gonna be rammed on a quota right so in this case you guys can feel free to go ahead and check it out all right but yeah zero place to be and if you want daily coding problems the University of code definitely check out is what it's only 4.99 a month you literally get coding problems delivered to you every day right which is honestly it's a huge amount of work to get that to you so it's something that we want to do to give back and then we do the 4.99 a month just to support our effort in doing that because we have to have a way that can justify it to allow us to be able to keep doing that right so we massively appreciate you guys this has been an awesome video and as always guys smash the Thumbs Up And subscribe if you haven't already and yeah I'm going to read some of the comments before we sign out on this build I can see you guys because I just completely skipped over a lot of you guys absolutely love the build I see it um I can see you guys asking you check those locations like butcher rest India that's awesome Brazil was also checking things out step says sunny you're such a wonderful human thanks for the work you do thanks for the energy you spread thanks for your team too team appreciates you dude um Patty says weather forecast straight from Papa react that's amazing um I checked jimin's uh comment I was absolutely stunned thank you so much dude I hope he says a cool video with nice Technologies amazing site Augustine says thank you thank you for tuning in dude uh tilak says can we use the gpt4 for free you will actually I don't know if you get a quote for for free with four but you get a quota at some point with any of these and gpt4 requires you to have access to the early wait list okay so make sure you check that out Edwin says join in a bit late but love from Texas USA that's what I'm talking about I've got Americans in the house what's up guys and um yeah Simon says we love you saying I love you too guys Jim brain says go I appreciate you all Natasha says child sending thanks for ciao guys thank you for tuning in you know that we have to end it the way we we do things right the only the right way to end it out make sure you give this a try all the code is going to be on the GitHub repo I recommend you go and check it out um thanks honey what you do every time you show the environment file for us I know every time I slip it at the end I'm like that's all right it's all right that's fine I just changed the keys afterwards so that way it's completely eradicated and it also shows you what to do if you end up making that mistake but yeah we have tons of content coming out every week so make sure you turn on that little bell notification icon me and Jay are working overtime to get more content in zero to full stack here on more content on YouTube more content from our amazing partners and yeah we've got so much fun stuff happening you might even see me as some in-person conferences and events this year right me and the team we're doing big things guys I love every single one of you this has been your boy Papa react and I will see you in the next video when that beat drops you know what to do sign out the way we do it install loads of lessons were learned today caching technology the the next day is open AI all this good stuff absolutely crazy stuff thank you guys peace [Music]

Channel: Sonny Sangha

Views: 43,815

Keywords: react, developer, reactjs, html, css, js, javascript, papa, papareact, papa-react, tutorial, frontend, webdev, web-dev, clone, fullstack, backend, motivation, reactnative, react-native, redux, typescript

Id: DS5TZCn-pk8

Length: 196min 8sec (11768 seconds)

Published: Fri Apr 21 2023