Build a Random Jokes Generator App in Next.js with API & Tailwind CSS

Hello what's up guys. Today in this video we will see random joke generator. You can see that the moment I refresh it. So first of all you see, whatever like punch we had a while back, you can see that its question has changed. Ok? What are you saying now ? What's Red and Bad for Your Teeth. What could be the reason for this? Now imagine. I have no idea. A break. The point is also correct. Like is also red and is bad for our teeth. A break. Ok? Now I can hide again. Now I don't need to refresh the page to read my next joke. The moment I click on the Next button. The second joke comes in front of us. And you might have noticed that it is not even refreshing the page. This is the beauty that the jokes will come automatically random no matter how much you do. Isn't it? And it's not like I wrote this joke myself. No I am getting it through the API. I am revealing it. I'm hiding it. I am able to do next. So today in this video we are going to see how I am able to do all these things in Next and that too in the client component. Imagine yourself when we were working on JavaScript. We used to do the async await promise API at the very end. But now we are doing the next just. And we haven't even touched a lot of things yet. But still look how quickly we have come to this point, brother, how can you play with the API. You can get the data. You can show and hide. Then as soon as you click on Next again, you are calling that function back. Without refreshing the page. So you are going to learn all this today in just this one video. So I really hope you will like the video very much. And for the rest of the videos haven't checked out our Nex Awesome Course yet. Please do check it out. Source Code & Notes is completely free. You will find the link in the description and comments section below. I would also like you guys to give some love to our channel. Like the video and share it with your friends. If you have any doubt, please comment. And if you have n't subscribed to Awesome Channel Thapa Technical yet, then please do so. So now let us start the video without any delay. So first of all, what is the link of this API data that I am getting and from where am I getting it? So you can see this is the actual your API. Ok? It's not mine, thanks to whoever this is. So we can use them for free. Ok ? So look what do we get when you call this API ? We get a type property or you can say a value. Basically JSN data by all of these. We have a setup, we have a punch line and then ID. So this is the setup that is asking you the question. And the punch line is his funny answer, isn't it? There's always a boy in the class who keeps punching. So this is a punch line anyway. What Does a Clock Do When It's Hungry. Brother, what does a clock do when he is hungry? It goes back four seconds. I do n't know, I did not understand myself. It goes back four seconds. Now guys, I don't know, maybe my humor is not that good or maybe I haven't heard many English jokes, so that could also be a reason, but whoever got the meaning of this, let me know in the comment section. Anyway, no problem, our main job is to code, we will do that, so guys, see how can we do it. In yesterday's video, I told you two ways, one is how you can fetch data in the component from React and second is how you can fetch data in the client component of nexjs, so today we are going to fetch data in the client component, okay? Now let me go straight to my VS Code editor. Alright guys so you can see that we are now on our VS Code editor. And here, if I show you. So this is how App Router works. Well, a few videos ago we saw the group route. You know where I created a user. If you create Remember the Moment like this then it does not appear on the URL which is very awesome. So I would like to have whatever is of the users in the users whatever is of the admin panel inside the admin in the same way today our first project is now next application. So I want to create a folder by doing projects. You can say it's part of the group route. Ok? So I go to the app. What will I do? Projects forward slash jokes forward slash page dot jsx so this is the beauty. The Moment is what I do. So you can see what your awesome has become a folder. Another folder was created inside it. The end file was created automatically. Else first go to the folder, then go to the folder, then go to the file. Ok ? So anyway, no I'm now inside page dot jsx. Meaning if I do projects that have forward slash jokes, I'll see these jokes. And first of all I want to work on a client component. Why? Because we are clicking the pay button here. And the moment if you are clicking on click event and all those things in server component then it won't work for you. And this is it and this is the beauty and this is it. Why am I making this video again today? Because you had a doubt that when should I use API on server component and when should I use it on client component. Look, you will get better use case from this. Where I am clicking on the button then next ah I am getting those jokes. So I have to click the button, right? So the client component is the end of the matter, right? So whatever, let me go here. At least I tell random jokes. ok guys? Random jokes, we name its component. What should I say about components? You call it a file. Ok? Will work. Now I will go here. Export default we have a random joke so this much we have to do. No matter what ok? Now look inside it carefully and see what do I want? I want jokes and when I load the page for the first time, that API call should happen. So first time if I call then the API should be loaded I mean. So for that obviously we have a use effect hook. Ok? So, it will feel like mine. And I'll place a dependency array here. For the very first time I want to call a function. And I give it the name Fach. Random Jokes This Is It. I have done this much, we will go step by step. There are no extras. Ok ? Your guys might also be practicing react here. And if react is also being practiced. So I would like to say guys, this is the best React course in the world playlist. You won't get anything better than this. That too version 19, so do check it out. You can see the link, it is on the top also. And you will also get the guys in description and comment section. Ok? So A Fetch Random Jokes does one thing. Now I need to create this function. So cost fetch random jokes this way this is it. Ok? Now do n't look here, if you wanted, I could have created it inside this also. But I did not do it because I might have to reuse it later. Ok? So what do I do here now ? Look guys, it is very easy. Let's have one URL. Ok? And that URL is nothing but this one. So, I will copy this. Here I will paste it in this manner. This is it. So what do I do now? This needs to be fetched. Right? And how do we fetch? There are many ways. It's simple. Right now I am not using try catch because it is very simple. So, it's a wait we have a fetch method and inside a ah fetch method, we'll pass an argument. And that is nothing but this URL. Now I ca n't use await directly. But yes what I can do is I can make the function async. Please note that if you are working in the client component, then you cannot make your main component async. But yes, inside the use effect you are calling a function then you can do it this way. And else you can go with your use, basically you can use the use API available in React. And then cost we have a data over here. Ok? So now look, whatever is coming to us, promise, now whatever response we will be getting, guys it will obviously be in Json format only. So we need to convert so again await you will have to write because it also returns promise. What I would say is convert whatever response you get, ah, so that we can basically have it in a readable JavaScript object format so that we can use it. So I got the data. Now if I console dot log this same data and I change it to data. Ok? This much I do. Control s I'm saving. The file is already running. I will go here. Am. This is the actual page, let me inspect it. And don't worry. If we are on the client component, I will be able to see whatever it is on the console. And if I refresh and boom guys. Sea guys we will take care of this. You don't worry. That's not the case right now. Main thing for us right now is that I have got the output here. And this is it. This is your ID. This is your punch line and this is the setup. And this is your type. And it's huge. Well, whatever it is, it doesn't matter to me. But whatever data I got. Just notice that in the data we have a punch line, we have a setup and then we have this id, these are the three properties. Alright, so now see what you have to do whenever you are working in the front end, basically in the client component, and if you want to play with the data, now here we need to manage our state, and whenever it comes to state management, we have hooks in react, so I think there is no need to even say anything, and that is nothing, what you are using is state hooks and random jokes will be equal to your use state. Ok? And I will pass an empty object here for now. This is it. Now I will copy this set of random jokes and after passing it inside, I will add this data inside it. So now this is my updated function, this is my updated function. The moment I added this data inside it. It means now this random joke of mine has the complete object with two four key value pairs Jason wala. Basically now it has become an object. There is no tension here. Now I just have to use it here. What will we do here? We will go back. And guys it's pretty simple. There is nothing to be done. Like if you are writing deep. Ok? Inside deep, if I go and let's take an H1. And in that what do I do now? We have a random jokes dot we have a punch line. Not a punch line. We have a setup. Ok? And I will remove this. I will use one paragraph. Let me do one thing. This is not a paragraph and this is not even an H1 H1. Let me do H2. And here I am random jokes dot we have a punch line punch line. Ok? I will keep this one. If I do even this, watch carefully what happens. Return an end By the way guys I'm actually outside the component. I had to be inside it. Yes, no one will do it. Now watch carefully what happens. And this is it guys. Look, whatever you are seeing, this is nothing but your guys a setup right and this is your punch line, so there is no difference between what you saw on the screen a while ago or now and this. The only difference is stylistic, yes guys that whole tail has made it look like that. The rest is the same, just two buttons, what is the point in saying this or we have a button also due to which we are able to show and hide. Ok? And that too will be very easy. What will we do to show and hide ? I'm using another guy's hook here. I write show jokes. Set so jokes equal to your this again it's your use state. Ok? If you wanted, you could do two within the same use state by creating an object. But guys, for the very first time, I would like to keep it true. Yes, I am keeping it true. And ah I will go here, to this place. Please pay attention. This is very important where this show of mine is Jokes, here guys, if this show of mine is jokes, its value is okay, if it is true then there will be a code here, I mean I will write the code here, if it is false then the code that I write inside it will be visible to me, inside this I will have a button, okay what will be written in this button, reveal because it is very first time, so obviously this is that if we are getting the data, then I would like the reveal button to be visible, so I would like that I should see its punch line here. So I do a Joe Hyde punch line. Something like this. Ok? Once guys do this I'm going to press Control S and save. I will show you here. I can see the reveal because I'm getting the data. Ok? If I had said that I would not have got the supposed data. Ok? Then show the reveal. Showing Else Hide Punch Line. If I do this then I'll see the Hyde punch line. This means guys somehow I have to play with its value here. Either it has to be made true or it has to be made false. If I want to show data then I do one thing. I'm going here. Ok? And by the way, I had created a pretty nice parenthesis here. The reason behind this is that what if this paragraph, this H2, if I add it here. And by the way here also they feel that a parent div is needed. So we give the div of the parent. Div div and or this is it. Ok? So let's check it out. Ok? Now if I do this. Just look, it is very simple. And I know you can do this. Look, the revolver has come. Now if I click here nothing will happen. Let's check it out. Now if I add pay on click here. What do I have to do here? If somehow its value becomes false then I can see it. If its value is true then I can see it. Well then. What does it mean if someone clicks on reveal? Now he has to see this code. If someone wants to hide it then hide it and show it to him. I mean we want to show the reveal button there. Meaning, if someone clicks on this reveal one then I have to show this. When will it be visible? When its value falls. So what we will do over here set. So I will make the value of the jokes false. Right? Now if I copy this same part. Let me do one thing. Does n't even copy. I will directly refresh here once. Look carefully. I will click on reveal. Look I got the data and hide punch. Nothing will happen to Hyde Punch right now. Unless I add this code there. And I will set it to true here. Meaning if its value is true then I will get the revelation. So it's done. This is what I want, what else do I need? Reveal what is a tornado favorite game to play Twister that's right a tornado comes, what could be its work, it is Twister right, so this is this let me explain this Revel, if I refresh again then see, Reveal comes like this, my work is done, hide punch line reveal hide punch line reveal hide reveal show hide so hide this did my work, so you can see guys how easily we created it and we were able to do this because we have already learned JavaScript and I would like to explain again. I showed you the react. And JavaScript I don't think you will find better JavaScript than this. Basic, advanced and complete e-commerce website, all in 12-12 hours, you wo n't get any better than this. Ok? Now just one thing remains and that is I will need to put another button here. Isn't it? After return, where I would like there to be a next button. And look carefully. Now I ca n't put it that way for a second. What would I like to pay next? This data of mine, this element here, should change. Tell me how can this be possible? Meaning, if I click on next, refresh the page now, but this punch line of mine should appear in another one. Any random second one may come. Now tell me what can we do? what can I do? I need a new one here somehow. What shall I do? Now if I refresh the page again then obviously I will get it as new. But is it necessary to refresh the page here? Or anything else I can do. I just click on next and I get another joke. Is. This is my only condition. Tell. Allright. It is very simple. If you remember in the beginning I said that I am calling this function. But I am defining it outside our use effect there. If I somehow call this function, then because for the very first time when we load the page, then this call is happening there. And that's the reason why I know data. But somehow if I call him again then I will get the date back. Right? So this is the function, whenever someone clicks on it, I would like to call it in this manner. Simple this is it. Look carefully. We have a first let me remove the hide. Ok? So I will click on next. And Boom Guys See Why Did the Cookie Cry? Because his mother was a wafer so long. Ok ? Leave it. Isn't it? Whatever it is but it is doing my job. Look at this. Isn't it so awesome that guys this project was mentioned at the very end of the JavaScript world by calling it brother projects. Even in React, but now see how easily we can do all this because we have already seen JavaScript. We have already seen the reaction. So we just had to see the concept of Next. And if we look a little into it, what should I say next? All this seems like a reaction to me. But anyway, no, we can say that it is a little different from a use client. But yes this is it. Now if I want to show it a little better to you, then what I do for that is I have this particular part p sub codes, I should tell you where alright this part of mine will change, so let me do one thing, set random jokes, this is equal to random jokes, which is what I needed here, okay and at one place show jokes is left, so if you remember if its value will be show jokes here, then this set show jokes is left, then I go to that, somewhere where is it or over here hide true and this is handle page refresh and what did I write there, I do n't need handle page refresh, it's a fetch random jokes, I will have to click on it, as soon as I click on next, friend this is it. My work is done. I will go here. And this is it. See if I do a reveal punch then hide me like this. If I click next then I will get the next. So this is it, there was nothing like this awesome guys. Here is the empty tail wind CSS. And tail wind CSS is nothing. That's your CSS. So if you know CSS. It means you can work in tail wind CSS. I have also created a playlist on And Tail Wind CSS. I'll have to see where he is. So you should check it out. But ya guys this is it. That's it for this video today. I hope you will like the video very much. How can you create a random joke generator inside a client component in Next JS. How can you achieve the show and hide functionality and how on pressing the next button, your new jokes are visible to you. So how are we able to do all that today we saw it in just this one video. So, I would like to tell you that I am sharing its source code and notes with you absolutely free so that you do not face any problem. In the same way, I also want that this video, which I made with so much hard work, reaches every corner of the world. Basically, for those who don't have money to afford classes and all those things, they can watch it absolutely free and learn something and become something. I want you to support me in this. That's why please guys like the channel video if you have any doubt then comment. You see, this time I am replying to every single one of our videos in the comments so that no one has any doubt. That's why please you also support. If you have n't subscribed to the channel yet, please do so so that this video reaches as many people as possible. Ok? So guys, I will meet you in the next video. Till then guys thank you so much. Take care. [music]