🔴 Let’s build Disney+ 2.0 with NEXT.JS 14! (Microsoft Azure, Caching, OpenAI, Shadcn, Tailwind, TS)

yo what is going on guys welcome back to the channel it's your boy Papa react AKA sunny and today we are back with one of our Banger builds the Disney plus clone and I was waiting for this one because I wanted something proper powerful behind it and guess what guys your boy only went ahead and secured Microsoft so I've got Microsoft today in this collaboration it's going to be one of the biggest builds we've ever done on this channel next js14 Shad Cen open AI loads of good stuff including Microsoft as you're powering it all up now you're probably wondering Sun stop talking show me a demo of this app let me know where you're tuning in from right now so many people are tuned into this stream right now it's amazing to see everyone guys we're going to go ahead and demonstrate the Disney plus clone right now you're going to build this entire app and the code is entirely free so your boy hooked you up I'm going to show you all the details in just a second this is the Disney plus go go ahead and clone 2.0 fudge that one out let's jump into it check it out boom look at this guys Disney plus right here beautiful app we've got carousel's fully fully mobile responsive you can see everything here is looking absolutely beautiful this is something you want to have on your portfolio yo look at this I can see everyone California India everyone saying happy Christmas what's up sier Leon India's in the house France is in the house what's good guys good to see you look at this guys this is the build for today this is all powered by some high te honestly I was about to swear I my mind off there but this is some by some seriously powerful stuff right now right so I'm going to go ahead and demonstrate what we can do in this app and then you're going to see how we're going to go ahead and break it down first things first this is all powered with Microsoft is your backing us so honestly this is one of the biggest collaborations I've ever done thank you to Microsoft for supporting us let's go ahead and try our app and see what's going on this is a bit of a freaky picture but yeah you can see we've got a lovely Carousel here and there's so many UI elements I need you to pay attention to the way things are fading in the way things are going ahead and overflowing onto the edges of the screen all these things design tricks going to make you an awesome developer now let's go ahead and search for a film so I'm going to go ahead and search for a film right now let's type in John Wick and as soon as I hit enter boom you can go ahead see look we've got an AI assistant thinking of movie suggestions for us and boom you can see our asure functions AI says based on your love for John wiek I recommend these films awesome stuff and we also get our search results this is really really nice and we've got loads and loads of reusable components Believe It or Not guys this list that you see right here is the same component as this right here so I'm going to show you how to build really scalable applications and how you can go ahead and build it using the correct way and doing things the right way now I also want to mention we're not just using one bit of AI here because that's like standard everyone does that kind of stuff I'm going ahead and doing it a step further I've gone ahead and taken us I built two different approaches you might have heard of something called Azure function this is a scalable approach to having code running inside the cloud so we've gone ahead and built our AI with that and I've gone ahead and used a azure's brand new open AI service to go ahead and build another variant I'm going to to show you right now how we can go ahead and see that so if we search for something you can see we've going to go ahead and we get our nice results and I just want to highlight something if I go back for example if I type in John Wick bam caching so next year's 14 caching and I'm explaining everything in today's video now I want to mention as well if I go ahead and select the genre pay attention this is gray right now I've got another AI that I'm going to go ahead and show you how to build if we go ahead and click on something like action as soon as I click on action now it's going to go ahead and do an action search you see this now this was already cached because it's honestly that fast it's amazing and you can see as your open AI assistant suggests something else so I'm going to show you how to build two different types of AI using Microsoft services and then how to plug that into our next js14 app and I'm going to do it with all the greatest stuff Shad CN tailn CSS typescript everything you love and the best bits of 2023 are coming up in today's build now I'm going to go ahead and showcase everything and first I just want to say a massive thank you to all of you tuning in right now we also have light and dark mode you can see right here looks absolutely beautiful if I go ahead and go back we get our home screen now I want to mention as well everything is mobile responsive so you can see here I don't go half measures looks really great on a phone everything's going to work the way we expect it beautiful headers beautiful app the whole thing is bloody powerful trust me we're going to dive into it and I'm going to show you just how easy is to add this to your portfolio because I promise you this is one that is going to impress the hell out of people now I want to mention if you want to build along with me right now I've made it so easy for you to go ahead and do so all you need to do head over to the first link in the description and you'll see where it says sign up to get the code for free and you'll reach this page now all you have to do put in your name so I'm going to do it right now put in my name put in my surname and then I need you to put in your email so in this case I'm just going to put in my email like like so do this and I'm going to select my country in this case I'm just going to put United Kingdom and then company if you don't have a company simply pop your name in it's completely fine to do so and in this case you can toggle in and out and I'm going to click on submit now once you've clicked submit guys your boy has made it to the Microsoft page now go ahead and click close And boom you can see we are on the Microsoft landing page which this is huge just's just take a moment to appreciate that right and now what I've got for you here is I've sorted you out we have the Azure open AI documentation this is going to be something that's going to help you out when you're coding along with me today then you have the GitHub repo guys for absolutely free if you click that right now you'll see you've got all of the code here you can simply code it uh clone it along and literally code along with me right now so all you need to do is go ahead sign up to that form and go ahead and get started with the code okay and I also want to mention our course made it Microsoft website which is absolutely incredible zero to full stack hero is being published by Microsoft right now you can see right there on the useful resources so you want to join the community you know where to go right or head simply head over to papa.com to get started and learn how to code today so that's all you need to do to get the code I always get people saying Sunny where's the code why is it behind the pay why is it well today I listen to you I hear you I hear your I hear your moaning okay I got you all you got to do is the first link in the description fill out the details and hit submit you've got the code there for absolutely free I hope that helps all of you out right I'm going to go ahead and see where everyone's tuning in from right now we've got the UK in the house we've got Czech Republic India Zimbabwe turkey UK again what's up Nepal South Africa Italy Michael from Italy what's good we got Kenya Nigeria yo your comments today are awesome honestly thank you so much guys we got Poland in the house someone says congrats on your second property I appreciate you thank you so much if you're following me on Instagram you know where to go uh ssss Anga go ahead Pakistan and early Christmas and Greece in the house yo what's up guys everyone's tuning in from around the world right now we've got a few hundred across our different platforms that we're streaming on right now so welcome and I think it's time to go ahead and again dive into the build I'm just going to go ahead and draw on the screen today I've actually learned a new approach really to kind of teaching you guys I really am going to try and slow it down and explain a lot more so that way you guys get the full amount of quality from these videos so I'm going to go ahead and break it all down sah I see what's good dude okay so at this point what are we going to learn today right we're going to learn nextjs 14 right so nextjs 14 not 13 but 14 right we're also going to learn tailn TSS now if you haven't done any of these do not worry I'm going to go ahead and show you how to do all this today we're going to use Shad Cen now Shaden if you didn't know is how we can do really nice accessible components like this right think of it like a component library but we can go ahead and customize it to our heart's contempt so we're going to go ahead and do all of that then we're going to go ahead and plug open AI into our beautiful app right now how we're doing this is not just by using open AI we're going to be going ahead and plugging this into Microsoft as so we're going to be using Microsoft's Azure to go ahead and get this working now I do want to highlight that you can go over to the Azure page right now to go ahead and sign up for absolutely free you get 200 literally $200 credit for absolutely free and you get to sign up for free so my Approach here is go ahead sign up do your thing build these apps literally record it add it to your portfolio there you go it's as simple as that everyone's like is it is it paid is it free no just sign up you got 12 months free literally go go to your heart's contempt and build stuff okay then we're going to actually going to be using this one the open AI uh as your service now I do want to mention as your functions are included in that free trial for the open AI service you actually need to request access to that program so what I would recommend and this is what I've done today I've built both approaches so I built Azure functions which shows you how to use open AI with aure function so everyone can do it and then if you really want to take it that step further I've done the code for you for the open AI service but if you just go ahead and request access over on this side over here so you simply type in aure open AI service and you simply click apply for Access you can go ahead and get that as but I've done both for you so do not freak out I've got you covered your boy always makes sure that everyone here is looked after Okay so we're going to go ahead and cover that so back to our text stack today we've got all of this stuff we're going to cover loading States so in this case right now I don't know if you mentioned but if I go to and type in John Wick 10 for example we have a loading State here right and there are no movies that came out from that but in this case it says you might like Mad Max Fury Road so I'm going to go ahead and type that in now and if you're wondering where is he getting all of these films from well in fact we're actually getting all of these films from tmdb so I'm going to be be showing you how to pull data from tmdb and go ahead and get things the way you expected now as I want to mention before everything is cached so it will literally remember what I've typed in based on my search so if you go back you see how fast that is if I go back and forwards between these two boom look at that absolutely amazing stuff okay now I look at this someone goes I love what you did bro it's amazing amazing stuff thank you so much um somebody says why is everybody using Shaden I feel like it's kind of overrated today I will prove you wrong my friend I'll prove you wrong and I'll show you exactly why I is using it okay so let's go back over here and we're going to carry on we've also got our beautiful little dark mode toggle up here so why am my hand super shaky here we've got the dark mode toggle so I'm going to type in dark mode you get it right that's a dark mode toggle and they're using Shaden to do that actually makes it really easy right actually makes it really really easy to go ahead and get that set up with this and something I really really want to highlight today guys is caching caching is so important it's such a big concept with next js4 and I don't believe it's been really simplified yet on the internet there is a lot of things that have been sort of talked about4 and we've got amazing YouTubers out there go ahead and check out that just try coding those guys absolutely awesome friends of mine but this is going to be a really nice breakdown and introduce you to the word of caching and how and why it's a game changer okay now I want to mention as well that because we're using nextjs I'm going to be showing you how to go ahead and use things like server components so today if you didn't know what server components are by the end of this video you will know exactly what server components are and how they link into next JS 14 okay so lots of stuff Happening Here somebody says best teacher thank you so much uh Hussein I appreciate you so much now and I always get the question why are these only front end builds guys this is really a full stack build I promise you we've got everything coming today we've got apis on the back end we've got a backend route we've got loads of stuff happening and I'm showing you serverless architecture with Cloud function so boom that was a mouthful loads of stuff happening my coffe is definitely slapped me in the face right there okay and then of course we're going to build all of our code up with typescript okay so er I see Beau go there we go so we got typescript in the house as well so all of our code is going to be highly robust and you're going to be able to reduce the number of bugs before you even deploy it which we all love right your boss is going to love you for that so this is what we want to do right so I can't control what comes on this screen so if there's any like freaky films that pop up ain't my fault right without with that being said we're going to jump into it honestly we have over 300 people watching across platforms and the likes are flying so thank you we already crushed over 200 likes now if any of this at any point today is too difficult remember first link in the description go ahead and fill out that Microsoft form literally it supports the papa F more than you know so go ahead fill it out and then what I've done in exchange for you guys as I mentioned is giv you the code so fill it out go to this repo just click it and you'll get access to the full code base for today right so make sure you go ahead and do that cuz I'm not sure how long this link might be up we don't know we don't know it could be it could be gone tomorrow right and if you find it even more difficult and you want to go ahead and say you know I really need to practice my coding then like I said puma.com go ahead and check out our course and community over there this is where we basically I I spend every week here teaching students how to go ahead and crush it en coding with Mastermind coaching calls every single week all of the code and Community module content in this course is evolving every single week that is what I do I'm trying to keep ahead of the curve and our students are literally I'm proud of them and they smash you every time so if you want to go ahead and get involved that's the place to go ahead and do it now I'm looking at you guys in the chat right now thank you so much zotan I appreciate you for saying thank congrats on my second property all right so with that said let's jump into the code let's get into the fun stuff right so what I'm going to do now pull open my warp terminal okay so warp terminal I want to pull it up now you don't need to use warp okay a lot of you are asking what is what is war right like you know is it AI sort of terminal where in fact you don't actually need it but it's just got very nice suggestions you can use a normal terminal it really don't matter in this case I like to go into my documents and my builds folder so I'm going to go into my documents into my builds folder okay and now inside of here I'm going to use the following command so I'm actually going to show you as if I didn't know this right so if I go to MPX create next app right and you will now see that we have a create next app tool on next chs's website so this is the one that you want to be using MPX create next app latest right now I tend to go ahead and use something called recursive search so when you're using a terminal you press option R and oh oops sorry control R you can go ahead and search your history so I'm going to go ahead and type in MPX create next app and you see here Disney clone and I've actually done a little fix for that so we're going to type in Disney clone YouTube okay so this is going to be our build for today now I want to highlight something NX if you don't if it doesn't work on your machine all you need to Simply go ahead and do is install node n o onto your computer and you will get MPX in as part of that okay guys wow our retention is absolutely crazy I love you guys welcome to the stream if you're brand new and make sure you subscribe and like this video CU it's going to help it reach out to as many developers as possible right so go ahead and hit enter on that create a next app we're going to use the latest now I want you to pay attention here don't screw this up would you like to use typescript yes we would yes yes literally you just all the defaults are what happy with so you can go ahead and hit enter throughout all of that somebody says do you have a movie Details page when you click something I did not create a movie detail page because honestly the goal here is to show you all of the other areas my builds if you didn't notice all have hidden gems inside of them that focus on different areas a movie build page wouldn't carry as much value as you would think in this build my main focus here is to show you how to use the full stack app approach in xgs and harness the power of caching with things like Azure to go ahead and leverage and really make powerful use of services like aure um when you're doing things like open AI GPT completions all that kind of stuff we're going to finish in one session hell yeah your boy don't take two sessions I got this in one don't worry about it right so we're going to go ahead and type in Disney clone oops okay so we're going to type in Disney clone um YouTube okay and if you might have to go ahead and type in CD in this terminal you don't have to okay now after you've done that I'm going to type in code dot what's up guys a says Hey Sunny great work love from India what's good dude good to see you in here right now what I want you to do here is I want you to go ahead and cross that off after you're done right we don't need that anymore we're going to go ahead and remove that and just tell me guys with your feedback if at any point any of my code is too small or you want me to increase the screen size I've got you back okay so at this point what I need you to do as well is I want to actually go ahead and get you set up with an extension that's going to be very important today if we simply type in Azure okay so I'm going to go a and make this full screen simply go to your extensions Tab and type in Azure now I need you to go to Azure functions and I need you to install this this really important for today we're actually going to be using it a lot to go ahead and deploy rure functions so you want to go ahead and do this okay so the one with 2 million plus downloads trust me it's very safe to use do not worry it's not going to break anything um well I hope otherwise Microsoft going to have a problem okay so everyone says absolutely okay everything's good expect new property Vlogs in yes I'll definitely shoot a vlog for you guys don't worry all right so at this point let's go ahead thank you for the feedback guys that really makes honestly helps me out when I know when the streams like so we're going to go ahead and get started just by running our so command J to pull up our terminal click output you don't need the side output you don't need the debug console this is your main terminal okay let's go ahead and make it a little click bigger and what I'm going to do is I'm actually going to kill my other app so I'm running my other app at the moment now you see we have package Json if we had a package lock right so Jay's in the house what's up Jay right Jay's on holiday as well so say say give Jay a welcome guys right and at this point if I type in mpm right if you had Yar lock then I would expect you to be writing yarn but in this case we're doing mpm run Dev okay and this will start up our app uh in Dev mode on Local Host 3000 so what I want you to do here is set up your workflows okay so I don't always you know I want you to always have your stuff clean organized uh cuz no one likes to work in a mess right so command J command B to hide that let's actually go to the app folder page and let's pull this open so this is obviously our home you know screen that's going to be showing and what I want you to do is go ahead and open up another browser like so pull it over there and and we're going to Chuck it in the corner like that and we're just going to type in Local Host 3000 and what you should see now is a nextjs template so this is really good okay uh this is where you want to get to so uh python new says this man makes free streams better than other four courses I've seen love the good work man dude I appreciate you so damn much with comments like that it makes it all worth it in my mind right so thank you so much Raj I see you dude what's up original Papa fan members we also got it's goth he goes one of the best channels for web dev I've ever found thanks sunny I appreciate you dude J screenshot all the positive stuff I appreciate you so much right so at this point what I want to do is I want to basically start from scratch I want it to be completely empty right so I want to go ahead and you see the main tag I'm going to go ahead and chuck all of this out from inside there so what I want you to do type in H1 say let's build Disney right and what you should see is that right now that already has styling attached to it we don't like this right we don't want it to have styling attached to it so what I want you to do is go ahead clear this out and we're actually going to go to our class name and you can see here these are all Tailwind classes now Tailwind is a very simple thing essentially all you're doing is writing these short keywords which go ahead and translate to bigger bits of CSS now what you need to do or honestly what you make your life so much easier is install the Tailwind CSS intellisense extension right so in this case if you go to the marketplace type in tailn CSS you'll see tail and CSS intellisense with 4 million 4.8 million downloads right so I need you to download this and this is what you're going to see you see all the auto completions so in this case now for example if I I typed in background color or background red sorry you can see I get all the different shades beautiful really really handy stuff right K rard said because of you I had started loving JavaScript I love that Amir the bill says I got my last I got my job last week thanks to your videos this is what I'm talking about guys that's what I'm saying this is the like final video of the year and it's starting with such banging energy what is up guys Papa fam is moving strong today right so at this point now I'm going to go back over here and you can see let pill Disney with no oh Jimmy what's good I'm I'm sorry guys this is crazy there's so much OG's in the house today it's sick all right so this is we got let's bu Disney here now what I want to do is I don't want it to have any you know black background or anything like this right so it shouldn't it should just be clean so what I need you to do go to layout right now in layout this is where you can modify the metadata of the page you see it says create next stab I'm going to go ahead and change the metadata to something like just say Disney Disney plus clone right and description we can say for educational purposes Disney don't come at me right so there you go and you can see now our head on our metadata has changed to Disney plus clone so that's how you can change that now as for these I'm not really interested in the fonts changing so I'm going to go ahead and simplify this a little bit more because we're going to make it as simple as possible for you guys to understand now the way you need to think of this is layout is essentially the top level file okay this is a top level file that we're going to basically inject everything into all of the pages are then injected into it so if you think about it this is our homepage this code basically goes ahead and where it says children it just gets injected into it right so think about The Return part so whatever's returned like this is basically getting pushed into that part that's is essentially what's happening right so if I go ahead and put it back so you can see now basically we're taking that and then it gets injected into here so if we're in a different page it gets injected into the layout and that way you can have a like a consistent layout across different views right so I hope that makes a bit of sense yeah now inside a global CSS you'll be able to see this is where some default styling has occurred which is why we have a black background so in this case I don't want any of that get rid of it and you'll see that the background goes white Sam Susi says like page templating exactly that's exactly what it's like right so in this case we got we only want to keep our Tailwind Imports and this is really important because this is what allows those utility classes to work now if you're ever wondering sunny but I don't want to understand because my my CSS might suck if I keep using Tailwind what I highly recommend is you can go ahead and type in something like BG red 500 for example highlight over it and you will actually see exactly what CSS it goes ahead and translates to this is my advice okay when you're doing this stuff use the good tools it's fine it doesn't make you any less of a developer if you're using the latest and greatest tools what I would recommend is put that extra step in place to educate yourself that bit more so if you're going ahead and using Tailwind CSS install the Tailwind CSS intellisense plug in the extension and go ahead and just hover over and see what you're actually doing and seeing why it's working that way it's it's going to go a long way it's going to help you a bit more okay mpm R Papa fam I love that so in this case that you can see BG background red actually made it red so nice Okay now what I'm going to do is I'm just going to go ahead and pull up my code and we're going to start masking out the build process okay so I'm going to go ahead and spin up my other app on Local Host 3001 Sunny drops backto back bangers I love that I love that that is what I want to be known for guys backto back bangers right so Local Host 3001 now tell me already who has filled out that Microsoft form the first link in the description if you haven't already I'm I'm going to pause the video right now so you can do it so go to the first link in the description fill it out one it helps to pop a fan because Microsoft know that we're legit we're big following we we you know we all do this thing for what we love it for so go ahead and check this out put in your details and get the GitHub Reaper right now so that way when I'm coding you can follow along with me and you're not going to get lost okay so make sure you go ahead and do that right har har thing says man your web scraping stream made me Shaden fan and oxy Labs I love that awesome stuff Jay's also dropped in the chat and I've also pinned it to the chat right now so you'll see it in the live chat okay so make sure you go ahead and do this because honestly you can just code along with me it's way easier for you to do it all right so let's break this down we're going to componentize everything today okay so first things first we have the homepage second up we have the search page so if I type in Star Wars here you're going to see we're going to have a/ search SL search term so I'm going to show you how to First do page rooting so we can prepare all of the pages that we're going to need so if I want a page for search page right so I want to have for/ search SL Star Wars for example then what I can do is I can go ahead and have oops I've gone ahead and done my diff we can go into our app folder Now app folder is where all of our files live now typically in xgs 12 it used to be the case that you would have different file names for the different rots now it's all based off a folder structure where you have specific files inside which have set file names so like page. TSX layout. TSX and so forth okay so in this case if I want to have a for/ search page I have a fer called search that resembles the path so now it's the home screen for/ search and then inside I simply have a page however in this case what if I want to have a dynamic value so I want to have I want to support all of the pages I want to have for SL Star Wars I want to have for SL you know Jurassic Park I want to have for SL um you know U social what's it called The Social Network right that's it right all the dev films right and if I do something like ABC you'll see that it goes ahead and works that according to whatever I put there so this is called a wild card so the way we support a wild card is we go ahead and have a new folder inside and we use square brackets with a word inside to denote what that wild card will be called in this case we're going to have term this resembles search term okay guys smash that like button let's get these likes flying today um because it's going to help this video reach as many people as possible right so we're going to go ahead and hit term now if I go ahead and put a new file a file inside of the term folder called page. TSX we will get this page okay now I want to pay attention to one thing go to your extensions type in es7 and go ahead and install the following snippet because it's going to make your life so easy go to this es7 react Redux react na Snippets download this install it this will give you Snippets Snippets allow you to make way easier quicker moves such as what I'm about to do if I type in react functional components with an export so RFC boom I get my entire boilerplate code done for me what I can now say here is search right so in this case search page okay and if I do this now let's go ahead so Jimmy says will you use some of the new nexts 14 features I'm going to be using things like caching all that good stuff so if you're very kind of on the edges to what caching is and how it works this is the video for you guys okay so in this case we've got the search page now if I go ahead and hit save what we have now is let me go ahead and just pull out my code on my screen so I can see everything yeah we have the search page here let's bang in great and if I show you now let's go ahead and test this out right so let's see if this page actually exists so if I go to for SL search slash a uh let's just say ABC okay now you can see boom I have a search page right and this will work regardless of what that wild card is so for/ search Star Wars yeah there you go search page okay if you didn't know I definitely like SS there you know all right so in this case we have the search page now how can I get access to that search term well it's very simple I'm going to show you right now so that we're fully prepared so in with all of these functional comp components the props come through okay now the easiest way to do this if you ever forget right if you ever forget I'm trying to teach you reusable methods here if you ever forget how to go ahead and find out what that search term is all I recommend you do is you get the props and you simply console log the props now I want you to go ahead and open up your terminal cuz this is by default a server component now nextjs 14 onwards or nextjs 13 onwards every component inside of our app folder is by default a server component and that means that it's actually built on the server which means that there's certain rules that to apply we have to convert it to something called a client component which means it's only executed on the browser when we need things like interactivity when we need things like listeners or anything on that end right but in this case we should always try and keep it as a server component and then at a granular level convert components to client components you're probably wondering what the heck is he talking about it will make sense I promise you this really powerful stuff live for says I love the content man I appreciate you thank you so much right so in this case you can see if I go ahead and see my terminal now because it's a server component is coming out of my terminal logs you can see pram term and there you go that's the search term okay so what I would recommend you do here is you do something called destructuring we're going to destructure this and we're going to say we're going to get the prams out and we're going to destructure that to go into that and get the term okay then we also have search prams but we don't really care about that right now okay so it's it's complaining right now because we do not have our typescript definitions now typescript definitions all it really is is basically saying uh we're basically ensuring something called type safety whoa Mr Frank yo what's up Frank he goes member for 15 months he's been a papa F member for 15 months he's OG he goes guys please make sure to click the Microsoft link this partnership is epic for the papa F yes he's absolutely 100% guys if you want me to keep on making content like this it's things like that that really make it possible so I need you to go ahead first link in the description head over to that link and sign up right now to this and just type in in the chat I signed up that's all I need to see go ahead sign up to it and get the GitHub repo literally it's completely free this link that everyone is asking for is how you get the code for today's build for absolutely free you just have to put your details in if it asks for your company you simply put your name in and then you go ahead and get the full source code for absolutely free we don't usually do that but today I'm doing it for you guys so make sure you go ahead fill the format hit submit do that okay that's going to help us out a ton it helps us continue doing what we do on this channel now we're going to go back into the build we're going to go ahead and create our type definition so our type definitions are very simple here it's going to be prams and we've inside we've got a term which is a string and you can see look boom it's done yeah and repon says I'm already done amazing stuff thank you so much now what I want to show you is we can actually prove that this is correct and we say welcome to the search page welcome to the search page and then we can go ahead and do some jsx stuff right here so we can say term okay and if I do this look at this welcome to the search page Star Wars now I'll show you how we can decode the URI here so in this case to get rid of that spacing this is just a way of safely exiting certain characters like space and you know asteris and all that kind of stuff now um what I'm going to show you you here is if we go ahead and type in const term now I don't want to do two things actually one I want to protect this page now I want to have it so if somebody didn't pass the term in so let's say they tried to come to 4/ search Empty right I want to basically return a four or four I'll show you how we can do that it's very easy with next year uh 14 specifically right so we're going to actually use something called the not found function so if we go ahead and type in if there is no term then I'm going to return we don't even need to return cuz it actually returns implicitly but we can go ahead and say not found and you can see next navigation pops up with my intella sense right so in this case not fun now I want to show you what happens look at this if I go to for/ search with no term and I do this I get a 404 amazing that's great that's exactly what I wanted um somebody says is this pre-recorded there's your answer no it's not um and this I'm actually live right now okay so in this case we got that that up so that's great now we're protecting our users from seeing Pages what they don't want to see the next thing is I want to get rid of these nasty little 20% things so we're going to basically use a function and we're going to go ahead and say const term to use for Camel casing and we're going to say equals decode URI which is an inbuilt function in JavaScript and we're going to pass in the term and then what we can do is we can simply replace the term that we're using with term to use and you'll see boom just like that it goes ahead and fills in all the gaps right so that's really good um life mode if I you know these Concepts if I build a production product would it work if I use the same Concepts yes remember obviously use a pincha with that that's why I teach it inside of my course all of those different techniques and guys just worth mentioning we're about to cross over 300 likes so if you haven't already destroy that like button for the YouTube algorithm okay so this is looking great right now now eventually what we will do here is we're going to make a API call to get the movies for the search we're going to get the movies and we're going to go ahead and also get another API call to get the popular movies right so this is going to be to get the searched movies and this is going to be API call to get the uh popular movies and we're going to use tmdb database to go ahead and do this and it's all going to be cashed and handled appropriately and I'm going to make it so nice for you guys you guys are going to be wild I'm telling you when you see this naan says sunny I signed up for the link that's what I'm talking about guys go ahead and keep signing up to that link first link in the description Microsoft I'm telling you remember the bottom left of the screen you'll see the code this is what you want to get to you want to get to that that's where the magic is at the GitHub repo right there and then the beautiful magic is there the zero to full stack here my course okay so definitely go check out both right so sign up to that it really helps us out and again I appreciate you all for doing it right so that's the first page which is good we've done that now now let's go ahead and create the second page that we're going to need which is actually for the genre so let's go ahead and take a demo quickly right now we go to genre let's go ahead and type in adventure so if we click on the adventure drop down I will show you what happens you see how we get this results for adventure and you can see we've got the new asure open AI assistant right so this one here is going to go ahead and actually be from for/ genre wildcard and we even passed in something called search param here that we're going to go ahead and use so I'll show you how we can do that as well so somebody just said can you show the same with query pram instead of a past segment yes we do it right here that's using query program so i' I've literally covered you I I really thought about this as well yeah and also I just want to mention some of you I see can see the questions of you know why would you want to use something like Microsoft Azure on the back end for this right so things like obviously today we're going to be covering a lot of azure and and basically why we're going to be doing now you might be wondering but sunny I can do that with my next sh set why would I need this well there's a few tips right one you've got security behind you this is azzure this is corporations that a this a massive bloody Corporation huge companies using this in production it's tried and tested it scales damn well it's very predictable in your pricing so it's very very simple to understand how to go ahead and use it and project the the different costs that are going to come up right and you also get $200 credits or why not right and then also as I mentioned before you might be wondering but why would I use like open AI in collaboration with Azure when I could probably just go straight to Azure open AI surely well no because you're getting the security and scalability of azure with open AI integrated into it and I promise you the port all that we're going to show you later on is really really nice it's really clean and the best thing is you also get custom filter controls and a really nice custom customization panel so you can customize your AI instance to be exactly as you want it and it's really nice the way they've done that I have to admit right so we're going to go ahead and dive into that I just wanted to clarify that because I know it can be a little confusing and you might be watching thinking why why are we doing that and always want to make sure you know why we're doing something okay so now we're going to go ahead and jump into the next one so we've got for/ app I want to have a genre page as I mentioned before so the genre page something like this results for adventure results for Action so forth right so let's go ahead and do that right now so we're going to go again follow the same principle a folder called genre and inside of our folder we're going to go ahead and use the following we're going to say for/ ID the reason why I'm using ID here is notice how each genre actually has a specific number okay so we're going to going go ahead and do that giant silver says I signed up my dude thank you so much that's what I'm saying so in this case we're going to go ahead and say square brackets to DCT to denote that it's a wild card and then we're going to say ID okay and remember ID is exactly how it's going to come through there so if you actually noticed on the search page term correlates to this so these two are linked okay so these are definitely linked do not forget it whatever your value is here it's going to be the same value here right and then inter turn here and so forth so make sure you just remember remember that okay don't forget it now with ID we're going to go ahead and pop a page in here so I'm going to say page. TSX like so boom and then we're going to go and say RFC and then you have your page now in this one I'm going to go ahead and call it just the genre page guess that's the easiest way command D is a nice little trick there if you want to go ahead and do a little trick that I did there say you've got three words that are the same then what you want to do is click it do command D command D and look at that I've got multic cursors so I can go and say 1 2 3 look at that pretty cool trick right so we're going to say genre Page hit enter and that's good and then this one same same principle right again if you forget what's going on you really need to understand what your props are I'm going to go ahead and do the same trick that I showed you last time boom and then we're going to go to our page right now which is for/ genre for/ let's just do 80 with a genre of crime for example so the URL that I just visited was this one so I'm going to go ahead and make life easy and show you what it's actually pulled out so that's basically what I searched for and you can see here the prams come through prams ID of at and the search pram genre crime so search prams are the little things at the end that you're seeing right um yo what's good people are signing up that's what I'm saying guys that is what I'm talking about sign up to that Microsoft link let them know what the pop Farm is about and get your free code that's what I'm saying okay so that's awesome thank you so much for doing that all right so at this point we're going to go ahead and open this up with our type definitions let's do a little simple destructuring we're going to go ahead and get the prams out destructure inside of that because you see it's an inner object we're going to get the ID out sahib thank you I appreciate you bro and then we're going to say search pram as well search prms and we're going to destructure that to get the genre okay now all of this is going to have the type definition of props so let's go ahead and fix that right now um get rid of that there we go and obviously that's complaining because we don't have props right now so I'm going to type in type props let's close that up type props equals and we're going to have our you know our prams which has our ID inside and our search prams which has a genre of string inside as well okay so I'm just going to go ahead and quickly clarify that for a second and then there we go okay so now you can see it's going to complain but we have ID in genre okay so if I go ahead and say welcome to the genre and we're going to go ahead and put our jsx tag in ID welcome to the genre with ID and name genre boom welcome to the ID with at and name crime right so in that case this is correlating to that so we're pulling the two values now crime at and just like that now there's a very important thing here here that I need you to understand a lot of nextjs Works off of caching and things like that so nextjs 131 14 and a lot of that is actually dictated by your url so the benefit that you get as a secondary I guess effect of using URLs in this way is you can cash the different Roots so imagine if I search for Star Wars and then I search for Jurassic Park each one is basically that URL is essentially the caching key so it will cach that based on whatever we've done which I'm going to show you how to do that and we can have things like incremental static regeneration which basically means that we only want to refresh that page every hour for example we can determine how often that gets refreshed and that is actually something which is damn powerful and amazing right so lelot says next yes is amazing I'm 100% a got I see you what's good dude we have so many people tuning in right now we just broke over 300 likes let's go to 500 and a th000 today I know we can do that right in a man says I've signed up that's what I'm talking about if you haven't already like I said first link in the description sign up to that click that there to get the code for today's build okay so let's go ahead and do it again again so we're going to get rid of this like so and now we've got our Pages set so this is exactly where you want to be to get things started off right now the next step is we're going to prepare our app okay so we're going to get everything ready the way that we need it so what I need you to do now is we're going to go ahead and go over to Shad CN right so Shad Cen and I want you to click on introduction and you want to read this out honestly I promise you just give it a second read it out and you'll see that it's not actually a component Library instead it's just basically a way of pulling in pre-built components based off of tailn CSS and you know that kind of stuff so we can customize as we really want to into your own folder inside your project so it's kind of like a component Library except that you get the code fully inside of your code base right and you can see everything I think it removes a layer of abstraction and it makes it very clear and I like that okay now we're going to click on uh installation next shares okay now we've already done this we've already we can ignore that step the next one is this MPX shadore UI at latest in it and I loads of people were literally commenting last time saying Shad CDN yeah I made the mistake okay it's cool I'm live um I'm going to have a quick little War break I'm getting super stuffy okay and also thank you inam man says congratulations on purchasing a SE property thank you so much okay I can hear myself as well that's crazy wild okay where is my where am I okay anyway okay let's keep going guys um so at this point we're going to go ahead and use this command here so I want you to copy that go back to our code um over here let me actually close that out don't know what I'm doing here there we go and then I need you to go ahead and yep so we are comeand J and basically what you want to do is split your terminal so the left terminal is my code running and we can go ahead and command J K to kill that as in clear it and on the right hand side I want to use it as my install terminal okay so in this case what we're going to do is we're going to say MPX Shaden uh latest in it click enter this is going to set everything up for us okay so what would you would you like to use typescript yes default is fine for the styling you can change it up thank you so much pure sent a lovely donation first of the chat which is awesome saying Merry Christmas thank you so much I appreciate you you can go ahead and then select a color we're going to click slate and our Global CSS is where it's located so you can see here Global CSS is right there so we're going to keep that would you like to use CSS variables yes where's the Tailwind CSS file configured now in this case ours is actually in config.sys for components utils yes uh right configuration yes so keep everything is is and I think we might have actually fixed our little Tailwind problem that we usually have um and you can see there okay I think we did I think we actually did nice okay now what I want you to do is after that's done done just check your app sanity check it check that everything's working so in this case yes my Local Host is all good and everything's great the way it is right and then just do a little sanity check of typing in text red 500 and you should see your text score Red okay so nothing's broken everything's good now going back over here heading back over to uh I'm going to make it super simple for you guys so here yeah now once we've done that you can see they went through everything you can then go ahead and carry on these steps I don't really care about this stuff right now so we're not going to do that the main thing that I need you to do is basically try and install your first component from the library so the left hand side we've got a bunch of components you can see and uh oh my computer's going crazy and then on the left hand side this music's distracting me too much right now I'm going to go ahead and get something a little bit more calm on cuz there's too much lyrics going on okay so what you can see is on the left hand side we've got our components now all these components you basically just install them as you need them so the easy thing to easy way to think of this is here we go ahead MPX shadan latest add button or something like add badge and so forth they have instructions on every page so I'm going to do that right now and show you how we can do that so if we go ahead and pop that in there add button and now you can go ahead and see installing button okay and what it actually did there is if we go into our directory you can see we have a components folder and then we have a UI folder with the button inside and this is what I meant about removing the abstraction so you can actually see all the code this is everything that need is needed for that code to work right so you can go ahead and customize it out build it as you need to change it as you wish and it's going to work the way we expect okay now what I'm going to do is go ahead I actually really like that someone goes make Shazam that's actually a really cool idea I will definitely consider that and if we want to use that button now we can go ahead and just import it very simply so if I was to go ahead and type in button you can see at components UI button and then I can go ahead and say like click me for example so click me so click me like so and as you can see look click me boom we have a button and just like that is so simple and with that you you typically can have something like a variant which has different examples in here so if I type in secondary you can see I get a different color if I type in for example ghost you can see I get more of a link and then you've got outline variants and a few others that you can go ahead and use so you can see straight off the bat the immediate power of Shaden very very easy to work with Okay so let's go ahead and get our first UI element out of the way okay so what I'm going to need you to do firstly is go to your code and we're actually going to go ahead and create our header now the header I'm actually going to go ahead and put it in the layout. TSX file because we want in every single page so what I want you to do here is go like so and basically type in header okay like so and this and this hasn't been created yet cuz we need to create this component so I'm going to go into command B we'll open my thing and inside of components not in the UI folder I'm going to have it outside for my components and I'm going to go ahead and add in header. TSX okay and also guys you guys are doing incredible with the likes right now keep smashing that like button get this video out as many people as possible Right RFC C and you can see like there we have the header okay now what I'm going to do go back to my layout at the end of the word simply do control space bar to get intelligence pop up and you can see boom just like that now you can see the header is displayed and that's going to be displayed on every page and to prove that point if I type in for/ search for example Star Wars you can see it's still there on the header page right and that's because I didn't put a term but you can see that perfect okay so inside the header now let's see what we have to build so if we actually look at the demo app you can see the header consists of a bunch of different things it actually has a few different um interesting aspects the first thing is think of it like a box that is our header and we simply have a left side associated with that box and a right side associated with that box typically here the best way to solve this issue is do Flex box and just determine space to justify between okay this is the way you do it and it keeps everything super easy and then you don't have to worry about custom spacing and all that and then here we're just going to go ahead and space them out between each other with a value of maybe two so that way they're gapped apart and these are three different components very simple to do right and I'll show you exactly how we do it so head over to your header and we're going to start building this part so I want you to go ahead and firstly for SEO purposes we're going to change it from a div to a header so web cers know that that is the header on the page next up we're going to have a link now the link is going to resemble this Disney uh tag right here so we're going to use the nextjs link tag so if you go ahead and import it like so and we're simply going to type in so example click me and the H ref for this is going to go to the homepage okay now if you see if I click me it will take me to the homepage but I'm already on the homepage so if I go to for/ search and I click it you can see it takes me back to the homepage now I don't actually want it to be text I actually want it to be a case of something like a picture now I think everyone is super focused right now cuz the chat has literally gone in and tell me if you're coding along with me right now or you're watching um but in this case what we're going to go ahead and do is we're going to go ahead and pull in the image here so I'm actually going to use the nextjs image component tag and this one is going to be image like so nextjs image like that and this requires a few things the first thing is it requires a source now I've gone ahead and shrinked the uh URL for you so I've made it easy for you this is just a logo of Disney and then what I've done is you need to give it an o tag for the text so in this case we're going to go ahead and pop in the O which is Disney logo and then it's going to complain that we need a height and a width right so in order to get this working you need to tell next J's image component about basically how it should optimize that image right so we're going to say it should be a width of 120 and a height of 100 yeah and yep in the mind says Dynamic page Ts for each page yes it completely is dynamic yes right we got the height and then also I'm going to go ahead and style it a little bit I'm going to give it a cursor pointer when you highlight over it and I'm also going to invert the color because I believe this this logo right now is a black logo and I've inverted it to be white so if we do that now what we'll see is we get an error now this error is fully valid and the reason for this is because nextjs image component basically one I've got a video on my channel so definitely check it out if you're a little bit confused about the image component and two when it comes to optimizing images with xjs remember that's going to take a little bit of computing power because it has to go ahead and you know basically resize it and do a bunch of stuff and you don't want every single image on your site to be able to use that power so we have to whitelist the domains that we basically trust to prevent this happening in a malicious way so if we go over to on nextjs config so if we go to next config.js now inside of here this is where we actually put the Magic in of adding in our you know our pattern so previously it was like domains images and things like that but we're going to make it a little bit so typically that was the old way of doing it thank you so much to man go I'm a net. net developer and enjoy next year specifically the way you coding it thank you so much dude I appreciate you well the new way of actually doing the uh declaration here is not domains we actually have to use something called remote patterns and what we do is we pass it in an array and here you just basically Define is it https or is it HTTP so in this case it's https so for this protocol we basically pass an object in for every single um domain that we need to whitel list and we say protocol in this case it was an https protocol and I want to whitelist this links. rea.com okay so links. rea.com simply copy that and go and type in host name and you pop it in just like that and you basically have said that this one anything that matches this protocol so htps links. po.com hit save and you'll see now on the left hand side it will say found a change next config restarting the server to apply the changes so if I refresh now you will see that it should have whitelisted that and we actually have the image now I can show you that that is actually an image because it's there right but if I was to go over to my header now and actually prevent the inversion from happening you can see boom we have the Disney logo okay I've just gone ahead and inverted it because eventually we're going to make the background different color so there we go that works exactly the way we want it and if I go to my header now uh we're going to go ahead and complete it with the next few things so we're going to have a div which resembles the right hand side and it's going to have the genre search box and the toggle okay so in this case we're going to have a genre drop down we're going to have a search input search input and we're going to have a theme Toggler okay so we're going to have a theme Toggler there we go and these three are going to get built out now now this is going to be a flexed container with space of X of two now all that means is that Flex puts them in a line horizontally and then the space between them is a value of two so you see this tiny little Gap that's just a space of two it keeps things nicely spaced apart right and also guys you heard P there first if you are interested in joining us make sure you check out zero to full stack hero my course and Community I just dropped a link in the chat right now and that's going to help you go ahead and sign up to our course to learn how to code the the way that I'm coding right now right I promise I make it that easy okay so let's carry on and again if you're coding along with me remember if you haven't already first link in the description sign up to the Microsoft link first link and you go ahead and get the code with the GitHub repo if they ask for your company you can simply put your name okay San goes thanks for being my mentor could you please suggest me Tailwind learning website honestly my YouTube channel it teach you how to do Tailwind okay so first things first I think let's do the genre drop down in fact before we do any of this let's give the background a bit of a color so I can actually see what the hell I'm doing so let's go over to our layout right here and inside of the body what I'm going to do is I'm going to say if we're typically we're going to give it a background of white okay so I'm just going to do that by default and the reason why you're probably wondering but it's already white well I'm actually going to change it a little bit so I'm going to say when we're in dark mode and I'll set up dark mode in just a second we're going to say background should be a specific color and what I'm going to do here is I'm going to quickly turn off I use something called Rocket for emojis it's annoying um I'm going to go ahead and say the background color I've actually got a custom color so I put square brackets and I put the hex of that color and it just means that when dark mode is on which I use it's going to go ahead and use that so normal dark mode now we're going to go ahead and set up dark mode so you can see that very very easy to set up dark mode with shad CN so I'll show you how we do that inside of Shad cn's website simply go to dark mode hit nextjs go ahead and do this mpm install next themes go back to your code come on J Pull up your terminal right hand side terminal go ahead here pop it in very simple that will install the package that we need after that we need to go ahead and create something called a theme provider now all this does is basically it's a client component that we need to be able to do the things that we expect uh the theme provider to do so basically copy that go over to your code command J hide that command B pull it open go into uh components create a new file file sorry called theme provider. TSX and I want you to then go ahead and paste okay so that is going to basically go ahead and just create a higher order component where basically you see it wraps the next thing that we're going to pass into it so if we go ahead and close that now all we essentially do now is we go ahead and we wrap it around you see inside the body right so what I want you to do is you see this code right here you can go ahead and copy it and then you can go ahead and pop it inside like so so you simply want to go ahead and pop it in there and then you want your closing tag to be on the other end like this so if I put in for/ them provider just like that and we can go ahead and import it from components now these are the default things that we're going to consider if you want to know understand a little bit more about that then you can go ahead and check that out yourself enable system means basically whatever your system is set to so I use dark mode by default with Mac so it's going to go ahead and use that appropriately right disable transition and change that's that little blur from dark mode to light mode if you want that but in this case we've just set it to disable the transition okay so if I go ahead and hit save now you'll see look at that guys I'm in dark mode because of my dark mode setup right now if I go ahead and do enable system okay it's already set but that is perfect that's exactly what we wanted now Jamie Davies what is up dude good to see you in the Stream as well Jamie's killing it lately on so many different projects so it's good to see you in the house look at this guys so that is looking right with the background color so far we're actually going to go ahead and add in uh one more thing which is the theme Toggler so if you go back over to Shaden you'll see that we have a theme Toggler so you see here mode Toggler click on the code this is essentially what we want right I want it to basically toggle between or you can select the system variant now again very easy right all you need to do is basically copy the code it's already done for us this part so it's actually super super easy command B go into components create a new folder we're going to call it the theme Toggler have some funny names I know right and then we're going to paste it in oops uh okay don't do what I did you want to actually paste it so you going to click code get that and pop it in okay and then you can go ahead take your time to go ahead and check this out but the main thing here is you'll get a complaint that you haven't installed drop- down menu so to get that working what you need to do is go to drop down menu in the side and simply get the command add drop down menu very simple command J Pull up your terminal pop it in install it and just like that it will fill that Gap and you have all of the UI components needed to build that toggle okay so that will take a little second while it's taking a second we're going to have a little water break you guys are absolutely Flawless today with the retention and your likes are coming through like clutch so smash that like button if you're enjoying this content right now quick little water break you guys can feel free to pause as well and remember if you haven't already first link sign up to Microsoft get the code for free for today's build right so that's done now you can see that that eror is gone okay so if you can see here all it's doing is it's basically got the button which resembles the Sun the moon and then the toggle theme button this is for screen readers only I made a mistake in the last stream and I got slated for it yeah because I said that was server render only but screen readers uh so it helps web crawlers that kind of thing and in this case you got the different buttons okay so now what I want to do is I just want to go ahead and pop that into my header so if I go into my header and you see where I have the theme Toggler I'm simply going to type in theme Toggler and I don't think I've actually oh so okay so before you do that go back to your theme Toggler I done command P to do that by the way to search and here I'm going to call this a theme Toggler so we're going to say theme Toggler just like so okay like that and then we're going to go back and we're going to type in to and now you can see it popping in and we go ahead and do that now if we go ahead and show this boom look at that guys if I change the light mode oh lovely look at that nice right and what you're wondering here is how but the logo never change color Sun that's ugly why are you doing that well you can actually go ahead and say in dark mode we want it inverted but in a regular situation we want to have inverted of zero and now you can see like in light mode and in dark mode it inverts look at that really really clean yeah so you see how we can go ahead and do the these tricks to go ahead and really build out a beautiful website very simple honestly don't over complicate it and do not be afraid that you know this just takes practice it's completely it will you'll get this in time okay so the next thing you want to notice is you notice how Disney is following me so as I go down the header is fixed to the top so I'm going to show you how we can do that we're going to say class name we're going to say fixed and the width is going to be full and you see how I look at that the minute it does that it actually basically becomes like imagine like an in visible component on top right so you have to be mindful of this you can use a sticky as well um and sticky is more accountable to the the Gap so in that case it will basically only attach after you slide down but in this case I like to mix it up a few times sticky you can use if you want sticky top zero uh I'm going to use fixed width four and I'm just going to use padding to basically fix the Gap underneath we're going to give it a z index of 20 because we're going to have layers to this set index basically just means what order things are stacked up on top of each other this is is going to be top zero I'm going to say items should be centrally aligned um so that means that this will actually be a flex box so in this case uh Flex box justify Center and um I don't think I've actually given it Flex I think did I give it Flex I don't think I did oh so we can get rid of that oh we did sorry of course I did yeah Flex there we go silly thing with me so justify Center and then we're going to say padding of five to push it away background gradient so I wanted to have a nice little gradient here what this gradient does is if we look over here can you guys see how there's a nice little gradient fading in from the top that really makes a difference with UI elements you see how it kind of like it really nicely fades in right so at the bottom so if I was to go ahead and make this a bit smaller you can see if I scroll down um you can you can barely see it but you see how there's like a darker fade there right so that fading element is actually because of this background gradient we're going to say background gradient to top so you can set a direction we're going to say to top and you basically set a from via and two color so you can set three colors which basically determines what color the gradient will go in so in this case I've set from Gray 2 200 and I basically said it's zero opacity so really at that point the color doesn't matter because it's basically saying it's see-through and then I've said via so the middle color is 25% opacity but it's a 900 variant of gray so a darker gray and then the final color is a 900 and that's 100% opacity because we haven't got a for slash next to it okay and as you can see now look at that ooh look see that it fad did the top out really nice yeah so that that's done things pretty nicely and also justify between is not what we want here justify uh justify Center is not what we want we want to justify between so if we justify sorry between you can see boom it spaces them apart and that is exactly what we wanted okay so ignore the behind the scen situation for now we'll fix that afterwards um we want to have for the link I want to go ahead and say a margin right of 10 so that way in the small screen if it ever gets too close it will push it away um and then yeah we can carry on with the genre drop down so in this case we've got genre drop down and we've got the search input uh for the genre drop down we're actually going to need a few extra things from tmdb and we're also going to need a search input now I think the search input is actually the easiest one to start with so let's go ahead and build that so I'm going to go ahead and build out our search input like so for sln like so and we're going to go ahead and basically customize that now so inside of components I'm going to create a search input. TSX like so RFC and there you go we got search input and if I go into my search input I'm going to show you what we're going to do so this is actually using a form so this right here is a form so if I type in Star Wars and I hit enter it actually works so you'll notice the quickest way to check if a form's working is you can go ahead and do it that way so it's correctly set up so when I hit enter boom it throws the form forward okay so in this instance we're going to use something from our shadan library form and now what I like about the shadan library is they've used the the best of a few different areas so what you have here is you have a mixture of something called react hook form Zod for basically validation to make sure that you know the input that you actually put inside of your form is what you wanted and then you can basically have it throw the correct messages like it needs to be a minimum of five characters or it needs to be a maximum of 100 characters or blah blah blah whatever you want uh and you can basically go ahead and set it up using a combination of react H formance or really nice really nice that they've done this yeah so what you want to do here is go ahead and firstly install it like so so you want to add the form and this actually adds a couple of libraries in so we're going to go ahead and add that inside of our terminal just like so and then we're going to go back over and we need to create a form schema so you can see it actually will install Zod from this and if you have used Zod let me know in the comments right now Zod is an amazing validation library and all we do is we basically have to define a form schema using the Zod syntax now if I go ahead and pop in my form schema you see all it is is basically our form table is basically resembled like think of it like I like this split screen approach it's quite easy our form is basically like an object right so everything that you're going to see in regards to that form so if I go ahead and show you the form here right so if I go ahead and zoom in the corner right there um let me show you a way that yeah so if we see this form right here basically what you can see here is a case of this form has consider it an object and every all the different fields inside of it are parts of that form so in this case now what I can do is basically I'm going to say the for the only we only have one form so we've got the input and then we're going to go ahead and say Zed string so it's a string it has a minimum of two so if they don't type in two characters or more it literally will not submit and then a maximum of 50 characters now obviously you can choose to customize it however you want um but yeah that's how you do it a Ganda says bro I've used Zod it was amazing Zod is really powerful honestly it really is and it's quite nice it's very simple to use okay now what we want to do is this is going to be a client component so this entire part right here is going to be a cent client component the reason why is because we're going to go ahead and actually have interactive elements now if you think about it on a server render it doesn't make sense that we have interactive elements hence why they're not part of server components because it's rendered on the server whenever we need interactivity such as onclick onsubmit anything that requires input we need to basically be attached to the user's browser which means it has to be on the client right so if you think of it that way it really simplifies it so in this case we're going to use use client and then you can see over here we've got this now I'm going to go ahead and basically because we actually are on a client component we can use something called hooks so we're going to need one hook here called the router and we're we're going to use this to redirect the user once they've typed in their search uh whatever they need so we're going to say use router now here be careful you got next for rout next navigation it's always going to be next navigation now when you're using nexts 14 onwards okay so do not make that mistake uh use router and then we're going to go ahead and open up so that is our custom hook and this gives us the RO object inside of here you actually have a few things like back forward push prefetch and so forth but we're just going to keep it as a router object like so okay and then what we're going to do is we're going to go ahead and Define our form so the way that we Define our form all of this has been described here so you can actually see they've actually done it here for you right so very very simple you can go ahead and copy this for example pop it in if we pop it in we just need to change one simple thing which is one we have to import Zod res over one we have to import use form and here instead of default values is actually going to be the input because the input is part of our schema and we're saying the default value is an empty string okay so this is how you define your form secondly you have to define a submit Handler and what's nice about this again it's all type safe right somebody says why so fresh nice what's good dude um so in this case uh we're going to go ahead and pop this here Define a submit Handler so we say unsubmit and you see how it's inferring type of form schema so it's making sure that the values that are passed through are type checked right so in this case you see this will be type safed and validated validated because it's in the correct format the input would be sanitized or basically validated again so it's a minimum of this many characters the maximum of that that's what it means by validated so it takes a lot of this kind of um headache out of the picture right it makes it super easy to go ahead and get that out of the way so at this point now we're going to go ahead and actually add the form in so here you can see how they've done it right so they've gone ahead and put in like you know this bigger chunk of things with render folds and all stuff I'm actually going to make it really really simple for you uh and show you how to do this for what we need I don't actually am using the full power of this right now I'm keeping it super simple so just for you guys so that way it kind of makes it easier so the first thing we need is our top level so first thing what I'm going to do is where we have a return I'm just going to put brackets and we're going to start putting our code inside so we're going to have a form and this form is basically going to be surrounded by a bunch of stuff this basically what we do is we pass in our form we do something called a spread operator so we pass in the form now we're going to need a bunch of different inputs uh from our library so we're going to say import form form control form field and form item from our component Library there we go and then inside of form we actually need a form object right so in this case form and you see here we have an action we're going to get rid of that and we're going to say onsubmit right broke says I love the content what's good dude we say onsubmit and here what we do is we say form. handle submit and then all we do is we pass in our submit function right so this is our in the one at the top right and now basically this is like a wrapper for our submit and it just makes sure that it follows all the rules and make sure that it does all the magic behind it validating and all that's good stuff okay then with that said we're going to have our form now I do want to do one thing where we have the class name I'm going to say space y between everything here of a value of eight so I want to have a little bit of a space if there is anything in there uh I don't actually think we need to do that thank you so much ID it says just saw your post congrats on your to buy purchase appreciate you so much dude thank you uh in this case we're going to say form field so this is a field that we're going to be using and then inside of here guys we're going to have there's actually a self-closed component so we're going to go ahead and do for slash but we need a few things we need the control control basically means which form are we attached to so we're basically going to go ahead and say form control and that's how we connect our form to the form that we've defined up here the second step we have to give it a name this is going to resemble one of those fields so in this case input is the one that we're going to do then we have something called a render function this is going to render out the form field for us yeah um he said really fine man thank you you're such an inspiration I appreciate you dude thank you so much for that um honestly I don't skip these comments I really do love you guys and appreciate you all so thank you just do me a favor hit that like button subscribe if you haven't already and please please please if you haven't already get the free code for this build that I've done put a lot of effort into first l in the description a form will pop up fill it out if it ask for your company put your name in and simply do GitHub repo and you'll get access to the entire code for absolutely free okay so that's going to help us out on the channel and it shows Microsoft that we're real family of developers are trying to crush it all right so in this case we're going to type in render uh develop Adam what's good bro good to see you awesome stuff man I love the growth on Instagram so in this case we're going to say render and here we have something called render props so we actually have the filled value here so if I go ahead and pop in the field I'm going to destructure the field I love this track this is a banger right so here we have this and I'm not joking I actually listen to this music when I'm coding so in this case we got the field and then we're going to have our parentheses and this is basically like the same way we would return something here right so it's basically determining how the field is going to render out so in here we have something called a form item right and then we have something called a form control and again all of this you can see it here if you really want to see how it is and you even have things like form message which is basically like if you want a message saying your input is too little for example you didn't hit the minimum requirement or your input is too high that's how you would do it and then you have the input itself okay now input we don't actually have yet because input is actually something we need to install so if we go over to Shaden we need to actually install input so let's go ahead and Pop That in command J we can pop that in like so add UT that will do its thing and it will install it there you go and then we can go ahead and see that it's now inside the UI folder so bam we add that in and then we have the placeholder which is going to say dot do dot Also let's just say placeholder uh search so search dot dot dot and you'll get volume B for oh isn't this wrong okay if I do have both simply delete one it was literally a situation which I may have just overlooked so you can delete one of them and just stick to one thank you Goku for that spat and out right and then to connect it to the entire form all we have to do is dot dot dot fied the spread operator and we do the following just like that now we have our form okay so this is really great this is exactly what we needed the only thing I want to do now is for example once the user has typed in something like Star Wars 4 and they hit enter I want to redirect them to the page right so how do we do that well it's very simple all we got to do is we basically get the values passed through on the submit here so this will actually be on the client so you would have to inspect the client to see this but then all we do is we simply say router. push and then we basically say I'm going to use back TI for string interpolation which means I can modify a string with a custom value what's up aat good see you we're going to go ahead and say this and we're going to say values do input like so okay now if I do that I'm all I need to do now to get this basically finished up and working is go to my header simply import the file like we need to Boom like so done that hit save and what we'll see now is a search field bam it banging look at that so if I now go to uh type in Star Wars hit enter look at that guys we are at the we are at the Star Wars page amazing right and if I type in just type in um hello world you can see welcome to the search page hello world great stuff okay so this works if I want to go home I can go there so really great stuff and you can see this this is not rendered which is amazing as well right you can even have it so it clears the input if you want to clear the input after you've searched it's very very simple all you do is form do CLE uh form control. clear I think it is there's basically a very simple way to form. reset so if you do form. reset afterwards now you can see if I type in Star Wars you see how it cleared the search input yeah so you can go ahead and do that if you want this is completely up to you um if you want to do that I'll tell you what we'll keep it in there we'll keep it in there I haven't got that in the GitHub but that's how you do that um guys you're about to smash over 400 likes the retention absolutely phenomenal today I appreciate every single one of you let's keep on going strong so at this point now we've got this down perfectly so the search input's done the final part to this really is the genre selection right so genre selection is our nice little Next Step so let's go ahead and build that Italy in the house what's good right so we got the genre drop down let's go ahead and create that so I'm going to go into my components create a fold uh file called genre genr dropd down. TSX boom RFC and we've got a genre drop down like so now this is where it gets a bit interesting because we're going to be using something called tmdb to make a connection to um their database so I will show you what is tmdb so tmdb is simply a movie API so I'm going to go ahead and show you so the movie database and it's a really good database we can go ahead and pull from things and it's a really nice um sort of service I guess that we can call it and this is going to help us basically go ahead and get the movies and things that we need so at this point now if I go ahead and you can add movies as well do all that stuff so I'm going to go ahead and type in tmdb API react and you can see here if we go ahead and see the documentation um I've actually got it on my other screen I believe so we can just go into where is it profil settings uh I'll show you where is it API there we are at the bottom API and here you can basically go ahead Love From Italy Verona we have so many Italians that tune in honestly what's up guys good to see you here right so in this case getting started you can see here we've got all of our search things now you can see V3 V4 we're using V3 today it really doesn't make a difference too much to be honest and you can go ahead and do a lot of the API search references so here you can see these are all the different things that we can do here so example if I wanted to find a film so let's go ahead and type in uh for example let's go ahead and say movie discover right here I can select my coding language no JS fine we've got the header for the key all that good stuff and then you can go ahead and simply basically copy that and this will make the request if you click try for example you'll see that it goes ahead and returns all of the things that we need with the results this is so handy this is how documentation should really be so this actually makes it really really nice oh wow we also have two we have two members from Verona that is awesome the Italians are getting recommended the content now that is awesome to see right so in this case now you can see that that works pretty cool and we get 200 responses so now we can use that logic to go ahead and get everything working so for the genre drop down I'm going to make a call to this API right so I've saved you a lot of hassle a lot of the work now I'm going to prepare my request and then what I'm going to do is I'm going to say const options and we're going to say um this is of type request in it which is from um let me see it's not actually from anywhere to be honest you you don't have to employ it um it just basically specifies the correct things like the body and what kind and stuff so we're going to have a method this is going to be a get request okay then for the headers I'm going to show you don't don't do that that's what um it just threw in itself we're going to say headers and then we're going to say accept application Json and we're going to say authorization so this is the one that I need you to pay attention to right so this is how it expects to get authorized so you see here authorization so this is basically where we're getting it from okay now here is my key um obviously don't use it okay uh pretty straightforward in this case I shouldn't be showing you that but the point is that we can get a different one anyway um but in this case you can go ahead and copy that and pop it in so but in this I don't want to use it like that I want to say authorization and I want to basically go ahead and do a back tick and we're going to say beer space and then I'm going to use environment variable so process. environment do we're going to go ahead and say tmdb API key Now by default all of your environment variables are private which means that it goes ahead what's up logos in the house which means that it goes ahead and it's only visible to CL components unless you put next public and then the API or the the key name be careful with that you don't want to do that because it exposes your key people can then go ahead and use it it's not ideally the behavior that we want okay so in this case tmdb API key let's go ahead and create our environment file so in this case if I just create a new folder outside of everything called m. local here now what you can see is if I pop this in I can pop pop in my key right and this will get pulled through and then I can use it in this capacity so in this case I've already got a key but I going to show you how to get your key so I'm going to go ahead and show that right now so um what am I doing uh yeah there you go so pull your API key what you want to do is go to your profile so simply create an account go to your profile and then I need you to go ahead and do the following so you can see access token um okay where where do I get again let's go here let's go up to account uh edit profile or settings one of these and then you'll see API so if I click this now I'm going to Showcase something I'm going to hide my screen for a second cuz I don't want to show you but I'm going to basically hide it a little bit okay so you click on the API on the left hand side and you got an API key but you've got a read access token so this read access token I need you to copy it so copy this read access token and then basically we're going to use that in a second so I want I'm just copying that right now um and then we can re I'm going to regenerate the key as well so I'm going to do afterwards so if anyone does do any madness here honestly it's going to just take me two seconds to do that so just I'm trusting you here so we're going to go ahead and then here where I've got my key I'm going to paste it and then close it so paste hit save and close so I'm pasting it it's a Long Key I've closed it and now you'll see that inside of my terminal it says reloaded environment file local okay soah heib sing yo what is up dude thank you so much for that beautiful donation man he goes the energy of this channel is crazy I really like how sunny keeps explaining about every single module in easy way keep the high energy up dude thank you so much bro I appreciate you so so much guys if you like that kind of content imagine what we have inside of our course I just drop the link in the chat right now so you can feel free to check that out khed says Sun you really are my idol and you're so good at coding and teaching that it makes me love to learn more hard to code I appreciate you so much for the kind words guys this is really really sweet stuff I'm just taking a screenshot of that right now thank you guys I always like to keep these little wins they're not little to me they're huge so thank you so much I appreciate you okay and with that said we just boom we smashed over 400 likes that's what I'm talking about so at this point now this will send the request with that key okay so that's basically what we want that's good now here's the magic part and I want to explain this really in depth okay so pay attention to this part so what we can do here is with nextjs 14 we can actually have caching now caching is a really important principle I need you to understand basically the way it works is whenever we do a simple request every single time a user wants to get information the same request is sent out and that's okay it works right that's the way the internet's work for a very long time but however you can be a lot more efficient than this right the way you should be doing it in situations like this is every request is going to cost something right whether you've got a free quter of 10,000 requests that's fine but let's say you went viral tomorrow and people are coming on your website now the better way to do this is you want to cash the results if it's something that doesn't need to be refreshed every single minute and you can basically say okay we already fetched this value and someone someone's just making the same request we can give them the the answer from before if it's that kind of data you have to make a judgment call here then what you can do is you can do something called ISR this just means incremental static regeneration and what we can go ahead and do is basically really nice little trick here so we can say next you can also do this at the top of files but I'm going to go and show you how you do it per request we say next and then we basically go ahead and say revalidate okay and now here example if I put this in this means it will revalidate every 20 24 hours so we're saying 60 seconds 60 Minutes 24 hours right and basically you determine it into in seconds here so in basically we're saying 60 seconds times it by 60 Minutes times it by 24 to get 24 hours in seconds basically right now the whole point of this is it basically is saying that if I make a request if I make this request the first person it will create a real connection to the database get that value back and then it will cash it on the CDN to the servers right now now what will happen is the second person let's say Jay comes onto the website he's going to get the cashed version and the everyone else who comes after that is going to get the cashed version okay firstly if this is making sense to you and it helps you out smash that like button because it will honestly this will is a GameChanger once you understand it and then everyone's going to get the cash version and then after 24 hours let's say somebody comes along say Elon Musk comes along and he goes to the website he's going to be like okay the 24 hours is now expired so the cash will do something called a cash miss or it'll be a cash of a stale and basically it rebuilds it by doing a fresh request and then it cashes it and then the 24 hours happens again where the cash value is stored now think about it what you've just done there which is absolutely phenomenal is you've now changed it from 10,000 requests if you had 10,000 users to one request every 24 hours even if you had a million users one request to the back end every 24 hours that is really powerful okay so somebody just said in cashing how does the data get updates especially since it is most dynamic for nextjs it's optimal for building Financial stab appication blah blah blah so the point is that you have to really make a judgment call here if it needs to be dynamic every single time do not use this approach right simply just make it a case of you do caching no store which basically doesn't catch the value so it's something called server side rendering every single time or you can mount it on the client and basically get a Fresh Value however in situations like this where it's presentational information that does not need to be required every to be a fresh call every time cash that value if anything you could do it 48 Hours you could do a month if you really wanted to the point is that I would say 24 hours is a great way one request every 24 hours that API is absolutely efficient now okay so I hope that made a lot of sense I saw a likes literally flew up when I explained that so uh I'm glad that actually helped you guys out so after that's done we're going to make the request so at this point we're going to say const response equals oop sorry I I'll go out of that bit now we're going to go ahead and say firstly this is going to be an asynchronous function now you can do this because it's a client a server component so at the server components we can do a high level asynch away and then we're going to say con response equals await and I'm going to say fetch and I'm going to do Open brackets I'm going to say URL and the URL here is this okay and basically uh I usually do two string but in this case it's just a standard URL so we're going to say URL and we're going to say options okay to pass in the second one and then we're going to say const data equals and I'm going to basically await for the response. Json and then basically I'm going to say as genres right so I'm going to go ahead and Define what genres are in our own type definition so I'll show you how we do this so here we can actually simplify this a little bit uh I could actually do dot genres but I'm going to show you what we do here so I'm going to create a file to help us out with a lot of things now remember we can actually see what was coming back from the database in the doc dentation for tmdb so what I'm actually going to do here is help us out a little bit at the top level I'm going to create a file called typing oh not there sorry so you want to click on package Jason you want to do typings do uh TS okay and now here I'm basically going to go ahead and pop in for example the genre so that's a type the genre comes out with the ID and the name and that's all validated I've checked this out beforehand so it's all there and then we actually get genres comeback which is simply a type of genre right so in that case is using that we also have search results so for later on we're going to have search results which will return to us uh and then that has a movie type and for movies I've going ahead and done the hard work for you you can simply go ahead and pop it in like so so this is uh the things which come back with the movies and as you can see now we just basically use our type definitions in these to go ahead and build out a type safe approach to working this right so that's really cool and it really works nicely now if we go over here we can simply go ahead and import our genres and we have a beautiful type safe way to approach things things so what's up guys I see loads of you saying hey how's it going so welcome to the stream if you if you're new um so now we've got the data coming in I can simply go ahead and do console log data and then just to Showcase I can do data. genres and if I go ahead and pop this inside of my header now so if I type in genre drop down so genre drop down like so genre drop down import it and then we do the following now what I want you to pay attention to is if I go into my thing look at that guys boom in the server we can see all the different genres being pulled from uh tmdb great stuff right and you can see what happen look what happened there it fetched it the first time and then afterwards once I hit refresh oh no sorry it's not of course it will cons log every time but basically it won't actually have to refetch it the second time and I can show you in the request tab uh but it's you can just trust me here right so this is how it's coming back okay so I will create a dedicated video for caching as well yes I will I'll make a very visual video to explain that because I think it will benefit for a lot of you all right now once we've done that we can basically start building out our drop down form so let's go ahead and firstly install we I think we already did it but install our drop down where is it drop down menu here and you can see this is essentially what we're going to be using to create a drop down form so I made it very simple I've already actually installed this earlier so we don't need to do the top command of install drop down menu but if you haven't got it and you it's sort of you know freaking out at this point you can do that we're going to pop that in like so and then I'm going to also get a Chevron down right so this is like a little downward carrot thing so that that right there okay oops um this thing wait one second I've clicked out some hard yeah there that thing yeah so once we've got that I'm going to go ahead and also get a nextjs link tag which is my final thing that I need and then we can build out the UI here so just follow me I'll show you how we can do it so basically I've just reverse engineered their example you can literally copy it and change it as you need it but I'm going to show you how you can do it yourself so again let start from scratch let go ahead and do this boom and we're going to say drop down menu okay like so boom now you've got the drop down menu and then inside of drop down menu sorry this is not correct it's drop down menu and then inside of here we're going to have a drop- down trigger which is basically going to be what triggers the menu okay and that's going to be the Chevron down it just says genre so this so when I click that now it's actually opening a um something called drop- down menu content so we have to Define what is in the menu content so if we pop the menu content here so this will basically get triggered and it'll be open closed open closed depending on what I've clicked so if I go ahead and put down for example a little example something like this drop down menu set now you can see look when I click it look at that select the genre okay now what I want to do is I just want to map through all the genres that came back and basically render out a clickable link to the appropriate uh genre that basically page so the way I can do this I can say data. genres. map and for every single genre we're going to go ahead and do an inferred uh implicit so a return and you can see this has a type of genre because of our type definitions earlier we're going to say each one is a drop- down menu item so a drop down menu item the key you should always have a key here is going to be the genre ID okay and then we're going to close that up as well so let's go ahead and close that up and then inside of there we're going to actually have a link right nextjs link tag and inside this link is simply going to have the genre. name so genre. name okay this needs a href otherwise it's going to freak out and it says what you doing this needs to be a valid link we're going to use string interpolation here to combine our variable with a string okay so what I'm going to do is back ticks and I'm going to say for SL genre for Slash and then remember we had a dynamic wild card for the genre ID so in this case what I do is I pass in the genre. ID simple as and then I have a search parameter which we called genre and there I passed in and this is string interpolation there I passed in genre. name and now it's basically perfectly taking me to the correct um page so now when I click on this so let's go ahead and click on for example look at this look at that boom if I click on drama now you can see look at that 18 and drama if I click on Comedy 35 and comedy I click on action 28 and action science fiction 878 and so forth so that now has perfectly set up in the way that we expected it really clean right that's really really clean really nice and we've just done our first call API call with with caching involved very simple level look at that that's caching per request right so super powerful stuff for here right and um it's doing it exactly as we need to guys let's get to 500 likes already through that really nice explanation I think that we broke that down from so that is actually awesome and it's working the way that we want it we have our search we have this working if we go to Star Wars now we've got all of our routing organized so we can go ahead and proceed with building let's start off with the homepage right because I've already made a connection now to tmdb I think we can create this beautiful homepage and then we can start populating the rest of it and then we can go ahead and incorporate open AI in the way that we need to so let's go ahead and do that right now so first things first for the components I'm going to go into my homepage and we're going to have the following so let's go into our homepage so inside of app we go to page. TSX and this is where we can go ahead and start building it out so firstly we have the carousel Banner right so this one we're going to have a carousel banner and I'm going to call this a wrap because we're going to have a bit of a high level logic here where we're going to do a bit of things inside that component which then renders out the carousel then we're going to have a div and inside of that div we're going to have three movie carousels okay so this going to be three movie carousels right and these are going to take a few props we're going to pass the movies as a prop and we're also going to pass in a title as a prop okay so the movies will get passed in as a value here as something and then the title here would be something like upcoming and so forth and what we're essentially going to do is have this out three times and what you our end result will be is it will look some like something like this the upcoming top rated popular and then the movie Carousel over here which is like a scrollable container okay so really really nice stuff now first thing I think we should do to make life easy is the movie carousel right the carousel is a lot easier than the carousel Banner rapper I think it's going to make it a little bit easier so we're going to go ahead and create this right now so movie Carousel and this is actually going to be movie Carousel I'm going to just correct that for OCD sake and then we're going to go into our components create that file movie car. TSX okay so inside of here now what I'm going to do is I'm basically going to have a RFC let's go do this RFC boom let's go get that out the way movie Carousel and remember this took a few different um props okay so let's go ahead and say type props equals and basically we're going to have a few things we're going to have the title that came through which was a string okay the title is optional so you don't actually have to pass it in we're going to pass in movies which is going to be of type movie we're going to import that from typings yeah then we're going to have is vertical now remember when I told you that this basically could also represent two different things so this could represent this a horizontal value or if we're in a search page this vertical value right so I'm going to show you how one component is going to be responsible for both and we basically simply just pass in isue to determine that or not okay so first things first we're going to say the div should be here this is going to have a z value of 50 because we've got layers to this build and then inside of here we're going to have a H2 and that's going to have the title okay now the title we're going to basically pass all all the props come through here so we're going to destructure our props we're going to get the title we're going to get the movies and we're going to get the uh is vertical out of here so is vertical and then we're going to Simply go ahead and assign that to our props now here if we go ahead and do that if I go over over to my movies Carousel so let's start importing this on the page so if we go back to our page I'm going to basically go ahead and pull this in for the first one so the movies are not here yet so we're just going to go ahead and say that we're passing in an empty array for the upcoming let's go ahead and do that so now you can see upcoming is there it's behind right now to ensure that we don't get an annoying situation here what I'm going to do is for the div I'm actually going to say Flex Flex uh column and then I'm going to say space y of two and then we're going to say an extra large margin so margin top of 48 now the problem with this is I think we're going to have to actually go ahead and build the carousel Banner rapper first because the carousel Banner rapper is actually going to be responsible pushing it all down otherwise you see the problem that we're going to have it's going to be on top of the fixed view so what we'll do here is we're going to pause on the movies Carousel but we're actually going to go ahead and actually no we're we're good we're good for now I'm instead what I'm going to do is I'm just going to go ahead and pull for my layout for now I'm just going to comment out my header right that's what we're going to do we're going to comment out the header and we're going to build the movies Carousel we're going to get rid of let's build Disney cuz we don't need that anymore and we're going to build our first Carousel yeah let stick on on par with that I think that's going to be a lot simpler to understand so at this point now for the movies Carousel we need to go ahead and actually pass in some movies so I'm going to make a call and basically our end goal is going to we're going to have three calls and they're going to be as simple as this boom we're going to have a high level asynchronous function because this is a server component upcoming movies top rated movies and popular movies and these are all going to be in a nice neat lib folder where we can basically go ahead and get our movies so all these requests are going to be cached handled super clean super neat and I'll show you how we do it go to your lib folder which would have been created when you installed Chad cm and I then need you to go ahead and type in um get movies so I'm going to create a folder here called getmovies dots okay now inside of of here what we're going to do is I'm going to go ahead and show you we're going to go ahead and have a few different functions okay so the first one that is basically going to power up all of our functions is going to be a function called Fetch from tmdb okay so let's go ahead and create our function we're going to say async function fetch from tmdb and this is basically going to be responsible for fetching from our our database right our Movie Database this is going to a URL it's going to have a cash time which is going to be basically um optional right so you can pass that in if you want or not now what we're going to do here is we're basically going to take our URL and I'm going to prepend a few things that I actually want to do by default so the URL that we pass in I'm going to go ahead and actually pass in my own search pram so I'm actually going to add in my own search pram saying basically don't include any adult films don't include any videos sort by the popularity the language should be in the English us and the page only when to get the first set of page results okay so every time I'm basically making sure that it passes EAS in and I've figured this out through the documentation on tmdb all right now after that we basically have the same approach that we had previously we have our request so we have the method get the barer key that I told you before and except this time we're saying you can pass in a custom cash time or if you didn't pass the value and it will just default to 24 hours okay to default 24 hours if I wanted it to be 60 seconds I just than 60 otherwise it will default 24 hours okay so now we've got a really nice reusable function and then we're basically going to go ahead and make the call and then we're going to pass the results of the call as something called search results right so in this case search results we already created over here and this basically just has the page the results in this format total pages and total results so this is how it comes back from tmdb and then we're just going to return the DAT are okay so think of this like our parent function and we're going to use this to make all of our rest of our gos super super easy right so now at this point what I'm going to do is I'm going to pop this on the side and I'm going to very clearly visualize what's happening on the home page here we have get upcoming movies get search movies and so forth okay so let's do get upcoming movies right now so we've got get upcoming movies I'm going to create a function here called export async and I'm going to say uh function get upcoming movies okay very simple it doesn't even take any arguments because we've got our helper function now all we need to do is have a specific URL that we're pushing to so in this case boom I'm going to go ahead and make this a bit uh full screen now so you can see what we're doing but we have the URL that we're going to basically make a request to and then what we're going to say is Con data equals a wait fetch from t tmdb with that URL I don't need to pass anything else because it's a generic call right and then what I'm going to do is I'm going to say return data. results just like that and you can see that this is a promise that Returns movies so now if I go back here and I pass that in boom and I can simply now go ahead and say upcoming movies and you can see there everything is completely working the way that we expected and now we're making a request we're getting the upcoming movies and then we're passing it through to our movies Carousel okay um so Anie says would it make sense you can go ahead and add Zod in and all that stuff if you really want to completely fine you can take this build as far as you want okay so we've done upcoming movies we're going to do the same for top rated movies exact same principle except for it's just top rated in the URL and popular movies exact same principle but it's mov is popular okay and yes you can even refactor this to make it another function where you just pass in the URL and make this exact same core because these lines of code are repeated twice right so you can actually go ahead and refactor it further I'm just kind of show you layers to this so it kind of you know makes a bit a sense okay now that's great I think let's go ahead and prepare everything that we need to the next one is going to be discover movies so we've got two more I guess let's just say more complicated Calles we're going to say export async function and this one is going to be for our search so this is actually going to be for let's put it in terms of genres so to get the genres we're going to make a call called get discover movies because we're using something called the Discover function on the tmdb search uh API so in this case we can say string we pass in the ID of the genre and we can pass in any keywords specifically that we might want to include as well okay so this going to be a string okay so now thank you so much harsh says I love your video thank you so much I appreciate you guys almost at 500 likes as well absolutely incredible retention right so now with this we're going to use the Discover URL then what I'm going to do is I'm going to say if they passed in keywords or and if they passed in ID we should conditionally do the following if they passed in keywords then we should set those keywords here if they passed in ID we should set the genres with genres ID so basically inside of tmdb it's very simple to actually see what's going on there you can see with genres is in the disc movie so if I go ahead and type with genres and I can basically say like with genres 8 for example and it will go ahead and update my call appropriately yeah and you see if the URL here if I go and type in eight you see all it's doing is it's appending with genres here with genres of eight okay so that's essentially what we're doing here okay and you can see it actually said type string and all that good stuff so we're basically mapping it exactly as it is on the API and then what we're going to do is we're going to pass this in and make the call okay okay nice BJ yeah we we about to hit 500 that's amazing right so I'm going to have a quick little water break and then we're going to carry this strong we're moving at really good Pace today okay let's go back in so we have our discovered movies done really great stuff um somebody says I love nuro says I love your chat GPT video amazing stuff you're going to love this one because we have two instances of open Ai and then we're going to have get searched movies now as well so the final core is going to be export async function get searched movies oops okay um get searched movies and this one will take a term so you can imagine this is for our search page okay so this one here is going to be very simple we're going to make a call to the search endpoint and then we're going to basically go ahead and append the following Things based off of it right include adult F blah blah blah in fact this one is actually going to be we're not making a call to the previous thing which we should have actually done I think um why have I done this one maybe I think what we could do is not do what I'm doing here because it's is silly what I'm doing so basically we're just going to do that and then I forgot to refactor this if I'm honest and then we're going to go ahead and just make our call using our specific thing earlier like that yeah that's perfect that's exactly what I wanted to do um there's I'm just checking the differences here cuz we do language video yeah it's perfect okay yeah so get search movies just like that and you can see now look that's clean code guys that really clean code you can go ahead and honestly like like I said these steps here you can go ahead and you know shrink it down if you really want to but again overall pretty clean very easy for another developer to come in understand what the hell's going on and build on it okay now we go back to our page let's go ahead and import our functions like so really nice and then what I want to do is in here I'm basically just going to pass in the appropriate values so these are going to get replaced with the following so top rated movies popular movies and the title is going to resemble that now let's build out the movies Carousel so you can see here upcoming top rated popular show case here so now what we're going to do is build it out and you're going to see in real time how it basically renders to our page so the first thing is we're going to have it so we're going to map through all of these movie cards right so I need to create a movie card and then that's going to be basically how we do it so I'm going to say movies do map and here I'm going to say for every single movie we're going to go ahead and render right and then here what you can do is you can always conditionally render so it doesn't break if they for whatever reason there wasn't movie and we're going to say movie card okay now whenever you render through anything you always have to pass in a key so we're going to say movie.id and then the movie itself is going to be there that we passed through now we need to create this movie card okay let's go ahead and pop this inside of our components we're going to create a movie card. TSX like so RFC boom pop that in and remember what I said this is actually going to pull in a movie okay so we can go ahead and actually pass the prop in right now or if you really want to you can just go ahead and inline it like this you can say movie movie like so okay and do an import like that we don't need to import react very simple okay so just like that now inside of our page uh inside of our movies Carousel if we can import our movie card like so J Gerard says hi Sunny this is phenomenal I appreciate you dude thank you so much for the kind words right so here we have the movie card now I want to show you if I go ahead and hit save look at that boom boom boom boom boom boom boom look at that so rather than showing we want to turn that into this movie card right so these this really nice kind of slick swiping animation right so now what we do is we go into our movie card and we basically start styling out we have all the information we need because we already have the movie itself here so we just need to basically make it look like the way that it is there okay so something to notice is we actually have a really subtle gradient here as well on each of these right so I'll show you you very subtle honestly it's so hard to tell but you'll see the difference it makes right so the first things first is I'm going to have a P tag this P tag is just simply going to say movie. tile like so and you can see look everything's starting to pop in great and then we're going to say image and this is an image tag which means it's a nextjs image tag and this is important because the caching here would actually make a massive performance bonus for us and then we're going to go ahead and pass in the oat width height 9020 x 1080 because we want to keep the aspect ratio clean and then the thing is for the source so the source we actually need to create a helper function here guys so I'm actually going to have a source and I'm going to say I'm going to create a helper function called get image path which we haven't created yet and basically I'm going to pass in either the movie backdrop path first we're going to check if that exists otherwise we're going to default to a movie poster and then we're going to create this function I'll show you why because all they do is basically provide the end point so the ending would be like for SL film I don't know I'm just making it up here but Form 1 23 for/ poster. J Peg right it'll be something like that now they don't give you the beginning this this kind of you know www do blah blah blah so we B need to create a little function which gives us the rest of the entire path so I'm going to create that path right now okay um somebody says this already recorded video no it's live right now I'm literally live talking to you right now okay um hanock says hi Sunny what's up dude so in this case we've got the lib folder now I'm going to create a new helper function here called get image path. TS okay now here we're going to say const um I don't like how that's massive there you got const get image path equals and we're basically going to pass pass in two things now one I'm going to say image path and I'm also going to pass in an optional called full size right full size is going to be important because I'm basically going to add that little parameter in uh into the URL which is basically going to determine if it should you know bother to send me a fulls size image or not because for the smaller things I don't believe we should be receiving these massive files because it's just going to mean it's going to be more weight for our user which we don't want okay so in this case now I'm going to do a turny operator and I'll explain what it does so here is what we basically have thank you so much Frank for a $5 donation you guys let's keep the energy up everybody Sunny has been dropping tons of values for only for over an hour that is it dude Papa F in the house thank you Frank uh I appreciate you so much dude I'm just trying my best here to help you guys out the best way I can right so in this case right now I forgot to do an arrow function there we go and you can see here we're saying return image part and basically this is the if else so this is a turn re operator saying if image part is passed in then basically we're saying go ahead and this is the URL that I'm talking about and then we're saying we we're basically the next part of that URL is the size so if we pass in full size it will pass in original and that basically tells tmdb give me the full picture but otherwise w500 means like 500 width so don't give me the maximum then you've got the image path which is the one that I told you about if we didn't pass in an image path then it would default to this and this is just a place a it's like a little like a movie loader okay giant silver says great job Sunny keep making this phenomenal video Extreme value I appreciate you guys so much I'm actually going to screenshot that right now because that is a lot that means a lot to me thank you so much guys um huge huge huge stuff okay so with that said now we've got our image pass and I can simply go ahead and Export default IM image path okay so I want to make sure that's handy to us we can use it now with that done let's go back to our page now back to our movie card and here we can import it like so okay now just like that if I go ahead and pop it in like here you can see image. tmdb is not configured now here I need you to pay attention so remember I told you there was a bit where you had to be very careful if you go to next config we're going to add another remote pattern so we've already got one I'm going to add a second one here but the protocol is not HTT PS be careful HTTP image right so the protocol is actually a HTTP image and the host name is actually going to be this right here shoter world says awesome content I love it right so in this case we're going to grab the image there we go boom host name image tmdb org okay amazing stuff now I'm going to do a quick pause here because at this point things can tend to go wrong right which means that you might value or benefit from having the code while I'm doing doing this so what I would highly recommend is quick reminder if you go to the first link in the description guys you will see this right here right so the the Microsoft link it will simply ask you a couple of bits of information your first name last name your email and then it may ask for your company and if you ask for your company simply put in your name if you do not have a company now once you've done that you'll reach this page you can simply go to the GitHub repo here for free and you get the entire code base for free this is really important and it's going to benefit you so much because in moments like I just showed you little mistakes can happen and it will really help you by Ben by having that bit of code right so we typically don't give the code for free but you can go ahead and check out the GitHub repo right here for absolutely free and if you want to go ahead and jump into my course you can go ahead and do so right here H it's listed on the Microsoft website so you know it's genuine so you can go ahead and free to check it out okay so somebody says which not why don't you give us a get reer link because we want to go ahead and do it this way right this is how we can go ahead and show Microsoft that we're serious in our collaboration so I would recommend you do it this way otherwise honestly just trust me on this it really helps us out a long way as well right if if you want me to provide things for free there are little tradeoffs and this is one of them okay so all you need to do is sign up and then just go ahead and get the code that's it say thank you move forward all right so in this case now if we hit save uh llot says thanks for the code Sunny it will help us you're very much welcome so if we hit refresh now right so if we go ahead and refresh boom look at that guys that's kind of a freaky picture I ain't gonna lie but in this case look at that nice right so we've got the pictures coming in so at this point now we can go ahead and start styling it I guess right so I'm going to go ahead and actually add in a bit of styling here so the class name we're going to say width fit and I'm going to keep hitting save so you can see it right on a large screen so this is basically everything by default is mobile first and then we add in break points so by default is width fit and on a large screen we'll say minwidth of let's just say 400 pixels okay so it can get a bit bigger on a large screen so if I go a bit bigger see how it gets bigger there you there you go so we can go ahead and do that height of 56 object should be cover save there we go that looks a bit cleaner object should be Central as well I'm going to give it a shadow of medium shadow of medium I'm going to say shadow gray 900 and then I'm going to say drop shadow Xcel and I'm going to basically round the corners of these images so boom like so now you see very very subtle drop shadow behind and the corners arounded right so little things like that make whole difference when you're styling out right same with the P tag let's go ahead and give it a little bit of styling we say absolute uh Zed of 20 I'm going to say bottom five okay so bottom five and we're going to say left five now you're going to see a big mistake here look if I do that boom they're all crammed into some Corner over there the reason being is because when you set an absolute positioning it's absolute to the entire page so what you need to do is get this surrounding parent container and basically go ahead and say it's relative which means that anything absolute inside of that is relative to the parent container very important right trust me if you don't get that concept when you use absolute values if the parent container that is positioned within so the child that is in the child that the parent is in so the div that is surrounding it make that relative and then it's actually going to go ahead and be absolute just to that that confine space really powerful right it allows you to do a lot of cool things so go ahead and hit save and look at that look relative to that space now which is perfect that's exactly we wanted yeah um Raj says thanks Sunny I'm improving my coding skills amazing stuff uh simul says wow Sunny this is brilliant thank you so much you're absolutely welcome right um so in this case look at that looking really really cool now let's get the scrolling bit down right so I want to get that scrolling bit but before we even do that I'm going to add that gradient that I talked about right so if we go back over to create next tab you see how these ones have got like look these don't have a little blur see that like they haven't got this little gradient over it so I'm going to show you how we do it so at this point I'm going to have a div and it's going to be a self-closed div so div self enclosed like so I'm going to say class name like this and we're going to go ahead and say absolute inser zero okay and then here you can go ahead and mess around with this as much as you want as I mentioned before the code will be there but basically what I've done here is I passed in a bunch of The Styling options so if I go ahead and pop in I've done a background gradient to bottom so from top to bottom from Gray which is basically see through cuz it's zero to 10% opacity very subtle okay to a gray value of 300 again very very subtle things and when I'm saying on dark mode it should go to a value of this so it's a bit of a darker color right and then Z index of 10 so it goes it Stacks a little bit higher so if we go ahead and hit save now boom did you see that that's really different right if I went ahead and change this to Red 500 for example look at that you see the difference so now if I go back over to this that's perfect that's what exactly what I wanted okay really really nice so you guys can see already that that's a big difference right so this is the thing in in UI ux honestly these differences look at that and the reason why we want to do things like this is because it emphasizes the text the text can really be shining through and you can actually read the effect right so uh why is the shadow expanding past it because the width is full right now um I believe where done it the width on the parent was four um but the only thing is that will fix in the next thing I'm about to do so now I want this to be in a line and sort of you know go ahead check this out if you want to see what inser does it just just sets an inser of zero okay so in this case we're going to go ahead and say Flex shrink zero so I don't want this to ever shrink in value right for whatever reason I want to give it a cursor pointer when I highlight over any of these things I'm going to say transform because I want to have a scale effect so I'm going to say when when I hover over it I want it to scale to 105% I'm going to say there should be a transition when I do this and the duration should be 200 so oops duration 200 remember this is the movie card only that I'm talking about so the ease out animation which means that it should snap in really quick and ease out and then when I hover I want the drop shadow to be large okay now look at this look boom boom boom boom okay really really nice so you see it's a full width right full width at the moment I'll show you how we fix this so now that that's done the movie card's done so we're going to go to the movies carousel right movies Carousel boom now over here where we have the div we're basically going to go ahead and Surround all of the things that we're mapping through inside of a div right so here we're going to map through all of the movies inside of a div and now we can style that div so I can go ahead and basically say um I'm going to use actually I'm going to combine a bit of styling here so we we've got something called Cen which is actually past through Li um through uh what's it called uh this is basically like how you can combine class names and when we installed Shaden it was actually installed with it alongside it so here what I'm doing is I'm just passing in my values okay so I'm going to basically pass in um the first value which is going to be flex and as I save it you'll see what's happening here so Flex by default puts things in a row and you can see look my overflow of my entire page is basically flying across that's not ideal that's not ideal what I want to do now is I want to say flex and I want to say overflow scroll okay so firstly space them out so Space X of four and you can see look they get space between them so that means they're not touching when you hover that's much nicer we're going to say overflow scroll and now you can see look each container is scrollable but the page is not scrollable which is what we want that's really clean okay and then we're going to say um what have I done here then we're going to say scrollbar hide so scrollbar hi now this one it doesn't exist right now I'll show you how we can add that in right so this is not going to work until I fix it so I'll say padding X of five on a large screen padding X of 10 padding y of uh five as well okay so let's see what this is okay so Daniel I completely disagree with this dude uh that's actually just like yeah so yeah see you later I completely disagree with that yeah but I ain't got time to talk about it right so in this case we've got ping y of five um larger y padding X10 there we go so padding X of five padding X of 10 y five there we go and then scroll bar hide and now the final part I was going to do what was it yeah that was it right so scroll bar hide so I'll show you what we're doing now so with scrollbar hide we do scroll bar hide you can see Tailwind scrollbar hide it's a nice little extension for our tailwind and I'll show you what happens here so in this case we're just going to install it into our project like so these are just keyboard ninjas sometimes and they need to be humbled and kicked out okay that's it and my my advice would be build it yourself and and then teach someone some value that's it okay so in this case now we go to our Tailwind config so Tailwind config and we simply you see that we got a bunch of things happening here so you want to go down to plugins and you just want to grab the require okay so grab the require like so and boom pop that in there we go um 10% Jamie I was like oh no Jamie's calling me out I love that 100% so uh we've got Tailwind scroll bar hide now if we go back to this you'll see that if I was to do it now my intelligence will pick it up you see scroll bar hide scroll bar default right so now what you'll find is that it just hid the scroll bar okay so I like this effect obviously naturally some might argue that okay if you don't have um you know a trackpad for example you can't scroll so I'm this more visual aesthetic for me um but in this case look at that really nice right and look at that you goes it Scrolls over got a beautiful effect to it okay now for the H2 I'm going to just give it a bit of quick styling very easy styling here of basically there you go text Excel from B padding X and padding Y and just like that guys we have our carousel right and that is really nice now what I do want to do here is I want to fix the is vertical okay and what I'm going to do just to Showcase this off to make sure that we're prepared is in the page aspect here I'm just going to pass his vertical to one of these so let's do it for the last one for let's do it for the top one for now and then we're going to build it I'm not going to have it on the homepage like this but I will have it in the search page and we're just going to build it now and it's going to be really nice once we're doing it right um why am I using Shaden this time it makes so much so so much sense it's just really really easy and it looks clean okay so in this case I passed in his vertical now I'm going to make a slight change if we pass in his vertical here okay so basically what I'm doing is I'm going to go ahead and say for firstly for this one if it's vertical I'm going to add in some more styling to this right so if his verticle I'm saying Flex column oops Flex column Space X of Y and space there we go that was actually what I wanted space X of zero and space y of 12 so for this one you see look the top one so if I go down these ones are the ones without vertical but you see there is vertical it now has gone to a vertical view okay and then where we map out the movies I'm going to do a slight differentiation here right so we're actually going to go ahead and do um here I'm going to say boom I'm going to say is vertical and I'm basically doing a turn re operator so we've got something happening otherwise else something else happening and the something else happening is going to be this right there and the first part is going to be this right here so so here right so he's going to have a div like so okay and then for this one I've already sort of saved you a lot of hustle here we've got the movie card where I passed the movie in so that's very simple um I'm actually forgotten to map through things so I'm actually going to fix that right now so I'm going to do movies map um I'll tell you what I'm going to pop it in right now actually I'll show you I'll show you I'm not going to do that cuz you're going to get confused so basically this is our default and then we're just saying if it's vertical shows me something else and you can simplify that if you really want other ways honestly I understand you can always go to different levels of refactoring your code um but here we're going to have a div like so and um he install the tawin plugin yes uh guys for the um twin scroll bar hide they a plugin to get the uh additional utility class that's why it came up with the uh when I added it it adds it to the twin utility list class the list of classes right that is available so in this point I'm going to go ahead and pass in the key and a bit of styling so so let's go ahead and pass in the key and a bit of styling and then inside of here I'm just going to pass in the movie card and a few other things and we'll explain it in a second so look it's just a movie card with the movie being passed through and then we've just got a div with a horizontal line and a movie overview okay and there's a bit of minor styling to it like Flex column and so forth now what you're seeing is this is what's causing it so if I pass in this vertical you can see look it comes up as this right now ignore that right now because that's literally I've got some uh minus margin happening but you see we go down go down and you can see the same component is a scrollable and also a vertical based on one difference which is simply a case of using is vertical okay so really really easy and it just means that we can basically reuse this movies Carousel in a bunch of different ways and I know it's technically not a carousel you could just say movies row or or something like that um but basically it comes in really handy because now we can reuse this one component in a few different places right and obviously you can feel free to ref Factor it out and change it if you want to separate into two absolutely so flexible to do what you want to do right so that's that done you always want to map through and pass in the key as well just to highlight there yeah so that's great now what I'm going to do is go back to my page I'm going to get rid of his vertical because we don't want that in this part right so that's perfect right now now the next part is Carousel Banner wrapper so this is going to be what we actually get the beautiful top Banner over here okay so for the top Banner let's go ahead and create something called Carousel Banner rapper and sometimes you'll see this in apps right where they've got rappers around the primary component when I was in a lot of production situations this was happening something super small uh super smooth scrolling on the carousel thank you so much Frank quick little water break before we carry on guys we're just about to blow over 500 likes you guys are absolutely incredible with the retention today it's actually mindblowing I appreciate you guys so much H toly uh Charles goes Sunny my man what's up good what's dude what's good what's good dude that's why I need a w break right let's jump back into it so we got the carousel Banner rapper let's do it again let's go to our components let's create another file called Carousel Banner rapper. TSX okay RFC boom there we go and here what we have is our Banner rapper so what I'm going to do is firstly go back to my page uncomment this out pop that in like so and import my Carousel Banner rapper so we can start to see something being popped in yeah um so now we've got this now what I'm going to do here is essentially the reason why I've done this is actually because I want to have a a fetch a high level Fetch and then I want I actually had a bit granular at a different point but you can feel free to refact this as you need but the point is is that this Banner basically is going to have um ID and keywords being passed in I think I didn't end up using this to be honest with you but I'm going to include this anyway for for a reason right ID and keywords and then we're going to pass in props okay now for the props we're going to go ahead and say type let's do this type props equals um ID string keywords there we go and both of these are optional right like so now I'm going to go ahead and say the movies will get passed in like so and this is an asynchronous top level function and we're going to already we've done all of these fetching functions so you see the benefit right of this like Smooth smooth bit of code and honestly like that is very well written code like that is clean as hell okay super easy to understand now at this point I'm going to create a carousel banner and just pass the movies to it so this will be something like this it'll be carousel's Banner with the movies being passed in as this okay now this carousels Banner obviously we haven't created yet I'm going to go ahead and create that right now so carousel's Banner we're going to go ahead and Pop That in Carousel banner. TSX RFC boom and as I mentioned this gets movies so this one will have the prop come through as movies we have to go ahead and create create our props um and then here we have type props someone said will I be stopping soon no I will not be stopping soon don't worry I'm here to stay yeah then we got the movies like so okay so now if I go into a car Banner that is correct yeah we can do that we could also do inline if you really want to so if you do want to have the option of sometimes you only have one thing in there you can go ahead and always just have it like uh like this you can also have that sometimes you'll see code written like that it's completely fine either way um at this point as well I want to have a used client so this um Carousel is definitely going to be um a client component because it's it's literally dependent on the users's browser the width the dimensions all that stuff okay so we're going to be using something called Embler Carousel react so Embler Carousel react okay so embl Carousel react let's go over to it right now and you can see this is the page that you land on now there's loads of ways to do this this is one way that I'm showing you honestly again don't take it to hard if I haven't covered your way uh again there's so many ways to do things in coding you can really do to Hearts content you can write this entire Library yourself if you really want to so we're going to install that into our project I'm going to in import a bunch of different helpers that we're going to need so we need a bunch of these we need sorry I've imported twice yeah we also need embla Carousel autoplay and I'll show you where that is inside of the example that we're doing right now in fact what I'm actually going to do here is move this over there because I don't like mixing my contexts so let's go over here let's pop this back in here and then what I want you to do is go down keep scrolling down here mpm install Carousel aut playay we're just preparing ourselves what we're going to be building okay now they have documentation that you can go ahead and read but the point of it is really you have this Embler reference and basically all you do is you pass in a bunch of different configuration options and plugins like aut play and you can basically determine the behavior and the duration Etc of your uh Carousel okay so what I'm going to do here is basically go ahead and just copy this example Carousel pop that in ond and then boom like so okay we have use embl Carousel and then we have Loop false which I'm actually going to have Loop true so when I when it ends I want it to carry on the duration I'm going to say is 100 milliseconds and I do want it to autop playay now I want to configure the autop play a little bit right so so for autop play I don't I want it to basically the duration is how quickly it'll swipe between but I want to say the autop play should actually have GL it has some Global options atted to it so we can modify this I want the delay oops the delay to be 8,000 okay and you can see this customizable thing in i i i dived into it a bit deeper and I found it but basically you can customize the global options here so that's going to be every 8 seconds it will swipe through okay um guys we're about oh we just crossed over 500 likes let's go guys that is absolutely crazy nice this what I'm talking about you guys are enjoying this but I love it right Microsoft is going to be very happy with this one okay so in this case we got the uh the setup done right so now what I need you to do is the div the surrounding div is basically going to have a reference and we're going to attach the Embler reference to it so Embler reference is going to get attached to it okay this is how it knows what's going on right so we're going to have a bit of styling here so I'm going to pass this style in a bit we're going to say on the large screen it should be minus margin of 4 basically what I'm doing is I'm pulling it up on the larger screen because sometimes it was taken up so much room and we didn't need to see the entire cover image right um so we w we not too bothered about that so at this point now if I go to my page you should see that we have nothing being shown on the screen yet okay so I'm going to go back over to Carousel banners I'm going to pop this in like so so we should see something and you can see that we get an we get an error Okay so so for now I need to see what's happening here um so we need to basically R render out something on the screen right so here Carousel banners I'm going to go ahead and say that inside of this we have another div and we have movies. map for every single movie we're going to render out implicitly return something and basically here we're going to have a div with the key being movie.id okay and just want just for now I'm going to say P tag just say hello that's fine okay let's try that out and you see look it gets rid of that error so firstly don't freak out that's basically it's going to happen right so I just wanted you to step this out we're going to have a flex so it kind of goes into a row and you can see it started doing its magic right it started already kind of flying across and doing all that stuff now uh what I need to do here is basically what I've done is they have this styling embl container and blah blah blah I reverse engineered it and basically customize it I see that what they want to do is basically have you see this Flex 00100 now in Tailwind sometimes you have limitations you have situations like this where we need to enforce this Embler slide right in the way that they've kind of enforced it here and the problem is is there's no flex tailin utility class that actually exactly does that one thing so I'm going to show you how to customize your Tailwind CSS utility class or extend it so you actually get your own custom intellisense right as in custom um utility classes so if we go over to tail and conf big what I'm going to show you is if we go to the extend and at the top what I can do is I can say I'm going to extend the flex rules yeah and I'm going to add my own one in I'm going to say I'm going to add in a full rule which basically enforces a 0 0 100% oops 100% right and now what's happening is look Flex full so if I go back now and I go to my div and I do class name it would have inferred this tell when config file recompiled everything and my intelligence will pick it up so if I type in Flex full look at that it pops up nice as soon as I hit save now boom look at that guys now you can see look it's using up the full space the way that it needed to lovely that's exactly what we wanted okay um you can actually maybe use Adam oh that's actually a pretty cool idea I want to try that actually let's try it out he said use flex and we can maybe use the Justus in time compiler so let's try 0 0 100 0 0 I did not know you could do that if you if you're correct 0100 dude that is cool I did not know that okay so there you go that's another trick So Adam cookie that's actually an amazing trick did not know you could do that did not know you could do that right I didn't know it was actually underscore so if you want to do it inline like that you can also do that this is why our community is so sick like guys that was that was a really clutch suggestion yeah but it's in there's two approaches here I'll be honest I do prefer having the extension one like this because you can kind of hover over and still see it goes over to the exact value but that's really cool that's really cool and I always um appreciate your the tricks you guys share as well because I didn't know that I actually did not know that um I was thinking in my head when I was doing it but I couldn't figure out I would never would to guest is underscore but that's awesome so just in time compiler works with flex as well we're going to say minwidth is zero and it's going to be relative amazing stuff so now we're basically just going to convert it to this right so we're going to go ahead and make it look like that so first step is I've got the image so the image I'm just going to do a short hand here and just pop the image in so we got the image movie ID get image path little trick here and remember this one is getting the full size so remember the full size I want the full size for this right so I'm going to pop that in and now wait for it let it download oh look at that right remember it will Cat the first time so now when I refresh look how It's Quickly found that image and obviously this one hasn't been loaded in yet so if I refresh look it's cached it so firstly look you not look how clear that picture is yeah because I've done the full size So it's b it's basically fetch the full size of that image so next up we have the div and this is going to be the div which essentially sits on top for the text and this little b you see very lots of little UI tricks in this build right so for this one I'm going to say div I'm going to have a H2 and a P tag right the P tag as well firstly the H2 is going to have a movie title so movie title and the P tag is going to have the movie. description so movie do description um overview sorry okay so you can see look Killers is a flower Moon freelance one car and so forth right and now with this we've got the I'm going to go ahead and style it quickly so the H2 and P tag very easy styling I don't think it's worth explaining it too much it's just giving it a bit of size on it and the overview as well is going to have a line clamp of three which previously you had to actually install a plugin to use LINE clam but basically just means that look if it goes past three lines it does a dot dot dot and you can do it clamp to two lines if you want or anything like that um what's up Sila good to see you here as well what's up man all right guys we're almost at 600 likes as well banging absolutely banging progress so far okay and then this is where the magic really happens right so I want this to be overlaid on top of it now so we're going to say it's hidden on a mobile view so on a mobile view I don't want to see this on a large screen I want it to be inline now I'm going to absolutely position it okay so what I need to do here is actually have it um maybe to a point where you can see it so absolutely position it margin top of zero uh top zero so I'm basically positioning the location here the main thing really is a zed index of 20 so you can see it coming through um but the the thing here as well is I need to basically have it all correctly set otherwise it's not going to work so uh I need to check my one thing here so margin top zero padding top 40 so I'm basically going to pass in a lot of my styling here so you can see it uh come into play so uh after this I've got padding top extra large padding there we go okay so on this screen it doesn't classify so if we did medium you'll see it would pop in okay so medium kicks in there so for now I'll keep it on medium so you can see what's going on and then you can see I've got a background transparent yeah so for the uh yes the background should be transparent here and then I want to have a height width uh a height of four a width of four and this is for the next trick I'm going to do so I'm going to say back CR gradient to the right right and basically I'm going to choose from via and to right so in this case my via and two colors are actually basically the same so I don't actually really need the the Via color I guess you see how it it doesn't really make a difference or it does to be fair if I if I got rid of it I guess cuz if I got rid of via you can see it actually goes a bit more into it's really down to preference I kind of actually prefer it without to be fair yeah I guess it's kind ofce but this kind of gives you a bit more of the background but you can see again that little blur highlights text and I think that's really nice and important so if we did that now for example just even that one yeah you can see that there's a bit of a difference so you can feel free choose preference which one you prefer um but I'm going to give it a padding a bit of text white as well so let's go ahead and pop this in boom and there you go look at that right so I'm only going to have this on the large screen I think I don't really prefer it on that screen but you see look at that guys absolutely beautiful right the only problem with this now is it's not fully blending into the bottom right so that's what I need want you to pay attention to you see this part here is where the magic actually happens so this is a little trick and it's something which I recommend I guarantee you're going to come back to this build one day and be like oh how did we do that again because I'm going to use that trick again I do it all the time this trick comes in handy a lot so it's a self-closing div you put it at the end and basically we're going to style it and we're going to say it's absolutely positioned with an inser of zero okay and we're basically saying a background gradient to the bottom right and we basically give it a bunch of colors so I'm say it starts from a gray like invisible color and we're going to give it all the way down to a dark color and basically this dark color matches the background color so dark two for example yeah and look at that so can you see what just happened there so if I get rid of that you can see there's a gradient that I put in to bottom and when I hit save basically it's going to say it's going to match the background color so it will basically start from here come down and eventually the color would match and you see what happens it just seamlessly blurs it like look how nice that trick is and now the two combined give you such a beautiful effect miles says I signed up awesome stuff guys now at this point remember if you do get lost in what I just did there and you feel like it's a bit overwhelming and you need the code to really understand what just happened as I mentioned before be like miles Legend and go over to the first link in the description sign up to the Microsoft link the popup will ask for your name uh the surname your email address and if you ask for a company simply pop in your uh your name you can just put your name in if you don't have a company and then go ahead and click on the GitHub repo once you've got through to that screen this gives you all of the code for today's build for absolutely free okay and if you want to join our course 0 to full stacko simply go ahead and check this out or head straight over to papa.com course to go ahead and check out for yourself this where I teach everything that I know trust me it's the place to be if you want to carry on with this coding level okay so at this point now absolutely amazing stuff so L goes tips and tricks on fire today cool stuff I love that dude love that thank you so much about to smash 600 likes as well so absolutely killing it guys so you guys can see here banging now look how nice that is right so this is good this is really good progress we're going to have a quick water break and then we're going to tackle the search page the genre page which are going to be very easy because we've done all of the hard stuff already and now what we're going to do is um we're going to go ahead and actually have the final part which is actually a case of um the AI instances right so we're going to add the AI in afterwards and then it's going to be working the way that we want it which is awesome okay so at this point now let's go ahead and jump into what we're going to do next okay so let's go ahead and pop in soch okay um so at this point now we're going to pop this here and we're going to go ahead and do it like so okay so I want to go ahead and tackle the search first right so in this case also it's worth mentioning look how my header has disappeared so we need to fix that right because it's actually in front of my header I just realized that oh yeah I'm sorry my head's not disappeared we need to go back to layout and add in my header again oops there we go boom we added in the header now now that's nice right now that's clean I was thinking I was like what is what's going on here um so yeah we definitely got a lot that we can go ahead and do um so in this case let's go ahead and carry on so what I'm now going to do is head over here and we're going to go ahead and if I go to search and type in Star Wars we're going to now have our search results for Star Wars here okay so let's do search page all right so first things first very very simple now we go to our page we go to search this page over here now we got an API code to get the search movies an API call to get the popular movies and in the beginning you're probably wondering oh how are we going to do that but now you full well know we already have the functionality written so the first call very simple we need to make it a high level async a fetch there we go get search movies boom pop that in like so we simply pass in the term of the page that we went ahead and PED in same with the popular movies we do the same thing here boom uh we import the like so get rid of that get rid of that amazing right and then what we're going to do is we're simply going to have rather than welcome to the search page am I on TG I'm not sure what TG is um in this case we're going to go ahead and have another div and inside of this we're going to have the movies Carousel so we're going to have two movies Carousel and what I've done here is basically the first one is going to be responsible for the it's going to be the vertical view of the basically the search results in this case if I do this so these are the search results for Star Wars telegram uh no I'm not really on telegram no so you see the search results come up and then afterwards it says movies you may also like and then you've got this which is really nice so I've done in a very Netflix sort of Disney way right so in this case that looks cool and now we need to obviously fix it so it makes a bit more sense on The View front right so firstly if this ever gets to a big screen I want to basically restrict the width so max 7 XL and MX Auto that basically keeps it centrally aligned right as your we will be using to go ahead and create the functions for the AI suggestions so we're going to have really smart movie AI suggestions with uh Azure and open AI which is going to come up very shortly okay now if you're watching the replay of this all of the time Stamps will be done in just a bit after this video's up so you'll be able to actually go ahead and make it super easy to go ahead and Carry On and jump to this the bit that you want now over here I'm going to pop pop in H1 saying the results for the term that you've done and then I'm going to go ahead and have it styled out accordingly so we're going to say it's a flex Flex column we're going to say space between all of the Y components of five margin top of 32 and on larger screens I'm sorry 32 and on larger screens it's going to be margin top of 42 all right um and I've messed up somewhere because let's have a look oh yeah there we go that's it look now if we go ahead and refresh that's perfect right so look at that banging lovely search results and it's just beautiful because honestly the search now will work with everything so if I have in Jurassic Park boom Jurassic Park comes up right and then remember these are all next sh images so it's going to cash and it's going to basically Frost the right thing so now if I go back over here boom look at that really beautiful stuff if I type in John Wick look at that really really nice right and if we Ty in like John Wick 2 you see John Wick chapter 2 really nice okay and really really nice so in this case if you're using fixed then yeah you would have to maybe a bit padding work around otherwise you can use sticky really is approach to what you can do right so at this point now thank you Jamie for elaborating that as well this looks really clean I love it right and this is the point right once you build proper components reasonable components you can see building new features really is not hard like you see how easy that was to build a whole search page in like 2 seconds right genuinely so so easy to do now I am going to have a AI suggestion here so we're going to come back to this in just a second now I want to while we're doing this while we're hot on this topic we can go and switch light mode I've not really starred the light mode but you can feel free at this point to style it however you want um I'm just going to focus on the dark mainly um honestly the code is there you can go wild with it and just add in the dark colon style for whatever element you want to change so we're going to do the genre now so if I go to genre action you see here we're just going to do the action now again you can bet yourself that it's going to be easy to do this so head over to this file go over here you got the genre page so I'm going to go back to oops one second back to genre page it's wild I just can't remember if I just drank war or not that's crazy in my mind I'm like did I drink more did I did I okay so in this case we got the j page and I'm going to go ahead and basically get the discovery movies uh import my helper function asynchronous because we're top level boom like so and then all you guys guessed it I'm going to go ahead and use my beautiful um movies Carousel like so there we go right and then here I'm also going to have ai as your suggestion okay so one of them is going to be using ai's uh open AI as your Ser uh service [Music] right and the other one is going to be using a Azure functions service so I'm I'm showing you both I didn't actually need to show you both but I I feel like it will benefit you so I'm going to show you both okay now you can see here we've got that looking great I'm also going to go ahead and style it accordingly so I've done the same principle here with this I've gone ahead and done MX there we go I've restricted the width and then I've got the div here pop that inside I've got a H1 inside this H1 I'm going to say results for oops result sorry results for genre like so boom and this is going to be styled accordingly very easy styling basically just a bit of padding text should be a bit bigger so that's cleaner and then for the div same same exact thing that I did in the other one and honestly you can go ahead and refactor this with like another layout if you really wanted to go kind of that movement but you can do that as far as you want okay with that done uh I'm going to have that s there now look at that results fraction boom banging absolutely lovely right and if you want to do you can have you you may also like and so forth under there but in this case look at this if I go to Fan family boom There You Go comedy uh animation you can see it definitely does it and if we do like for example Star Wars five or six boom lovely right absolutely banging super fast cached everything so quick that is how our website should be like super immediately fast and also one thing to mention here is I I'll keep coming back to the point but you can see the caching is so good because each time I come back to that page I'm not making a quota request as in like I'm not reducing my quota with tmdb I'm using a cashed value and then 24 hours later it will go ahead and basically make another uh request so if you really think about what's Happening Here I could have a million different requests on this website and I'm only making one request or you know a maximum like maybe one maybe two more if it if it duped or whatever but the point is two requests to tmdb every 24 hours absolutely incredible like way better right so um this is something which is going to really really help yeah um where is the caching made at the request level so if you remember when I made the request it was doing it there so if you look at the get movies here next to revalidate so we're using ISR basically at the request level to basically revalidate or cash things for 24 hours at this point unless I pass in uh Cash Time so thank you digital digital alchemist that is absolutely lovely to hear he goes I'm going into uh that's huge D I'm just going to screenshot that right now there we go bam I'm saving that thank you so much for sharing that with me he said I pre the clone of their biggest sight to show off the interview at a job interview so that is that's that's a very clever way of getting their attention right so at this point guys we got the exciting part we've done the UI stuff I really want to now go ahead and show you the next step which is where we integrate Microsoft Azure so as you if you didn't know already this is an Azure collaboration with Microsoft huge huge huge huge moment with that yeah just going to let that think in for a second and also um thank you Frankie Goes TM tmdb API caching is huge makes everything so much faster exactly and we're also going to do this we're also going to do this with AI so open AI so now think about it people are like AI is so expensive oh no if you cash it and you do it efficiently you reduce your bill massively right so this is where you really kind of got to combine the benefits of like nextjs cashing all these different approaches with some smart shes and uh I was about to swear that on live stream uh but we we're good with some smart stuff and then you can go ahead and um uh and basically get the best of both WS so at this point now uh what I want you to do is I want you to go ahead and head over to um to Azure okay so I want you to go ahead and click Start for free now I've already gotten your account so what I'm going to do is I'm going to go into my portal and basically get to the point that I need to get to so I'm going to go to my Azure so I think if I go to start fre I think I'm already logged in so I'm just going to make sure nothing pops up on the screen right now it shouldn't but once you're logged in you just need to create an account with Microsoft very easy very quick to do so uh I have two accounts so I'm just making sure I log into the correct account and then once I'm in I'm going to go ahead and check on something I think I've logged into the wrong account which I always do on live stream it's completely fine I'm actually going to pop that out the way so I don't have to wait for that to load okay yeah I've actually done that um yeah I've done the wrong account I believe so at this point what I'll do is I'll just keep you guys on the screen so you can see what's going on not on that side but this is just if you didn't know we are going to be using the AI Service as well I'm just logging into the right account right now okay so P tool there we go I'm logging into the correct account now yeah there we go okay so remember what I said before while it's doing that I'm just going to go ahead and uh I'm actually got myself emailed a code so I need to quickly go ahead and log in with my email code so give me one second so if you're not using TFA make sure using TFA guys on Microsoft I have to log in with that so I'm just going ahead and using that code right now to log in there we go signed in yes sign in this is all on the other screen don't worry I I understand you can't see this all right this is all going to be recorded as well so it's completely fine okay so now we're back okay so what you want to enter as your what you're going to find if I go to my home um let's see functions up how is this okay so I did the wrong I did the opposite thing I logged into the other account when I was actually in the other account in the beginning silly me this is crazy but I think we should be fine with this maybe I can just show you from maybe I can show you from fresh I think let me actually show you then so okay so you're going to see this I guess right you're going to actually see this you can get started with 12 months free so click this go ahead and do that and you can go ahead and get started with it now I'm going to make it very simple for you if I'm honest I'm just going to go ahead and log out of this account I've already done all these steps to save you a bunch of time watching me CU it's boring seeing me do that stuff so I'm going to log into my other account right now and um get you inside so you guys can see exactly the of a quicker result of what we need to get to okay so once you have created an isure account what will happen is you'll get to this point right so if you go back to your home here you'll see this now what you'll be asked to make is a subscription so what I need you to do here is you'll be popped onto this screen you need to just create a subscription in this case all I've done is I've created a subscription here so example this one and as you can see here that subscription will tell me all of my spend anything that I've gone ahead and used and it will tell me a for cost this is really clean easy stuff to go ahead and understand then all of your services for example Azure all of those things will basically be linked to that subscription so that way you can keep track of your spend everything is actually really really easy in that regard with Azure that's one reason why I really like using them because it's there's no abstract am I just going to get charged £100 tomorrow no super easy to see your forecast and all that stuff with the subscription now there's two areas over here you may not have this because you need to request for access to that as I mentioned before so if you go ahead and go to as your open AI service click apply for Access and explain why you're going to use it but we're going to use two things here I'm going to show you how to create a function app okay so if you click on function app in this case I've created a function app but I'm going to create a new one to show you so I'm going to go ahead and create create um and you can see that we're going to go ahead and create something and you can see function app name now I can either create it here or I can actually create it in using the uh the vs code uh in extension so if I go to Azure here and type in function you will now see if I go to Azure functions we've enabled this which means if I type in command shift p and I type in functions you see deploy to function app create function app in aure and so forth in fact let's do it here this this will be a really easier way to do it we're going to click on this hit enter now what you're going to see is it's going to pop up and let's see what happens it says a Zer subscription one or subscri I'm going to keep everything into a zero subscription one and now you can see enter a globally unique value for this new function but before I do this guys I want to stress something I'm going to exit this I'm going to basically ensure that I don't mess up my file structure so what I need you to do is at this point I want you to at the top level create a folder called function and then just click that function when we're when we're about to do what we're about to do okay so what I need you to do now is command shift p create function app in AO and we're going to repeat the steps AO subscription one and the function for this is going to be Disney clone YouTube okay for me you can call it whatever you want I'm going to click on enter now select a runtime stack so in this case node.js 18 20 whatever you want to do I'm going to click on nodejs 18 okay select the location for the new resource I'm going to use East us and keep it very simple and as you can see here it will begin to dis deploy this function app now if it if you weren't logged in at that point it would have popped up and it would have prompted you to log in super easy and honestly it takes all the guess work out of things so now if we go ahead and we show you what's actually happening here so I'm going to go to function app eventually now we will see the the new one that I created which is called YouTube okay so let it do this magic here and this will go ahead and actually get everything the way that we expected it okay so now if you go to output and you ever missing where it went you can simply go here and go to aure um functions and you can actually see where it's doing it look creating application insights resource and you can see what's going on with it okay while it's doing that creating new function app Disney clone YouTube amazing stuff and let's describe what Azure function is so basically an Azure function in a nutshell is basically think of it like an invocable function on the cloud which means that we can scale it up and down super quick it's secure and we can have different triggers for how we want to execute that function one of which can be an HTTP trigger which is what we're going to use today and that basically means that if we basically make a simple rest request to that API at endpoint it will basically trigger the function now think about what we might use it for we're going to pass in for example a term for example a search term like Star Wars and then it's going to go ahead and create a chat GPT completion for us which will then go ahead and return the response and do what we need okay so it says successfully created function app uh eegi says is this live yes it is so look created it and and it gives us a link to that as well so if I go over now to that function you can now see if I refresh give it a second you see Disney clone YouTube so we're going to click into Disney clone YouTube and you can see great right we've got this now what I need you to do here is we actually need to create a function inside of our function app okay so bear with me right so function inside of our function app so what I need you to do here and remember just don't worry too much that it's very simple it just may seem a bit complex but it's actually really easy with the extensions command shift p and you can see as your functions create function so now all you need to do click this and you can see like browse right so browse your folder so you have to be very careful here do not throw this inside of your folders otherwise you will create some mess right so again if you click open you can see we created a function folder I'm going to put it all of it inside of the function folder now this is important because it's going to have a separate node modules and you're going to CD into it and install things into it if you need it so don't contaminate your current uh situation with this right so basically make sure you got a function folder click select and then you can select your language so in this case we're going to type in typescript fine model V4 I believe is what I used and you see this is the interesting part you can have so many different triggers you can have you know like Pub Subs uh storage triggers timer triggers that's very good for cron jobs if you want it to run every 24 hours or something but we're going to do HTTP trigger so hit enter and then we need to give it a name right so in this case I'm going to call this one get um AI suggestion okay and then we're going to say YouTube right so I'm just putting YouTube at the end so I know I can differentiate very easily um so get AI suggestion YouTube and hit enter now you can see it's creating a new project and it's doing everything that we actually needed to do okay so if I again if you do command J you can see here look it's running this over here now if I go ahead and close all of these and I show you inside a function you can see we've got Source function get AI suggestion YouTube now if I show you what the function is you can see this and that is beautiful really great stuff you can see the different methods that it supports get post Anonymous the Handler and this is basically how we go ahead and use it now I'm going to deploy this and show you that it's a real living function so now what I'm going to do is I'm just going to throw this over here to make a bit of sense and again if you're enjoying all of this right now just to do me a favor subscribe and destroy that like button for the YouTube algorithm right so if we go down now you can see if we click on Disney clone YouTube refresh you can see the functions in fact you know what at this point I actually don't like looking at it through this I actually make it very simple and if you go to your um Azure on the sidebar you can actually see resources and I'll show you if we click on subscription one you can see the hierarchy here go to function apps you'll see Disney clone but in fact if we refresh this cuz we should see the uh the next one actually we should see um uh did I do it in subscription one what did I do as your subscription one no I did it in here so maybe it hasn't refreshed yet okay maybe I just need to deploy it so in this case what I'm going to do is I'm going to go ahead and say deploy to function app Azure function okay so in this case I'm going to do Azure subscription one and I'm okay so I can't see my cloning that's interesting okay so in fact we should have seen our Disney clone YouTube that's interesting why have I not seen that um okay let's just debug it that's fine but in this case I've just got a little bit of a live bug create function deploy function create function that's okay let's go ahead and do command shift p deploy to function let's try again my basically my my plugin isn't up to date with everything it's not pulling the latest into it which is just the only issue that we've got here so my this is outdated a little bit so how do I refresh maybe I could do aure let's do you can also start the uh local and things like that download remote settings in fact we need to do this anyway so let's do download remote settings and then a zero subscription one and I can't see my resource that's interesting okay so this is just basically a synchronization issue which is fine in fact what we can do then to make it a little bit easier for you is basically this would have popped up um just maybe it's just going to take time I don't want to spend too long on that so basically what I'm going to show you is Disney 2 clone would have been here okay now Disney 2 clone would show the next part coming out what's up Shasha good to see you right so in this case if I go ahead here let's try one more time let's do a refresh if it doesn't work that's completely fine we can go ahead and just figure it out afterwards okay so let's refresh that and see if it pops in Okay so it hasn't popped in yet which is completely fine okay so at this point local project Disney clone YouTube functions start debugging to update okay that's fine you can do that as well interesting okay so we can try try one more time and see if it pops up if it doesn't we can just go ahead and okay so what I'm going to do here is I'm just going to deploy my function to Disney 2 clone instead right cuz that one's available so let's click this now deploy and let's see if it works okay so are you sure you want to deploy to Disney t clone this will over any previous deployment yes all right now you can see here it's running a deployment script and now let it do this thing this is where the demo goes just need to be polite to us cuz right now we've got a few inconsistency is this okay but the main thing here is starting deployment creating zip package oh in fact I think I just would have maybe broken my other build because I've redeployed over something but that's okay it's fine okay so check the output window here so you see see how it's creating the deployment and what it will do is it will deploy this now give us a link afterwards to the HTTP trigger which will give us this and it should say something like hello or hello world if we don't pass in a body request okay so super simple stuff and then eventually I will make this very clear as to what we're going to do so let's go ahead and wait for that to deploy and very strange cuz it is there right it's just it's always the case when I'm live these these things tend to happen which is okay right it's fine we I want to show you this part because it's quite a prob developer reload no it's developer reload maybe I would probably at this point just kind of close my vs code and stuff but I don't really want to do that right now but you can see look quering triggers if it says no trigger F then we've got a little bit more of an issue but it shouldn't be it shouldn't be an issue okay so at this point now we hopefully just demo Gods please be on my side here this is the case of it's doing it it should query the triggers and it should give me a trigger now in fact while we're waiting for that we can click on Disney clone we can go down to I believe it's um what was it up Keys app files deployment slots here get AI suggestion here you go and if I show you now there you go guys look at that get AI suggestions so basically you see the deployment that we created we click it now because it's a get request this should say hello what boom look at that hey nice lovely right so it works right so now we've got a connection and we can deploy it so what I want to do now is uh good luck quy for the interview awesome stuff dude right so now you can see we've got the trigger and it works right and obviously depending on what you pass in we can do various things so let's go ahead and actually build out this function the way we need to so I'm going to do now is I'm going to go into my function I'm going to go ahead and com basically change this up so what we need to do is install open AI so I'm going to type in here um into my terminal again so make sure you don't get too confused used here with all this stuff we say mpmi open AI so we're installing open a no no no no sorry don't do what I just did cancel that cancel that this is why I almost made the mistake CD into your functions folder um okay so where have I Disney clone LS CD into your function folder now inside of here we have our own node modules okay so we have to do it here so now we say mpmi open AI okay so with this in mind now we've in stor it into our functions because this is a separate project if you think about it right so that's basically what we want now what I'm going to do is I'm going to have open AI I need to initialize it with the open AI API key now what I want you to do here is you actually need to get something called your local settings. Json okay so if I go over to my files you can see we've got local local settings. Json here so this is actually consider the local settings to be like the m. local right so really what we're actually doing here is your m local in your functions is being replaced with local. settings all right and I'll show you how we can basically modify the value and then push it up uh to where we need to push it so what I've done now is I've already got a key here for open AI but I'll show you how we can do it if you go over to open AI uh API you can basically head over to the open API um click log in I always forget which account I'm using so hopefully this ain't too bad um we're going to use the API and then here you should be able to see on the left you got settings uh you got your organization if we go to API Keys you can see you got your keys right so what I need you to is create a new key and you'll get a key okay so basically once you get that key I want you to copy the value of that key right and I'm actually copying my value right now I've got on my machine so you can copy it uh you may need to add a billing limit or something like that if you really need to but I believe they give you a nice little free tier with this so you can go ahead and try out yourself and then what I want you to do as I'm going to hide the screen a little bit here but I want you to paste it in like so okay so basically what I've done here is I popped in open a a API key and I pasted in the value like so I'm hitting save okay now that means I've saved it in our local settings so if we run it in the local emulator it would work like that right but obviously we this not ideal so why would you just hit save open API key like this go back and now over here command shift p and I want you to type in as your functions and I want you to go ahead and say upload local settings so upload local settings and now click on a your subscription one and now the subscription will pop up okay so there it now it comes up okay so annoyingly but anyway we're going to push it to Disney 2 clone so we're going to car carry on with Disney 2 clone instead of the Clone YouTube so we're going to push it to that one and then wait until it's basically done and now what it will do is it's basically uploading our environment variables over there so what I can show you is proof of this because if we go over to our function go over to Disney 2 clone and we simply go over to app keys I'm going to quickly hide my screen a little bit if we go to app Keys what you'll find now is we have uh is it in this one or where did I do it uh configuration sorry I'm sure it's in configuration give wait a second yes here it is uh you got app keys right so now you can see safely that it says open API open AI API key and you see it says hidden value click to blah blah blah so you can click that see if it's pushed in but now you can see it's basically set the environment variable inside of azure which is great which means that now we can use it like a process. environment inside of nodejs right so that's great we've got exactly what we needed done so now we're essentially going to go ahead and um basically do a completion so with open a all we have is we have something called chat completions and what we do is basically provide a bunch of different user and system prompts and then it will give us the next completion in that chat sequence so imagine you're saying you're a digital assistant your job is to do ABC um and then the user replies I like Star Wars and then it will basically say okay so based on your what you just told me these are films I recommend okay so I'm going basically going to build that right now so the first thing I want to do is I basically going to keep that line here because we can use it for debugging and then what we're going to do is we're going to get the query term out of the body so basically this is how we go ahead and get the query term out of the body and then we're going to go ahead and do our completion so the next step here is I'm basically going to have um we're going to say const completion so const completion equals await open ai. chat. completions do create okay and now here we basically pass in the messages so this is basically the context of what's going on so the first message is going to have you know a role and that is going to be the system so this is like a system message where we basically Prime the AI assistant to basically tell us what's what's going on right now okay so what's the message so here what I've done is I basically just gone ahead and said you are a chatbot blah blah blah blah blah and then it's going to go ahead and do so I'll show you what my prompt is so you are a digital video assistant working for services to Netflix Disney plus blah blah blah your job is to provide suggestions based on the videos that user specifies could provide a quirky breakr blah blah blah and at least provide three films if the user mentioned a genre you should provide a suggestion based on that genre okay so that's basically what we're doing and then we're passing in a user response of saying I like XYZ so in this case we're passing in the user response of something like this so it's just an object that we're passing in yeah so I like blah blah blah okay and then outside of this we need the most important part which is really we you can pass it in at the top we need to pass in the model and here you've got different models GPT 4 GPT 3.5 oh in this case I'm just going to use GPT uh 3.5 turbo to keep it cheap but you can use GPT 4 if you want okay completely up to you now this will give us a completion this completion will be responsible for the actual um this is going to be the completion for basically first you guys we're about to break 600 absolutely incredible yeah this is going to be the completion that the the next message in the sequence will be so imagine that the actual suggestion okay so at this point you can console log it you can do whatever you want to do right but really what we're going to say is we're going to say the reply or you know in fact we'll make it super simple uh I'm going to console log it here so if it ever comes out in the terminal that's actually where it would be but it would be inside of here message do content that's actually the entire message that comes back um but here we're going to say body and inside the body we're simply going to say completion dot choices Z Dot message. content and obviously you can check if you can have like defensive programming afterwards and then if there was nothing we're going to say no suggestion okay so that's in in some sense that's basically going to access that and then if there's nothing save no suggestion okay now we don't want this to be a post request I'm only going to support the get requests and then we want to be anonymous and get AI suggestion to YouTube now if you deploy this and it doesn't work the chances are you haven't deployed your local Keys trust me it happened with me that likely the main issue why this deployment will not work so we're going to give this a try now we're going to go ahead and we're going to deploy to function app so we're going to go ahead and click command shift p deploy the function out as Zer subscription one and we're going to deploy this live so we're going to go ahead and say Disney 2 clone yes and this will now begin our deployment of this entire Cloud function so we're going to yeah we're going to override everything that we have and you can see now is going ahead and doing a deployment so this is what I'm saying this is really like honestly production level stuff is pretty cool how it's going to work um you can go ahead and debug all this later it's fine but for now I'm pretty sure it's not going to bother us too much quick little water break while we're moving but honestly I cannot believe your attention today absolutely incredible stuff remember especially when it comes to this part you will really want to benefit from that free code that we've given you so definitely don't hesitate first link in the description head over to um the link fill out your details and you'll get the GitHub repo here for free okay so it's going to help you out a ton with that stuff so that's good let's go back over to our W once this is done we can go ahead and um Disney yep there we go you can even stream the logs as well to see the output and it's querying the triggers at this point if you see no HTTP triggers it means that likely something went wrong with your deployment even if it said deployment successful most of the time it's because your your environment variable was not uploaded correctly I promise you that's probably what it was okay but that's the step which took me a little bit of time to debug yeah but in this case boom we have it there we go that's beautiful that's exactly what I wanted and what we can now do guys is we can go ahead and get the term so let's go ahead and actually I'm going to use something called Postman so I've actually got an extension here called Postman and if you don't know about Postman it's a great plugin install it from the uh extension Marketplace and we're going to say new HTTP request and I'm going to make a get request and the term is going to be Star Wars okay and let's see what happens let's see if this works so this is a real end point so and the next time someone says this ain't a full stack build shut up because it is okay so this case let's go ahead and hit send and look now this is actually going ahead pulling over to everything that we got a response of 200 and look at this guys May the force be with you based on your love for Star Wars here are some Galactic recommendations for you Guardians of the Galaxy The Fifth Element and Matrix nice look at that right so in this case Jamie gets it as a we're going to type in Jurassic Park let's try another one you can tell I'm so creative I keep saying the same forms and we're going to send and obviously look this takes time right so this oh look at this amazing right so look it's working based on your love for jurass I recommend these thrilling films amazing amazing stuff right so look at this Dr about Fallen Kingdom Kong and you Godzilla so great that's exactly what I wanted so now what I'm going to do is this is the way that everyone can do this by the way so I'm showing you first the way that everyone can do it then I'll show you how we could probably go ahead and do open AI as well as well right so at this point I'm going to close that now we've got our function there so what I'd highly recommend that you do is just I like to go ahead and just copy it so I I always put like the invocation trigger at the top of my file so I kind of know how to invoke it it's just a nice little kind of Step that helps you out okay so in that case I know that that's the way to invoke this file right and then we obviously pass in a term alongside it okay so Jackie says amazing awesome stuff uh thumbs are great stuff guys guys and remember almost at 600 likes so just destroy that like button and subscribe if you haven't already right so over here now what we're going to do is we're going to pull from that value so let's go into our uh code so one second I'm just going to find where I did it but I'm going to create a nice little AI suggestion here which is going to help you out and we're going to use SWR to go ahead and do this and I'm going to create an API m point to show you a full circle way of doing it inside of next J and don't worry it's not going to be as difficult as you think right so we're going to use something called use SWR the thing about us SWR that I like is the caching side of it is very nice okay so I'm going to go ahead and install us so we can use mpm and again when you come to this step be careful do not install it in the wrong place yeah so let's go ahead and make our set up nice so I'm in function right now so I need to see the upper level so I'm back in the Disney clone okay then I do mpm install s SWR okay now what I can do is I'm going to create an a function called AI suggestion oh sorry a component called AI suggestion. TSX RFC boom and this is going to be responsible for the AI suggestion okay now we're going to go ahead and make this a client component you can actually go ahead and really easily okay so I'm going to explain two approaches here if you address the cause issue you can make this a server component and you can basically just do a cause fetch to that uh Endo um and it will work [Music] um we could do that right now to be fair instead of using uswr and it would work um but I think I want to show you a way in which we can do it on the client as well yeah I want to show you a way that we can do it on the client because basically I want to show you the the loading state of it but just know that it's very simple at this point just to make a fetch request to um um make a fetch request to that endpoint that we spoke about pass in the the the query parameter and you would basically to it so this is very easy in a server component but I want to show you how we can use use desktop you are to do it as well so I'm obviously a little bit over complicating it here but the point is that you can learn off of it right so us uswr boom and in this case the AI suggestion takes a property which is the term and I'm just going to go ahead and say it's the term like here okay and now what we're going to do is we're going to have a fetcher function this fetcher function is going to basically remember when we make any request from a client we should be making it like you know internally so to our own API and then that makes an external core and so forth so I'll show you how we can do a full rout full sort of circle thing I I don't think it's shown a lot so I think it's kind of Handy just to show you how we can have internal API routes and all that kind of stuff as well um and then the way we use S SWR is it's basically a case of we have it like so we have this we have our data error is is loading is validating and then With usop Ur we pass in a few things so the first thing is a key so we're going to just going to call this key a suggestions for the caching the next thing is we're going to go ahead and say that it's going to use the fetcher that we have at the top so fetcher and we pass in the ter okay basically this is means it's going to use this and so it's going to Ping our own API here which we haven't created yet it's just going to pass the response and then I want it to basically not do two things I don't want it to revalidate on so re validate on Focus so FAL and revalidate on reconnect so revalidate on reconnect FAL I don't want it to do these two things but the good thing about this is uh usfw will also retry if it fails so this is a good point as well so if it fails it will try and retry so in this case you can see error retry count you can go ahead and use that if you want to basically retry every sort of like five times until it works so again lots of benefits to using this as well okay so at this point um I'm going to basically have a div and I'm going to basically say class name let's just style it quickly we're going to say Flex um Space X of five basically I just going to give it a very minor quick bit of styling here so there we go and then I want a little hel function called generate text and this is going to be responsible um but it's just funky with API no the thing is you want to use the fetch API it'll make it very simple with the caching right so we say generate text and then and pop it here and now we can basically say if it's loading do this if it's Error do this otherwise do something else so very simply I'm just going to have if it's loading or it's validating Ry say a assistant is thinking and we've got this nice little ball that's kind of you know glowing uh if it's Error just say error if it's data no data I'm just keeping it very simple for now otherwise um we're going to return the body of the suggestion okay so if it doesn't have that then we're simply going to go ahead and return the block of it so we're basically going to capture all that otherwise it will return this and this just saying A P tag AI as your functions assistant suggest and then the message now one thing notice I put in quotes as well so it comes back in like a nice way but this one says Azure functions and the reason why I put this here is because we we're going to I'm going to show you the open AI approach as well afterwards which is different but I just want to show you that this is the Azure function and then we're going to have the open AI the're two different Services right so in this case this is the one that everyone can do so here I'm then going to call my generate function generate text sorry like so okay so just like that so now I need to go ahead and Joshua says he friend house party maybe who knows me says is it hard to jump from angular to I'm not entirely sure but with my teaching I promise you you you'll get it you'll get it done um so the fundamentals I guess carry over okay so we need to create an API endpoint now it doesn't have to have this API syntax right so it doesn't have to be for/ API I've just done it to keep it very simple but I'm going to show you how we can go ahead and have the root file name and that's why reason why I kind of wanted to show you this because the root. TS is also a reserved uh file name right so in this case let's create a folder called API doesn't have to be called API by the way okay and then we're going to say inside of there we're going to have suggestions and then inside of there we're going to have route. TS okay now inside of route. TS we basically are going to define a get request and the way to do it inside next CH is simply like this we have a get request if it was a post request we simply write post right and then very very simply we get the URL from the request like so we get the search prams like this we basically get the request URL I'm basically passing it as a URL and then I'm getting the term out of the URL it's a safe better way of doing it then we have the actual AI suggestion so if we go over to our function that we just created remember the function that we created earlier so the uh AI suggestion YouTube this one right here copy this cuz it's very important okay now I'm just going to pop that there for reference but if we go ahead and say const rest equals await fetch now what I'm going to do is I'm going to do string interpolation so I'm going say fetch that right so I don't need that there I guess fetch that and then I'm going to go ahead and append the term so you can actually go ahead and do like a new URL and append it the correct way I'm just showing you all the ways that you can do things right but yes you could definitely do a you you probably do it that way to be fair it's the safer way of doing it but in this case that's essentially what's happening and I think it just shows you clearly what the URL will end up being okay and then we're going to have a method this is where I think it's important to understand that the you can do your next revalidation here as well so per request right so even on the API level that request I'm going to go ahead and say yep that's 24 hours before it needs to be uh rebuilt so the suggestion is not going to Ping open Ai and run through your quote or it's going to have the same approach that we previously spoke about okay now once that message comes back we're going to go ahead and U Jackie says my pixel watch is saying I need to do some steps can't believe it's been 3 hours of solid training so far uh I love that thank you so much for sticking with me for this long um so in this case now we're going to go ahead and do const message equals res. text not res. Jason res. text because I've already returned it as a text yeah and then we simply going to return the response as response. Json message okay so now I've created my own internal API end point so cuse will not be an issue because we're not making a cross origin request from our client okay so at this point now if I go to my um where is it my which one am I AI suggestion here we are yeah if we go here now this will actually go ahead and hit the end points cuz we've created this Okay so we've created this um somebody says it bad to is it bad to call directly to your aure function no if you address the cause problem and you basically whitelist a your's address you can do that or you can make it a server component in which case you could just do it directly as a server component here I wanted to demonstrate the use of uswr with ISR caching to show you how you can do it plus how you can show the loading State while it's happening so my Approach here was more so I took the long way around to demonstrate to you a way you can do it because we've already shown you in this build how to use server component to make fetches which is super easy um you could do it that way directly but I want to show you how you all your possible Avenues and then you can make a combination based on what you need yeah so in this case um we're going to do that and now if I go back to Disney plus clone uh we can actually use this right so in fact if I go over to let's go ahead and see did I put this inside of the search I put this inside of search so if I go to my search page this one right here remember AI suggestion here we're simply going to go ahead and type in AI suggestion and pop it in right and now this needs a term so this needs a term and I'm going to Simply going to go ahead and say okay this one is the term to use like so now if I go into here let's see if this works right because this would be a Madness if it works the first time if I type in Star Wars and I hit enter boom look at this a assistant is thinking this will be pinging look at that amazing that literally did everything and it was a full stack move move because it literally went to our own internal API did what it needed to do uh hit the Azure API came back now here's the here's the gold part that I need you to pay attention to okay this is the caching in principle I'm going to show you how it works so remember I put the uh uh revalidation on 24 hours so now if I go ahead and type in Star Wars 5 it's a new request so we expect it to refetch there you go it's ref fetching okay now if I go back to Star Wars the original one it's going to be the same URL that we previously hit which means that it should have cashed boom cashed nice so if I go back to Five Star Wars five look at that it's instant that is powerful guys that's really powerful because now open AI is not getting pinged instead our next share apppp has simply cashed it for 24 hours and if you think about it in this context you don't need to recash this value it's not like they're going to release another Star Wars film in 24 hours or every 24 hours you could really even have it for a month two months 6 months whatever the case but you can really be efficient with your quoters and this is why I always hear but Sunny using these Services is so expensive the problem is is how you're using it if you're making additional calls every time and your app scales up you can suddenly have 10,000 open AI requests why this is what I'm saying the real benefit and Beauty behind this all is really how you're efficiently making calls to external apis because these services are good they allow you to scale up they allow you to do things you don't have to worry about if you can handle a maximum load of users and things like that it's all about understanding how you can use it in a better more efficient way okay so now we've done that I want to basically show you how we can use open AI so firstly congrats we just built an entire literally a flow for how we can go ahead and do that so if I Ty in Jurassic Park you can see look at that that's absolutely beautiful and it literally recommends off of it right so this API revalidation trick is amazing thank you Frank I'm so glad you enjoy this right so that's that right so I want to show you now as well if I show you locost 3001 so this is the final production build if I go to action for example notice how this one is purple okay because it's coming from the open AI assistant now I'm going to show you how you can do that now obviously as I mentioned previously take it with a pinch soap because you have to apply for the access for this one so if you go to here and you click on this your open AI this is the one in the top link simply go there and you will see that you can actually request access to it so in this case uh if you go to the open AI service you can apply for Access they gave it to me within 24 hours so you can pretty much get it okay as long as you give a good valid reason don't just write random stuff okay so now once we're there I'm going to go to my portal and I'm simply going to go home and what you'll find is you now have as your open AI so we're going to click on that and I'm going to show you how we do it so I've already created an App here but I can show you how we can do it from scratch if I create another app let's go ahead and type in see subscription I'm going to say as your subscription one Resource Group we can go ahead and say Disney 2 clone so I've got a few tested ones but Disney 2 clone we're going to attach it to and then name uh we can just call this um uh open AI YouTube demo okay pricing tier standard that's fine and then we click on next okay all networks can access this resource that's fine uh and here I don't really care about any of this so we're we're going to click review submit and there we go and then we're going to create our a your open AI instance and if you think about what's really happening here is we're basically creating a similar kind of interaction where we've got an A Zer function but it's primed for uh open AI usage right and they have a really nice portal where you can customize a playground all this good stuff so you can see how it's deploying in progress okay so that's going to take a second to deploy right so it's going to go ahead and deploy that um sh so just the caching is on the Azure side or the client side um so it's the caching is happening on the nextjs side so the server that we're basically running next Js from is caching the result or the the the uh API response uh that is coming from an external place so whether that's Azure whether that's any API whether it's tmdb we're cashing it on our next share server okay so deployment is is done so at this point now we can go ahead and if we go to home open AI I want to show you we go to open our YouTube demo click it and what I want you to do now is very simply go ahead and click on to go to Azure open AI Studio okay so that's what you want to click on and now the open AI studio will load okay almost at 600 likes let's get that like up guys right so now you can see we've got the new preview studio so I'm going to show you we all the goodies right now you can see we've got um the deployments and all that stuff so the first thing is no deployment detected so to get started you'll need to create a new deployment and you can select an example below so we're going to go ahead and create a new deployment create a new deployment here and you can see select a model so I'm going to click on the model and I want GPT 35 turbo okay uh and let's click on um okay so I've actually got uh it says no quot is available I've actually already done it so that's why it's not going to work right now but let's try and see if I can get past this point anyway so if we do default deployment name is it going to give it to me no okay so I've already got a deployment so I'll show you what you would do is do that step and go forward with it I'll show you the one that I've already done this because I think I'm only limited to one so if we go to Disney plus clone this is the one that I done before and I go to asual Open studio there we go okay now inside of this studio what we'll see is if I go to deployments you will see I've got a bunch of different deployments where I've messed around with a few things okay now if I go to this deployment right here we can see everything is there um and you can even click open in playground and what I'd highly recommend here is you just test it so if I type in high is this working right now so you see hi how can I assist you today okay great so at this point now the way we want to do it is I'm just trying to remember how I how I fully did it now okay but in this case I'm going to have a quick look on my code so AI is your suggestion there we go okay so what we now need is we have two things an endpoint and a key that we're going to need to get so the way I get this key is I'm going to go to my deployments I think it was was it here was it where would I find that last time so if we go down to our Disney plus clone we go to keys and endpoint right here this is the important part and here we have it so this is the actual uh endpoint right now it's very important guys because these keys and end points will be here but it will not work and until you actually deploy a deployment right and then very important the deployment name okay so do not mix this up so I want what I want you to do now is copy a key and copy your endpoint okay so I'm going to copy this I'm going to go over to my code I'm going to go into my code and I'm going to Simply go into my environment. local now what I'm going to do is you're going to see it it's fine I don't care at this point um we're near the end so I'm going to do endpoint equals and I'm going to paste in the endpoint now the Azure API key I'm not going to show you that one because that one's going to be a bit more tricky to hide so I'm going to copy this and I'm simply going to paste it in I'm going to paste it in and I'm hitting save and I'm closing my environment file okay so now remember we're on nextjs territory now with this yeah so now we've got that then now I've got my environment variables primed as I need them okay so the next thing that I now need to do is install Azure open AI into my application so here I'm use mpmi a your for/ openai and this is all part of the aure open AI documentation as well it's actually all in there actually completely oh we're about two likes away from 600 likes let's go mad absolutely crazy all right so uh who's going to do it who's going to do it right so in this point now I'm going to create a aure uh function and then you'll see the difference and why it's really powerful that's my point yeah uh oh one more go one more like one more like let's do it let's do it let's okay so at this point now if I go to my components I'm going to create a new component called AI Azure suggestion AI let's call it AI open oh sorry open AI as your suggestion okay so we can we can clearly differentiate that that is the different one which is using the other service now all right 62 boom let's go guys amazing stuff banging right honestly the retention today snuts you that kept on the whole way I love it right RFC and we got open a ey suggestion right so we're going to have that and then here this is where we basically going to import a couple of things that we need so I've gone ahead and saved you a bit of hassle here and then basically we're going to have a helper function called Fetch chat completion okay so this is going to be um a a server component so the good thing about this guys is what I've done is I've showed you a client interaction way so a client component way with the first example right and now I'm going to show you a server component way with open AI service so you're getting the best of both words in this tutorial right and I've done that to make sure you get the most value from this tutorial so we're going to type in const Fetch chat completion equals an asynchronous arrow function yeah and then we're going to go ahead and basically have the following so I'm going to start off with an empty array this is going to be a completions and it's going to be response messages always going to be undefined okay I'm then going to get my environment variables in local scoped variables so in this case you don't have to do that but just it's going to be super clear for you guys this is pulling from the environment vars I literally just pulled in and then what I'm going to do is just for a debugging purposes if you do need to add a console log and check your server log so in your command um in your server here right so this is just a debugging step if you find that you know any of these are undefined then you haven't set it up correctly Okay so so I need you to be very careful with that now what we're going to do is we're going to create an instance of a client to connect to open AI okay so in this case we got the Endo here and what I also need to do is I need to ensure that if we haven't got the Endo or if we haven't got the Azure API key it will throw an error to say you're missing those values so we don't actually even need that defensive statement okay and now we get the client so this would ensure that we've got a connected client now what's very important here is the deployment ID so this deployment name is what we need to basically we need to select one of these and you can deploy different models and everything like that but the way you simply do it is you basically just have a deployment ID that correlates directly to your deployment name okay now once you've done that you basically do very similar to approach to before you say cons result equals await client. get check completions okay and this time what we're doing is we're passing in the deployment ID and the second argument is the messages okay so these messages now are going to be the exact same format as what I previously gave the system and that message now the only thing that we don't have here fully which is my term which is actually I forgot to do is this needs to actually accept the term like so okay very simply it needs to accept the term and then after this uh array of messages we're going to pass in a third argument which is the options and you can see we've got a few things like Max token and a few other things Max tokens here I'm just going to say 128 to make sure we don't exceed our tokens right now once we've done that we're basically going to Loop through the options that come back and we're just going to push it into the array now there's loads of ways you can do this you can map it you can do you know whatever where you want I'm just showing you like again I like to I like to kind of show you a variety of options so you're always equipped right even if you're wondering why do you do that because you can honestly yeah it's very simple to do that all right so in this case what I'm going to do is I'm going to map through all of the responses in case there was more than one and then I'm just going to return the completion zero okay so results do choices there anything you could just return results do choices zero to be fair um and you can do that but there you go that's going to return it okay the next thing we're going to do is this is our helper function now so outside we're going to now call it so we're going to call the fetch function to get the completion and this will give us our completion right and then we're basically just going to render it out so very similar to what we did before guys so this is going to be the same thing that we did previously so with the other AI suggestion we just have a div with a bit of styling we have the animation to basically show the purple color except this time we don't have a loading State because it's a server component it's going to be rendered on the server beforehand and then we say aure open AI assistant boom bo boom completion content okay and now notice how this one say asure open AI in fact open AI assistant suggests so that's how we're going to differentiate between the two so I'm going to use the genre page now to go ahead and leverage this so where we wrote previously as your open AI service now what I can do is I can say uh open open AI as your suggestion and I simply have to pass in the term and we have the term here which is going to be for I believe it's the genre so is what we're going to pass in so I'm just going to double check now to make sure that we get it right the first time I want a smooth win here so we can pass in the genre yep and now we can get rid of that and let's go ahead and give it a try guys so this is the Azure function that we did previously if it's gray it's the Azure function if it's purple it's going to be the other one so in this case you can see that one works okay now I'm going to go over to the uh genre let's do action boom let's do action let's see what happens and look at that guys for some thrilling action you should oh I've actually put it in the wrong place I put it at the top but that was that worked that worked that's actually really cool okay so I'm going to put it underneath the genre there we go and then you see now boom and now I want you to notice something because it's say server render a server component you see the loading state it just didn't it it was more of a block right so in this case if I click comedy it's blocking until it does if you want to get rid of that block all you now have to do is add in a loading. TS file TSX file and that's a reserve file name I've shown you in lots of builds before and you can just have a loading indicator based on the blocking status of a of a a component and now look at this guys absolutely works amazingly look drama boom if we go to animation boom great choice you check out The Incredibles up and Moana uh if we do Adventure look at this Ready Player One Indiana and Welcome to the Jungle really really cool stuff right this this AI seems a little bit more reserved but we can tweak it based on that portal but you can see right now we have two approaches we have aure open AI assistant and we have our own aure functions oh sorry let's just type in and something like social network and now you can see look social network and we have our uswr approach as well so there you have it guys two different approaches to getting this working the way we need it right and then obviously naturally the next step after this is deployment so we now need to deploy it and actually interestingly enough my Vel wasn't even showing up on my my machine before so I think if I type in Vel to deploy okay I get Vel not found so let's see if I can show you right now if you don't get this let's see let's do Vel CLI we need to install the Vel CLI to be able to deploy this app so in this case I'm going to install it globally because for some reason it's just not on my machine right now so if I go ahead and install this MPI there we go and let's go ahead and install globally and then we're going to go ahead and deploy this to the cell now if you have already liked this if you haven't already liked this video smash that like button as I mentioned before up until this entire point feature-wise we are done we are making use of amazingly powerful things like Microsoft Azure which is basically secure it's able to scale the way we need it it's predictive with the subscription section so you can see what your forecasted projection is for your spent and as I mentioned before you get $200 on sign up which is actually really generous right and then to top it off you have the Microsoft open AI service which is really nice basically think of it as a collaboration between Azure and open AI where you can customize get the best of both and you can basically ensure that you scale up with the security and scalability of aour um while you're using services like open AI so they've done a really good job with this and as I've showed you it's actually super simple combine it with server components nextjs 14 super clean right super super nice um Mr Frank goes this is mad the AI search integration is amazing thank you so much dude I appreciate you so in this case now we've got this down let's go ahead and see I have installed it uh let's do Vell and what we might see now is set up and deploy yep okay okay and okay so I'm already logged in so that's weird I don't understand why that happened but anyway I'm going to deploy to my project in this case if you weren't logged in you would just have to do that link to existing project uh no we're just going to do exactly from default set up projects it's uploading to be honest with you I haven't deployed my own one so this could break right but in this case I want to show you and we can fix it together want to modify these settings nope we're going to leave it as is now this will fail because we don't have environment variables set so what I want you to do is when you deploy you simply type in the self to deploy our xjs app to that platform now if I go to inspect Vel is the platform that xjs was basically built by right so the people that has built by so it's where we naturally deploy it the easiest way so you're going to click on Disney clone YouTube head over to settings and thank you so much will will Baylor I appreciate you for saying thank you right in this case we're going to go over to environment variables and here you can see we don't have any environment variables so I need you to go over to your EMV and what I'm going to do is I'm going to hide mine cuz you thought I was going to slip right and and then I'm going to go ahead and copy all of my environment variables so I am in my environment variables file right now and I'm literally copying everything right so I'm copying it all I've closed my environment variables file now now I've gone back over to this screen right here and I am pasting it in so I'm going to go ahead and do that right now so I pasted it all in and what I'm going to do is I'm going to zoom in and show you you'll have something like this so I just pasted it in and if you see how it's just gone in so you got the TMD a m point as your API key and then what I want you to do is make sure that the three are ticked and basically go ahead and hit save okay once that's done you'll see it gets added to this our deployment will fail right because we don't have a lot of we don't have our environment variables so let type in Vell and it probably will fail for other reasons as well so I'm going to see what it's going to fail for uh in that case we can actually inspect that one we can go ahead and check out why it failed over here so let's have a look and we can see the deployment state is failed um expand let's have a look why it failed uh it didn't tell me fully to be honest maybe I just cut oh because maybe I I updated the environment variables afterwards which is fine um now we can inspect the latest for cell deployment and let's see what happens here so let's go ahead and z now one thing to notice is if a cloud function on the free Vel plan uh so our own apim points exceeds 10 seconds it will time out okay okay so I've got some silly errors here so these are basically just un unescaped characters uh so AI suggestions in this case I'm just going to save us a bunch of time and make life very easy and basically have uh where have I got AI suggestion things blah blah blah line 38 on AI suggestion so line 38 on AI suggestion AI suggest da da da so here okay let's just for now I don't care I don't want to spend ages doing that just for sale you can just Escape it that's fine Joshua Bravo says this is incredible sunny I appreciate you dude and I hope you've enjoyed this build so far you guys are absolutely crushing it with the retention you guys have been amazing throughout this video and as I mentioned my way of giving back to you guys is by giving you the code for absolutely free the only way you got to do that is literally just let me know in the comments right now while we're waiting if you've signed up to this link to get the code for free because I don't know how long it's going to be up so I really want you to make the most of it get the code the first l in the description all you have to do fill out the details if you ask for your company put in your name go to the bottom left link gith hard repo is there the code that I did today is there okay and also if you want to join us over at 02 fullstack learn how to code if you enjoy this Vibe every single week this is what we do we've got module content inside the course then you can head over to po.com and join me inside my Flagship course this is what it's happening right go ahead and click that video and just watch it promise you you would be it's a Vibe this is where we learned to code and it's a lot of fun okay so we failed our deployment let's see probably another situation um cannot find module as zero functions or it's corresponding type declaration this is inside of functions Okay so we've actually made this mistake inside of function Source get I suggestion okay so let's go over to oh in fact okay um it's trying to deploy that app which is interesting I don't want it to deploy that app um okay I mean we can go ahead and just add in that package I guess which is not ideal but I functions open AI to be honest with you H this is such a messy fix what I'm about to do but really we could just install these and it would have the dependencies for these deployments but yes you would want to separate the two ideally if I'm honest with you um I would probably have a separate uh entire folder for this to make sure you don't have this overlap um but there is a way to do it I'm not going to check too long right now on how to do that but in fact what we can do right here is probably just do an mpm i as your functions at our top level and open AI install these into our dependency tree so it should be okay should be okay right don't do that it's actually a very hacky way if I'm honest with you I'm just trying to get past this demo stage do V sell deploy again let's see if it works can we exclude the folder in TS config Jamie we could maybe do that let's have a look TS config oh we could actually yeah we can actually probably do that so compiler plugin path exclude oh okay maybe yes maybe we can let's do this functions function I tell you what um I want to see if your approach was actually better because I think it might be that might be a very good way of doing this because it was a typescript error that was breaking I think I think it was a typescript I don't know if it was just trying to go through that folder but um let's see as well here in function okay so that one was just saying root directory is that one output directory okay so yeah it's definitely this one's just trying to access it you're right this is what I love about coding on live stream cuz honestly everyone's just helping each other out and that's what what it's all about that's literally what it's about all right so we go to this building boom okay so just so you know it can get past if you do that don't do what I just did because I I mean unless you're going to use the same package in both I guess no don't do it don't do it don't do it I I don't agree with what I just did U it's fine but we're going to test it anyway and then we're going to go with Jam's approach as well cuz I I actually prefer that approach way more so click on this and look at this boom this is live right now let's see if it works if we do Star Wars um come on okay yes yes yes yes look at that boom if I go ahead and do action oh guys this is cool this is cool this is working banging I'm going to go ahead and drop it in the chat right now this is a preview link though so I don't think this will work for you lot so what I'm going to do is I'm going to either 's two way to do it you can promote to production uh if if I do that right now it will basically push it to production or you can just do Vel um d-r when you do a c command and it will basically deploy now I've gone ahead and promoted this to production so I'll get the main URL and then I will send it to you guys right now it might need to be function for/ yeah I agree with you um but I guess it maybe it doesn't because node modules is also just node modules and inside that it's including everything um but let's go ahead and let this do its thing for now but it's interesting to talk about these things cuz yes definitely did not see that one uh coming so yeah that could definitely be something worth knowing you would want to exclude it so it's not compiling that in but that's one way to do it and the other way is obviously the hacky way which I did um okay let's give this a chance and then I'm going to send you guys a link and if you if it works and you enjoy it I only ask that you just subscribe everyone right now if you're not subscribed subscribe right if you're watching this on the replay subscribe cuz honestly like it's mental how many of you are watching and not subscribed it's actually crazy uh and I promise you it goes a long way with people like Microsoft who see that subscription uh and see our subscribers um it goes long way it allows me to do what I'm doing more okay so I'm going to go ahead and just refresh we should see our domains there we go so we've got this one and boom we have it yes guys go ahead and check it out right now boom look at that let me know let me know on this stream if it works this is this is peer pressure right now let me know if that worked right so let's go ahead and see and what I want to do is if somebody can go ahead thank you so much someone goes have just subscribed amazing stuff now if somebody can go ahead and search for a film and let me know because that way I can show you on live stream that you would have cashed the result and then I would have gone to it so we're going to do that right now on on a live stream to demonstrate caching So Jamie you can do it as well pick a film and let me know and then type it in so promethus says works fine amazing stuff that's what we want to hear this is awesome let's go ahead and wait for the first person to go ahead and do it um Brave browser I haven't tested on Brave browser I'm honest someone says this is fire or some stuff go ahead and let me know uh yeah just chose wonder is that is that the film that you're talking about um let me know but it has to be the exact thing that you've searched right so if somebody searches for a film let me know and tell me the exact search Okay Wolf of Wall Street Wolf of Wall Street boom okay so I think I've done it different to you Jamie because I done capitals maybe you didn't do capitals maybe the case sensitive is different uh let's try again I search good boy and the suggestion is empty so sometimes it could be let's try Jurassic Ark AI assistant is thinking Okay so we've got an empty one there that's interesting if we try the genre here to action I chose the Matrix but the AI station is broken okay so do me a favor guys try the open AI one so try the genre and tell me if the genre is working cuz it was working a second ago in this one um if we went over here I'm going to try this one one second boom Star Wars boom yeah so okay so weird this is very weird this is actually so I want you to try try that link I don't know if I don't know if you guys can use that link but try it okay um and you should see Star Wars loads so let me know otherwise basically it's just going to be a minor debug step to be honest with you we can check it out but um go thank you so much I appreciate that so if you click the link I just sent does that work for you guys let me know and if I type in Social Network assistant is thinking and then returns nothing so interesting okay so most likely a very small weird bug that's going oh no okay I know why this is happening guys okay I know exactly why this is happening it's timing out it's timing out remember what I told you guys before this is timing out and I'll show you exactly how you can determine this right now so if you go to your your logs and if we go to refresh query and let's do a live log this is so interesting this is so important uh ignore the latest L don't worry about that I'm just trying to show you uh the main thing so if we do live logs okay this is so good that we're talking about this because this is really stuff that will happen to you guys um this is my production rebuild okay I want to get the logs of that one go to live and let's see so if I go here now I can see loads of get quests genre genre genre uh search so this one here so this returned to 200 actually um which is interesting so it did return 200 and the time of it was 99 milliseconds versus 10 okay now I wonder what did you search so this is pretty cool guys we can actually see we're probably going into this right if I do for slash um let me go to my actual Disney Clan yeah and the forward slash was this is what somebody just searched for Slash search Fast and Furious okay so they they did that and then P time is this one F such no they done as it wasn't that one but okay okay so we can definitely look into it a bit more and figure out what's going on but that's interesting that interesting so link requires authentication yeah I know I understand that link okay anyway point is it does work uh just not on the main it's only it's very strange it's only on this URL but on my URL over here it is working um this one right here so if I typed in for example WF of Wall Street let's try WF of Wall Street bam like so and you can see on this this is the internal okay actually it doesn't so maybe I've either a exhausted a quot or something or B my suggestion is not coming through the way I want it but we can we can actually debug this fairly easily let's go into here so the real issue is breaking here so AI as your ass as your assistant suggests I don't I don't know if I want to spend too long debugging this to be honest with you but we can try anyway so uh generate text when I've done this and the data comes in I'm going ahead and saying no data data. message we can go ahead and console log here and just say data um how to zoom in on Mac without this rate limiting somewh yeah honestly it's it's a very I'm telling you it's going to be a small issue um it's either are going to be the the reason of timeouts it usually is a timeout situation if I'm honest um but yeah that's typically going to be the issue that that we would have here unless it's on somewhere about maybe white listing you know something like that but oh look someone's oh genre is coming back but like search is not coming back but this is cool though okay the main point is that this is how you can do it look at the traffic that's coming through this is awesome right search react this is cool though okay and we do genre you can see that it comes back with the actual uh czy nice all right so the point is is that yes it does work we we we have a very small issue somewhere I do believe it's because of the um uswr I have a feeling it's to do with this link not hitting the right end point or something along those lines ter is ter get meod recation okay meth ter so what I would do here honestly in a production situation I would console log here I would console log here I would check uh in my production app if it's if it's hitting these points see exactly what the responsive message is at this point in fact we can show you right now let's just do it a little bit I don't want to spend too long on this because I don't want the recording to have all this additional stuff but I think it's kind of important as well so let's go ah a and say I'm just going to say debug message like so and in fact what I would even do is just very quickly honestly you don't even need all these fancy tools sometimes you can just say um uh hit API boom and then let just do a Vel and again I I can deploy to preview to test this so that way my production won't be seeing it let me know about it now by the way is this stuff really uh like valuable because I think it really is because this is actually reality of how we can dive in this is honestly what coaching calls inside zero full stack are like um we do this all the time so let me know as as we're waiting for this to go ahead and fix I find it super interesting each deployment has its own logs to monitor as well so it's worth mentioning that as well so somebody says it's very very useful and valuable awesome stuff um I do believe it's something to do along the lines of that's actually your cor part development 100% 100% right so in this case look we clicked it now I do logs let's go ahead and do boom uh yes you're right as well we could do the logs on Azure as as well um I do want to see let's just type in for example Star Wars Star Wars let's see what happens so I get 405 for options I get 200 okay this is so weird that's very interesting so now I'm getting this my search came back look debug here API so let's have a look see a debug came back with this so now what I'm going to do is I'm going to redeploy to production and see because it's working here with the API suggestions okay so maybe it was just a dud of a deployment so let's do Vel d-r and we're going to deploy to production now so let's go ahead and see how it works uh this is debugging is essential for actual yeah I agree with you honestly it's one of those things if I'm completely honest it's probably the most stressful for a live stream situation but it's the most valuable and I'm fully aware of that so I'm definitely here for it and I think it Val if it helps you guys out let's do it we'll keep going until we fix this thing so uh Santos Kumo says thank you for the valuable content you're absolutely welcome dude uh one thing I would say is when you have the console fixed or figured out then Definitely Maybe Just redeploy it and don't have the console log there or feature flag it so you can basically like turn it off without um showing production logs you don't want to do that okay so let's see what happens here now so production is building okay um no I don't want to do that I want to see we're so close guys we are so close I love this so we were like trying to figure it out through uh through these little issues so now I have deploy it let's go ahead and check the Disney clone [Music] so okay so I'm opening that up I'm opening this up I'm opening up my logs right now boom and people are going to be swarming that link right now so it probably will go a bit hectic on traffic what happen Star Wars boom so oh oops live okay so I think it's working now John Wick maybe it was cuz I promoted to production interesting okay no no no no no it didn't work okay that's fine let's see May the force be with you came but then the John Wick one didn't so hit the API but debug came back empty so that's the problem so you see what do you see how we do this so basically it hit the API but debug was empty which means the problem Now lies in boom here the problem is there problem is right here so the next natural step is we investigate our um our Cloud function so let's go over to our Cloud function and let's have a look where that is happening so if we go to Azure let's go to um sorry guys one second we go to Azure let's go to our function app and the one that we deployed to was Disney 2 clone and it was it was we can do activity log I believe um no it's not this one it was actually deployments how do I check it properly I done this before actually logs here we are yep and Disney 2 I wanted to check this is not the one though I want to check the actual instance where is my um instance of it it was I believe it was cuz it's it's within Disney clone function app I need my actual functions where is functions function okay so it's not this um Disney 2 clone I'm being very silly right now anyone help me out feel free it would definitely speed this up and it would be inside of app cars deployment C deployment slots it was wherever is it I've used this before it's got a very good logging uh tool here that you can actually check um for some reason I can't find it right now okay I mean we can check it actually function app function maybe I can just check the fun here we are okay so here we are my bad it's there this one so you want to go click that and then you're in the right function that's it and then you want to do monitor I knew it was somewhere yeah and then logs we're going to click Start and now you can see live logs so let's go ahead and pop this over here pop this over there okay now what we going to do is go to your main deployment Disney okay um let's type in Star Wars and let's see if we're getting it come through this is very strange though cuz it works there look Star Wars 5 yes this isn't thinking is that going to come back blank okay so we're not getting the okay here execute function failed so HTTP invokation inv invoked there Star Wars blah blah okay so what you can now do is in this function we can check it for so if we go to our app uh not this one sorry function Source get suggestion so here it's failing here so this is actually why is going wrong so at this point this is actually going to be a catch situation so we can do a catch basically go ahead and determine CU Lo the arrow say eror uh and you can actually go ahead and just do it then if we don't want to do await async you can you can either do this and get rid of a we a sync or we can do a try catch all around this to be fair error B bum like so uh and then obviously you can return you know if you really want to you can go ahead and say return body just error I don't know right now I'm just doing a very bare minimum just saying error this is not a good idea don't do what I'm doing I'm just just trying to quickly do something on the live stre let's do deployed function app I'm going to deploy this and we're going to test it out there is a look stream uh I know what you're saying it can be a little bit you know overwhelming when you're doing this kind of stuff but trust me it's really not that bad like it just it can get scary in the beginning but it's not as bad as it sounds right so let's deploy this again and now we can see and the point is guys this is really more on the production lines of things and look the fact that we've got so much retention right now is actually incredible because you're seeing the the difficult or more difficult part in the time stamp this will definitely be a debugging section for deployment I think that's cool but I think the the best thing about this really is the one the deployment actually worked see open AI is working flawlessly it's more the function and the function most likely oh my God I know what it is I know what it is it's because um open AI is is uh the key the key oh my God that's running through my key right now I just realized my key has got rate limited that's exactly what's just happened oh my God yeah watch watch how when we deploy this and we do it my keys got R limited I already know it I already know exactly what's going on look Avengers someone saying hey Sunny Star Wars It's 100% my key Jamie called it it was definitely my key I'm telling you that's definitely what's going on here um if we go here I think usage we we'll see a massive Spike right now okay so activity oh it's not C it's not too crazy is this the one I'm using I mean 6,000 tokens 26,000 tokens maybe it's not right now it's not live I reckon this is actually the uh I'm telling you it's definitely rate limited 100% it's rate limited because of the amount of requests coming from one place I reckon it's probably that but anyway you can see it let's have a look so it's now done so we can check in our logs I'm getting so mixed up with our files now but let's have a look so it's clear let's do Disney clone refresh cuz I've refreshed that function and if we go into it let's have a look so um monitor that's cool we shouldn't have to redeploy cuz it mean it's just hitting an end point oh ooh okay what's happening here we got we got some success that's good uh we're getting success more than errors I mean I know I didn't change anything so it doesn't make any sense um opening live Matrix as well that's interesting okay so uh I've got too many silly Windows of all right so let's do this one Disney clown Star Wars okay Star Wars is definitely cashed on my machine Let's do Star Wars uh 4 error there you go firstly you know that works and then oh God okay it actually returned error that's the problem I wanted to see the actual error message though I I didn't want to see that um it's not showing error messages okay I I didn't expect it to actually show error I mean of course I should have but that's so funny um yeah so right now it's not showing me the actual thing let's see opening live Matrix let see what's happening here maybe it's just not showing me error messages for some weird reason that's not right okay anyway the point is guys is that yes I would go ahead and basically debug it the error is happening here so that you see it did fall into this hence why it showed that um I should have just put error here I don't know why I didn't do that let's just do error I'm going to just do that right now um never trust input like this as well by the way so never actually show input like this but um I do want to just try one more time because it's going to bug me it's going to bug me so much Philipe says I'm Brazilian and uh uh thank you so much I appreciate it dude thank you so much for tuning in right we're going to get this we're going to get this so if you're if you're enjoying this debug segment literally just like this video because trust me the pain is real um but yeah you guys are seeing right now this is this is real coding right let that happen obviously right now I'm being real with you my Approach here is very messy I'm just being honest but I'm live and I kind of want to get it done um the reality is is that this error is likely to go ahead and show on the screen now so which is not really we want to do but so let that connect and see what's happening I mean that probably won't be able to connect while it's deploying oh I will log level vero's warning error oh okay that's my bad yeah it was there as well if we do log level error let's see do we get that as well okay someone can go attack the site right now that would be great do Star Wars four or three okay well I don't what is happening why does it work sometimes that AI is thinking error okay there you go boom we found it guys we found it yes all right that's good that's good all right so obviously the point here is that you can increase your rate limit by adding a payment method to your account there you go boom okay I think that was really good exercise I think that was such a good exercise there to Showcase what we did obviously the point is is that yes I I don't think that's the ideal way of debugging it but you get the the gist of it so what was happening here and this is a prime example of why open AI service on Azure is really good because it scaled up but basically what's happening is if I go to this one for example you see how it's working because it's scaling with the request and it understands okay maybe many users are using it it's not going to crash on us but in this case if I did Star Wars 5 uh since thinking we're going to get rate limited there we go so rate limited reach so absolutely Jamie you got that one correct uh that's awesome to see but we made it we found the the problem okay so I hope what I really wanted to highlight there was the approach to all you would have to do is honest you just increase your payment you just have to add a payment method and then open out let you do whatever you want so the goal the really takeaway from this really is a case of understanding that program is team SP 100% dude understanding that yes that there this is the approach that I take to debugging right it's honestly the reality of having all of these clever debugging tools and ABC reality is trust me all the devs I know do this as well like is in you're literally just adding a conso you're checking am I hitting this point or am I not and then you're basically breaking down the problem okay it doesn't exist here it doesn't exist there just one thing be careful with your console logs afterwards clean it up uh typically test all of this in a preview environment don't push the production today obviously we're live we're just messing around with a a lot of stuff but um and also secondly thirdly listen to your team this I think this highlights the importance of having more than just yourself in a development environment and I think that can really harness your growth or it can really prohibit your growth if you're just in that isolated mindset of I just going to be me coding and I don't need anyone's help because that's what we try and do inside of um zero four stack C and obviously today I did a live deployments every time but you can run it in a local emulator which is probably the much better way to go yeah so if you did enjoy that I think let me know right now by destroying that like button I think I saw the likes just flying when I was debugging so you guys definitely like seeing me stressed um but that was absolutely awesome guys as I want to highlight one more time all of the code for today's video is available first link in the description simply pop your name in like so you just want to go ahead and do this type in your email address like so let me know in the comments right now if you've already done this and you've got access to the code you can simply put your name as your company go ahead click okay you will say this click close And just like that you have it down here the GitHub repo and then I want you to go ahead and click on Z to check us out because like I just showed you that live coding that live debugging this is literally what we do inside of zero to full stack hero we attack the biggest problems together I'm teaching it I'm showcasing exactly what we're about inside the coding community and we take on these really hard problems and you're basically seeing exactly what you saw today but in a constant weekly approach where we're constantly reinforcing your keeping you up to date with the latest and greatest Tech and obviously everything is constantly adapting all of those coaching calls are constantly added back into the course and we continuously grow this is why it's not just a course it's the world's best developer community and it's a dynamic evolving course and staying at the Forefront of what's latest and greatest so if you want to check us out papa.com we do support PPP if you're in different countries around the world so yeah go check it out and also guys just worth saying massive massive thank you for today because I think the retention was absolutely awesome we built an incredible app I'm going to go ahead and demo it right now before we sign out and I remember if you haven't already check out that link because you can get $200 worth of free credit for Azure as well so yeah you know how we do it guys look at this go ahead and drop your comments in what you thought of today's build let me know in everything in all of your honesty how you thought it was but um chrisan says Hey sunny how's it going later I'm going to check the videos nice what's your headset brand I'll I'll make a setup tutorial but guys this was the build today amazing Disney plus clone beautiful UI completely resp responsive you know we had all this goodness in there we had live debugging at its finest today as well guys we used re um responsive situations like this so like you know we can use one component like this and we can reuse it in different aspects we even saw how to create two different approaches to AI so we actually went ahead and done a full stack approach where you learned how to create your own next year's API end points and we did it the approach using server components directly to the open AI service it was an absolutely incredible build lots of live d bugging here so absolutely take away the moments from that in the sense of that's really where the golden gems are and uh the code right now if somebody says is it public yes the first link in the description simply fill out that form and it's the bottom left link where it says the GitHub code I'll show you once again it's there to fill out that first link and it's on the Microsoft website it's public so you can go ahead and check that out yourself as always guys this is your boy Papa react and I will see you in the next video I hope you enjoyed this so much it's been a pleasure to teach you guys and this was honestly the final build of the Year Microsoft collaboration Banger build delivered it amazingly you guys really loved it honestly I can tell by the amount of people that are still here we have hundreds still watching right now so yeah I don't know I can say enough I just want to literally take an opportunity to say to you guys that it would not be possible to work with companies like Microsoft companies like IBM all these huge collaborations are happening with the papa F yes with the papa fam you guys are part of this own tow Journey this is all possible because of you guys so thank you so much for making this year my biggest year yet for growth we're just about to touch a quarter of a million subscribers absolutely nuts mindblowing stuff and all I will say is a massive thank you to all you lot because if you guys stay with me I promise you I will keep on giving this content keep on building these apps and I will never stop providing this content and valuable information for you guys so I love and appreciate every single one of you I will see you in an upcoming video and yeah have a great New Year Merry Christmas to everyone and uh yeah signing out for this year it's your boy papat AKA Sunny peace look at that such a nice app such a nice app until next year guys I'll see you in the next one peace make feel got you in my head I want to be with you

Channel: Sonny Sangha

Views: 79,955

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, nextjs13, next js 13, nextjs 14, next js 14, next.js 14

Id: G6X6CnxBDI4

Length: 236min 47sec (14207 seconds)

Published: Tue Dec 19 2023