Build and Deploy a LeetCode Clone with React, Next JS, TypeScript, Tailwind CSS, Firebase

Key Takeaways

in this course Barack will teach you how to build a detailed full stack lead code clone the app uses react with next.js on top it uses typescript to make the code easy to debug by adding types and interfaces and it uses Tailwind CSS for styling lastly the app uses Firebase for authentication and for the database then at the end you'll learn how to deploy it to versel Barack starts with a demo of what you'll be building so in our home page we have a list of problems where we can see so far we have 10 problems but I will show you how you can add more of these and for each problem we have the title difficulty category solution as well as the status which will come back later and when we click one of the solutions it'll take us to the related individual solution and it'll show this YouTube video but so far it navigates us to my own YouTube channel because this is how I set it up and I will show you how you can integrate your YouTube channel into this application so we can watch it from here or we can click to this link it'll take us to the YouTube so we can close that and so we so we can visit the problem pages so let's go to this to some problem page which will take us to this URL and we have our description site with examples constraints as well as our code editor and test cases so we can switch between these test cases it'll update the UI and we can write our code here it have JavaScript support so far and you can change the font size by getting this settings and we can toggle between the full screen exit full screen we can like problems but so far we cannot because we need to log in which we'll do in a minute and we can submit problem and again we need to log in to submit that and now let's try to log in which I have already count so I'm going to try to log in it showed it's logged Us in and now we're in this page so since I already saw this problem it'll fetch this code solution from the local storage and now since I've solved it I have this status check and now let's try to like this it'll send a fashion request to our database which is going to be a Firebase firestore and then it'll update the UI so now let's try to submit our code we will get this beautiful celebration text as well as our toast so this is what we call toast this alert and now let's try to make this uh called uh it doesn't work so let's say I plus one and now let's try to submit that it'll say one or more test cases failed so that's cool we're also handling the errors we have our timer so we can open that or we can reset that um so we can see our email when we hover over our profile image we can log out and yeah this is going to be pretty much it also we can go to the next problem we even have this uh examples with images we can go to next one next one next and this should be the end of it and like in the problem page we see that or like in the home page we see that we have 10 problems but here after the fifth one watch what's gonna happen when I click this it'll take us to the first one and it is because I only added test cases for all these this all these five problem but I will show you how you can add for these if you wanted to and I didn't do this I didn't do this for my own site project because it just requires writing a bit more code and I basically didn't and in the status that I said well I'm gonna come back later so if you are logged in so if you are solve that problem it'll fetch that in our database and it'll put that a check mark into this status calling and for these other problems when we click one of them it'll take us to the Lee code original problem uh link and yeah I think this is the old application and lastly we can log out and we have instead of a premium button we have this support button if you like this project and if you want to support my work just click this link and it'll show you how you can contribute or how we can support and otherwise you don't need to worry because I'm just putting this content for free so with this machine stop out of the way now we can go to this authentication model or the page where we can create account we can log in or we can reset our password by providing an email so let's say I fill this form and I click this it'll send us a reset email and when we open that in our email we will be able to reset our password so also we have this kind of cool image and I think this is going to be all and now let's get into the coding because there is a lot to cover and there is a lot to learn now to get started I created an empty folder called liquid YouTube you can call it yours however you want and you will create a terminal and we'll go to Google to get the next JS typescript script to start our project we will type next JS typescript we will go to the first one we'll take this script copy and paste it into our terminal so let's paste it and enter so it'll create us an xjs app with typescript configurations so what is our project named we can just click that to make it into our root folder we'll click enter yeah we want es link you want Source directory so we don't want experimental app directory so we'll click now so we can click tab for aliases and we can click enter so it'll create us our app and once it is done I'll be right back okay now our app is initialized and now let's try to add Tailwind CSS into our app so we'll go to Google and say next.js Tailwind CSS and we'll go to Tailwind CSS website will already create our project so we will install till in CSS we copy this um to yes code paste it yes we want to paste that so it'll run that for us and after that we will need to configure our template paths I guess yeah I will also copy this file and it will paste it into Tailwind config.js and now back to our vs code editor and now we need to click enter for this as well okay the configuration is done we'll go to Tailwind config.js file and we'll paste the latest thing that we copied so I pasted my colors and please feel free to get them from our repo and now the last thing that we need for Tailwind CSS is to get this base components and utilities and copy them paste it into our global.css which is going to be in Styles folder so we can delete all of them and we can paste it but we can save this one and now let's try to npm run Dev we will get in localhost 3000 so localhost 3000 what do we get so we got our boilerplate home page with next.js and it doesn't have any Styles because we just deleted them now we can go to the pages folder into the index.js or TSX where we can delete all of the content here so within the main and we can write our own main tag with maybe with heading 1 saying hello world and we can delete fonts families Styles images and we can even delete this one but for now let's just put it right there and save it go to the browser here we see it is updated and for now the first thing that I want to build is the authentication page where we are going to have our Nail Bar in this um this image with the our models okay we'll have our signing model register model and also the forgot password model and first we are going to build the design the UI and then we're gonna add to the functionalities so then first let's get started with this navbar and this image so the first thing that we want to do is to delete this head tag and we want to put it in another file which is going to be underscore app.tsx this is the where our application starts so this line makes it possible for our application to run so we're going to delete this line for a second and we'll create a react fragment and we will paste the line that we just deleted and then we're going to add our own head tag where I'm going to walk you through what i what we are doing here so we are adding our title which is lead clone and we are adding our file icon as well as our viewport this is just as some requirements that we need to give for the browser and then we have our description which tells what is our application is all about and then we have this images inside the public folder that I have added and you need to take them from you need to grab them from our GitHub repo so we have our Avatar we have our fav icon hero image logo and another logo for authentication page so with that being said now let's save this file and go to our browser we see that we've got our file icon as well as our title and now let's go to build the nav bar the first thing that we want to do is to go to inside the source folder and create another folder called components and all of we are going to put all of our components into this folder and our first component is going to be navbar and we're going to create navar.tsx file and then we're going to say TFC to get this boilerplate which if you don't have you need to come to this extensions Tab and you need to install react like the Crypt uh script if I can type I think it was Snippets um this one so you need to install this to get this Snippets and we use the tfcd so we can change this text with maybe navbar and save it and then this is going to be inside our authentication page we can come to this Pages folder create auth page with index.tsx again using our boilerplate changing all of these indexes with uh both page and then we can again change this text with authentication page and now if we go to URL slash oath so it is our home page and we go to authentication page we are going to get our authentication page so it is it works in a way that when in your next GS applications whenever go to whenever you go to another page your next.js applications is gonna look up into this Pages folder and if there is any related folder or file name with that URL it'll try to match that and if there isn't it'll return 404. now let's try to go to login page which we don't have it'll give us this 404 because it'll take a look at this Pages folder it cannot see any folder called login and it'll return 404. okay with all that being said now let's try to add our markup or like class names with this authentication page so the first thing that I want to do is to give this background as well as giving this container where everything is in the middle so back to the vs code we are gonna first make this give us some class name and it's going to be PG gradient to bottom and from Gray 600 to it is going to be like 2 Dash black and then it'll also be covering the whole screen so we're going to say height screen and the position is going to be a relative uh in case you use any absolute and then we're gonna have another trial tip it is going to be maximum with 7x large and margin X is going to be Auto to Center everything and then we're gonna put our nav bar um we need to import that so uh we import it now let's save this one and take a look at it um into it should be an auth page yeah so I change this background from this it you know see it's kind of getting from uh gray to Black where we have this blue-ish that going to Black I think this looks better and now let's do the navbar so back to the vs code the navbar component so we're gonna have to delete this one and maybe put it like this give some class names it should be Flex uh item Center and justify between I guess yep and then from small screens and above it should have heading x 12 but otherwise in below small screen is going to be padding X2 and then from medium and above it should be heading x 24 and then yeah I think this is enough for this diff and then we need to have some link which is coming from next link we're going to import that and it'll gonna have some href that will navigate us to our home page and for the class name we're gonna have Flex items banner and justify enter as well and then height should be 20. and inside that link we're gonna have our image where it's class name gonna be hide full and it'll be your logo.png which you have inside this public folder that it should be that logo in our nav bar and after this we're gonna have another div for our button it's gonna be Flex with items Dash Center and inside we're going to have our button that says find should be signed in and for our class name we're gonna have um BG brand orange and this is where our Tailwind config.js comes into play we can see our so we can see a lot of colors and the brand orange is here and whenever you want to use one of them we can prefix them with this BG or text that is going to be changing either their color or their background so for now for this button we want them to we want it to have this brand orange color okay so moving on we're gonna have text white color and then heading X gonna be two and petting y gonna be one and small screens and above this button should have padding x S4 and we should give it around it empty for making it a border radius to give it to give it a border radius and it'll have text small and font medium okay now that looks great and then we'll have some other classes for Harvard state and it'll be on Hover text should be brand orange and PG and hover BG should be white like we are reversing it and then on Hover we are also gonna have a border two and on Hover again we're gonna have its border to be brand orange which if you print orange and yeah let's just for now save it and now let's take a look at in the browser yeah this is our button when we hover it do you see this flickring effect that it it gets its border and it just gets a little bit bigger and it is the reason is because at first it doesn't have that order but when we hover that we'll get border and it just makes it grow and in order to fix this we'll add this border to in normal case okay without hovering it should also have this but it its color should be um border transparent so that we don't see that now if you just save this now we hover this we don't see that flickering effect right and now let's just add a bit more duration and transition into this we will say transition duration uh 300 milliseconds and ease in out so we save this one we go to browser now it is a bit smoother okay now if you just zoom out you will see that it is identical to our original one and other than this background now let's add our image and then we're gonna create these models so back to the vs code and we save this one I think we should go to the arrow authentication page yeah now here we're gonna add some more divs with some classes after the nav bar so below it we're gonna have what actual images let me just create this div and for the class name um class name it should have Lex items banner and then it should justify Center and now for the height it should have we will use the calculate function which is going to take a caulk 100 VH 102 height minus 5 Ram which we uh give it for navbar okay and then we're gonna use this uh pointers events none and select none for but we're not gonna use We're not gonna let users to select our images and we're gonna say image that is gonna be inside the public folder in hero.png and then we're gonna make this alt to like our hero image now if you see this one save this one we go to our browser that we see our image and now as you can see I cannot drag and drop this image because of this uh select non endpoint or events none when I have this over I cannot select this image yeah okay so this is for our authentication page now let's go to and build this uh I think it should be the sign-in model so we see there is a lot of models in this page where we have three models and there is something common in all of these models which is this background overlay and this close button and this uh orange card so for that reason we're gonna create some layout and or with our models so it will create our models folder and inside we're going to create our sign up model at SX we're going to create our login.tsx we're going to create our reset password um.sex and then this is going to be our oauth model.sx this is going to be our layout okay so far we can say tfcd and save this one uh now as I said in sign in model or in login model we're gonna have this title and we're going to have these two inputs this button and all these chats and in our register we're gonna have like different inputs and different buttons but the common thing is going to be this close button discard and this overlay that's why we create um this old model overlay so that we don't write the same code over and over again so for this auth model I will just copy and paste some HTML and CSS and I will walk you through this and please don't get angry with me just because I'm copying and pasting some code so this is like it's going to be pretty basic HTML and CSS that you don't need to worry about and so let me just copy and paste that okay now I copied it and I'm gonna paste it just like this where we have our overlay with some uh div with some background colors with close buttons and actual images populate it in our screen which should be our model that is coming from components folder and if we go to our browser now to react icons but you will get this um so this is our component that we just added with some overlay background and we have this part it doesn't have any content that's why it looks very small but we're gonna add it soon and it has this close button with some border uh radiuses etc etc so this is the basic HTML for that and with some CSS classes so since this x looks pretty ugly and we're going to be using a lot of icons we'll come to our terminal and we'll install um react icons so we're going to say npm install react icons but while it downloads that you can go to Google and write react icons we'll get to this GitHub bio link where we can now type it down any icons that we want to get so for now I want to get this I O close icon I will copy that and come to my vs code I will paste it just like this and it doesn't auto complete for me for some reasons then I so I will come here and import that with GitHub co-pilot so I'll save that and maybe we should give it some classes to make it a bit bigger so height five with five now save this I'll take a look at our browser yep it looks almost identical with our demo so I think this is all for our layout now we need to create our login and click reset password and sign up all that components and we're going to be showing them inside here okay so let's say for now let's show the login in which we need to import that so we're going to use tfcd we will say this is our login save that and come to here we're going to import it and save it now we see that we got this login and now let's make it look identical with this one so in our login component we are going to need to have some form right because it's going to have our inputs and at the end we're gonna try to submit that so for that let's just add some classes so it'll be space um y 6 heading X should be six heading bottom should be four and then we're gonna need some uh maybe heading three which is gonna say like sign in to lead clone and then it'll be some it'll have some class names it'll be text x-large font medium right what is going to be medium and takes is gonna be white and then we're gonna have some of our divs which is gonna be container for our label and our um for inputs but for this one is going to be email html4 and we're going to give some class names or label it is going to be text small font is going to be medium yep oops it's going to be a phone to medium it's going to be display block and margin bottom is going to be two and then we're gonna have text uh gray 300 and then in our label it's going to say your email and then after this label we're gonna have our input where it's going to be type of email and then name of it let's put it just like email as well and ID it should be email because with this html4 is going to be referring to this ID and then obviously it's going to have a lot of classes and let's start with my border so border is going to be to outline none and on smaller screens and above it's going to be text mold and rounded rounded LV and then we're gonna have on Focus state it should be bring blue um 500 and then also on Focus State we're gonna have border blue 500 and maybe that should be a Blog with full with padding 2.5 and let's see It'll have BJ gray 600 it'll have border gray 600 as well or maybe 500 and then we're gonna add some classes for placeholder it's going to be gray 400 and text maybe should be white now let's just try to save this one and before that let's just add also the placeholder for that so placeholder maybe it should be something like uh John or maybe like name at company.com so if we save this one and now let's go to the browser you'll see this like almost identical with this one right if you delete this it looks pretty similar and then we're gonna copy and paste this div which is gonna be almost the same thing with changing this content so your password write your password and this should be well let's just change all of them to password answered and for this maybe we could something like like this and I think that should be it for this one yeah it also looks pretty similar and then we're gonna have our button where it should be a button and then it'll have type of submit and then it'll have some classes again so it should be with full and text White and in Focus State it'll have Focus um bring blue of 300 and then it'll have font medium also around it should be LG and then we're gonna go to down maybe like this to give our a bit space and text small heading X gonna be five heading Y is going to be 2.5 and then text Center um and also we're gonna have background uh brand orange or good color and then on Hover we're gonna say background uh brand orange but with s okay and then in our button we're gonna say maybe like login and after that we're gonna have another button that tells to like did you forgot your password okay so we're gonna have another button and let me just scroll down to make it a bit cleaner and for class names it's going to be Flex with full and justify and and then inside this we're gonna have maybe an a tag okay so this is not really semantic but it'll gonna do that for us so for each rep that could be going anywhere not going anywhere it's going to be class name with X small and with block and X I'm sorry text brand orange and then on Harvard State we don't actually we actually want to have this underline and also it should be with full and also text should be on the right so with that we're gonna add our text that says forgot password last but not least we need to create another div which is gonna have again a lot of classes that says not register it why with a question mark and we're gonna give some class names if text small and font medium and like text Gray 500 and then inside this you are going to create an attack again with an href and it's gonna have some class names that says text blue to 700 and on Hover we want to underline that and inside that you will say create account so we kind of waste a lot of time by writing this HTML and CSS instead of me if I just copy and paste all of these so I think from here on out I'll be just copying and pasting a lot of htmls and I will of course explain them walk you through them but I don't think that I'm gonna be writing that much again because it just takes a lot of time and it is pretty basic thing and I'm sure that most of you guys know this so with that being said now let's just save this one go to our browser Yep this is the okay so this is we see here in here so maybe this one should be text Gray 300. and now yeah almost the same and we can give some uh we can do this by giving some space here and yeah I think this is all for our login page now we're gonna copy all this from this form okay we copy this and then we're gonna go to the sign up and then we are going to again do tfcd and then from here we're gonna paste that thing that we just copied and here let's save this one um so inside our oauth model instead of showing login now we're going to show sign up and we're going to be changing this dynamically and in our users uh input okay but for now we're gonna doing this uh hard-coded so let's go to the create account page where we say register to lead clone we have display name the email password and Let's see we have register button we delete the forgot button so actually let's just go line by line so first we need to change this to register so what what was it register only clone so register to lead clone and then instead of this only this email we're gonna copy this and duplicate it um I that wrong so yeah so that should be copy this and duplicate it where we're gonna say your or maybe only display name and we can do this uh we can change this by liking collecting all of them to display name and for placeholder you can say like Beyond so let's save this one to see how that look yeah it already changed it's display name and instead of like doing your email and your password I just want to change this to only email and only password and then what I would like to do is call this as register and delete this forgot password button so we'll save this one come to here yeah not registered instead of seeing this could say like already have an account with question mark If so in images log in save this one go to the localhost yeah this is really what I want to have almost same maybe with a little bit changes but it's okay for me and now let's create a reset password component which I think I'm gonna be copying and pasting some code which is going to be pretty basic HTML and then I'm gonna explain it to you so I copied that now I'm gonna paste it just like this and I'm Gonna Save this one where we have H3 and with paragraph with the same input with label and input so and with a button so let's go to auth model and to show this and as I said this is so far we are showing this um part coded but we're going to be doing this dynamically so we save this one now if we go to the Local Host we're gonna see this component and so really basic HTML so it is this one really basic HTML and CSS with some classes uh so yeah this is I think for the UI and so it's time for us to make the functionalities where we're gonna create the users they can log in they can uh you're gonna send them forgot password reset emails but before doing that let's actually build this functionality where our users can dynamically navigate between these models in sign in register and forgot password model and they'll able to close it and reopen it from this button and for this we're going to be using something called Global State and the reason that we need to use that is like we have in our application we have different parts that are using the same state so we have a nav bar here in authentication page that is different from this nav bar that is in the home page and also it is in the problem page there is another navbar and all of them are using the same state and so when we click the sign in button it also opens this model and is updating our state so for this case this is the best way so the best thing that we can use is Global state and for this one we're going to be using something called recoil so go to Google Play pre-coil JS and you will get to this page where it says Estate Management library for react that is provided by Google so you can get started reading this documentation and installation I will show you how you can use it in our case for this model so in this one and then so if you want to learn more about this you can always check back to this documentation so we're going to copy this command here it says npm install recoil and then we're going to go back to our terminal and to open up a new terminal then we're going to say npm install recoil and it's gonna download that so we in Recoil we have something called atoms and each atom is a different state that we're going to be using in our application so let's create our atoms folder inside the source and our first item is going to be oath model atom.ts so let's actually take this one and then you'll just see what I mean by an atom so we're going to say import Atom from recoil and then we're going to have our type that is going to be both model State just like this and is open and have a field called is open and it'll be Boolean and then it's going to have type as login or register or it's going to be a forgot password and then we're going to create our initial state so initial of model State and then it's going to be type of auth model State and initially it's going to be false and type is going to be login and then we're gonna need to export this so we're going to say export const of so actually just like this old model 8 and then we're gonna call this atom that we imported and then we're going to close our object with parentheses and now we need to give it a key or recoil to differentiate this from this other atoms that we're going to be adding and then our default value is going to be our initial value this is all that we need for this file and let's just save this one and then we need to go to our app.tsx to wrap our components or or our application to be able to use the recoil route okay so we're gonna wrap it just like this and we're going to import recoil root from recoil now it allows us to use all of the components hooks functions that is coming from recoil and then we're going to go to our authentication page where we're going to say only show this Olive model if our oauth model is the state is open so we can say cons of model it'll going to be equal to use recoil value so we are only taking this um so to say the value from our state from our atom that we just initialized we're going to import that and then we need to import as well use recoil value and then now this oauth model has this is open and type Fields so we're going to say oauth model that if it is open only then show this old model component otherwise you shouldn't show it and then we're going to save this one also we need to save our application uh or like underscore app.sx you can close this and now so in our office model we're we're gonna see let's see we have our reset password so for now let's go with the authentication page go like from here we don't see our reset password even though we are populating it right because inside our auth page is open is false so let's go to our nav bar where when we click this button we're gonna do some operations so we're going to say on click on click to this sign in button we're gonna have handle click function and let's initialize that on Scandal click it's going to be an arrow function that is doing nothing for now and then we need to import another Hook from recoil so it's going to be use set recoil State yeah it doesn't Auto Import that for some reason so let me just come to here and say import use set recall State and then we're gonna pass our always model State and it's going to be equal to our variable we called const set of model State and in our handle click we're gonna mutate this state so we're going to take the previous values and only we're updating this is Open Fields so we're going to save this one and now when we click this this button we're gonna get see this oauth model component because when we click that it's open becoming to true and then it shows this oauth model and inside of model we are gonna do some another checks so we are going to be we're gonna say like first let's import our hooks so it's going to be used recoil value and we're gonna paste uh so we're gonna pass our auth model state and then we're gonna import um user recoil value and then we're gonna assign it to a variable called both model and now here down below we're gonna say fill oauth model um components depending on the user what you choose okay we're going to say oauth model uh DOT type if it is equal to login then we're gonna show the login component that we import already okay we're gonna show that else if oauth model is equal to sign up we're going to show so it wasn't sign up actually it should be register and if it is registered show sign up in the else case it is going to be forgot password then so please show this one so when we give this one and come to here so our initial state was log in that's why it shows us this login if we refresh this now our initial state is our oauth model is closed and type is login so when we click this now it shows us login because it's open now is true now let's change the type when we click this buttons so we're going to come to our vs code it should be in forgot password which is inside this login so here in our form where we have forgot password so in this button we're gonna also have on click that is to handle click and then we're going to initialize our function up here on this handle click that should be like this for now and then we're gonna import this cons of model or maybe that should be let's see it should be actually set off model um set of model State we're going to import these um it still doesn't suggest anything for us that should be import I use recall State and then inside the handle click we're gonna put this and make type to register so when we actually it should be um let's see it should be a free and forgot password that should be so maybe we should and pass some type into that so we're gonna say handle Click by sending a type that is going to be forgot password because we're going to be doing the same thing in this other uh button click here if you need to create an account you're gonna say on click we are going to send this by saying um so that should be take us to our register page so in here we need to take a type that is going to be string and then we're going to take this type and edit just like this so what what it says um so maybe we should just copy this and instead of string we should say it should be something like this and now it's going to be okay with us and then now if we save this one it will come to here and we click this create account it'll show us this register and inside the register which is going to be in the sign up model we're going to also do the same thing so we just copy this and inside the here once they click this we're going to say on click we're gonna send our handle click function which is we need to add into here it is gonna we're gonna import these and import use of use uh set or equal State and now it should be good to go but actually we can make this one something like this because we're not going to be using different parameters so we're going to say that should be login and now if you save this one and come to browser now we click the login we see the sign in or the login model and in the forgot password we get this one now we need to be able to close this by clicking this button so this is where we want to go to our alt model and here we have this close button and here we're going to say on click and we're gonna maybe again we should say handle click but now instead of doing this I want to create a custom hook for this because in all of our models we want to uh by clicking this we want to close it and by pressing escape keyword we also want to close this model so for this we're going to use something called use um custom hooks where we're going to initialize it down below here and then we're gonna call it uh from this line it'll make it some it'll create some abstractions it is going to be fully perfect okay so let's go to down below and write our custom hook so it's going to be a function that is we call use maybe on use close model that could be and inside that we are going to have again using this recoil State okay we're going to say set const set of model use recoil not value but that should be used um set recoil value I'm sorry that should be State and then we're going to pass this import this one I don't know it why it doesn't give us any suggestions but that should be used that recoil state and then we are gonna do radar function variable const uh close model and it's going to be an arrow function that we're going to call in our use effect we will say set of model is going to be to uh is open gonna be false and maybe we should make the type to log in as the default and then we're going to have our use effect where it's going to be initialized on on Mount so it's not going to have any dependencies so we're gonna say window dot add event listener on key down and for this we can actually only call our close model or we're going to create another function called handle Escape so just like this and then we're gonna say the cleanup function we're going to have and it is going to be removing our event listener that is going to be reassigned to this handle Escape function and this key down event and then we're gonna have our function that is handle Escape is gonna be uh if either key is escape we're calling our closed model function and at the end we are going to return this closed model variable that we have so up here when we do um const close model that we are calling from this hook that we created now we have this function so now if we just make it like this close model and also on our overlay we also want to close our model so on click that should call our close model now save this one and I will be through it again so when we open our model when we click here it is holding this close model function that we are taking from this custom book that is in the at the very bottom in our file so what it does when you click that it'll gonna call this close model function where it says is open equal to false and type now is equal to login and we're making the type to login because let's say we go to forgot password and now if we close this and we open this it doesn't stay in forgot password where it goes to login so let's just delete this line to show you what I mean and save this if we come here and let's open it we go to forgot password we close it now if we open this that should be in the forgot password because we didn't we didn't uh make the type to initial value okay so that's why we are adding this and when user click the Escape keywords so now I'm gonna click set now I press Escape it closed you know so this is why we're adding this and on cleanup when this component we remove that from screen it'll be removing this email to the center so this is the function that we need I think this is we had we have added all of the functionalities for this you can close it by this clicking the overlay yeah that should be good to go okay now it's time for us to create our Firebase app and initialize our project and then we're gonna add this um register and login and forgot password functionalities so head over to thefirebase.google.com and if you don't have an account create one for free and then click this go to console button it'll take us to our console where we need to create a project so I will call mine as Lee clone or maybe Lee code uh YouTube and then I'll continue I will disable Google analytics and I'll create the project so if you don't know what Firebase is it is a backend it's a service that allows us to build full stack applications easily and quickly without us needing to create our own server and maintain maintaining this um security rules etc etc it just makes it fully secure and easy for us to build and create our projects so we're going to say continue and okay so we are in our console where we need to initialize a web application because we have a web application so we're gonna say again maybe League clone liquid YouTube and register our app so it tells us to install Firebase so it will come to vs code and you'll say npm install Firebase it's gonna install that for us and then we need to take this um so it's a configuration file where we're going to copy this and then we will come to here and we're going to collapse everything in the source folder we're going to create a folder called Firebase and then here we can create a file called Firebase dot yes and then we can paste our configuration that we just copied so we can delete this uh command line uh what it really happening is it initialize an application for us and then we're gonna use some services that is going to be authentication Service so we can call it as almost oauth it's gonna get our oath with our application so that should be get out so we're going to import that so that should be import but why doesn't give me suggestions I don't see that who's gonna get those and then we are also gonna get our Firebase which we are going to be using for our database to store um problem data so we're going to say get firestore and it still doesn't suggest me so that should be import um get firestore from Firebase firestore and then for our server side rendering since we are using xjs we can do some optimizations so we can say get app and then we're gonna say get apps so here what we're gonna be doing is instead of initializing our app immediately we're gonna say if there isn't any app so we're going to say get apps dot length if there isn't any then please just initialize an application for us but if you already have an app then just get that app for us so after release we're gonna export an object with our authentication firestore and with our application so this is all we need for this uh file and then maybe we should also create our file called that EMV dot local where we're going to put our variables into this so I can split my page like this and then I will say next public with this uh Firebase Firebase API key and I'll take them these strings and I will just paste it just like this and I'll be doing this for all of these and once I do this I'll be right back okay so I copy and paste all of them now we're gonna also do for each of them like process um dot EMV that it should be next public Firebase API key and I will again do this for all of them and I'll be right back so I have completed that and now please use your own variables with this case so you need to use your own configuration file because while you watch this tutorial I would be already deleting this project so it is not going to work if you copy and paste my variables so with all that being said now I think we can go to our sign up component and we can build the registration phase so now let's close everything that is open and let's collapse everything we go to our project continue to console and now we're gonna initialize or install a package that is react Firebase hooks that is a great npm package that we're going to be using for our authentication with Firebase and and later we're going to be using this maybe for our database so we're gonna come here and paste it while it downloads we're gonna go to our sign up component where it is inside these models so we're going to open that and we need some states so for that we're going to initialize something like const inputs it should be inside an array and set inputs um input yes it is going to be a use date where we have email display name and password so we are going to be changing them depending on what user typed in in each field so for each of these inputs we can select them by Ctrl D and then we're gonna add an unclick function or on change actually on change we're going to call handle change and we're gonna pass in the name of them maybe we'll just say handle change input and we're gonna create our function that is going to be const handle change input and then and then inside here we're gonna set our input so it'll be taking the previous values and it'll only be changing them depending on on their name so let's say our users are typing only inside this email input it will call this function it'll take a look at its name which is email then it'll only be updating this state it'll not gonna mutate this display name or password because we are destructuring them and only changing the one that we are changing so on this form we can call an on submit Handler that is going to say handle register and here let's say const handle register that is going to be taking an event which is react form event and we're going to say Event Event default for preventing clear refresh the page and then we can console.log or inputs so let's save this one and go to the browser if we open our console and maybe we should also console.log our inputs right here and whenever we change some field so as we can see in and when we initialize them it is empty strings for all of them and maybe say like hey at gmail.com you can see we are only updating our email we are not changing display name or password because in our code we are taking the name of this input which is email and for this one we can put my name and then it'll only be updated in my name it is not updating password and it is it applies for this one as well so you could make it test one two this is what we got now we're going to be using this react Firebase hooks for our authentication we're gonna click this repository where it takes us to GitHub account and then we will come back to this authentication hooks we'll click this where we have all of these methods and it is pretty self-explanatory like you sign in with GitHub with Google Microsoft and use update profile update password email send email verification and a lot of stuff so first we are going to be using this create user with email and password so click that you'll get to this page or to this component you're gonna copy this come back to vs code and delete this lines and then we're gonna paste it just like this and then we need to import this which auth is coming from Firebase and this one is coming from react Firebase hooks which we need to take it from here and then paste it just like this and then we're gonna save it we'll go to our Firebase console to initialize and um sorry to say authentication so you'll come to this authentication Service we need to get started with this and we're going to be using native providers which is email and password we're going to enable this to save this one it'll initialize this um so sign in method and then so far we have not in users so let's come to our application and let's close all these so now we are gonna try to add this registration functionality when we click this register button so we will come to this handle register function and I made this function async because we're going to be doing some operations that is that is going to take time so inside here we're going to take take a look at the documentation of to see how did they use it so they call this line with getting some states we already did that and now on click they call this function with email and password so let's just do the same thing and copy this line and then we're going to come to here and we will create our try catch block the catch if there is any errors so we're going to say alert error.message and the type of error could be any so here we're going to say await that function with our inputs.email and password so this will gonna return us our new user okay if it creates it it's gonna be our user if not it'll be empty so if there is not new user we're gonna return from this function and we're not gonna do the rest of this uh so we're not going to call the rest of this function okay but if we have a user then what we're going to be doing is that we're going to call this router.push and we're gonna take our users to our home page and for that we need to import this router from uh next next router so we're going to see const Rudder that is coming from use router which is coming from next router that we can see here and I think this is all for this function and now save this one come to here and try to do this so we have email of john.gmail.com and display name is gonna be John Doe and password could be um maybe John Doe and then we're going to register and okay so it take a bit time maybe one second and then it navigates us the home page so I now refresh this to see if we got our user and great so we got our johndo gmail.com it's our first user so this is how easy it is to add authentication to your application with uh like using Firebase okay now we need to handle some errors so let's say now we come to here and we try to again sign up with same account the johndo gmail.com so let's say name is same and we have some password now as we can see it didn't create it and it gave us some error if we click this oops this is not what we want so let's try to do this again so we got some 400 errors and when we click this we're gonna see that we got some email exist uh error so this email is already exist so for this that's why we got um this error State okay so we can use inside the use effect where so we're going to initialize it like this by passing our error so whenever error changes this use effect will run so we're gonna say if there is any error then can you just please alert this error with its message so save this one I'll come to here if you try to register with the same email and password or with the same email that just should be enough when we try to register it'll give us this email already in use and we can click click OK and so we also should check if all of these fields are full so you can come to here and we're gonna say if now if there isn't inputs or inputs email is empty or password is empty or display name is empty we're gonna return this alert from this function and we're gonna say please fill all the fields and we're not gonna run this rest of it okay so you can save this one and now let's try to complete our display name try to register it'll say please fill all the fields and now let's just use this lighting State also where we got here so when we try to when it creates our user this loading will be true and while it's true let's instead of showing this register we're gonna say if it is loading let me just show registering okay okay and otherwise it will show register so now watch Me While I click this so let's take this and now I click this it'll be loading for a second and and then it will give us an error if you click this now it should be in the normal State because now loading is false and with this I think we are good with we are done with our registering phase now we can go to sign in and for this we're going to come back to again this documentation scroll to top and let's see if we have any methods for that now it says sign in with email and password we're gonna click this and again we will take this line copy this go to our vs code that should be inside the login we're gonna paste it just like this and import all of these dependencies so to say and then you need to this so let's see how to use it so again they pass your email and password so for this we again need some states that is going to be constant inputs where it should be an array we're gonna decide to structure that and inside view State we're going to have email and password and then we already have our uh names inside our inputs so we're going to select all of our inputs which is two and then on change we are going to call handle input change so we're going to initialize our function that's going to be const and the input change and then here we're going to say set inputs and only change the one that we we are typing in and then inside this form we're going to say on submit and it should be a handle login maybe and then we're gonna again create that function that should be const and the login that will be async and then we're gonna say uh prevent default and if some of our inputs is empty we're going to return from this function by providing an alert and otherwise we're going to use try catch if there is any error the type of this also going to be any if there is any error we're going to alert that by error that message but otherwise if we don't have any problem so we're gonna call this signing with email and password so and it'll give us a user if there isn't any user we're going to return from this and otherwise we are gonna so maybe we could do this to like new user new user if we have our user then we're going to say router.push that should be a lowercase that push the home page and then we're gonna import our router from use router okay with that now we need to save this one and after this we're gonna say console.log user if you already have okay or you're gonna show us if you have user or not so let's go to our application and now let's try to cons log in with this John Doe and password should be John Doe and now I'm going to try to log in and yeah it takes us to home page and now we have our user that we can see from our console where you have this user credential inside this VCR email and when do we create this one Etc like we have a lot of metadata and also we could use this loading state where we're gonna show it uh or instead of login we're gonna say if it is loading say login if it is lighting we're going to say lighting otherwise you're going to say log in and I think with that we're gonna be good to go and maybe to use the error handling you're gonna do inside the user effect we're gonna have our function and if you have any error we're gonna say um alert the error we're gonna save this one now let's try to create some errors both off page and try to log in with maybe a wrong password or one two three now it'll gonna tell us like uh the wrong password okay so this is how we handle our errors for now and now we have another problem which is that we are already signed in but we can still visit this authentication page and now we can sign in again and again which is not optimal and to fix that we're going to go to our authentication page and we're going to extract our user plotting and error state from use of state that is coming from our Firebase hooks then we're gonna put our oauth object into that which is coming from Firebase folder and inside the Firebase file so here we're going to check inside the user effect that we're gonna say if we have a user that navigates us to the home page so we're going to say if user rather dot push the home page and now we're gonna before we save this we're gonna say on Strutter that is coming from next.js and now I think we can save this and before that let's add this rather into this dependency array and save this one go to our browser now let's go to authentication page now it navigates us to home page and there is that one second fully current effect that it shows us this authentication page and the reason is that first our user um so this Hook is going to check if you're logged in or not but it'll take some time which is maybe one second or maybe less than one second and since this user is not it'll render this portion and we can prevent that by adding another state so we're going to say const page uh maybe page loading and then set page set page loading that is going to be a use State and initially it's going to be true the first our page is loading and if page is loading so page is loading then return nothing so it doesn't render this portion and now let's save this and now come to browser again go to authentication page but for a second we see that an empty page and then it will show us this home page but what is going to happen if we don't have so if you didn't log in so it'll stay in this uh null state right it'll not navigate us the home page so we're gonna be seeing nothing so to fix this we're gonna say if it is not loading anymore and if you don't have a user then this set page loading should be false which is optimal one and we're going to add this loading into the user effect dependency array so now if you are not logged in it'll make this set pay set it's going to set this page loading to false which it allows our application to render this portion so with that I think now we are ready to build our home page let's take a look at our demo that we have here so in the top bar we have two buttons with a logo and then we have a title and our problem table which has this title difficulty category the solution as well as the status field so first we're gonna build this and we're going to add this data as hard-coded data and then we're gonna push it into our DB and then we're gonna fetch it from there and in this case rdb is going to be firestore which is a service that Firebase provides so first let's create this top bar which I'm going to be copying and pasting some code and for that don't get mad at me just grab them in our GitHub GIS that I will provide you in the uh in the description below so we will come to vs code you are going to create a component called top bar and inside you're going to say top bar.dsx we're gonna say etfcd and then here we're gonna paste it just like this we're gonna import this link component from next and then inside home page we're gonna call our top bar import it like this and we're gonna save we're gonna give a class name that is going to be BG dark layer 2 maybe and then it'll be minimum height to print it'll make this main full screen with this ad for background we're gonna see this come to our browser yes it is almost the same or maybe identical so here uh what we are doing is that we are making this uh body so full height and then we're giving this dark PG that is coming from Tailwind config file that is this color and in our top bar we are giving some we are giving some our buttons and we are making it uh our top bar 50 pixels and basically like super basic HTML and CSS that you can um take a look at for a second and now let's build this uh so it is title so this title and with our table and before doing that let's actually put our mock data which I will again provide you in the GitHub gist that you can copy paste into vs code now let's go to our vs code and we're going to create a mock data folder so I will say Mark problems and I will maybe you can find it from the GitHub repo that I wouldn't delete this I will add the problems but yes I'm gonna paste that which you can find it uh in the description below so we have a problem type which is going to be every problem is going to have an ID title difficulty category which all are going to be string and then order is going to be number which is going to be this field that you can see that is prefixing prefixing our problems and then we also have an optional field which is going to be a video ID and this video ID is going to be the YouTube video solution that we're gonna have so some of our problems that we can see has video Solutions and some of them is coming soon so we're going to be checking this conditionally and we're gonna render render it uh depending on this so with that we have 10 problems we can save this one and then we're gonna go to our home page where we're gonna put our title and then we're gonna put our table so we're gonna go back to vs code we're gonna paste it into here and we'll save this take a look at it so we have our title as well as the title of our table which is coming from with this heading one that we have this um so to say HTML entities that is so some kind of best practice to use or like es link tell us to use it actually if you try to do this it'll say can you please replace them with uh one of these so that's why I did this and we're gonna add our emoji and then we have this table which will so far we are adding the head of this table we're giving it one table row with table headings so each of them is inside one table head or table heading and then we have some basic CSS stuff again like font medium padding X1 heading Y3 uh so yeah I think this is it's gonna be for our table and now let's try to populate this mock data with uh with each of these rows so back to the vs code we're going to create another component called problems table and we're going to create our folder or file problems um table that should be lowercase table dot TSX and then we're gonna type tfcd and inside this is and inside it is time for me to write some HTML and CSS with you guys because I don't want you to tell bad words about me we're gonna say table body and inside we're gonna give it a class name that'll be um class name should be text white for this should be enough and then we're gonna import our problems that is coming from that mock data that we can see here and then we're gonna map through that array so we're going to say problems.nap and it is autopilot the GitHub copilot can be sometimes annoying that's why I'm gonna do it just like this so for each problem or we can call it document and it's going to have some index and then over here we're gonna create this function and we're gonna return something here and the reason is I'm gonna add some JavaScript code here that's why I'm not immediately returning jsx so here we're gonna have our table Row for each of our problem and then we're gonna give it some class names so we're going to say class name and open this curly braces as well as backticks we are going to say if the index of it is the even or the index of it is odd so which you can check it just like this if so we are gonna say give it to BG dark layer one or it should be like this and otherwise it'll gonna be it will gonna be nothing so it's going to be transparent so we can make it just like this and we're gonna give it a to make um subscript or yes lint happy you're gonna say he should be the document.id and then inside here we're gonna give it table hat so we're gonna say table head we're gonna give it some class names which should be padding X to padding y four one to medium so we're gonna say font medium and then white space no wrap and then text dark green as that we have initialized inside a Tailwind config so and then we can put this solved Mark which is going to be BS check Circle um yeah that should be like this now let's try to import this from react icons and we can give it font size that is gonna be 18 pixels and width of 18 as well so just like this then um what we can do so we're gonna add all of our Fields now let's just try to save this one and why it gives us error so maybe we did something wrong um what it says actually okay maybe we should close this okay and then let's save this one go to our browser we can see we cannot see anything because we are not showing them into here so after the table had we're gonna say problem stable that is coming from our components save this one come to here yeah okay it's not completed the row is not completed that's why you chose it like this so let's continue so after this table heading we're gonna have cable data which is gonna have some classes of padding x 6 and heading y as four and then we're gonna put our link that is coming from xjs so inside what we're gonna say document dot title and then what we should do give it some class names that'll be so class name on Hover it'll be text blue 500 or maybe 600 and then cursor is going to be pointer and then obviously it's gonna have some href which will take us to problems page Flash the problem ID which is going to be twosome or the document ready this is going to be there to some like reversing Glitz linked lists etc etc if I can speak so that should be document.title and after that we're going to have another table data so table data so all of them is kind of going to have the same class names so for this let's put a document that difficulty and the class name of it gonna be heading X actually we can make it with backticks so it's going to be padding X fix padding y4 and depending on its difficulty we're gonna give it some different color that's why I made this function so we're going to say cons um difficulty color and then we're gonna make it like it's a difficulty if it's easy then we're gonna give it um text so let's just take this and we're going to mutate this so text dark green s so that should be text dark green as if it is easy then we're gonna show it I'm we're gonna give it green uh color I'm sorry I made it so long so if it is not easy then it could either be medium or it could be um so it could be hard so in the medium case we're gonna give it text dark and then it's gonna be yellow and otherwise it's gonna be red which which is going to be dark um I guess and then depending on this we're gonna give it this difficulty color inside so we can basically say difficulty color because we are already checking uh the condition and after the difficulty we're gonna give its category which so far I can copy this paste it like this and delete this backtick delete this um I'm gonna make it uh angle code and inside we're gonna have category and after that let me see what we have so we're gonna have depending on video ID so let's just save this one take a look at it so this is what we got almost the same as with this one so maybe with some changes but I think that looks great so we're gonna add the solution tab and it's gonna be it for this page I guess so we're gonna add another table data or maybe we can copy this one paste it and change the content we're going to say if document has a video solution or the video ID we are going to return something else and if it doesn't have anything any video Solutions you're gonna say we have a paragraph that is why it gives me error because I didn't complete this part so let's say this um we're gonna have a i YouTube fill YouTube that is coming from react icons so otherwise we're gonna say a paragraph that is saying coming soon and for the class names gonna have um text Gray 400 and we can save this and import this one so we're going to importing that from react icons AI and let me see if it has any class names yes it has so the font size is going to be 18 and class name it's gonna have cursor so here's their pointer and on Hover it is going to have text thread 600 so save this one finally come back to here that we can see now if we click any of them it doesn't show us the solution but we're going to implementing that soon and if we click any of this that has ID that will take us to the problem page but since we don't have the problem page it'll give us 404 which we're gonna handle later so I think that looks great but we can make this one a bit bigger which we can say font size should be 20 um 28. and now it looks better so this is all that we need for this page and actually let's build a solution tab when we click this YouTube video icons you will get this YouTube model that we can watch the video solution and also I forgot to mention that now so far we can see all of our problems is solved but this is not correct and it is because we are putting these icons or all of the problems and later we're gonna check if we solved it depending on the data that is in the DB and also for this line that we are checking so each of these problem has an index right when we map it we give it them index and it's going to be starting from zero to all the way nine because so far we have 10 problems so anyways for the problems that has uh that has the index as even number it is going to be a transparent background but if it is the odd number it's going to be this color that we give so one three five seven nine all of them are gonna have this color so that's why we're checking this and also we are giving this difficulty color and I'm just trying to make sure that we are all on the same page and yeah I think this is that should be it now let's try to implement this um YouTube video model so back to vs code here we're going to take a look at the smog problems so some of our problems has video IDs which looks like some random ID but actually it is an actual ID that we fetch from my YouTube channel so each of them is so every video on YouTube has an ID and we are gonna pass these IDs into our model component that looks like something like this and it'll fetch that YouTube video depending on that ID and then it'll populate it inside this model so let me just show you actually so if you visit this valid parenthesis on my channel we are going to see that in the URL bar we have this ID that starts with x t y and ends with t and u so back to the vs code into the valid parentheses that we're gonna see we have x t y and ends with at T and U so this is that ID that I copied and pasted and you can paste paste your own video IDs if you have any video that is related to these problems and now it is time for us to create that YouTube model by importing or installing a new package so go to Google type in PM react YouTube and visit this first link and then it'll tell us this command which is npmi react YouTube we're gonna go to vs code and we're going to create a new terminal where we're going to say npmi react YouTube so it'll install that package and it is pretty popular that we can see here and if you go to repository that we're gonna see it has it'll give us some this YouTube component which comes from react YouTube and we can pass the video ID and some other options that maybe a lazy loading on what's going to happen on end on pause etc etc so let's see if it is done yep it installed that and we're gonna go to our problems table and maybe we should put a react fragment here because we're gonna have full body and then and we're gonna have table food maybe table footer and then here I'm gonna paste a copy and paste some HTML and I'll explain it I don't want to waste time by writing all these CSS classes so we created a t food and let's import this by from react icons and from react YouTube package that we installed it's coming from the ACT YouTube and for the video ID we paste that same ID so that should be oops x t y and ends with tu which is for valid parentheses so it is going to be loading lazy and on cursor we have this pointer and also we have a background overlay or yeah it is it's going to be our model when we click that it'll close our model so back to our code or our browser let's save this one and now if we click or if we don't click it'll be right there that we can see It'll yeah it was this video and we can watch it we can forward it backwards and pause that and not close that for now so now let's add this other functionalities so we are going to only show this if our user wants to open that YouTube player so for that let's create a state where we're going to say const YouTube player uh YouTube player and then set YouTube player that should be coming from reactive State and you can delete this and initial value is going to be an object where we're going to say it's open to false and video ID will be an empty string and we're going to import the use date and go for close model we can add our function but before that we need to open that when we click that so let's actually make this conditionally rendering if YouTube player is open and then we want to we only then want to show this uh model okay we're gonna wrap it just like this now if you go to the back to the browser we're not going to see that model so when we click this we should be change the state to open so which is this icon and we're gonna add a handle click function into that so I'm going to click here and I'm going to say on click we're going to have a function it could be an arrow function an inline function just like this and it'll say set you to player T is open and video ID is so let's close this and video ID should be that document.videoid and we can cast it as as string and now let's save this one and what it's going to do when we click that icon it'll make its open field to true and then it'll pass that video ID so back to browser when we click that we will get this beautiful model with its ID but now I think it was hard coded here yeah it is here so we're gonna delete this and we're gonna say YouTube player dot video ID so it's going to be this Dynamic ID that you passed now if you save this one back to here so now if you click this uh so we cannot close that actually let's refresh now if we click this maybe maximum depth of binary tree and when we click that we'll get that video that we can see here so now let's implement this uh closing that model by clicking this and backdrop so back to vs code and we're going to go to top where we are going to add our function which is going to be close model so close model Gonna Be an Arrow function again which says that YouTube player is open to false and video ID is going to be empty so we are resetting this and we're gonna bind this function into that close button which is this one so on so make it like this on click so we'll call our close model so we can just put it like this also copy and paste this line into this overlay that we have here so it's going to be that background that you see here and if we save this now if we click that background it'll close that you can open our news problem solution and close it by this and open another close it like this and now we can also add that functionality when we press Escape keyboard so we're going to create a use effect and initialize it just like this or on Mount we're going to say window uh dot event listener or yeah ad event listener where it's going to say key down and on key down we're going to call our function which is going to be handle Escape and save this and then we're gonna return that by cleaning up this function where we can make it in one line and then create our function here const handle Escape so it's going to be a function that's going to take in our event and if e is escaped and we're going to call our disclose model function so we're going to save this now if I open our browser open this model if I click Escape it'll close that as well close this click Escape it close that so with that functionality is also out of the way now let's try to change this top bar depending on if user logged in or not so if you are logged in we're gonna show a logout button here and as well as a profile image so back to vs code where we're going to go to inside top bar and we're gonna extract our user from our hook so we're going to see user that is coming from use of state and we're going to pass a notification object and then import this and then we are only going to show the sign in button if we have not a user so if you are logged out so if you don't have a user then can you just please show us this button or wrap it like this and now since you are logged in it is not going to show us and instead of that it should show us a profile image which we are going to say if you have users and render this portion oops inside we're gonna have our div with some class names that is going to be a class name cursor pointer and it's going to be group which is coming from Tailwind CSS and I'm going to explain that to you so we're going to say relative and and we're gonna have our image which is going to be that image that we have inside our public folder this is going to be this avatar.png so we're going to say Source it's going to be inside public and Avatar Avatar the PNG and ALT could be user profile and then let me see if there is any class names yes it has so class name is going to be height 8 with 8 and around it is going to be full for make it round now let's save this and go to browser where we're gonna see this image and on Hover we would like to show the user's email so for this I'm going to come here and I'll paste a little bit of HTML where we can grab it from GitHub history so here what we are doing is we are giving we are inside the div we are putting our paragraph which is going to show our users email and initially it is it is here is zero so we are not gonna see it in the screen but on a group hover we're gonna make it scale 100 which group is this stiff so save this one and so with making this group so we put all of these into you make all of them into one group so we're gonna go to browser now if we hover over this we're gonna see that it scales from zero to one hundred percent and since you are giving it some transition duration it's uh it looks very smooth and also we are absoluting them with positioning centering and giving some orange color and background so pretty basic HTML and CSS okay now I think we are ready to build our logout button and for this we would like to create a new component and put the logout logic into there and the reason being is that we don't want to so we want to keep this Tall part component clean and also you would like to make the logout component reusable so maybe months passed and this application got into a different state or maybe really the next day we would like to have a sidebar over here and then you would like to have a logout button there as well so that's why we would like to make that component reusable and then we can reuse that just by calling that so for this I'm going to create inside the components folder a new folder that is going to be buttons and then we're going to be putting all of our buttons into this folder so I'll say so the first button that we're gonna have will be a log out.tsx and then you're gonna type kfcd to get our boilerplate so here we have this type that says logout props which will so we are not going to be using for now or maybe for until the end of the project but in my site projects and this is kind of my preference that I even though I'm not going to be using them I would like to keep them so because maybe in the future I will I would like to take some props into this component and if we see this it'll be in in only one line so it doesn't harm us and but if you'd like to delete them you need to delete here and then you need to remove this from this brackets and that could be a react functional component like this that would be okay and let's let me just delete that as well and then since this logout is going to be button we're gonna say we need to return a button and then inside you are going to have a logo and it'll gonna be fi log out that is going to be coming from react icons so let's just import that and now this button will have some classes so we're going to say class name will be BG dark fill free and then petting y 1.5 and then padding X will be three and also I think we'll have our cursor as pointer and then we would like to give it some water radius we'll say around it and then X should be a brand orange I guess as always and then yeah this is going to be for our class names so let's save this one and add it into our for the top bar so we're gonna come here we're gonna say show us the log out so import that save this now here we need to we see this button that we have here and now let's make it work so for this interlog that we're gonna have when we click this function we would like to call our function that we're going to initialize so on click we'll say handle I can type handle log out I'm gonna copy this and then I'm gonna create this function here that'll be um that will allow this to log out but for this let's go back to our documentation and now let's scroll to top we need to uh so we need to look for something like logout or sign out that I can see here click that and then they import this hook so we're gonna copy this and paste it here and then import this um the hook as well as our object that is coming from our Firebase uh file that we have here so we are initialized so calling out this authentication object into here and then we have our sign out function loading State and error state so on on click what they do so they call this sign out function and they they await them but I think we don't need this because we're not going to show any alerts so now once they click that you would like to show call the sign out function okay now save this back to browser now if you click this it'll log out and we still show this button it is because we need to conditionally render this so we're gonna say if we have a user that is logged in then you should show this logout button low now save this and now we're not gonna see that I'll refresh this page and now if we click sign in button it'll take us to authentication page but it'll it is not going to open that model so for this we need to again click this but it is a bit too much work I what I want to do is when I click this I would like to get that model open that's why we need to uh mutate this oauth model state that we have here so for this I'm come back to top bar and inside the sign in when we click that button I would like to follow our function so on click we're gonna call this it or um we're gonna call our book that is coming from the US recoil we will say use set recoil State and then we're gonna pass our auth model state which is coming from that should be import um from atoms and alif model atom that is this file and now we are gonna assign it into variable called set all model state and now inside this on click we're gonna call that function so inside here we're going to call that and we're gonna change the is open field to true and then type is gonna be log in now if I save this back to here in home page if you click that button it'll take us to this authentication page and then it'll open this model oh that's great now we want to add this forgot password functionality and I think eventually you are going to be done with this authentication logic and for this I'm going to go back to my documentation and I'm gonna look for something like maybe you send password reset email click that you have a full example so I'm going to copy these two lines activist coach I collapsed and closed everything here so I'm gonna say Ctrl e to get my reset password and then inside I'm gonna paste that what I just copied and then I'm going to import my use date um that should be coming from react um use update and then I'm gonna import this as well as our authentication object and then format these um okay now we would like to use the state on change of this input so we'll uh bind this function into this input and then on submit of this form when our user click this button we would like to submit that so on submit we we're gonna have handle reset function and then I'm gonna create this up here it's going to be taking the event and we would like to prevent that because we don't want our browser to refresh the page and then so this is what co-pilots recommends me but let's make sure in the documentation yeah they sent this password reset email with email as well as some optional um optional objects but I don't like that and so they use async to get uh if they got a success the alert this and actually maybe this is what you would like to do copy this and paste that make this function async and then delete this line save it now if we sent the email then we're gonna show this alert which says email sent now let's save this back to here um so we were so let's try to send it to my email um so reset password so we didn't get that alert because there is an error so I didn't sign up with this account into this application so it is not going to send an email into this but if we say John do at gmail.com which we have signed in with this account and we try to reset our password it'll send that and it'll says uh it'll say like email sent and then for our error handling we can use a use effect where we're going to initialize it in whenever our error changes so we're going to run that whenever our error changes and then if there is any error error then we're going to alert that so let's import let's use effect this error is coming from this hook that is sending that is giving us okay save it now here let's say try to this account so if you sent that it'll says user not font right so we are done with our error handling so now let's uh so let's create a new account by maybe that should be Dev my name and it should be my name and password should be one two three four five six register okay now we have logged in and we have our email as well as home page now let's say you logout and I forgot my password and I'm gonna come here I will say let me just send a reset password to this email I'm gonna reset that it says email sent so and I'll just check my email okay now I am in Gmail and I can see that I got a reset password uh link I'm gonna click that it'll take me to reset password now let's say my new password is going to be test one two and then save this um here try to log in with this new password so if I say test one two login yeah it logged Us in because the password is updated so I think with all these um maybe we can add a bit more user-friendly alerts and for this we're going to be using react toastify npm package go to Google type react toastify npm click that and 1 million downloads weekly pretty popular package so we're gonna copy this and what it does is like we are we're going to be showing this cool alerts instead of sending that boring alert that we show and you can really customize it however you want um for this you can check the documentation but I'm going to be showing you guys how to show error and loading as well as success messages so back to vs code open a new terminal and then paste which is three copied okay now it is installed instead of showing this alert you'll say closed dot success and with a message and import this toast and maybe that should be positioned as so we can pass an object for our options and we'll say position it should be top enter and it should Auto close and maybe after three seconds and then now it's not gonna work because in our app we should add um we should add the container of this toast so we'll say toast container and we're gonna import that from react testify just like this then we also need to put CSS so you can see that from the documentation as well that that we can see that they are adding this container as well as the CSS file and now if we save this back to here now let's try to send an email so reset password idle says this beautiful it'll show us this beautiful alert and you can even make the mode dark I think it should be control space to get the options the theme could be um yeah dark save this again I will send another one yeah now it's in the dark mode okay that's cool um now we can add that post into other part of our application that we added so far maybe when we log in or we sign up so inside here so do we show any alerts or maybe instead of this maybe we'll say post add error as well as our error message import this and this options could be there import post from react classify now let's try to log in with a wrong email and password so that should be John Doe and password is random now try to log in it all says so it'll show this here I testify okay now you can add this just by doing this in one line or like even with change you can change this with this alerts um save this yeah okay this is also out of the way um why did I get two okay that was a bug okay now with this also out of the way I think we should maybe add this problem page that we see when we click one of these we'll get into the problem page so it'll load this in the server side and then we have our description our examples our constraints our code editor as well as test cases that we can switch between them and it'll update the UI and then we have our font size changer or adjuster whatever you say so we can make it small bigger we can go to full screen mode we can exit that start our timer and submit our code and then so we can reset that so everything that you can see here and I mentioned in the intro so now we can log in let's try to remember our user in the in the first part which was john.gmail.com and it was bundle and now let's try to log in now your yours user could be different so it might not log you in so if not just create an account and try to log in with that credentials so yeah now you're logged in we can log out as well as we can see our email so so far this is the current uh state of our application and now let's try to take a look at what we did so I just give you a quick summary uh of the current state of the app um so we created our project by initializing with next.js and typescript configurations which we got a script from the next JS website and then we paste it into our terminal and then what we did we initialized Tailwind CSS we added our colors and we will be changing this file at the end because we want to purge some um so CSS classes if you don't know what that really means I'm going to explain that but it is basically when you don't want to uh when you want to remove the classes that you didn't use so it'll really decrease the size of this bundle and it'll make our app a little bit faster and it is kind of best practice also when you use cln CSS and then so we're going to be changing this file if you see anything strange here and then what we did was we create the Firebase project where we had our API key domain so this configuration object that Firebase gave us and then we change it with this process.emv so that we can use it this local data so our keys right and we did this because once we push this repository into GitHub we don't want anyone to see our credentials so that's why we did this and for the Firebase authentication we initialize the package we installed it with npm and it is because this package is really useful if you don't use it you can still Implement your authentication logic but um this makes everything a lot faster and easier so let me just show you example so we use a use of state so which gives us our user if he or she logged in or not so if you didn't use this hook what we so what we would do is to create our own react context with the provider and then every time we would call our own hook with the user you know and it just takes a lot more time and a lot more code so that's why we use this package it works really cool with react because everything is wrapped around this hooks so with that we also used recoil which has atoms it is for Global state or like State Management some something like react Redux or maybe react context but a lot easier than them so we just have this file for each of our atoms we have our initial State such as is open is false and type is login and it determines if you are in the login component or in the register or in the forgot password component and yeah and also we created a lot of components that was not really complex so we have our models nav bar problem stable top bar as well as buttons um yeah so that was The quick summary of our app if you don't remember anything so just check back the part one which I have explained everything and if you don't understand some parts I have created a Discord server that you can see the link from the description down below just join them and ask me and to other developers that is also watching this tutorial so yeah with this I just did some three optimizations which it is in the navbar top bar and index that SX so let's go to navbar so here I have changed this line to this line okay you can delete this and add it like this because now if we have this do you see that we got a warning because in xjs we need to use or it's like kind of best practice to use this image that is coming from next image so you can still use this uh this line but it just kind of cool to use this because it does a lot of lazy loading stuff and image optimization so that's why I deleted this line and also in the top bar I did the same thing where I change this line to this and the only difference is we are deleting the class name and give it a height and width depending on the size that we want it to have so if you want to make this bigger you can play around with this height and width so I delete this line as well and then also inside the index.sx where not this one but so which one was that so in the authentication page okay so let's go to Alt here so I deleted this image and I changed it with this one with the height and width of 700 so delete this yeah that was all that we need to do for this part one and close everything now collapse everything now what what do we want to do so when we click one of these problems in our demo application which you can check from this URL and now let's try to go to two sum it navigates us to problems slash two sum and if we go to another problem we again navigate it to another problem so this problems part is static and then we have a dynamically changing uh sorry the problem ID that's why we'll come to inside source Pages create a folder called problems it's going to be slash problems and then we'll have a dynamic URL so for this open the square brackets and type PID which stands for problem ID and then close that bracket in dot ESX and then we'll say tfcd and click so select this PID Ctrl D to select all of them and say problem uh page so save it now if we come back to here slash dot problems of imitosum we'll get this have a code have a good coding and then what we want to do is every time when we come to this page we always want to see a top bar okay so top bar import this we already have it and we're gonna be mutating this component so save this and let's take a look at so here we have the same navbar that we have inside the home page right so actually it is exactly the same top bar but the difference is inside this we have inside this problem page we have something in between that is problem list that goes backwards and forwards and then on the left on the right we have this um clock icon so this is what we're going to be implementing so really this is the difference and inside the home page we have this top bar as centered but here we're not going to be doing that so everything is space between so let's come back here and we're going to be changing this as depending on if you are in the problem page or not which we can pass a prop into this we'll say if you are in the problem page so this is exactly as doing this okay so problem page is true or we can basically make it like this and then inside the top bar we're gonna get a prop so that's why we didn't delete this type and now we'll say it's going to be a problem page type of Boolean and it's going to be optional because in the home page we are not passing that right so in the home page we have we call this top bar but we don't pass that uh problem page props for the prop so save this in here we are adding this and now let's destructure this we got our problem page and depending on that we're going to different something uh in between that we see we had this a problem list that is go goes to next and previous and as well as our clock so now below this link will say if you are in the problem page then render this portion uh which will have a div as always with some class names that is going to be Flags items Center and we'll have gap for Plex one justify Center and then inside you'll have another div that is going to have again some class names which is going to be flags and like items um if I can items it's gonna be Center and then what what do we have let me just check it's gonna have justify Center and around it dark field three how on Hardware will change the background it will say hover BG uh dark fill two two and then so that should be separated and then we'll have height of 8 width of eight width of 8 and we'll have our cursor pointer and then inside we'll have an icon which is coming from react icons it's going to be fi sharing uh right or maybe it should be a left and then we'll import that coming from react icon slash fa and then after this div we'll have another link it will take us to maybe homepage so let's call it and then import this so did we already got that yeah we already have it and now you'll have an href that will take us to home page as well as some class name so our class name is going to be X items tenor and then gap of two font medium uh you could better type it and then we'll have a maximum width of 170 pixels and then we'll have maybe text dark gray eight also these colors are coming from tail with config if you watch the part one then you know what we are doing here and then you will have the cursor pointer decide what it should say it could say it'll have a div that is going to be containing an icon that says BS list and we import this then um below this div you can save it to format this and then below this div we'll have a paragraph it says problem list now let's save this come back to here and go to problem page oops it didn't work out so because we didn't finish it right and maybe something is going on here if you have item Center we have flex and delete this Dash yeah now it's it works now maybe we should add some more classes and maybe after this link we'll take a look at that you'll have another GIF that says actually that's exactly the same thing with this one okay paste it here and instead of left it will say right save it yeah it is that part so it just doesn't have that first background maybe we should add this yeah so the problem here is that BG should be we add should this prefix as BG dark fill three David now it's exactly the same with this one maybe we should change this uh give it a space okay so we have this and now let's add our timer but before that so do you see that everything is justifies uh space between but here in our case it is in the center now let's just change this where we're gonna come to here delete this line okay just or maybe Ctrl X it's because we're gonna paste that so we'll say if we are in the problem page then paste this classes but otherwise we're not going to have anything and it should be not problem page so if you are in the home page right we will have everything in tenor which will have the maximum width of 1200 pixels and it should be MX Auto but on the problem page you're not going to have that uh container where everything is going to be justified between now save this as we can see we're in the problem page we don't have that container the width of 1200 pixels but in the home page we have that so yeah this is what we did now it's time for us to add that uh timer that we'll have on the right and for this I want to have its own component so that we don't um so maybe we want to use this in other parts of our application so I want to make it reusable so for this come back here collapse everything inside the components I want to create another component called timer and then it will say timer dot yes I use tfcd to get our boilerplate and so inside timer let's first add our markup and then we're gonna code the logic but first I want to have one state it is going to be troll climber and set your timer at first it's gonna be false now import this so we can also use something like this uh third uh I don't know how do you call it but it should be carried brackets where we put the type of this use state which is going to take the value as type which we're gonna have for this Boolean and then low timer we have the state because either user is who want to show that timer or not so so far show timer is false when you click that show timer is true now it shows that so that's why we have that state and you will say if show timer is true then you want to render something otherwise you want to render something else so here we'll say let me just check we're gonna have a div with a lot of class names again so because this we are using table in CSS for Flex items tenor really we'll say space X2 as well as BG um dark not Fork but dark fell free and painting Y is gonna be 1.5 cursor is going to be pointer as well as we're gonna give some border radius and then hover they on Hover will say BT it should be Park fill two and yeah so inside you will have our maybe we should have a div so inside if you'll now hard code it this will say like zero hours 10 minutes and 12 seconds and then below that we want to show a refresh icon which is going to be F I refresh TCW and then import that from react icons now format is and format that uh maybe tab then [Music] so let's come back to this else case where we're gonna have another div with some class names as well as inside we're gonna have an SVG so let's say class names for this is going to be on before doing that maybe we should say like X items tenor and padding one should be so padding should be one height should be eight and on Hover State we're going to say BG should be Park on dark fill 3 and then it could be around it as well as it should be cursor pointer and then inside I'm gonna have an SVG which I'll copy and paste it you can grab that from our GitHub repository so I copy that I'm gonna paste this and I'm gonna try to save it yeah so let's take a look at that so first um we are not rendering that because inside the top bar where maybe here we'll say if it is the problem page then we wanna render our oops we want to render the timer so import that from our components and then close it so save it now we'll see that Primary in our problem page but not on the home page right and then when we click this so we cannot see that because we didn't implement the logic but now let's say if this show timer is true then it'll be you will have this uh so this component right and then it's time for us to add that Dynamic um so logic but before I don't know why it doesn't work maybe we didn't add that padding y 1.5 so it should be this portion to be honest so maybe not painting y but heading yeah it should be maybe padding uh 1.5 and now we want to add the logic and for this what I did I actually asked it to check GPT to give me the logic so I just got to check GPT and I said can you just create a timer component for me I'm gonna use it in my react next.js application and what I want you to do is I'm gonna have a clock icon in when the user clicks that I want to show that timer in this kind of small div small container and then I just asked him to write all of the HTML CSS and so the logic the HTML and CSS it gave me was really poor so I implemented my own with svgs and class names but I just copy and paste the exact functionality that it gave me with functions and use effects so I will just copy and paste it and I walk you through and I just want to say like this is where ggpt comes into play this is where you might gonna use it so it really reduce the time that you waste and it makes your productivity freely 10x so like 10x boosted or whatever you say so I'm gonna copy and paste that and I will walk you through again okay so I copied now I'm gonna paste that where we have our user effect import this and then so let's see we have a time that is another use state which the value is zero for now and for here we'll say instead of this we delete this and it will say format time and pass the time and then when we click that clock where was it so here once you click that what do we want to do so on click we might want to call this function or maybe we just can cut it from here and paste it inside an arrow function so we say that when we click that icon a clock icon we want to show the timer so delete this and so the initial value should be false and then let's see so once we click that our time show timer set it changes and use effect runs it says if show timer is true which case it is and then it initializes a set interval which will run in every second and every second it will add plus 1 into our time which was initially zero and so every time it passes every time every second it just adds plus one and then since time changes it is a state right we are updating it so it re-renders our component and we have our time states which we pass it into this format time and this function takes that number and it converts that into a string and it returns as a string and so this return type is something like that we just typed so maybe zero zero and like zero hours 10 SEC minutes in Lake 22 seconds right you are first 10 minutes and 22 seconds so this is what it does it just gets it calculates the hour puts Colin and then minutes and then once again a colon and then it gives us the second so this is the where I just use the jgpt I didn't even think about this logic I just pasted and it works and it's really great so let's save this come back to here now when I click that we can see that our time is updating at every second and it just renders that into here so when I click this uh it should uh refresh that right and for this let's come back to here it was this refresh icon so I wanted you to say on click right what I want to do so maybe an arrow function I will say that show timer to false but there is a problem here because now the 30 seconds pass now I click this also it didn't it didn't so maybe maybe should I refresh this foreign for a second so like five seconds has passed now I click this okay six seconds has passed now if I start that again it'll be continuing from that six seconds so that's why here I wanna also um reset this time so I'm just gonna cut it for a second open my brackets and I'll say show timer is going to be false and time is gonna be zero now if I save this come back to here now if I re so let's refresh this so click that clock icon so let's read for five seconds and now I'm gonna refresh that now I reopen that it'll be it should start from zero seconds right so yeah this is what we want and with this our timer and nav bar is completed at least for the UI and now we are ready to build our workspace which is gonna be uh on the left you will have our description and on the right you will have the code editor as well as the test cases that we see here and for this we would like to have this splitter that will let us to shrink our window or the containers however we want um for this we're going to be using a package called Supply JS and for that let's just visit their website so go to supply.js.org that we see here we have this splitter that is so far horizontal and it just allows you to build um two containers with this splitter and if you want we can use the vertical which will make it to have uh two containers but on the vertical Direction and it turns out that in our application we use the both of them so you have this horizontal and you will have this vertical Direction um so yeah we're going to be using this switch.js and for this it it even has the code examples with react and so let's first import this package and then we're gonna take a look at this usage so go to Google type npm react split and click the first link and then it'll give us this command so copy that come back to vs code where go to terminal and just paste it and click enter it'll download that and we said that we're going to have a workspace so this is entire so this entire container is going to be our workspace and on the left you will have problem description and on the right maybe we'll have the playground which we'll call the first um container as our editor and for the bottom section we'll call it maybe test cases or something like that so for this come back to vs code we would like to have this inside the PID problem ID page so we'll say um import the workspace component which you will need to create it first so come back to components folder create a workspace folder and then inside will have workspace.usx so we're gonna use tfcd to get our boilerplate so maybe we can call this work base save it and then here let's import this by clicking control and space it'll give us this Auto completion and now save this inside our workspace we said that we're gonna have a problem description and then on the right you will have our code editor so let's say inside workspace you'll have a problem description and then we'll have the file that is going to be a problem description dot ESX so let's say tfcd and you could say problem description save this and then here what we would like to have is this split so you want to import this split and then if we have this split component we can put two different divs that is going to be one on the left and the other one is going to be on the right so let's just do this so we'll come back to here it will say import so is it a default yeah so we'll say so split from react split and then replace this with with components and then was it the class name yeah the class name is going to be split and then we'll have two divs so the first one is going to be the one gonna be on the left so which was which was going to be the problem description so import this and then maybe for the right we can say the code editor will be here so this is some kind of placeholder now let's save this and if we take a look at here they also give us some CSS classes so for this just go to the GitHub gist or the GitHub repo take all of the CSS that I have added and I will walk you through and we come there but when we get there so basically we have these that we all we have already added for to make detail in CSS work and then I added this reset I don't know if Tailwind CSS already does that but just to make sure I added this reset classes and then for the body we put our phone family as well as making it full screen and then we have a better um scroll bar which we make it dark as well as a bit thinner and also this these are the classes that we got from the split.js site it gives us this for this split it's gonna be display Flex for X direction is going to be raw but when we come to here for the vertical we'll have um so this direction is going to be vertical but once we came there so once we get this portion we will take a look at that so so far let's just build this horizontal and it gives us some gutter and what is gutter is that this thing that we so this blue thing that you see it is Gutter and for this it gives some background image which makes this uh to have these Square dots this is what it is and it just does some cursor to call resize as well as background color and I have changed it to make it have a black background color and on Hover we make it blue so that it looks um just exactly the same as Lee code so these are the classes that you can get and as you can see we also have some additional styles for some other classes which will explain that once we get there so just copy them from the GitHub gist or the repo and then paste it into the global CSS we also don't need this Honda module.css you can delete this I don't know why we put this until here but we just need to delete that and then let's come into the maybe the description site um so actually just save everything and let's take a look at in our demo so this is the result that we got something on the left and something on the right so it doesn't have any width or like height this is why it shows um it is very small but now let's just make this problem description to have maybe height to this screen that will make it full screen save this and yeah this is the result that you would like to have so now let's build this right side and then we'll gonna so let's build this left side which is going to be the problem description and then we're gonna building this code editor site so in our problem description component we have a description Tab and then below that we have the problem title as well as the problem category if we have sold it or not like counts dislikes counts and then if you have started started or not and then we have the problem statement which consists of paragraphs and then below that we have our examples each example has the structure of input output and then explanation and explanation is optional because some of them doesn't have that and then for the constraints which will have them at the very bottom of the page and it will be consisting of an unordered list in a way that liquid does and then so first we're gonna be inserting this data as hard-coded and then in the upcoming sections we will be updating that as like Dynamic data and as always this is not a CSS course so we will not be focusing on CSS I will just be copying and pasting this component that we have this problem description and I'm gonna paste that and we'll just do a quick walkthrough and if you don't understand some part of it you can always ask me from the Discord server or you can just pause the video take a look at the CSS classes for to 10 10 to 15 minutes and with this now let's just copy and paste it so I have grabbed that from the GitHub gist which you can after this return delete everything and just paste it which we are gonna have some imports for this maybe we can click control dot to add all missing Imports so this is kind of pro tip that you can get from the vs code and for some reason it doesn't import This Ti star outline so maybe we can say import Ki um star outline from react icons ti so save it and let's take a look at our browser in the localhost so this is exactly the output that we would like to get and so there is one thing that we would also like to add so do you see like it doesn't shrink 100 and it is because in our split we would like to say Min size should be zero so save it now we can uh so let's take a look now we can make it 100 uh shrink or grow and let's take a look at output that we just got by pasting this code so we have a BG dark layer one which is going to be this black color as our other div and then below that we have our tab which is going to be this description it has some border radius and some text inside as well as some padding top and then below that we have our problem heading which is going to be this one uh like first two sum and then below that we have the category which is going to be this text old if BG Olive inline block rounded 21 pixels so background opacity of 0.15 and so these other classes and like right next to it we have this icon that says if you have sold it or not and then we have likes count dislike count as well as our star icon and then below that we have our problem statement AKA paragraphs so below that we have three paragraphs I guess and there is something that you can see here that is this code um HTML tag which gives this effect that it has its own container it has some border uh about the radius for their color and background color that is coming from the global CSS that I said I'm going to be explaining that so it has border radius border width and background color border color text color as well as some font weight font size that you can see here this is what it gives this effect and then we have after the problem statements we have examples in each example is wrapped with this example card um div or with this class and inside it is a free HTML tag so with this pre-tag we have also added some class that is gonna have this background color and then it has border radius so we change the font size so give some more margin bottom and padding the and also all these classes that you can see here and for the strong strong tag that we wrap this input output and explanation we give we change the color as well as the font size foreign after our examples we have our constraints which is going to be an unordered list we can specify that by saying list.disc and we have our constraints some of them inside our code uh tag some of them in our strong tag so that was the component and you can feel free to just pause the video for like 10 to 15 seconds just watch the hourly take a look at the code and most importantly we have this overflow maybe that should be y Auto so do you see that like once we have this content is overflowing it just gives us this uh so scroll bar right it's it just looks like some different page and it is because of that overflow Y is equal to Auto now we can make this bigger so that was the problem description component if there is something that you didn't understand feel free to ask me to Discord server or in the comments and now let's try to build our code editor but before that we would like to have this uh language support as well as settings settings model and then um so this full screen functionality or maybe we will add that icon and then we'll add this functionality and then below that we're going to have our code editor and our test cases so let's get into that so now for this right side we would like to have our playground for this we'll come back to here and change this placeholder with our playground component which we need to create first so inside the work space folder we'll say playground and then inside this folder we'll say playground.dsx and then use tfcd to get the boilerplate and then change the content with playground and then save it come back to here import this with control space and then save it now we are going to see our playground and inside this we would like to have a preference nav bar which is going to be this black section that we can see here we have the language that we are using and then we're going to have settings and full screen icon so for this we will need to create another component which is going to be the preference navbar and it's going to be inside our playground so we'll say preference nav and then you will say preference nav.tsx use our boilerplate and then you might want to say prep nav save it come back to here open a react fragment and then paste our preference snap to save it and we'll take a look at here that we see our preference navbar and now let's try to build this to come back to vs code inside here we will have a lot of classes with divs and buttons so I will paste some code again but it is this time I will be pasting it like blocks by blocks Notch I'm not gonna paste the entire component in one go so first let's give some class names for this it's gonna be flex and items gonna be in the center and then justify between to make them separated and then we'll say BG dark um layer of two height is going to be 11 and then width is gonna be full so inside this we're gonna have I think that is gonna be on the left which is going to be our language so let's paste this and again you can grab that from the GitHub I don't know if I need to say this again but let's save this and take a look at it so here we have our button on the left and we have some backgrounds when we hover over that it changes it has some border radius and and padding X padding y so this kind of stuff and here we can see this on Hover we have changing our background color padding X padding y cursor pointer rounded text left maybe we don't even need this because it's already too small so there isn't any change here um yeah so that was gonna be the thing on the left and after this div we will have the other div which is going to be wrapping our right side so that was our left and now we're gonna have the stiff that is going to be containing our icons so for this again I'm gonna paste it and it's gonna be like a blogs by blocks so let's first give some classes to this one it's gonna be Flex items Center and then it's gonna have margin as two and then below inside this we're gonna have our Button as well as and so it is gonna contain an icon and then the text which says settings so save this back to here that we have our settings so when we hover over this we get this tooltip that says settings and it is because it is again um so that should be scale 0 at first so where is it um yeah so scale is zero but when we hover over this group which is going to be this button when we hover over this this settings div is going to be 100 scales and then it is gonna have this absolute position so that's why it's gonna be on the right zero and then top five so that will make it to in this position and then we would like to have another so one more this button so let's just copy this and paste it below and it is gonna have it's gonna say full screen and then for the icon you'll click to have ai full screen I guess and outline AI outline full screen save this come back to here now we see this full screen and again it has this um tooltip and now I can give you a real quick tip that we can see here we have two buttons right this is the first one and this is the second one and both of them has the same class names and it is really huge in tailing CSS so we can cut it from both of these and we can create something called components so we can come back to our global.css even at the very bottom of the page or really anything anywhere so we can say add layer and we'll say components so inside here we will try to create our own custom class name so for this we can say it's going to be preference uh button and inside we will say apply and we're gonna paste the classes that we just copied now if we save this file and come back to here let's just copy this as well if we come back to here this class names we can put it like this now it is really clean and it is repeated code we have repeated code previously but we just separated it into this file and then we also have the exact same thing for this tooltip that we can see we have the exact same classes so cut this from here and here we're gonna say preference uh tooltip or maybe preference button Dash tool tip so again it's gonna be the same here preference button tooltip save this file come back to here and then below this we're gonna have our button uh class name it's going to be prefer friends button Dash tool tip and then we'll say apply the classes that we cut and now we save this there isn't going to be any change so it looks like there is but what it says um yeah so what's going on here let me just take a look okay so the problem here is that it says apply should not be used with the group utility so for this we just gonna delete this group from here and then save this file come back to here inside this button we will add this group and for this button as well so we'll say group and the rest should be the exactly the same as I just explained now it is going to work the same that we had previously so what we did let me just uh real quick summary that so instead of having this huge lines of classes and repeat them in a lot of different buttons we will just create our own class Name by pasting that into this apply uh apply layer so this is how we create our own class names with Tailwind CSS all right now that we have added our preference nav bar now we would like to build this um split we will have our coded a code editor on the top and the test cases at the bottom and so it's going to be just like this that we have here and for this it's very obvious that we're going to be using split.js once more but this time it's going to be in the vertical Direction and then as I said we'll be implementing the code editor and then test cases so for this let's come back to split.js so you're going to be using the vertical Direction and it's going to be something like this so it gives us some classes and I have already copied and pasted into the global CSS where the difference is that vertical Gutter and it just gives us a background image that is going to be this Square dots but it's going to be in the horizontal Direction and then also I have added three more classes which is for our which are for our code editor and you'll see why we use this so maybe you can copy and paste this exact file into your repository and you can get it from the GitHub so this is going to be our global.css and here we would like to install some packages that is going to be for our code editor which is going to be the this uh UIW react code mirror that is going to be a code editor for react and additionally we are going to be installing two more packages which is going to be for the JavaScript language support as well as this vs code theme that we can see here um okay for this let's come back to our project and open up a new terminal and then let's say npm install and paste these commands where we'll have react code mirror as well as the JavaScript language that is coming from the code mirror and then the vs code theme so let's install this okay now it has been installed and let's try to wrap this preference snapbar with the div to give some class names which is going to be flags flags of column it's going to have the vertical direction as well as background dark layer 1 and then the position is going to be relative and then below this preference nav bar we would like to have our split so let's import this from react to split and you can have some class names which is going to be height of calculate function full screen minus 94 pixels 94 pixels and then close this as well as you will have our direction to be vertical so that it'll be on top of each other and then for the sizes it's going to be the first container on the top do you see here like this is a bit wider than this bottom section so let's try to yeah so it's like kind of 60 to 40 percent so that's why I would like to say 60 to 40 and then here we'll say minimum size it's going to be 60 pixels and you'll see uh once we have this and inside this we would like to have our code mirror but before that let's have some class themes which is going to be with a full and then overflow is going to be Auto so here we'll have our code mirror that is coming from the package that we just installed it's going to be self-closing tag um so it's not going to be react with mirror but so import ant mirror from it's going to be that package that we have here so it's going to be at UIW This Record mirror and close this import that and it's going to have some values or like the props and the first prop could be the value as a JavaScript code and then we'll have our theme that is going to be this code dark that is coming from this package and we import this and then for the extensions which is going to be the language support it's going to have a JavaScript so import this and call that function and lastly we can say for the font size we could have as uh maybe 16 pixels so yeah that's gonna be the first section the section on the top and then the low this div we will have our test cases so let's have it if that is going to be test cases it's gonna be so let's see these cases save it uh come back here inside our localhost and yeah this is exactly what we see okay now let's refresh this so it gives us some error I don't know why it does that so it says Compass composite components yeah so this is not actually what we want um is there anything that is so let me just actually just close this and then npm run Dev again so it can be sometimes like a development errors um let's refresh our localhost and let's go to Tucson page and yeah now we don't have that error let's refresh the page and now it's just gone so do you see that we give some class names in our Global CSS that was this color um yeah this background color as well as we don't have this alt line now if you remove this class and when we click this click do you see there is an ALT line here so this is what we are when on Focus State we remove that this is that class that we have now let's add it and now even if we focus do you see that that outline is just gone and we also give this background here now let's try to remove this and now it should be let's refresh it so now it has this kind of uh like border DC and this is why when we add this it just negate that and yeah this is it so what what are we need to add right now it's going to be the test cases so for this let's come back to our vs code closest Global CSS below our first split so inside this test cases this is going to be our test case container we'll have some class names uh it's gonna be with over full heading X of 5 and overflow is going to be Auto and then now we need to give that uh for the heading of the test cases so we can say maybe a div it's going to be kind of a wrapper and then let's give its class names it's going to be Flex height of 10 items to be on the center and then Space X six and below this you're going to also have one more div and it's going to be the actually so it's going to be kind of again a wrapper so I'm gonna have some class names that is going to be relative and then Flex height of full and flex column justify Center and maybe cursor is going to be pointer and then we'll have a div that it said that is saying like test cases this is going to be that heading and it's gonna have some class names as always it's going to be text small text small font medium uh font medium and then it's gonna have the leading five as well as six color of white and then below this we would like to have a horizontal line which can we have with HR element pack HTML tag and then it's gonna have some class names which is going to be absolute bottom of zero height of 0.5 and then with full rounded full as well as border none and background is going to be white so save it and hopefully it's gonna work and here we got like full width but maybe do we miss the relative positioning so we'll see it's not going to be with full Maybe um so we don't it's maybe width of you can say 12. maybe that could be 16. and yeah this is almost exactly the thing with this one and now we would like to have these test cases boxes and for this let's come back to here again below this um So Below this div we're after the heading so we can say this is going to be our test case heading and we can even shrink this and here we'll have a flex container and below it will have let's say case one and then we're gonna we're gonna build this and then we're gonna copy and paste it so we'll say with a div it's gonna have class names of margin right of two items start and margin top two next is gonna be white and inside this we will have two more divs so this like a lot of wrapping stuff is going on here but this is the classes and the structure that I copied and pasted from the liquid original site this is how they do this so if you don't understand some part of it you can take a look at the code uh for like until you get it so basically and then let's have some class names that is going to be Flex Flex wrap and items is gonna be on the center as well as we'll have a cap of Y of four and then this is where we're gonna have our um so the case one text it's just going to be inside the div let's say case one and it's gonna have really long class names so it's gonna be font medium and then items to be on the center so I think we're gonna give some flex and this is going to be transition all and on Focus we don't have to have an old blind so it's gonna be outline none and then it's gonna be inline Flags FBG dark fill three and then on Hover will change that background color to BBG dark fill of two and there is going to be relative position it's going to be rounded LG and padding X is gonna be four as well as you will have heading y of one cursor pointer and maybe we could say white space no wrap so now let's save this and hopefully it's gonna work and now yes it it works it's working and now we can just copy and paste this case case one so I copied this now I'll say case two and paste it below this and then I will say case three and paste this one as well now let's change the content it's going to be case one case two and case three so this is the output that we got it's exactly the same as here and then below this we would like to have this input output structure where it is basically the example but you only got the input and output not the explanation so we can we can create its own Dev with this structure let's actually cut this up as well so below these test cases where we got here and so text heading so I think it's going to be below this Flex so let's come back to here below this flex and what is this div so it's actually the complete test cases so here we'll have our div with class name of or maybe font to be semi bold and then here we'll have a paragraph that is going to be saying input with pollen and then it's gonna have class names text of small and font is going to be a medium and then margin top is gonna be four as well as text color of white and below this we need to have a div and it's going to be saying the output structure or maybe so it's going to be actually the input itself so it's going to be its nums of so now it's hard coded but we're going to be changing that once we get there so we'll say 2 to the 7 11 15 and the target so you could have a comma and then Target is going to be nine and it's gonna have again some class names they will say so class name it's going to be with or full cursor text and then it's gonna have rounded L key border is it's gonna have a border setting X of 3 and then padding Y is going to be some default value we will say 10 pixels and then we'll say BG dark fill off three and then we will have the border to be transparent the color this color is going to be white and margin top is going to be two so let's save this and do we have now we need to also add this uh output structure below this div it's going to have the exact same classes with the input so it's going to be output and now we can copy this input structure paste it we will say the answer I guess well correlate we'll just put the answer here it's going to be 0 and 1. and that should be it so let's save it yeah this is the thing that we got now we can give some maybe margin bottom to this output or like maybe to this div so we'll say margin y it could it could have like four so now it gave us this uh additional space and yeah so this is the actual the complete uh test case part and the code editor now lastly we would like to add this foot here that we have our submit buttons and for this we can put it's all so we can create its own component so before we build that footer I just realized that I have some typos so this should be Flags uh only Flex not with Dash and that could be with a full because we didn't have that Flex that's why it didn't work now let's save it come back to here that should work as exactly the same width with this one um and also here we can delete this if extra comma and so I think that is going to be it and now we would like to have our editor footer that is going to be our buttons that submit buttons so we'll say editor footer and let's try to import this but before we need to build that and it's going to be inside the playground so I can just say editor footer.sx and I will say tfcd to get the boilerplate and I will just delete here and I want to paste that and you can grab this from the GitHub list I just don't want to write all these CSS classes um that's why I'm doing this here so let's import this icon from the uh react icons so let's save this and let me see if there is anything strange here um so run submit in this console and I think that should be we should be good so we save this and now we want to import this Ctrl b or control space click enter And since this has this absolute positioning it doesn't matter if it is out of the split so or like yeah it's outside of the split and so let's try to take a look at it here and since it is it has the Z index of I guess higher so do we have yes Z index is 10 so the higher the Z index so it means it's closer to screen that's why it's on top of this uh test cases so yeah that should be the complete UI and let me just take it uh just do a quick summary so inside the playground where we had only the preference navbar which was this right we have had our settings and full screen buttons and as well as the language support and below that we have added our code mirror which was a package that we installed uh from the npm and then for the language support we added JavaScript which was also a package and then for the theme we installed the vs code to dark now there is a lot of other themes that you can take a look at from the documentation so I like that part for you for your research and if you want to change it maybe you would like to have some different themes you can do that and so we give this split so that we have our vertical uh split and on top we had our code mirror and below that so the first it is the top one and the below one is the so the second tip is our test cases so we added our test is heading which says test cases and below that we have our cases and then our editor footer that we have here foreign so we also said that this split is going to have the sizes of 60 to 40 percent and minimum size is 60 pixels so this is pixels I guess because when you shrink this it doesn't go it doesn't get like zero height but here if you try to shrink this you can make it until zero because we said that mean size is going to be zero and oops there is something strange going on here so we have overflow and so I just realized this accidentally and that should be from here maybe we could say overflow X so like when you have something like this this problem so what is happening is that this content is overflowing our uh so our flowing our page which is going to be that container that we have here so we can say overflow X so it's X Direction you could say hidden so overflow flux so let's save this and now it should be gone so even though it's overflowing we don't get that um so we don't get that the scroll bar on the bottom so that should be it and now I think it is time for us to add the problems and to render that and then we would like to submit and fetch these data now it is hard coded and also we had this value from the inside the code mirror where now this value could be a boilerplate code so once so let's try to just do this and then I will explain so we can say boilerplate and we can say so open up back ticks and then we'll say function is going to be two sum which is going to have the nums and Target so click enter go to the bottom and then we will click to press the space two times and to open up this uh command and it will say write your code here and then below this you would like to close this function and now let's save this okay so this formatting it should be exactly the same here because we will paste this into this code mirror so for the value it is going to be this boiler kit so save it now once our user refresh this page or once they get to this page they will first see this boilerplate code so that they know what kind of function they should type in and again this boilerplate is right now is hard coded but we would be implementing that soon and we can even close this with this uh semicolon so yeah that should be it now let's take a look at our data handling and for this I have draw some diagram that we can see here and now you might think that we will add all of these data in the database but this is not the case actually I just wanted to mix them and to make it a bit a bit more easier and interesting so we are gonna have both our DB and we're gonna have a local folder and we're gonna have some files problem files where we'll have them each problem in its own file so let's first take a look at our database so we will have edit problems uh collection and then we're gonna have our users collection and for our users we would like to store their display name email their liked problems which problems they liked and dislike problems and so start problems solve problems and when this user is created so this is not actually a mandatory these two Fields but it is just kind of a best practice to have maybe in the future you would like to add the Prof profile page into this application and you would like to show this user has joined let's say like one year ago then you you would like like to fetch that data from this created ads field and then you will have our problems collection for each problem we will have its ID title category difficulty so likes count dislikes count and video ID as well as the link so video ID and Link is optional some of them will have the video solution ID and some of them will not have uh so will not have that video ID and some of them will have the link and some of them will not so it looks kind of messy but like when you click this merge intervals in our original demo it's since it it is not soluble within the this demo that will take you to the lead code original problem as we already mentioned in the intro so this is the code um so this field just takes us to the link where this problem is originally stored it's going to be the lead code link so with this long explanation and so we can go back to our local and in our local we will only have our problems we will not have any users data because that should be as Dynamic that is going to be always changing right they like problems uh each user will have it's going to be changing and for the problems we will have some static data and what is that so the problem statement which is so let's take a look so this is the problem statement so this is always the same we almost never change this so we would like to store this in our local and so so that we can immediately render this portion and then we have our examples also it's going to be for the test cases so you will have our constraints the order and we're going to be using this order to make this navigation when you go to next one it somehow calculates what is the order of this one so it's two when you go to next one the order should be three that's why we have that order and we have that starter code where we just did this boilerplate so this is going to give us so that boilerplates all of these is boilerplate for the linked list problem and then we also have a Handler function and this is going to be the function where we will test the user's code now let's say I came here and I write some code for this to some problem and when I try to submit this this Handler function the this Handler function is gonna evaluate this code if the user uh the solution of user is correct or not and that's why we are going to store this Handler function in our local and then we will have the starter function name which is kind of strange field but I will explain that and it's definitely useful and once we use it I will explain that and this is going to be our database and local uh so the files in collection structure this is where how we are gonna store our data so again why we're having this both DB and local because we would like to have Dynamic data on the DB where the likes and dislikes and maybe the video ID link of the problem will change over time and as well as the users like disliked this start solved problems uh count so for this we would like to have that in our DB and the other stuff we will put them in our local so that was a really long explanation now let's try to First add our problems into our local and then let's work on the DB all right now we can collapse everything and close everything and here we would like to have our utils folder and then inside here we'll have our problems data for this I create problems folder and then we'll have all of our problems here so the first one is going to be two sum I will separate it by a dash so I will say two dash sum dot yes and you need to make it uh like it should have this file name as exactly like this because we're going to be using this 2-sum as our ID so for this I will paste something but before that let's import a new package we will say npm install insert and this package is needed because we're going to be using that to compare if the function that user passed in gives us the correct code so it is for comparing stuff and let's import at the third function let's insert from excerpt and then so I'm gonna paste some stuff here and I will explain that so we'll come back to here in a little bit so here we have our two sum problem object where we have its ID it is two sum we have its title it is 1.2 sum and then so it's so this one is it's uh the problem order so let's say and then we have the problem statement which is going to be a string we will fill here so we'll have our examples it's going to be objects an array of objects or the objects and then we'll have our constraints and Handler function is going to be the function that is going to check if the user has the correct code or not and then starter code is going to be that boilerplate so here where we had the spoilerplate is going to be that starter code and then we have the order for this navigation as well as we have the starter function name which I said that I will be explaining that but I will explain that in a little bit and then so now we have the problem type we use this to make our code save type save so each problem will have the ID title and type of them is here types of them is here so the ID is going to be string title is going to be string and so on and so forth that you can see here our examples is going to be array of example which it is another type each example will have the ID as number input text as string output text as string and some of them will have explanation and some of them will not so that's why it is optional with this question mark and some of the examples will have image and that's why this is optional as well so when we take a look at to the reverse linked list problem it has this image explanation but twosome doesn't so that's why these two fields are optional so the Handler function is gonna take a function a callback function which is the function that users types in so this is the that callback function that when we submit that we send this as callback function all right so that FN so this function is that callback function so I think I said that like 100 times in the last 10 seconds and then it is going to return either so it's going to return a Boolean and this Handler function is either going to be the type of string or the function which you'll see uh once we get there and now for this problem statement this is going to be string and we're going to be taking this from the problem description so here let's come back to this problem statement where we had these three paragraphs and let's copy them one by one we will paste them as string but then we will be concatenating them or we're going to be rendering them as the HTML so just delete all these white spaces that we have here hey guys this is me from the future you don't actually need to remove that white spaces all you need to do is just take all these paragraphs and copy them and then paste it into this problem statement string and then you can save it and then we're going to do the same thing for constraints you can come back to here and just copy all these list items in one go and then paste it into here so the formatting is doesn't really matter because it is HTML and we're going to be rendering that so that should be good and let me see if there is anything that we need to add and it is going to be this uh starter function or the starter code so we can create this by coming here we'll say const Charter code um so maybe we could say starter code for two sum and it's going to be in the JavaScript language so you can either add this or not I'm not gonna add that so we'll say yeah open up our bank text we'll say function and it'll take two parameters which is going to be the nums and Target so that function should have the name as two sum and then here we will open this come here you'll say two spaces write your code here and then close this with semicolon and copy the slider code to some paste it into here so it's going to be referencing this variable and then so what do we need else for the Handler function so we could say uh Handler to some uh yeah that could be our function name so we can come back to here again we'll say const Handler to some is going to be taking a function and that function is going to be our callback function in here we would like to have a try catch if there is any error we will throw that error we'll say Throw um throw near error as this error that we got oops new error and then it will take this error this error could have the type of any and then we might want to say console.log um to some Handler to some Handler function error and inside the try catch actually inside the try this is where the logic is going to happen so here we will have all of our test cases so we'll have our nums array that is going to be an array of arrays so each of these array will be one of our this case nums array so this is let me just actually take this from the as default and then we'll take a look at that so we will also have our targets and then lastly we will have our answers so you can say const answers so it's going to be an array for the first uh so for the first test case we will have 0 and 1 or the second one we'll have one and two and for the last one it's going to be zero and one in here so so in our first example we had this nums array so let's take a look at so it is 2 7 11 15 and Target is 9. so 2 7 11 15 Target is 9 for the first one right and then answer for the first nums was zero and one so if you take a look at the output this is zero and one and for the second one we have we have three two four and Target is six and the answer was one and two so three to four is our nums array our Target was six and the output was one and two that we can see here so this is what it is each index so the first one all of these first one is going to be uh related with each other and then we will take all of these uh nums so we'll say four let I starting from zero and we will Loop through these nums and for each of them we will call this uh test cases with the user's function and we will pass the Target and then we will check if the result is equal to is equal to this answer so this result is what we got from the users code so let's just type it result is the output of the user's function and so the answer is the expected output so we check it here if there is if this is correct we will at the end of this for Loop we'll say return true but otherwise it'll throw some error we will fetch it and we will return that so I know it is kind of uh actually it's pretty complicated but um let's just quickly Retreat so we have our Handler to some function this is gonna check if our users has the correct code so it checks if the user has the correct uh answer or the correct code so this is gonna take a callback function so this FN FN is the Callback that user user's code is passed all right so this FN is user's code and we got our test cases so this first one for our nums and the target is 9 for this array and the answer is 0 and 1 for this nums and Target and these is for this all right and this one is for this I think you got that part and then we are looping through all test cases the loop all tests to check if user's code is correct so result is to n was the function that users code right this is the user's code inside that code we pass this test cases and we got a result and then we check if it is equal to so the answer is equal to that result and if so we will at the end return true otherwise we will get an error so basically this is what we are doing here okay so now that we got ours through some file um now we are ready to render this but first let's just create all of our problems into our this problems folder for this I would like to come here into this problems folder I want to have my next problem which is going to be a reverse length list dot yes now I will paste the code for here and let's just explain that and before that let's just uh take this problem type so cut this from here inside the two sum and inside utils let's create a type folder so let's say the problem and that yes so let's paste it and Export this type uh from here save this file and then come back to into two sum let's import these from the clips and okay so now this file doesn't have any errors so save this and so we can close this and come back to here inside that now we are importing this problem type as well so let's first just take a look at here so we have our reverse linked list uh object that we had for the twosome just like that so we had our two sum object and now we have our reverse link list object so this is going to be the problem data here so we have the ID title we have the problem statement which is just a basic or the normal a paragraph or the HTML that we're gonna render so we have our examples and so here we have something additional which is going to be the image which I will provide you in a minute and then we have our other examples which has ID input text and output text and then you have our constraints which is again just a normal uh so to say list items and then what do we have we have our Handler function that is going to check if the user's code is correct or not we have our starter function so starter code which is going to be that boilerplate so if it let's take a look so this one and in our demo if you take a look at it so this is going to be this portion where we have first the kind of explanation the output so the input structure and then the function name so this is that boilerplate code and then we have our Handler function so we have starter function name we have the order so let's just take a look at this list item and here we have this class because it is going to be rendered as HTML so it is not class Name by the way we should fix this inside here as well so select all these class names by clicking Ctrl D and then just delete that uh so the name portion so now that should be good uh we can close this to some in here the Handler function is reverse linked list JS function so it reverse and cost Handler so what is happening here is that we have some tests so this is the input linked list and the answer is it is in reverse order and so we have create linked list function and it use this class set we just initialized it is because JavaScript doesn't have um so the link list data structure by default this is why we add this linked list class to emulate a linked list in JavaScript so JavaScript doesn't have a built-in linked list class so we'll create one and what this does it it creates a linked list a linked list from an array so here we call this creating this with the test of let's say the first one so it creates a linked list from this array and then so what this does it just get returns an array of values from a linked list rate it returns an array of values yes this values is array and so it returns an array of values from a linked list and let's take a look where do we use this so get list values from the results whatever the result is and then it Compares it with this answers the so whatever the I is so it's going to look through all these tests and answers if there is any error it'll uh so it'll throw that error and it will catch that in the front end and also if there if all of them pass so you'll return true um so this is basically this file the idea the logic is exactly the same as the previous problem which was to some but the implementation details is a little bit harder because as I said we need to create our own linked list class to emulate uh dell includes data structure so with this now we can save this and now let's try to add our SEC so the third problem which is going to be Jump game that yes so now I'm gonna paste the jump game problem here so again the same idea we have the ID title problem statement which is HTML and we change this class names to class and then we have our examples we have our explanation um inside this examples input output text as well as our constraints uh starter code which is going to be this boilerplate code and then we have our Handler function starter function name and then the order so the Handler function let's take a look what it does it takes the user's callback and then it has some tests and depending on that it'll either return true or false so this one is relatively easier than these two other previous problems and if there is any error we will throw that otherwise we will say true which means that the user's code is correct so and I forgot to give you the images and now let me just do this so inside the this utils problems folder we will create our images folder and now I will copy that images and paste it and feel free to get them from the GitHub repo so now I have pasted them we have the reverse linked list image and then we have the search 2D array or the Matrix and then we have this other image these both images is for this problem that we have this image and then we have this one and then what are we doing here is that we are importing that example from this images folder which is the reversing list jpeg and then when we provide it into here we say example.source so this is how it works it all reference to that image and now we added our Jump game problem as well now let's add our fourth problem so which is going to be the valid parenthesis valid parentheses so we'll say valid Dash parent disease dot uh yes so I copy that I'm gonna paste it so again the same thing ID title problem statement examples and constraints Handler functions Sutter code which is going to be the spoilerplate we have the Saturn function name and then the order and inside the Handler we take again the Callback the user's function and then we Loop through this test with the answer we check if all of them passes if if so we will return true otherwise we're gonna catch that error and throw that so save this and now the last problem which is going to be so it should be search a 2d metrics let me just actually copy this name um like this and then come back to here a create new file dot yes and now I'm going to copy and paste it so now I paste it and again ID title problem statement examples we have images which we are importing that as example one and example two and these are these images and then we have our boilerplate code uh as always and then we have Handler as well as the starter function name and then the order so inside our uh so we can delete this console log inside our Handler we are again looping through the tests and answers and we are checking if it eventually it's gonna return true or it's gonna uh throw an error so with this I think we are ready with our problems local data that I showed you in the diagram and now we can try to render that in our code editor or like in the problem page so for this we would like to go to inside SP ID and here we would like to do um so first we want to fetch that data that we just created right so we need to attach the HD local data and for this I want to use something called Static site generation and what it what it really means is that so SSG so the pages will be pre-generated on the server so when we take a look at our demo so let's go to home page and now if I try to go any of these problems Pages it is not going to have any loading state it will immediately render something to the page so it is going to be like super fast so when I click the jump game so do you see that everything is already rendered because that job is done for us in the server when we build our project so when I go to the two sum page so it's all already built it already rendered and so there is only one loading state which is going to be to fetch these data from the firestore so this is where when I click this do you see that for like one second it has that loading State and this is the client-side fetching and static side generation in like we mix them so to use static side generation in next.js we have two different functions the first one is get static pads so get static get static pads so what this does is it creates us the pads that should be um it's gonna give us the dynamic routes that should be pre-generated uh on the server so for this so let me just type actually and then let's say export so it's going to be an async function and it's going to be get static pads so here we would like to have our pads and it is going to take who's going to be a ray actually and then it'll have objects so let me just type it so we'll have cons to pads and we will use object.keys to get the keys of that and actually we didn't build it okay so inside these problems I want to have an index uh index.ts so here I'm gonna export all of these uh problems so for this I'm gonna say export const problems and then it's going to be an object where we're gonna have uh so let's say the idea of the problem is going to be two sum and then it's going to be to some problem that we are exporting from the to some uh file so this is going to be that and then for the reverse link list we're gonna have this object reverse link list for the jump game we're gonna have this constant and so on and so forth so let's go to inside this index and then now we're gonna have that reverse uh linked list we're gonna import this and then we're gonna have the jump game so let's put this comma here and then we will have the jump Dash jump Dash game and it is going to be that jump game constant and then we're gonna have so search a to d so what did we call it search a 2d Matrix and then we will import this especially 3D metrics not the Handler but the function itself and then eventually we will have so I think we skipped one which should be the valid parenthesis so order does matter really uh we could put it like this uh so we could put it like this it doesn't really matter because this is an object uh not an array so now uh we can create a tip for this so we'll say export or actually we don't need to export we could say interface so basically interface is the uh generally used uh in the same way in an object uh of course there are some differences uh but uh it would be I think something like Advanced if we take a look at that for this I'm just gonna show you how you use interface so for this I'm going to create an interface of problem math um so what it really means is that this problem is gonna have the key as string and then the value as the problem type which we're going to import from the types and now we can say this problem is going to be the type of for the its interface is going to be the problem map so with this you are ready and now we'll say object.keys we are going to get all of these keys in each of these Keys is going to be our one of our route okay like do you see we have reverse linked list and then so this is that for Traverse like this we have two sum Jump game right so we have two sum we have Jump game so we are giving this Keys into our static paths so we are saying to this function you need to pre-generate Pages for these routes okay so so far we have only five of them so we're gonna say object.keys we will say uh the problems which is coming from the utils problems not from the mock data and then what are we gonna do so we will try to now we need to map this to get an array and for each key we will say uh we need to return an object actually so that object is going to have the params field and then for this prems field it should also be an object we will say the PID is going to be that key and PID is so it is PID because this is what our file called and then we'll say key and then at the end we will return an object so we're just going to be the paths and it's going to be like this for the pads we are returning this array or we can simply put it like this and then for the fallback we will say false which means that don't um so when we go to a page so let's say we have the jump game too since we didn't give this Jump game 2 to this pads right we don't have Jump game 2 here so fallback means means is that if you got a URL that is not pre-generated return 404 now Jump game 2 is not inside the pads array if I try to go there go there I will get this 404 error so this is what fallback means and then now that we got our pads we need to have another function which is going to be get static props and it basically fetches the data so I will say export async function it's going to be get static props and it takes some prams and you'll see what it what it is so inside the prems object we have the URL which is going to be that PID so we can restructure that we'll say PID from the params and then what are we gonna do we will try to fetch the data so it will say const beta or maybe we could say the problem and it is going to be that problems so problems uh to PID and now what we did so when we go to the twosome page Okay so Dash to some like this when we go to to some page so that PID is now the two sum and from this problems object we are fetching this to some which is going to be that constant that object and then now we are we are going to say if there is no problem okay if we couldn't find it we will try to return not found to true to give 404 error but otherwise we will say return an object which has the props um so Props and it's also going to be an object and here we will return the problem which was this data and now we can take the problem from here and we can surrender that data so here we have some typescript errors for this params we can give a type or maybe we can immediately say that this cramps is going to be an object that has the fields of paramet and then it's also going to be an object with the PID to be the type of string and so we got out of that error and now let's try to save this so this problem is going to be what we are fetching in our component or the page so we will say get the problem so let's try to just import this or like console.blog y problem not importing and we can create our type which will say the problem is going to be the type of problem that we had uh problem so import this now let's try to see that in our console so go to localhost open up our console whatever we're gonna see try to refresh our page okay so we got a serializing error and I forgot to mention you so we have a Json data here right so this problem is Json or like the JavaScript object notation in here uh so Json doesn't expect or doesn't have the support for function okay so function cannot be serialized as Json for this we would like to get this problem dot Handler function which was function right so it was type of function and we want to make this string so let's take a look at that and let's go to inside the valid parentheses so that Handler function is actually a function that you can see here and now we we convert we are converting this to string to get out of that error and inside our types into the problem we said that it's either going to be a type of string or it's either going to be a function this is the reason uh why we are doing this so let's go back to our PID and then so let's save it again to get rid of that error and now in our console we see that object and now we have our constraints examples Handler function and all the other uh related data so here what I would like to do is so we want to put this data into our workspace right so let's just uh properly link that so it's going to say problem is gonna be the problem and let's go into the workspace so we will take that problem and it's going to be it'll take the problem as a type of problem and first let's build to maybe the description side so the left side we will say get the problem it's going to be this problem so we are still passing this prop and open the problem description we will take a prop which is going to be the problem as type of problem um so that should be the problem coming from the utils and then we will um restructure this and then now what do we have here so for the problem title we can basically say that it's going to be a problem dot title and then what do we have else so difficulty we'll get from the database uh even though we can put it into the problem object so let's say here we could also put a difficulty as like the medium or basically we could put the difficulty here but I want to put it into DB and if you want you can put it into this object as well and now what do we have else so this is the kind of like this icons and so this is the part we're all gonna have our problem statement so to render a string is HTML we could do something like something called Uh set dangerously inner HTML so for this so we had three paragraphs which is the exact same object that we had here so inside the object uh constraints or the problem statement so it is this um so this paragraph has one string and then we can delete these three paragraphs and we'll create a div self-closing div and it's gonna have set dangerously um so it is set inner dangerously set in HTML I'm sorry so this should be that prop name and then for this we will put the problem that problem statement now if we save this and what is the error string is not assignable so that should be so that should take also an object with this HTML tag underscore underscore HTML and then problem dot problem statement so that should be this structure inside the self-closing tag we have digital C set in HTML value or the prop and then we have an object inside that object we have the HTML as the key and then problem dot problem statement as the value so save this come back to here and so we don't have reading type title why is this so it should be some error from this or maybe a problem that title uh so let's just optional changes to get error but maybe we didn't save this okay we didn't save the PID that's the error we are getting so now okay now that we got our problem title that is coming from our object and we are rendering our problem statement now let's do the same thing for our examples so for this I'm going to come back to this example section and actually I'm going to delete this example to in example three and then so since this is this hard-coded I'm just gonna actually put this from here and then what I want to do is I will say problem dot examples and then map so examples dot map and get each example with the index of it so what I want to do is to return some jsx so I'm gonna paste that thing that I just copied and I will give it some key which is going to be the example dot ID and then like we have example and then number of that example so it is one two three whatever it is so I'm gonna say um actually index plus one and it is because index is starting from zero so it's going to be increasing at each time so it's going to be one two three etc etc and then in our input section I will cut this from here and I will say example type input actually it should be input text and then for the output we're going to do the same thing we're going to say example dot output text and some of them will have explanation and some of them will not so I'm just gonna cut it from here and then I will say example dot explanation if there is explanation then I will render this portion which is going to be inside the react fragment and it will take the strong tag and then for the example section we'll say example.explanation um so now we can actually save this and this is going to be the thing that we're seeing here so we have the input output explanation um examples with the count as well well as the problem statement that we already insert and now actually we can do um so you can even add our images so we'll say if so below this paragraph we're gonna say example that so it should be image if so what I want to do is to return an image so it should be image actually I want to go to next line so I will say image and for the source it's going to be example what should be actually so example has the image so you could just say example that image because it's already having that source so now save it and now if we come back to the reverse link list so we should be seeing this image and maybe we could even give it some um actually yeah we could give it some margin top right so I want to say a class name is going to be margin top maybe three let's take a look now I think it's it look it looks good and maybe you could go to the next one which was the search 2D metrics and now we have our images and it looks actually pretty pretty cool and the one thing that I just want to mention inside this problems folder we had our index.tsx and for the problems I said that we should have the their file should be exact same as this URL but this is not the case because we are taking this URL inside this PID page so the PID page right we are taking that PID from the URL and then we are associating this PID with this problems object which is going to be this index uh page so right so this this object should has should have the exact same IDs so if this is two sum then we are going to come back so once we get to this two dash sum that URL will see this problem and now if we go to valid parentheses so let's just copy this and paste it here and we're gonna see that problem otherwise we're not going to see that because we uh so we related them in this PID page and with this now what are what do we want to do to add our constraints so I'm going to come back inside the problem description so we have our constraints which is going to be to this list items I can cut one of them or actually I can just delete all of them right uh so I believe we had them in our list items yeah the HTML is already there so all we want to do is just render them so we're going to say if would be one div and it's going to be closing tip because if you want to do that that we just did above what it was um so this thing dangerously said in HTML because uh is a string that we have so this is the string that we have and it is already in HTML right we want to take that string and render render it as HTML so I'm gonna paste it and that was taking an object which has the underscore underscore HTML and for the value it had the problem dot constraints so let's save this now let's take a look so we got our examples uh I'm sorry we got our constraints and actually we can give it some margin y of uh maybe four so it'll take that spacing for us and it didn't because that should be uh she already has it actually so margin five we already have it so we're gonna see margin y of maybe eight so let's take a look in our inspect uh so it should be this um so not this one but yeah actually it should give us margin bottom right so it doesn't give us for some reason um uh so maybe we could say padding bottom of three or maybe two let's save it okay now it looks better it's for some reason it doesn't give us margin y maybe some overflow is happening but I don't care I want to say just padding bottom of four now it should work all right um so now we want to put that boilerplate code into our code editor for this I'm gonna come back to our PID so we got our problem and then I want to send this if I already send it into the workspace and now inside the playground I'm gonna also send that problem which is going to be this problem that we're taking and inside the playground we will take that problem as a type of problem that is coming from utils and then I will say just get that problem for us and delete this boilerplate and now I can say problem dot boilerplate or maybe it was started coach right now save it and save this one here and now we got our valid parentheses for this problem now if we go to the twosome you will get the two sum right that's other code for this and now we can work on this test cases and it was inside the playground um so we had our text setting and so that should be that cases so I'm gonna delete all of them actually so cut this from here or maybe just delete it and get this so wait um this has okay okay so so they has exact same structure so we can delete this we can delete this as well then I can cut this cut this so this one and then what I want to do is to say problem so like problem DOT test cases or maybe it was the examples right examples.map get each example and for this I want to render that thing that we just cut so I'm gonna say for the key it is going to have the example that ID and what do we have like this one and that should be case idx or mu index plus one we got our this is going to be that kind of heading that we have here how many test cases we have so for the maybe reverse link list so we have still three of them for the jump game we have two of them right and then now here this is where we are getting this input output structure so we have our input text and then the input itself then we have the output and then output itself um so this is going to be kind of a dynamic part where we're gonna when we click one of them it is going to be changing depending on which test case that we are currently at so maybe we could add that functionality later actually let's just implement it right now so inside our um so it is playground so maybe we could have a state that is going to say the current or maybe the active test case so we'll say active uh test case ID and then we will say set active test case ID we will get that from the reactive State and it's going to be type of number and also it's all the thing you state and initial value is going to be zero that is stating that when the user first comes to this page it is going to be showing the first test case and then okay so now we can save this and come back to here what are we gonna do it here is that whenever we click one of them so we should have maybe an on click so on click function you want to say set active test case to that current index that we are so the current test case right so if we click this now the test case is going to be zero when we click this the test case is going to be one right the index of this one is zero and this one is one so now we can save this or maybe before that inside here we're gonna say so you can delete this and you're gonna say problem dot examples um so should we get this from the index right and then we will get that input text and we're going to do the same thing for this we're going to say problem uh problem dot examples we get the active one and then show the output text of it now save it and now it's going to be dynamically changing so let's just refresh the page so in the initial load our active test case was zero right and so when we click one of them so when we click this it's gonna be one right so since it is one it'll show that uh the example one right so this one is zero and then this one is one so when you click this the nums is gonna be these numbers and the output is going to be this output and in the initial render we're gonna see the first example right so let's go to another one so it may be in the two sum so first when we this page is rendered it's going to be showing that first example the input and the output that you can see and when we click this now the active test case is one so it's going to be showing that content and then for the next one it's gonna be um so the example three so this is how we make it dynamic so one last little optimization that we can add to this test cases place is to show some kind of indicator to our users um to know them like which test case that they are currently looking at So currently I don't know if that was the case one the case two or the case three that I am looking at here so for this you can use uh that state so the active State and depending on that I would like to change the color of this text color right so I'll come back to here inside this I'm gonna change this uh with a back tick and I close it right here and close that Curly braces as well and now I'm gonna say actually Copeland can write it for me so I'm gonna see if the active test case is equal to this Index right um so if this is the current test case that we're currently at so maybe you could change the text color so I'm gonna say text uh maybe white or maybe let's say gray 500 otherwise it's not gonna add any class it'll be text right so let's save it and now let's take a look at it here so actually let's make it in reverse order so we're gonna say so normally if this is the active one we're gonna get the text to White otherwise we'll say text um gray 500. now if it is the active one we'll see it as white and otherwise we're gonna see it as this gray color so now our user is know that he is looking at the case one case two or case three okay now with this I think we are ready to take a look at our database which is going to be that diagram that I showed you now we added our local face where we had the problem uh so the problem title ID problem statement examples with test cases we got our constraints order starter code Handler function and starter function name so these three of them so this certain function name uh Handler function in order we haven't used that yet but we're going to be using that soon and now this this is going to be the DB part which is going to be our so to say the firestore database and here we're going to have two documents one for problems and one for users so for this let's go to the Firebase console so I am at firebase.google.com and then I am gonna go to the console so I'm going to click this and I'm gonna find that project I will click that as well now inside this build you should click this firestore database which is going to be our real-time DB and then here we'll we're gonna say like create the database and we want to start in test mode so we will click that the thing in the bottom at first so it'll allow you to read and write for the until next month but you should be changing this once you get your application to the production which we're going to be doing that at the end of this tutorial so for now let's just um continue with the test mode so let's click the next and the cloud first or location could be the one that is closer to you so I am in Europe so I'm going to click that and I'm going to enable that so now let's wait for a second foreign so now it has been initialized for us um so this is our panel view so to say and now here we can see our usage our rules and the data that we have here so so far we don't have anything but we can add our Collections and um inside that collections we're going to have our documents right so the users is a collection and each user is going to be a document so this is kind of uh in the same structure with mongodb if you have used it before so this is kind of like not no SQL and it is like document based database so we could come here and manually start a collection we would say the collection ID is going to be that problems and then in the next so we'll see the like document ID so each document is kind of like a row in SQL database so now the first problem is going to be that two sum and then if we take a look at this Fields here we have ID title category difficulty likes dislikes video ID and like the link so you could add all of them manually so that would be for the ID it's going to be let's say type of string and the value is going to be two sum now let's add one more field that is going to be the title the type of string and then it's going to be one point like two dash sum or maybe two some and then for the category we would have uh it's going to be type of string and then it would be in the type so the category of array so we could add all these fields and then you would save it and we would be doing this for all of all of our problems and like for all of our users but this is not what we want this is too slow and not user friendly so for this we would like to add some kind of dynamic form in our application and once we submit that we would have that data in our collections so or like in our database so for this let's go back to vs code and let me show you how we can do this so before we get going just click cancel to cancel this process so this HTML form is going to be something that we're going to be using only once and so for that reason you can put it wherever you want I'm gonna put it in our home page and we're going to be deleting that soon so at the very bottom of our main tag I'm just gonna come here and I'm say temporary form and then I'm going to create a form element it's not going to have any actions the inside is going to have some input Fields so it's the first one is going to be the type of text and the placeholder is going to be problem ID and then it's going to have the name field which says ID we're going to be using this name field once we use react use State and if we take a look at our um so this diagram that we have here so we have the problem ID title category difficulty likes dislikes the video ID and Link so this video idea was the solution ID and Link was that it tooks us to the original problem only code so we're going to be adding all of these and for them we would like to have input Fields so we got our ID now let's just duplicate this where we're going to have the title that says problem title or maybe basically title and it's going to be the type of text we're also would like to have our difficulty category video the link and something that I forgot to mention you would also like to have um so the order of the problem right so let's just say order because when we um when we populate these problems in our home page as you can see it starts from the first one and then goes to the very last one right so it has some kind of order and this is so this field that we are using that to make it go from in ascending order so that's why I wanted to add this um so to say the order field now let's do so this one is going to have the difficulty right so if you're gonna have the placeholder as difficulty and then it's gonna have the category so I can just copy this and paste it and after that we're gonna have the video ID and it's gonna have the link the video link or the problem like I'm sorry so also we're gonna have the order um so for the link and video ID we can put question marks to show them like it is optional right sum of problems some of the problems has video ID and all of them don't and some of them has links and some of them don't so let's just change this put the optional at the very bottom and then so to submit this you would like to have a button that says save to fire store or like save to a database whatever you want so now let's just save it and take a look at in our demo um so we can have any slides so let's just give it so we would like to make it so give it some paddings right so padding maybe six and then Flags Flex column to put them vertically and then maybe Max the width of small as well as the gap of three so save it come back here um okay that looks cool but we don't see that button so let's just say um class name ads and background white Maybe okay so that looks good to me because it is temporary anyways so we would like to have now state for this right we we need to like when the user types something in we just like to put at whatever that event right we want to save it um so for this let's come to here and we're gonna say use State um we're gonna say we'll have some inputs and set inputs it's using use State and initially it is going to be an object so we will have the ID of the problem as empty and then we're gonna have the title the category difficulty and then you will have the so let's say the video ID and then we will have a link we will have the order so for this we can just say zero because we're going to be mutating this anyways and then we will have the light and it's like straight this is going to be so we don't even need to type in the likes and dislikes count because it's going to be zero anyways when we first built the problem um so we don't have anything missing right so we have the likes dislikes or their link video ID and everything okay so now when we type in we would like to call that on change event on all of these so let's just um select all of them and then let's add on change Handler so we'll say handle input change I'm going to create this function above click here because handle input to change it's going to take an event this event is going to have type of react change event with HTML input element and then here what we'll like to do is just set inputs right oops so it's going to be set inputs it's going to be taking the previous values and only be changing the one that we are typing in so just just to show you that we're doing this correct so let's console.log the inputs now here open up our console and now problem ID is let's say two sum so it's only changing the two so I'm now the title to some problem so it didn't change the rest it only changes the one that we are typing the order is two let's say so now it has that order field changed and as you can see order is now the type of string we would like to make it um so we would like to make it type of integer right but before that now let's say we type everything here and then we want to just submit this into our database so for this let's go to Google and type add data to firestore so I just typed in add data to firestore and I'm gonna click the first one so this is gonna be the Firebase documentation and we already initialize our Cloud firestore we would like to actually add a document into our database so here it gives you some methods some Alternatives they were going to be using the first one which is this set document method and in this case you would like to so you actually need to provide the idea of the document but if you would like to have it auto generated you can just skip that part and use this method which is the add document and in this case we would like to add this ID because I think we're going to be using that in in the upcoming sections so I just want to copy this and then come back into the vs code where we would like to create a function when we submit this form right we will say on sub submit actually handle submit and then Nintendo submit is going to be a function handle submit which is going to be an asynchronous function and then first you would like to prevent the default uh so that it doesn't refresh the page prevent the page refresh rate and then what you'd like to do is just paste that line that we copied and then the set argument import that from Firebase firestore import this document method and then EB is going to be our firestore that we got from our so once we initialize that right that's why we initialize this we got our firestore so like the firestore database and we export this now we are importing that from here and we're going to be using that and then inside the collections it's not going to be cities actually it's going to be the problems uh collection and then ID we can say can I be inputs.id and for the data we could actually put that inputs but what we would like to do is we want to convert that order field into integer um so actually it's already initial rate we didn't so it is integer here but once you type in something inside this input field it's by default going to be a string so that's why we would like to convert that into so integer right so convert inputs dot order to integer so for this we can create a new problem so we'll say the new problem object it's going to have all of the inputs filled but we're going to say order is going to be now the type of integer and so we can either use this or we could say like number and put it like this and then you'll say new problem so we got our new problem which is this input that we just created and then we change the order now we would like to save it into our database so after this let's alert and let's say save to DB save it now come back to here so in our database we don't have anything and let's just fill this fields and for this actually I'm going to be using that the mock problems data that we got here so this is going to be our ID right so I'm gonna paste it and then come back to here so I'm gonna copy this so it's going to be easy category of array order is going to be one and actually I can copy this video ID and come back to here so that the title is going to be one point Dash so two sum and then the difficulty is going to be easy category is going to be array and then order is going to be one video ID is going to be this string it's not gonna have any link because we can solve it in our project right when you click this it allows you to solve it uh from our demo but if you have a link that would take you to delete code original problem that we got in this case this problem and so let's take a look at this and we put all of our data we can skip this link it is optional anyways now save the database it says save to DB now let's come back to here refresh our page so now that's great we got our the problems collection and then we got our document right which is the two sum and then we have the category of array difficulty of easy zero dislikes zero likes the idea of the problem link order title and then video ID so this is basically how we add a data into our firestore database and now let's just add if you rest of the problems which is going to be in total 10 problems so let's come back to in our home page and then come back to in our vs code inside the mock problems we have the reverse link list right now so we can get the problem ID from here and then we're just gonna be pasting that into here and then for the title is going to be two dot um so the reverse plane so reverse linked list and then difficulty is going to be hard category is going to be a linked list and then the order is going to be two uid and Link maybe empty for now we don't have we don't have it in our original demo as well so as you can see the solution is coming soon and then it doesn't have a link when you click that it takes us to our demo application slash problem slash reverse linked list so we're gonna skip this part and save to DB and it's been saved now it should be real time as we can see we got the reverse link list all the data that we got here now let's just add the rest of them I'm gonna be actually fast forwarding this video but this is how you would like to do you will take a look at here actually so we got the problems as here so I did title difficulty category and then the solution but most importantly you can take a look at in these problems or like the mock problems file you would like to get the ID copy it and paste it into our so let's just refresh this so paste the problem ID problem title and then to get the title copy this and once you paste it just put the order in front of it with that Dodge so that you can get that complete uh title and then you would like to put the difficulty the category which is going to be actually medium so it was the category it was dynamic programming so dynamic and then you would like to put the order video ID if there is inside the small problems if not just skip that and then um so if it has link put that inside here if it doesn't skip that as well and then just save it and now you would like to do this for all the problems and each time it should be adding that into our documents or like inside our database now we got the jump game with the all the data that we just give so this is how you would like to do and now I'm going to be adding all that 10 problems and then come back to so like continue the video so I have added all of the problems into our database and I just I just want to show you for a second all of them so that you can pause the video and just compare it with yourselves and then so like the first one or actually the ninth one we got the best time to buy and sell stock it doesn't have a video ID the order we got S9 we got the link that will take you to the original problem on we could and then likes dislikes the ID difficulty the category so it is going to be the same for the rest of the problems so you can just pause the video and take a look at them so this is what we got the jump game DP problem maximum depth of binary tree so we got the video ID the link as well so we got the merge intervals we got only a link not the video ID and then reverse link list we added this search a 2d metrics um subsets which is a backtracking problem then we got the two sum as well as the valid parentheses um so there might be some little bugs that I maybe accidentally added so like missed information here um if I realize that I will be updating that in our upcoming sections so with this now that we got our problems we can actually populate it in our home page so first things first I would like to delete this form it was temporary anyways we're not going to be using that again in this tutorial but let's say in the future you would like to add more problems into an application that would be one alternative to doing this do it like adding the problems um so since we deleted the form we don't need this handle submit handle input change and then this use State values so we can delete all these in this Imports as well um we can have used it because we're going to be using this now the next thing that you would like to add is some kind of loading state so in our original website Renault users refresh this page like in the initial load for one second they see this loading State and then once it fetches the data it'll replace that loading state with this um so this table so for this we can use something called loading skeletons and table and CSS covers that in flowbyte.com so they just have this really cool looking uh skeletons they have the default image placeholder like the video placeholder text placeholder and a lot of stuff so I just played around with this CSS classes and eventually I was able to came up with this uh design here we have an like circle on the left and then three rectangulars on the same line so for this I'm just gonna come back to inside vs coach I will paste that loading like the loading skeleton which you can find it from the GitHub test and then depending on this we're going to be like depending on the loading State we're going to be showing this so here we're going to have a like state that says loading problems so loading problems and then settling problems and initially it's going to be in the state of true and then below this div we are gonna show our loading skeletons depending on this state so if it is loading the problems then we're going to render some HTML which is going to be a div it's going to have some class names and inside it's gonna have the loading skeleton but it is not going to have only one of them if you take a closer look at here we're gonna have 10 of them right so each of these so each this line each skeleton is actually only one of this component so we would like to Loop through this 10 times so for this we're not going to have only one of these but actually we're gonna create a loop that says 10 times of this array destructuring we're gonna map this for each of them we are going to render some actually we're going to render this sliding skeleton we're gonna cue we're going to give this key as the index for that react would be happy with us now if we just save it and take a look at our localhost we got this skeleton but it is it doesn't have that pulse animation so just to add this we can come to here we'll say animate pulse save it so now we got this pulse animation as we can see and now all the thing that we need to do is just Center this for this we're gonna add some more classes which is going to be Max width of 100 so like 1000 and 200 pixels and margin is going to be Auto margin X is going to be Auto to Center that and then we're gonna have like smaller screens and above we're gonna have the width of seven to twelve and then like normally it's gonna have with over full and I think this is all classes that we need save it and this is what we would like to see and now with the loading problems was false it is not going to show that loading state so let's just put it into the true state which is going to be our initial state and inside this table now we are gonna be only showing this table hat if you are not loading the problems right now you can just cut this and then you'll say if it is not loading the problems then just render this portion and just paste it and now if we save this and it is not loading the problems let's say actually that should be it is not loading so right now it's loading right so if that was false and it should show this uh some exchange is going on here so if let's see this is true um so we got both this and then this this is this shouldn't be the case actually it's coming from the problem table okay okay my bad so we're gonna go inside this problems table where we're gonna have fetching our problems and we're going to be changing this that problems um so what that lighting problems right just copy this and paste it we're going to be changing the state inside our problems table component so open this and here what we're gonna have is you would like to get this set loading problems and it shows that uh it's not going to be actually optional but it's going to be the type of reacts patch and it's going to be in the type of Boolean so we would like to get that it's uploading problems save it here save it from here and then now here is going to be the logic that we're gonna have the logic to catch the problem so for this I actually would like to do some abstractions where