[NEXTJS] "Building a Quiz App from Scratch with NextJS" #nextjs #nextjsproject

hello everyone I hope you are doing well uh in this video we're going to learn about next.js uh in the previous video I mentioned that the next 13 has released and uh in the new update they have made the app directory is this table now the update is actually production ready uh so in this uh tutorial we're going to learn about the next 13 and the app directory how to use it and also we're going to create an awesome quiz app in next 13. so let me show you the demo of the project uh you can see here the project look like this here we have welcome to the trivia quiz you can see that there are a number of questions which is an input box then we have this drop down right where we can select the category of which category quiz you would like to play and then the level easy medium hard we can see the type of Boolean and multiple Boolean basically means true and false question and multiple basically means multiple choice position uh so okay let's start a quiz now I will say entertainment and flim I will choose level 2 obviously be medium I will choose the type to be multiple and I'll just start quiz now okay it will see this beautiful skeleton first then we got out question number one we have scored zero right now which of the following is not 10 code from another question and answer so I'll just take an answer and the first answer I guessed it and it became right and so for some reason so I'll just say next now I'll just choose another answer obviously it is the wrong answer because the right answer is this uh in blue color and everything is incorrect answer is are in uh red color here so I'll just say next so you can see this code is one now and we are in question number three I'll choose this uh this is the right answer I'll choose this again wrong answer this code is 2 wrong answer wrong answer wrong answer again okay it's the right answer so this code is 3 question is eight now say next wrong answer and it's also wrong and you can see here I get the score of three pretty bad score but I think it's fine the project looks good uh I can again start over and I'll just choose uh some other category this time I'll give an input number of like four only four questions now there's a category to be video games I'll just select labeled to be hard I'll just select type to be Boolean this time I'll just again start a quiz skeleton is showing it is loading everything now you can see the true and false uh and I'll just take it through right now it is right answer so this code is one I will say true again wrong two wrong false and it's right so this code is 2 how's this indexed and you can see the my score is two so the project looks pretty good so let's see how we can build it in next 13 with app directory and everything let's start the project okay so what I have here is a basic Nexus project uh I'm going to run this project so I'll just go out here and just say npm run Dave now the project is running in localhost 3000 I'll go out here and I'll just say localhost 3000 and I get the basic project right so now let's first set up our component right so first that I have this uh UL component Library called Saturn's ssad CN slash UI I'll keep the link in the description below but basically it contains this reuse you reusable component that we can use for example if I want this alert box then I can use this component right I can just copy and paste this component and I can use it in my project so this is a really handy library and component Library if you want to build things quicker and I will put the link in the description below you can have a look at it so let's we're going to use drop downs and buttons from here uh so yeah so let's get started and install it in our project I will install it through the CLI you can see the CLI here and I'll just copy it here and in my project I'll go here and install the Saturn UI set CNS Dash UI yes it will start installing the dependency right away and now there are ah you can see here it installed the dependencies it added the CSS variables at utilities and everything so let me show you what it has done uh you can see package.json it added all these packages called Lucid react react merge uh television CSS animated animate it basically install all these libraries and it configured this CSS variables here and it also have configured this animation and keyframes as well it also added this util file which just takes the dragon CSS class merge them and also we can add this Dynamic class name with this CL as X right so basic stuff it automatically does all of it for us by just that one command you don't have to configure it yourself now we can start using that um that component we have from here we can use any component here easily now okay so what uh before that let's go out into our main project and here I will just go to my app directory inside pages I want to remove everything from here and start creating our own pages so for that I'll just create a section first and inside the section I'll give it couple of class name so the first class name will be uh plus name will replace I want it to be column so this reflects Dash columns uh I'll just say justify to be Center I will say items to be Center and I want to give it a margin of 10 right so inside of here I want to create an H1 tag so basically let's find out some good heading I'll go to the flow byte websites provide.com and I'll search for heading like this I'll give the link of everything in description below so we have this heading I'm going to copy this heading also Ctrl C I'll go to my project and here I will paste The Heading obviously I have to make it to class name now I can go to the project and let's see here it's not running so I have to run it first I'll just say npm run div okay so now if I refresh this I should be getting my heading yeah I want the heading to be welcome a quiz like this yeah it looks good now the second thing I want is the section and that card so to say six on here give it a class name so the class name will contain pairing of 10 first margin y of 10 it will con contains the rounded of large then shadow of extra large and also I want to give it a width of 65 percent yeah like this so now it's great now after this I want to put a lot of component inside it the first component is input box for our number of questions right so I'll just go in here I also search for input also input box no input groups uh Source input input field okay so we have these input Fields here I'll just choose the first one and I'll install it myself so I'll just put the copy this div go out here and paste it now I'll just copy it and paste it here okay so um 4 will be HTML for and class will be obviously class name and this class will also be class name like this and instead of first name I will just say number of of questions like this let's see what we get here I get an unexpected error so that's why let's see why that is I guess it is because I haven't given this slash here yeah so it is great uh now the second thing I want is the placeholder I don't like that placeholder I'll just remove the placeholder from here here I will just see input type to be number like this ID I don't care about ID for now it doesn't matter I will just give it a default value of no yeah default value of 10 I will give it a minimum of 0 I'll give it a maximum of 50. I'll save it okay so if I just add it here left the number is working now the second thing we want is the drop down and we want three drop downs so for that I will create a component but before that let's get the drop down from the UI Library here so here we have this um drop down menu like this you can see here it looks like this here and another we won't have here [Music] so let's choose one yeah I think this will do good yeah I think this is fine so to use this component install it uh I just need to copy this right here again and I will just go and paste it after I paste it it will ask me where would I like to install this component in dot slash component slash UI I will choose the default path and see it enter so it will create a path called component slash UI in our project now so inside here you can see the components folders already being created and inside UI and it is there it is installing this drop down menu automatically for us which is pretty cool so it is getting installed now it is completely installed so after that I can go out here and I can just import it and use it in my project so I'll just import it like now right now I'll put it right here I just don't need this image file so I'll just remove it like this and I'll just put it right here just to see how it works so let's copy it and put it just right outside of the Steve and if I go into my project I can just open it like this and you can see it looks pretty fine right it's uh it's looking great so now I want three of these so for that I'll just remove it from here obviously I don't need it here I need it inside a project or component sorry so let's go out here inside my components we have this UI but our side of this component I want to create another component called Drop Zone like this or drop down options like this so here I'll create a new file and I'll just say uh drop options like this okay so inside the drop options it will contain basically a section which contain three of the stop runs like this I'll give it a class name [Music] uh class name will contain flicks justify will be Center or I can give it evenly items will be Center like this and I want to give you the padding way of five like this okay so now the section will contain a div here I'll just give it a class name of adding X to be 7 pairing y to B4 width to be one out of three 33 percent and I'll just give it a a Max of 4 like this now inside here I will go to my UI component I'll just copy it I'll just paste it here and then I will just copy this thing and I'll paste it here inside the div okay so let's see how it turns out if I go to my browser refresh this obviously I have to use that component here as well outside of the div I'll just say drop down options like this options and refresh this and I get this open okay so it looks pretty good a couple of things I want though but before that I will have to create three of these so inside here I'll just copy it paste it and paste it like this so I have got three of these now let's see here yeah uh the first one will be select categories select category uh it will also say like select category now second will contain select level and the third one will contain select type okay so the third one is here I'll just put it at the end and it will just contain select type okay so like this now I want to give it a class name I will give you the custom here I think it will take the class name I'll just give it a place I will also give it an outline of known so that that yellow outline is will be not visible there I'll just give it a justify to be between and I give it a width of full like this let's see let's give it a shadow of vlz yeah so it just looks pretty good Shadow that's small okay I can see the shadow I'll just make it medium size and padding I will just keep the X padding to 10 and padding White P5 okay so it looks decent uh I will just give it minimize it down to three it used to look decent I will give it a rounded off Lars pretty fine until now anything another thing that I can do is I'll give it a little bit more Shadow uh level and everything else another thing I will do is give it a background color on Hover as well over I'll just say busy W 600 another thing that is that in Hover I will just give text Gray 100. okay yeah it looks great right select type select level and everything I'll just let's click here and see how that works yeah it looks great it looks fine it looks absolutely fine for me so I'll just copy this and I'll just use it in both of the places here as well and I will use it here as well in the trigger obviously like this now fine okay so we have select category select level select type um another thing that I can do here is increase the size of this whole thing from this 65 percent I think I have given the 65 percent two little bit more but for that yeah I'll just give it a 75 percent yeah now it looks decent uh now second thing I want to do is make it a little bit more big so inside of my drop down component where this UI drop down menu uh there is this thing of like Primitives of content I will make it Google REM and I'll also make it to the REM Office drop down menu content now if I click here it looks a little bit more bigger but I will make it like 15 I think 15 will be even better so I'll just choose this 15 here now basically it's like this then it looks really good um now the second thing that I want is when I select it it is showing me this like this I want it to be coarser so I'll just change these two like cursor to be uh let's see I want the cursor to be pointer so let's try doing it here let's see if it works from here so this records are pointer like this now if I go here it's still not pointer so I have this put it in my [Music] maybe now it will work oh it's still not working so where can I put this cursor pointer let's see menu content we have many items I think I can give it menu items yeah yeah here obviously if I just say a cursor pointer now now you can see I see the pointer uh cursor here right so this looks pretty decent I think we have select labels and we have select types fine I think this is good now the third thing that I want to create is a button which will just say start text or start quiz sorry so let's create a button for that I will go inside my pages again I'll create another component for button uh so let's go component and here I'll just say button like this insert button or create create an index.txt file tscx file and functional component like this and it will be button uh this time we will use button from flow byte pick any button you want I'll just say button here and pick one normal beautiful button so this one alternative right I'll just randomly pick it up and put it here like this so class name and and I will just call it uh start quiz now like this I want to make it a little bit more bigger so I'll just give it padding white off like four five and three x of 10 let's see how it turns out obviously I have to put this Con uh component here so I'll just say button component B yeah let's see yeah get component here but it doesn't look that good right now uh let's see what's missing here so okay so it looks good here I would rather give it four yeah it looks fine now I want to pick it uh and I will bring it in town to the sender so maybe I can just give it a flex here just put these two Thin inside a div and put a flex there and actually put everything inside it so let's see div actually like this so let's say div like this and I'll just put both of it inside okay yeah so everything looks pretty decent uh in here in the button I will just keep it the text to have size of LG large yeah and I think I should give it 65 percent 75 percent back again so the problem here now is that since since it is flex I think I have to give it with the full because it is shrinking in size based on the content like this uh still it is not perfect let's see not one button I think I should also give it a width full yeah now it is fine yeah so everything is looking perfect now now we will start and create our second page and manage some state all right so now we want to save our state and we want to create our state in category leave or the score we want to manage our state right and so for that we're going to use this package called just land which is basically a Simple Start management package so I'll just go out here I'll copy this and I'll install the package right here okay so let's go out here like this and and image to all just land like that in my app directory I'll create a folder called store so folder called store like this it will contain a file called index.ts things okay now I can just create my store like this simple just as simple as it gets I will just say use quiz like this okay so I will just create set it is fine so this will be config first let's create a type first so I'll just say export [Music] type config type and I'll just give it a number of questions which will be definitely number category which will contain this ID of number and name of string then we will contain label which will be string then type it will be string then status Will Be Strings which is basically means the quiz is on or not right and score for score it will be number yeah I don't know why I'm putting everything in this quotation so let's remove that okay so number is uh numbers like this so after this type let's create some default value of the sequence are default config equals to number of question this will be 10 so yeah default config is number of equation which is 10 then category which contain like ID of 0 and name of string then type which will be empty string status which will be an empty string and score which will initial value will be zero okay so now this is fine uh here the initial value will be config initial state insert config I want to spread everything inside the default config whatever we have there I will create add level first so I'll see that level so the state will get the state and here I will get the config right and instead in this config file I get everything from the state config and I will put the level so the label it will get from here which will obviously be string like this so it will get a label which will be string and I'll just pass this label inside here like this I think it will work so yeah state will you config will contain everything uh inside the state and then we'll add this one value that will get nice like this I will create uh these things for each and every one of others so I'll just say add score and category and whatever so first of all add number of questions so it will get the number like I will say count probably which will be number and I will make a number of position number of question two counter like this okay you will get the number and I will put it here similarly we have add category so category now we'll get two things uh it will create an ID which will be number and it will give a category name right so name which will be string so here it will just contain category and we will just contain ID which will be an ID and name which will be the name that it will get okay I'll just say add status and assumed really I will just add score okay so I got one two three four five one two three four five and it's one two three four one two three four five I think it's good yeah so this is what I wanted now let's use it now for that obviously I have to like export this uh use quiz I think so I'll just say export default you choose quiz like this I'll go to my Pages directory here I'll just import uh with this way of importing other sequence config which config as you see who is config equals to foreign value fine so the state is working properly okay now let's face the category uh so for that I can go out here you can see here this is the API that we are going to use called open opentv.com so open Trivia API obviously I will put the link in the description below you can see here if I go to the API then uh I can see API documentation and it give me uh we obviously we don't need any any API token for this week it's just a public API you can use it directly so we have this UI sorry we have this link and if I just paste it link it will give me all the category I guess yeah so it will give me all the category here so we are going to use that link to get all the category uh I don't need this here now let's go to this drop menu because there is what where we should put the category so we are going to use it here so uh first thing is I'm going to create a state so this is const categories and I'll just say set okay we go release like this uh it goes to use state which will be an array I want to give it the type so I'll just type sorry category type is equals to I'll just say ID which will be a number and then name which will be a string right so what I can do here is in my use state I can just say category type which array of category type yeah so it looks fine now let's face the data for that I'll just create a huge effect now to use all of these we always have to make it a client component so I'll just go out here and say use client like this uh use effect and it will have a call back I'll just create a function I'll just create unseen function called page category like this and I will say cons it will give me this value called trivia under some categories like this uh I'll just say oh wait and wait now we have the link to face I'll convert the value to Json like this next thing once we get the data we want to set the data so I'll just go out here inside an array I will split everything that is inside the previous categories like this now we have our categories we can use those categories here in our menu so here I will say object of this I'll just say category is categories Dot map category which will just contain this drop down menu like this okay so drop down item now the top 10 Autumn will obviously contain a key which will be What's Happening Here it will contain a key which will be category Dot name uh another thing that it will contain is obviously it will have category.name here category dot name uh something else okay one click so when we click this then obviously we want to call the value from our state so let's again import that here as well so this response add a category is equals to use quiz import it it will give me State I do this return state DOT add category yeah so I can use that function here add category which will take category Dot ID and name so category dot ID and category dot name like this so it is good let's see if it's working or not if I go to the project I get the error here for some reason uh let's refresh this maybe it will go away no it doesn't oh I have to three dots instead of two um it's still like it in error so usually is not defined uh you have to import the user state like this and it's probably working fine I also want to console log the categories to see if it is working um I would rather go into my PS file I'll just control Z and I want to like lock this quiz config everything that is configured okay now let's request this let's see if I get the category or not if I click here I get the select category but I'm not getting any category here for some reason we look at look why that is happening um if I go to inspect go to console I'll get object here which contain everything but it doesn't contain any data okay let's see and console oh I am not even calling the function I have to call it here so that was a weird mistake uh maybe it will work now yeah I think it's definitely suit yeah I get all of these category here now if I just select this category of book now let's see if it changes the config file so if you go out here so categories that name but I have not okay I get here yeah I get the ID and the category book H2S now let's hit Level and type so all right so now I want to add type and label as well so I'll just create a variable at the top of it all the sequence type because to Boolean and multiple response level that goes to easy medium and hard now I'll go out here and in label I will just say [Music] like this I just want to import the add level and type as well I'll just say add level and I'll also say add type I can use this once in here now I'll just say on click I'll just say add label is an e right and and type I'll just say um click I'll just say add uh at type is a yeah now let's see if it's working or not so I'll just say now let's reload it just inspect and if I just select one here then I get okay it's not setting up the type say Boolean add type is not a function okay let's see what's the mistake here um store I have oh I haven't I don't have any a type so let's just add it right now I'll just say add type it will get a type which will be of string and I always want to add type here yeah let's see maybe now it will work expect go to the console we have the object which is default now let's select type of medium level of medium I don't get anything let's say a type of multiple I'm getting the type but I'm not getting any label oh I'm getting the medium level as well okay so everything is working pretty good yeah so I think everything is working fine here and it's good but now I want to show the value here as well and the thing is I maybe I want to put in Arrow phones in here probably yeah I think I should yeah I'll just say loose seed react whatever it is used yeah I will import it and in my own file of this select category I will use it here and it's not 7 right it is a on down I think yeah now if I can use it directly here in select category I'll cancel this is 7 down let's see if it works or not interested okay it's not working if I click it oh yeah I also not put it here I suggested to put it on the drop down trigger yeah probably here and then press it okay I get the values is pretty decent also category only except of Select yeah um yeah justify is between so I think yeah we are good now I want to use the same thing everywhere in this trigger as well like this and I would use the same thing in this trigger as well like this now it looks pretty decent second thing is I also want to get config file here so from this state I'll just get config right now what I can do actually is instead of Select category category I can actually say if config has a category you can configure category dot name let's say right because the config content category which contain name yeah if config category name exists then I want to show the config category name and if it does not exist then then only I want to show this category like this let's see I'll select the category to be entertainment books and I get the internet books which is great this is what I exactly wanted I will use this concept everywhere so let's copy this thing and select level as well I will just say first try to face the label from the config and if there is a level then so that level otherwise just say select label like this same thing here try to pick out the type from the config if you have type then it's fine otherwise just say select type yeah so I can just select anything here I can select label medium here it will get medium I can type multiple it will get multiple now okay let's start quiz now and it will start working absolutely fine but before that I need to set number of questions as well so for that uh only something like this and then go to my input box so if I go to my input box where it is component button what is the input it is in paste file I guess yeah it is here so I can use it directly here as well no problem no problem I'll just put it right here instead of add level it is add I don't know number of questions so number of questions probably like this so add number of questions let's copy it instead of making any spelling mistake already so Ctrl D yeah now I want this file here I'll just say on change and I can just say it will get e which will get add number of questions e Dot Target dot value like this now if I refresh this it will not contain anything I go to my inspect file console default is here now choose everything so general knowledge easy Boolean 14. you can see I get every detail here category label question score is zero status is nothing right now and type is multiple so yeah so the configuration part is set up now next what we are going to do is we're going to start a quiz and face all the data depending on the category and every of the each and every one of this configuration okay so let's create our quiz page uh for that I will just go to my app directory in the root where there is this layout I'll just create this new path called as red quiz which will so we use this athlete for parallel routing parallel routing basically means that the layout will get now multiple Pages let me show you what I mean first I'll create an index of the access file here here I'll just say see and it will just say quiz page and yeah it will written quiz right now if I go to my layout you can see I get a children here now I will also get this quiz also I have to add the type from here to here as well now what I can do is I can get that data from our config file right so I'll just create config equals to use quiz foreign render is equals to I can just say state DOT sorry as a config uh config Dot status equals to a request uh equals to start right then I want to show the quiz page that I get here otherwise I want to show the children like this so basically parallel routing means that we get these two pages these children which is the default page and this at the red quiz means this is parallel routing so we get this quiz here so we get okay uh quiz okay so here I forgot I just saw the error and for what I was saying basically parallel routing means that the layout will now contain two children uh so this page and this page so for parallel writing we need to give this at the rate and after that ah if we provide Earth rate and indexed not index.ts just it has to be PhD access sorry uh paste the T access yeah so now uh we create this at the rate quiz which is the route uh since it is at the rate which means it will be parallel route and we have this page.t access and we have this main page.c access and the lays on Earth the layout there are two pages this page and this page in the same level of this layout so now the layout will contain multiple pairs so it will get both of the page and we can just render which page we want to random the uh render uh conditionally if this is started to this status is start then we want to show quiz if it is not start then we want to see children yeah so that's about it instead of this I will just say render here now okay so if I go out into my page here in this button so I will also get um I will actually get uh add status or yeah I think it's add status let's see how to say use quiz and I will say it goes to State DOT add status probably so now when I click this button on this uh click event listener I will just say add status to start so now we check if it's start then we just show the pitch page right now I can go here obviously I have to make it a client component because we have this event listener here I'll just say use client refresh this uh and I don't know what I'm missing oh here is where I'm using this user so I have to use client which is pretty fine here is well I have used it so I have to make it a client component as well no problem I will use it I will make it client component here use client like this okay now you press this I think we have to import it it is getting imported uh I don't know so here also it is getting imported important it is also getting imported so one of the problem is so after a couple of Investigation I found out that the reason that it's just directly showing me this quiz pieces because I am setting this quiz uh this status to start directly here without any callback like this and it is calling it instant instantaneously and that was uh that is why the quiz page was shifting uh each and every time so that was a problem it took me like 20 minutes to figure it out so yeah so the mistake that I made here was a problem actually and now it is working fine finally finally now uh in my page you know layout I just removed everything and I just said that config read status if there is status in our config no matter what it is if there is a status exist then we just show the quiz page and if the status does not exist then we can directly show the children so now after doing this and after removing that one small bug which is cost me 20 minutes right now uh I think we are done so I will just go out here and replace it you can see I get everything I'll just choose the category I'll choose the label I'll choose the multiple type and other sister quiz now and I go to the quiz page and I will have all the data in my uh um State as well so you can see here in our store I have category level and everything so now the important part is designing the space so let's design this space finally go to the quiz page inside quiz page I will create a section so I'll just say section and I'll close the section inside a section I can create an S1 but let's give some class name to the section first of this class name equals to I'll say Flex I'll save clicks task column I'll say justify to Center I'll say items to Center as well and I'll just say like probably I'll skip a pairing of like two us or probably four let's see and another thing that I want to do here is given H1 tag so for that I'll go to flow byte again all those sorts heading component any heading component you would like I will speak probably this one or [Music] I have a person that's good enough yeah no problem what whichever you can choose whichever you want uh I'll just normally choose this and I'll just put it here and see how it looks if I go out here then I get something like this I can choose category and everything and yeah it looks pretty fine for me I will give some margin to this as well I'll just keep a padding of probably I don't give you any padding I'll just give it a margin top of probably 10 like this yeah I will just say this question number okay uh question [Music] number like this and it will contain hashtag one which will be the count of the number and I just don't want this yeah so like this so question number one right next thing I want is to show our scores I'll just create a paragraph tag here this is normal PDF and here I will just say the score will be first zero uh I would have to style it give it a class name and I will say it takes size to be to the Excel like this now I got a score and I got my position number there second thing I want is another section uh section like this now for that I will also give it a class name uh I will give it a shadow [Music] of 2XL margin y to 10 I'll give a padding of 10. I'll give it a width of 90 percent like this uh second I'll just say rounded to large I'll say Flex I'll give it a flex of Polo um second thing I want is to justify content also Center I will also give it uh alarm item align items to be Center uh I'll give it a shadow color is Shadow blue 200 like this now I can create another heading so if I go and source for heading I can use the same heading yeah I can do the same area I need to search for anything else I will give it a S1 tag to S4 tag so it is a little bit smaller in size and I can say iron I don't think I need any of this what I'll just do is I'll just use this uh color text color and as you get rid of this span yeah I want my question to be blue in color so for that I'll just remove this also this okay I don't want this as well I don't need this dark color then right yeah I don't need this dark color okay I don't know uh let's again revert back I just want these two styling it takes blue 600 and takes blue 600 on dark mode and light mode I will again go out here and remove this pan I will go out here and we have this dark text I will remove it and we have this normal text placed for normal and I'll just remove it and put that here now if I go here then I should get the position as well so Lucid heading 4 is not defined I just want S4 only okay so again select some categories uh select some label go out here and I get the question number which looks pretty decent for me uh I will still decrease its size little bit less I'll just give it for only three Excel or maybe 2 XL like this just look it so just make it look little bit less so I'll just give it a three action here and also in medium I want to give it a 3X 3x is a lot less so I'll just give it a 4XL yeah I think food actually is good enough uh five okay F5 will be good enough I think okay fine uh so this is the question I will just say the question number I'll just say what is the channel name like this and uh you get the question right so now what we want is we want answer buttons so for that again I'll go to flow byte I'll choose buttons and we can choose between any button that we want so let's use the default first one or maybe the alternative second one right so I'll just choose the button here and there will be obviously four buttons so I want to wrap those inside some tube so I'll just use div D will contain the class name and class name will be Flex justify content will be Center or this time it might be I have to give it evenly I think so you can see and items will be Center [Music] foreign [Music] so that the button get wrapped uh if it is the latter in size yeah [Music] and I also want to keep the width full for the button like this now I can put the button here let's see how it looks by default I get one button I actually need four three four like this okay the button is not that bad I also want to give the margin from Top okay so yeah this ah this emotic spacing is good ah for each button I wanted to give this first of all let's change the class to class name okay for this button I want to give it a width of like I don't know one other movies will be one out of three probably just wrong configuration like this um maybe rather than this I can just say take the width off like 30 percent directly okay uh it is not taking any width for now see what that is for each button I want to give you width 40 percent right I also want to give you some padding and everything Okay so I'm just giving the comma there and that was the problem uh so rather than 30 percent I can get 45 percent so it will work out fine yeah like this so we have these all these options uh instead of flow I would rather give it a 90 percent like this yeah and instead of 45 percent I can I think just give it like three percent yeah it is pretty decent looking now uh I also want to give it a margin of Y to four yeah now it's little bit more Gap around and I also want to do padding of Y of 4.5 just uh really small padding why um I can just give it like 5.5 I don't know why this planning is automatically decreasing uh instead of increasing but yeah I can maybe give it like three one five yeah two one five is five is good enough so it looks pretty decent on Hover I want the color of these things too be background to be blue 600. I'll just give it a blue and 600 like this so in Hover it is blue 600 which I like and on Hover I want the text to be uh instead of blue 700 I want the text to be white so I'll just say probably like 200. so it looks good now uh okay so design of button and everything is good now let's face these questions and answers and uh put this score right there but before that I also want to get another one final button called next right so I'll just uh I'll just use the same button and now let's call it next and I'll just call it next it's just that whenever we hover it will be a little bit more darker rather than just normal dark so when I hover it what is the hover code here it will be 900 like this right so it is blue but it is extremely blue yeah so there's a difference between these two buttons okay so now I think we are done with this so let's go out here and before that also actually I want to keep a little bit more styling to all of this button uh I want to remove this border border and probably give some Shadows so I will just say order of zero which means I have to remove this border uh yeah I don't want any border what I want is Shadow I'll just say Shadow Dash blue 200 which is Shadow color I will give it rounded of large um I can give it a shadow of 2XL and shadow of 2XL like this okay so this two rounded large here let's remove this and just save shadow of three Excel and probably margin y to be 4. I don't think we need margin y yeah so it looks pretty decent so we have this buttons which contain all of this information I want to change the text as well so instead of small I want a pattern text to be large yeah so it looks decent for me uh I think it's absolutely fine other than that margin top I want it to be 10 only like this okay so yeah the thing looks pretty fine instead of really large what if I make it extra large ah the shadow right uh where is the shadow shadow is all right somewhere okay I'm not seeing the shadow over the side is telling here so instead of 2XL what if I give this Shadow to be like four action let's use how it looks oh it looks bad let's give three axial it still doesn't look good uh two actually is I think perfect yeah I think it is uh good looking really nice now let's face all these questions and answers and so the score and count everything and makes the functionality uh for the quiz app I want couple of things so first thing is I have to make it to use client because obviously I will use our uh State Management store here so first of all let's create couple of States slides I'll just say const I'll give it questions questions like this equals to you state import the use state and here I will just provide the questions which will be just an inquiry array for now second thing is we want answer so the sequence answer I'll just say answer is equals to use state like this third thing is I want to loading so this advanced loading I'll just say it loading and I'll just say use state so so first it will be loading false automatically here by default right so next thing is I want const equals to use quiz which will again be which state and return the data config Dot status config like this and other thing that we get is set score as well so I'll just say const ant score is equals to use quiz and other circuit State and now say state DOT score like this okay so we have everything that we need but there's one change that I need to do to this uh store and that is the score card so if I go to the store here if I go to this add score I actually don't need this here I can directly get the score and just to score value to be uh update Dot config Dot score which will be number plus one like this and it will work automatically now let's face the questions first I'll go to go out here I'll create a huge effect and our face the questions I'll just say I think functions of the circuit questions and obviously I have to call it so that I don't forget calling it like I did before let's call it directly right here first thing and then I can just fetch it I'll just check once I will get results so I'll just say wait and I'll just wait it here I'll just say face and I will just return the Json file like this dot Json now if I go to the API here again for our trivia question then the API kind of look like let's say a normal question is 10 category is this this uh difficult is very multiple such choice I have not said encoding default also gendered API URL yeah if you go to API documentation what is the API URL that I was supposed to get again this this and multiple just true or false or whatever now give me the API URL okay so I get the API URL here I'll just copy this URL I'll paste it here instead of amount which is number of questions I will just put something like dollar sign this and I will just get it from config Dot uh number of questions like this so category obviously I have to put something like this and all those category so I config Dot dot category dot ID like this difficulty which is basically a label so I'll just go out here and I'll just say config Dot level and here type like this okay now see let's see if the results are available for us I'll just log this like this I'll go to my browser select any kind of questions uh start quiz now if I go here then I should get the console log of all the questions okay in very term property class anyway I get all the questions which is awesome let's fix that class problem so this is Class C like this okay so it has to be class name class name nice so it's done now I get the positions as well so now you can see here the question contain format like this it contain category correct answer and it contain incorrect answer but we want to merge this correct and incorrect answer into one and we want to suffer them because we don't want the correct current asset to be always in one place right so you want to make an array which contains all of this and we're going to stop all that array so let's do that so for that I want to go to my quiz page back again and inside here what I want to do is I want to say late soft fold HHA and spilling of it LED yeah so for uh results which is equals to results dot map and I'll write a code that will help me solve all the array [Music] foreign [Music] and after this I can just say e Dot answer equals to Value which I will just spread it inside a new object array like this and I'll return the here I'll just say return the value like this okay so this is supposed to work let's see uh the software if I get it working or not so this is a console.log and this is a fold result s h u f f t let's see okay I get the error obviously I have to it has to be three dots always the same error mirror nice okay I'll just say General easy I'll type multiple uh Consular software results is not defined okay uh so if I just console.log here uh this result or software result which is here I'll just say let's see now we just inspect it console if you go see this array now you can see here that I have this answers and we have this incorrect answer and correct answer demolition which is in second place right so if I go here current answer is which is in second place so now again I go here the correct answer is Cube which is again in second place if I go here [Music] and the correct answer is again in second place I don't know why everything is in second place so correct answer is [Music] Monty Python which is in third place now so it means it is soft link but maybe uh got locky and everything is it was in second place I don't know let's see but this is the code to shuffle you can just look at the code and paste it uh and try it yourself but yeah I'll just close it and get moving forward so now what I want to do is I want to share the questions so I'll just say State questions and the questions will be obviously these sampled results right so this is called results and second thing I want to do is set loading to false and also I want to say or call code question which is fine which means that here I have to set loading to true so this is set loading to view here and after it's switching it on I would say it false great now we have got our questions it's fine uh now we have got our question now I can I think we can show the questions here I can just go out here and I can just say inside here so basically the support question will contain this which will be question Dot uh question probably yeah let's see I'll just say questions and 0 Dot equation like this let's see if I get the value or not so question 0 is going to question 0 and again let's see here what I got so if I close it and I come back here I'll just face these things again and here if I go to console class name name okay so this problem uh but anyway I see I'm not console logging it so let's solve that problem first so class I'm giving two name name here for some reason so let's just see name name oh okay so this is the problem and let's just give it class name normal type class name okay so here also I want to log this sample so this is console.log um support results ends the value see how it's doing uh inspect it and see the category and see the value see the multiple here go to console you can see here we have got all these categories we have objects but where is the list of questions so I have to start quiz now how to get the questions uh for that yeah I got the question here and inside this we have question right so the question will contain question and I'll just show that value here so let's just remove it for now and I'll just say questions and I want to get the first value of the questions and probably I can just say questions dot category let's see if I can get the category first dot category like this and it will go out here and this is undefined uh but for that I should I think this is first check it if this say questions dot length if it exists then I want to show the questions let's see okay I get the category now uh so so the check was necessary so I would rather just go out here and I would rather just say or null like this and just one question mark and I do this two questions here so this is a question like this now get the question right and now I want the answers so answer is obviously likes in the same format I will just go out here uh the space stage Dot answers at so if I go to the console okay so the use effect is running each and every time so I just need to uh stop this Loop like this okay so the answers is inside answers fine now what I can do is obviously you still contain config Dot uh number of questions which dependency and config Dot category dot ID Edge dependency also config that label is dependency also configure type is dependency yeah uh these are great now set questions will actually be an array so I'll just keep it in type of an I'll just give it type any for now for this type of error like this should I stop getting that error here okay so it's fine and everything is good now I just need to map this I'll get the answer like this and I'll just return the button I just don't need other buttons I'll just remove those buttons and so this one here I will also give it a key of answer and obviously I just want to show that answer here answer like this okay so there is some error up here but I know what the error is using Pages here and I'm getting the error here okay they are actually inside here I'll just give it to type any just for now Okay so to be not here I have to go out here yeah I get the value so I'll just select everything I'm going to start new quiz then we have these two value and uh everything is working as we expected right so now if I refresh this we go to the home page go out here medium multiple choice and we get all the value right here so it's pretty good now I want to create couple of things so first of all I should be able to uh do next right so I first for first let's handle the next button first for that I'll just say handle next uh I'll create handle next but I'll just say on click close to handle next like this I'll call it right here so I have to create that first so I'll go down here after use effect I'll just create cost and go next is equals to so what we will do here is select remaining [Music] questions is equals to we spread everything from the original question right and after that I'll just say remaining questions dot uh it goes to the remaining questions dot shift like this so that we remove the first element right here and then I will after this we will set answer set questions with the first question being removed right so I'll say remaining questions like this I'll also do set answer and set the answer to be empty after we hit next right so the next thing I want to do is check the answer now to check the answer I'll go to this answer button and here I will just say on click and I'll just say uh check answer like this okay so I'll just create that variable here all this request take answer so check answer actually will take an answer so inside here I would rather do it like this install the check answer and provide the answer there is like this okay so the check answer will actually get an answer which will be of type string after this what I really want to do is save that if answer is equals to the questions first index and call it answer if it is true then we want to set this code right if you if we the given answer is a true answer then we want to set this code and also what I want to do here is I also want to set an answer of same thing so the correct answer I want to set it so that I can check it and style it nice so we have done it obviously I always give two dot for some reason uh it says fine to press it again say books easy maybe multiple choice okay so I get the question here right now what I want to do is I want to provide some different kind of styling here so what I actually want to do is I want to use that CN from this leave beauties that this component provided so uh the search CDN provided this one in the beginning of the project right so we want to use this to provide Dynamic class name so for that I'll put all the class name here like this and after it what I want to do is how to provide my own kind of class name so what I want to do is I want to give a busy red 600 if the given answer is right it's a given answer let's change this value actually I think it is better for me instead of calling this answer I can just call it a and S right and I'll just call it a and S as well just to give it a different name A and S right not here not in this uh that is a and S but I don't want to do this actually in this file I actually wanted to do this in the answer button so let's revert it back put everything as it was here like this like this okay now go back to our answer button so this is exactly where I wanted to put uh put the dynamic class name rather than other places so I'll just do this C and I will provide this class name which was our previous class name and everything here I want to do couple of things so first thing what I want to do is I want to give background rate of 900 and I'm going to do this in a condition when our A and S is equals to equals to equals to answer which is our state answer right that's why I change the name to ens now you can see here I'm actually getting the color red all right and that is because the answer whenever the answer is similar then we get the background color rate right but I don't want to do that I want to do it for opposite so now the three incorrect position answer will have the background color red also what I want to do is when we actually have the answer I want the text color to be white right so if our state has the answer then I want the color to be white like this okay also whenever the answer is correct answer then obviously I want to make the color to be blue of a button so I'll just say blue and I will just give it like 600. or probably like 700. now if I go out here I check it select the type go out here everything is read in the beginning I'm gonna really don't want that first for that I also want to say give the answer exists or not so if there is an answer and it is the same and also here is if there is an answer and there is this value like this right so we have this default now I click it then obviously this is the wrong answer and this is the right answer but you can see here the hover effect is still there so I also want to remove that over effect so over effect I want to keep this 900 right whenever this is the case I will just select copy it both at the same time instead of doing this like this and I can just say on Hover like this and I got to do this on over like this and I think it will work absolutely fine right so let's remove the seconds let's start again go out here so it's easy go to multiple start quiz now and I can just click on it and I'll get an error let's see what there is about said score is not a function okay so set score where is sales score here it is as I said it's core and we get State City score let's see so oh it is ADD score sorry that's why I was saying an error I'll just say add score like this okay now finally I think it will work again choose one category medium Boolean and choose it right so if it is false answer so which letter is the false answer the true answer was this remaining equation is not iterable uh so let's see so the remaining questions will contain all the questions and we want to shift the value okay I'm not I should not put this like this I think I should just uh shift it and I don't want to say the shift value actually I just wanted to see if it can just put it back like that and that is the best way to do it yeah and that's the better way to do it now I'll just say general knowledge easy uh multiple now I get the value it's the wrong answer next is working now and I got next it's working now but my score did not change for some reason and that's because there is it's not Dynamic it's called obviously we have to make it Dynamic so I just want to remove this and I just want to say config Discord DOT score and now then it will change right study value doesn't change okay fine so the question number also is there so instead of question number one what it will have is it will contain uh config Dot uh config Dot number of questions like this Dot length config DOT number of questions dot length and I'll just say minus I'll just say uh remaining equation of our All Those Questions dot length and work plus one right and if I go out here I hope you won't mind my Nepali in between and then let's start question okay the link doesn't exist as a question mark over here and here as well all right now I can go out here I can go out here go out here and start a quiz now so it is but if I select it next and still now it's not normal right uh let's see why I'm getting this because there is no questions so I think what I can do here is uh if there is question then I just show this like so you can say questions Dot length and if we have that then we want to show this span otherwise we want to show nothing so I'll just put it here and I'll just put a null like this right and also put question mark over here like this fine so now you press it I'll go out here I'll choose medium I'll just type to medium multiple I'll just select it next I'll select it as fine score is also updating you can see there okay so everything is working fine but the problem here is that we are not getting the position number changed so let's see how we can do that properly but I also want to remove this next button Whenever there is no question also for that again coming back to here I'll just say if there is no question start length right equation that length is done there is no position then if there is equation then we want to show the button only when there is a question then we want to show up button and here as well whenever there is a question dot length then we want to show this so for that we're getting the position number of patients oh I have to give the default value because number equation is now I think your default value is 10 right yeah it's not length and that's the problem okay it's just 10 minus whatever yeah I think it will work now yeah so let's get to the medium and multiple it's still nand for some reason uh okay let's just see hard and multiple yeah I'll get one and now it will increase one after another and if I get the answer correct which I don't think I will get okay and again it's got it and I get this code is one fine I think it is looking pretty good yeah so this code is one another is zero for some reason that's obviously because of this instead of this I can just say no like this and I will not get that zero any more okay so I think everything is looks uh pretty perfect now I want couple of things that is our skeleton and our loading and everything so let's do that now uh the first thing that I want to do is I want to switch skeleton when I am loading all those questions because if you can see here then if I just refresh this page all right if I just choose a category select label select type and hit enter then it's just so blank at the beginning first couple of times and also this yes one is in the left I want to make it in Center so the question what is the question I want it to be text Center so I'll just put it text Dash Center maybe it will come back to Center yeah like this uh again I want to create the skeleton so for that I will go to this uh UI and here there is this component called skeleton right and I want this article button to I want to use the riskeleton so I'll just copy this npm and again go to my terminal and install it so the component will be installed in the component slash UI after that I can obviously copy it and directly use it in our project so I will just import it from here and I'll just use it somewhere in between so where I will use it I'll use it right here so to use it I will just say that if there is loading then we want to show the skeleton right so I want to put two skeleton so I'll put it incentive and to put two skeleton here so the first skeleton will have a width of 600 pixel second will also have a width of 600 pixel but the first one will have height of 60 pixel and the second one will have height of 500 pixel also I wanted to give rounded not full I will give rounded small to both of it all and also I'll give it small to it as well and I'll also give it margin y 10 for top and bottom uh here I want to give just clicks and flex column so just say Flex and clicks Dash column like this okay so it looks fine now if I go out here and check it out refresh this uh select some categories like some labels select some type and you can see I get the cool skeleton and then I get the equations so now this is fine now when it comes to score is well I want to show this score only when I have this score so I'll just go out here and I'll just say when there is no loading right and when there actually is questions dot length then I want to show the score like this and it will work perfectly fine now the final thing that I want is that let's solve it so I get score one let's solve all the questions next I'll solve it I'll go solve it I will go and solve it thank you okay so now at this point I actually want to show our final score and I also want to show some kind of animation for that we have this thing called Roti animation uh so for that we will install this animation so I'll just go Lane frame install Bluetooth files and install it right here then I can import this player from the file so I'll just go out here and I'll import this player and I can use any kind of floating animation using that that player so I'll just say like this I want the particular one with the style I will choose this yeah I'll copy this and I will provide it over here so I want to show the player when there is no question dot length right and there is no question and when it is not loading like this right when there is no position and when there is no loading then I want to show a player and at that time I also want to wrap it inside a div like this and the div will contain some classes other class name of flakes it will also be Flex column I'll justify to Center and also align items to Center as well then I will yeah this will do pretty good now I also want to give height and weights of like 400 pixels like this so finally if I go to the project and I play the quiz now you can see score and everything is also working perfectly fine I get the lottery animation right so I want to change this animation I want to uh see some better load animation so I'll just go to this uh think a lot of files okay so uh for the Lottie file I can go out here and I can just say uh I can go to lotifiles.com and then I can just say like uh award like I will Source One good loot animation yeah I think this is great this is the one I'll just copy the path and I'll go to my project and I'll just put it right here right here and after that I also want to give our S1 tag back again so I'll just go to this through one uh like this just copy it and I'll just say here I don't want anything and question number I will just say your score like this and I want to show this code here which will come from config DOT score yeah so I think it will do absolutely fine now I can just go out here and run my project okay I'm getting some kind of bug before because I'm not closing it yeah so let's select a category let's let the label let's select type and here first time I will just make it at least five question only so you can see skeleton you can see the number equation is six others go out here oh okay so yeah just say next next next and you can see your score is two and I think it looks pretty good but the problem was the problem actually is in this uh one particular problem here that is the number of position for some reason I am not getting the number of question correct let's give it one final try and if I can do it then I can do it even if you cannot do it I hope you can do it yourself and at least teach me in comment section how to do it uh so I'll give you to one final try because it just did not worked so I'll just go out here it should simply work with like this like if I get config DOT number of questions and if I just subtract it with the current questions dot length right and if I can just add one it should actually work but it is not working for some reason uh because the question is an empty array for so I think it should work let's give it a final drives and see if it works or not and if it works then it's fine if it doesn't work then maybe you can solve it and let me know I'll just choose multiple I'll let the question of a normal question to be 10 actually I get the value for the first time is one now the score is one because the answer become correct I can choose here the question is three everything's answer is correct C score is two everything is working absolutely perfectly go out here go out here go out here again let's go out here I can go out here and everything looks perfectly my score is four this is so perfect the app look absolutely great one last thing that I want to add is also here so here I'll just add a button I'll add any button uh I'll pick one button from somewhere like this I'll copy this button and I will use the button here but instead of handle change I will just do here window Dot location Dot reload like this and here I will pass uh restart quiz or take another quiz like I'll just take another quick take another tweets like this of like I don't need this 33 percent I want to give it a full width then I think everything will just work fine now again I'll go back here and then I will let it refresh I'll go to the project I'll go like television select question to medium select type to multiple of the start new Q new quiz right and I'll get this skeleton it will get the data I'll just start score is one score is two is the same because we have not got right now it's going to increase to three from two and just next I'll just click next and you can see your score is three it looks absolutely great I don't need this question number at this point so I'll just remove that so again uh where is that question number here so obviously this has one will only be there one way the questions have length right so this equations dot length if it exists then so that otherwise just so null basically I'll just put it right here okay so now I can go out here one final test I'll go to the main page I'll just test it on only five questions uh this time I want to test on video games level to be easy and type to be Boolean for three win first questions true next false false true false you can see it shows your score true and I got two score and I can take another quiz like this so I think we are all Champions here and we have completed this whole project it was a tiring tag to do and obviously we make some mistakes and we improve it and we just figure things out I hope I hope you like it I hope you learned something new and I hope it was fun for you to learn about next 13 and all School future and if you did then please hit like subscribe and whatever you want to do cheers upon goodbye [Music]

Channel: Code with Vivek

Views: 7,682

Keywords: nextjs, react, js, quiz app, next 13, next app directory, what is parallel routing in nextjs, how to build quiz game in nextjs, how to create next app in nextjs, What is server actions in nextjs?, Nextjs Tutorials, web, we projects, Next js guide, How to create a project in nextjs, Create a quiz gamr, 100days of coding, Nextjs for begineers, Nextjs Basiccs, #nextjs, serverless, quizapp, nextjs in hindi, react in hindi, coding in hindi, nextjs quiz, quiz in nextjs in hindi

Id: T2ebn7TN9mw

Length: 112min 58sec (6778 seconds)

Published: Mon May 08 2023