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

**Creating a Firebase Database Account and Adding Rules**

Firstly, we need to create an account that I already have. I'm gonna say John crypto and login, and as you can see we got data so we already solved these problems and so yeah this is what we have.

Next, we're going to add our Firebase database rules to make our application a little bit safer. So, for this, I'm gonna go back inside the Firebase so firestore database, go to rules. Now, when we initialize the project, now we are in the development mode where we allow read and write operations for all the operations to be honest, until we're not in the 23rd of May, so we will allow read and write operations.

We would like to change this, so I'm just gonna comment this out and I will write my own rules. So, first of all, we would like to just allow our users to read user documents if and only if they have been authenticated. So, I will create my comment and I will say "user documents can only be read and written by the authenticated users". Now, I will try to write my rule.

So, here is my rule so first we're going to say match, and then we're going to say the users collection, and then we can pass here a dynamic value which I will say user ID. But you could just add user ID, hello, it doesn't really matter. So, here I will open up my curly braces and I'm gonna say "Hello read", right, comma, and so like, Colin if request dot oauth is not null. So, if the user logged in, if user is authenticated and the request but oauth dot uid is equal to this document ID. So, what we have is going to be each document inside users collection. If the user is authenticated and its ID is equal to that I so the document ID then we will allow to read and write operations.

So, I will just tap this inside and now we would like to have one more rule for our problems document. So, I'm gonna say "problem documents can be read by anyone but it can only be written by authenticated users". Right? This is going to be our database Rule, so here we just allow for all users if they logged in or like they logged out they can read the problem they can see the data but if and only if they logged in then they can like the problem right?

So, this is how it looks like. I'm gonna say "match" the problems uh collection and then you'll get a problem ID and open up my curly braces so tap inside allow read if it is true so it's gonna just work in any case and allow right if so colon if the request dot oath is not empty.

**Publishing the Database Rule**

So, now I will just publish this. Now, it's been published and changes can take up to one or two minutes and then so if we just take a look at it here, the so it's been published. It's going to be effect in our application and inside this versatile dashboard we got three different domains and I think I like this one the most.

So, we have the GitHub repository name and then dotversal.app. So yeah, this is the end of tutorial to be honest, and now you can add a lot more stuff into this application. You can expand this problem list or you can just feel free to add your solutions by the way. Into the solution tab where when we click them you will get to my YouTube channel but put your YouTube video IDs into that solution that I showed you in the previous sections.

So, maybe you could add a like the user profile page where when you go to that user profile page you will see all the problems that the user solved and like the um problem submission history which problems did they like they disliked. And maybe you can add a comment section to each problem where users can add their own Solutions with the explanations. So, really a lot more stuff infinite amount of uh so like the possibilities you can add into this project.

**Conclusion**

And if you do that just let me know in the comments and I would like to see your versions. As always, if you like this content and the project and it helped you just feel free to like And subscribe it really supports the channel a lot. If you have any problems any bugs any any stuff that is not working or you would like to just learn it from me or our Discord server just click the link in the description below you can join to other developers who already built this project and you can learn from them.

And I will also be there to help you out. So with all this, I really thank you for watching this tutorial and hopefully I will see you in the next project

"WEBVTTKind: captionsLanguage: enin 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 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 I'm just gonna say const problems and I'm gonna call my hook which is going to be use get problems we're going to create this and I'm just gonna call this hook it'll give me the problems so I don't care about the implementation detail let's say after like one month two months later when I come back to this project I just when I read the code I just like to see how it fetches so like where it fetches and not actually how it fetches so for this I'm gonna also paste it on this that loading problems so that we can change the state inside this hook and now I'm gonna create this hook below this file where I'm gonna say so it is going to be a function called use get problems and it's going to be taking that satelliting problems as the first parameter and then inside here we're gonna return the problems and these problems is going to be actually a state where initially it's going to be an empty array and once you fetch it we're gonna change it with the original problems so since we are talking about the fetching Logic for this the only thing that we can think of is going to be use effect in react so we're going to be calling this on like the initial Mount so for this I initialize my use effect like this and then here I'm gonna have a function called get uh maybe the get problems like this and it's going to be an async function and I'm going to call this function to execute the code inside so this function is going to be the um the function that we use the fetching data logic right from the firestore so here initially the set lighting problems is going to be true since we are trying to fetch the problems and then now I don't know how to fetch the data from Firebase right so for this I'm going to come back to Google where I'm going to just type get data from firestore so I'm going to click this so we already initialize our cloud firestore and the thing that we would like to get is get multiple documents from a collection if you remember we had our collection which is the problems collection and we have multiple documents that we would like to fetch them so this this is what you what I would like to do and what they show us is a kind of example code example or like example of a code block so we have a query we choose this collection and it it passes our database which is going to be our firestore and then from the collections it's going to be problems for our case if they use cities and they also have a different query but in our case it's going to be ordered by we're going to be ordering from this uh depending on this order from ascending order right so it's going to go from the first order to the very last so this is what you would like to do so let's just come back to inside the vs code where we're gonna they cost query is going to be a query that we import from firestore Firebase so it is coming like from let me just show you Firebase firestore and then below here we're gonna have a collection so inside we're gonna pass our firestore which is coming from this file um so which we initialize at the beginning of the project and we are importing this firestore object so that we can use our database and below here what we would like to do is pass our collection which is going to be the problems and then what we'd like to do is as I said we're going to be using order by it's also coming from Firebase and the field that you would like to order by is going to be that order field and it's going to be in ascending order and if you just control space here you can see also there is this descending option if you use but in our case we'd like to use ascending order and then you would like to pass this the query inside get dogs um so the function the method they just show us so I'm gonna say const query snapshot it's going to be a weight um so get dark not dark but get dogs and I'm gonna pass that query inside so let's just take a look at this query Snapchat what it is so I'm gonna save this come back to our so the localhost so now if we just take a look so it's already in loading State we didn't change this so here if you take a closer look we have our data or like documents here right it has array of 10 because we have 10 problems and each problem has like a lot of data that we don't need but if we take a closer look at here inside the underscore document inside the data value map value Fields so this is data that you'd like to do and for this they show us like they have this the document.data function they so it only returns you the data that you would like to get so I'm just going to copy this line okay I control so I copy this now I'm going to just paste it here and now let's just take a look at the data that we got which is refresh this page and as you can see we got the ID as well as the problem itself for all of them right so we got the two sum Jump game all the way down so each problem has only these fields that we give in our database so for this I am gonna just keep this uh the thing that I just copied but I'm gonna have a temporary array and the reason is for this because we don't want to get that unrelated data so we only need the problem data so for this I'm going to say Temp and it's going to be an amp array for now and inside this for each but I am going to do is I will say temporary inside it's array just push and object for all of them so it's gonna have an ID field which is going to be this document that ID and we're gonna just structure that document dot data so now if we take a look at this temperature array so let's just console.log temp save it and here what we're going to be seeing is that we have an array of objects and each of them has the only problem data this is what we would like to do and now I can easily say that this set problems is going to be this temporary array and now the set loading problem state is going to be false and we can also remove this warning which is passing the set lighting problems to make eslint happy and it's temporary array for now we can just say um so we have an error here which is going to be typescript error but we're going to handle that later so now I think this is gonna so this should work perfectly now I'm going to save this and if we take a look at these problems that we are taking so we are getting them from database not mock data anymore so we can just delete this and this is the problems that we are getting right each problem has the difficulty it has the ID so write this document we can actually change them with maybe a problem so let's just Ctrl B for all of them and I'm going to change it with problem of this problem now so we have difficulty we have the video ID we have category so title ID everything now I'm Gonna Save this if we take a look at here so this is the data that we are getting from our database so let's just come here for the two sum maybe we can change the difficulty to medium and update this now refresh our page we are going to see that difficulty has changed from easy to medium so now we really know that the data is coming from our database so I'm going to change the difficulty to easy again it is and yeah this is what we would like to do and so just let's just uh resolve this um the type error we're getting from uh typescript so here we didn't give any type for this problems right this is why we are getting this and for this let's just come back inside our types where we had so this is the type that for the local data right local problem data so that was we're holding that inside this folder right so that has like the starter code starter function like Handler function starter function name examples constraints all this stuff and what we have in our database is actually a little bit different we have the video ID so maybe the difficulty dislikes likes and all this stuff so for this we would like to create another type which is going to be actually also a problem type but we're gonna call it something different so for this I'm going to create another type which is going to be maybe I could call DB problem and maybe you could change this to local problem uh however you want but I'm not gonna do that in this tutorial so it's gonna have an ID so the ID is going to be able to string as you can see here then it's gonna have the title also going to be string we're going to have the category is going to be string we had difficulty so we had the light it's gonna be number we got dislikes also a number we got order it was number as well we got the video ID so video ID it was an optional field and it was a string type we also got the link which was also optional and it was stream so now we can save this and we're exporting this now we can come back here where I'm gonna say this is gonna be BB problem and so just like this array of DBA problem now if we take a look at here what do we get so this temporary is also going to be TD problem type of DB problem of arrays right and then we can catch this as oops as DB problem and with is now we just uh get rid of all that compiling errors so we can save this and everything is going to work perfectly as it before you can refresh this we got our loading State and now as we can see once it fetches we don't see that loading State anymore so in the home page everything works other than the status field where we're gonna handle that soon um so then as the next step we would like to maybe add this user data once we log in or create our account so we would like to put this data in our database as one more collection uh but should this step be the next step let me just think and come back in a second so before we do anything else actually we would like to use that problem link so when we click one of these from the sixth problem to the very last one we would like uh so we would like it to take us to the problem link page so when I click this right now it'll take us to 404 because we did not add this maximum depth of binary tree into our problems object so if we take it take a look at our original demo when I click one of them it'll take me to delete code as we can see um but here what we would like to add that link property into our code so it was here so I can just cut this where it takes us to the problem page I'm gonna just cut it for now and I'm gonna say if problem dot link if we have it do something and if you don't have it do something else or render something else and in the else case we're going to have that link that takes us to the problem page but otherwise we're gonna have a link tag or yeah we're gonna have a link which is gonna have the hrap as so the problem dot link and it's gonna have some class names it's gonna be one hover you would like to text to Blue 600 and then maybe it's gonna have the cursor pointer and also you would like to have it the target to be blank so that it will take us to the uh which is gonna open a new tab and inside we're gonna say the problem dot title I'm Gonna Save it and here in our localhost when we click one of these so from the sixth one to the last one when I click this it it'll take me to delete code to this problem that we got the link for this but for the jump game let's say we don't have that um so the link in our problems uh so in our database so let's go to jump game for the link we don't have anything so it'll take me to the problem page as you can see we got our boilerplate test cases and all the things that we added so the next thing that I actually want to do is like display this like scan and when I click them it'll do that like operation but for this we actually need to First create this user's collection because what happens is that when you click so when you like a problem that problem ID is going to be pushed to this liked problems array in our users right so that when we log in again it'll show us that you already like that problem so for this we actually want to just create this data in our database so for this I want to head over to the sign up component where we sign up our users right we created with email and password and once we sign them in or like once we sign them up we would like to create that document as well so we're gonna have that user's collection and it's going to be inside our database and each document is going to be one of our users and each user will have inside this Fields it's going to have this add Fields right it is display name email like problems dislike problems and the rest so for this we're going to be also using that set document method which is coming from the documentation so if you don't remember that just type Firebase add data to Google and click this where we did this uh maybe two sections before and we had that temporary form so inside this add a document we use this set document method right so we're going to come back to here and what we'd like to do is use that method as well so we're going to say await set talk and it's going to take this document method and then we're gonna have our database which is it's firestore let's just import this and then we're gonna have inside users collection and as the ID we can we need to give it because we are using this set method they give that ID and we actually want that as well so we're gonna say new user that we just created new user it is coming from here right new user Dot user.id and then we want to give now the data so I'm going to say user data is going to be an object which we're gonna have here so this user data is going to have the uid right we're gonna say the user ID is going to be new user ID it's going to have the email it's gonna have the display name which is coming from our input so we would like to have it created at Fields so created add which is going to be maybe date start now and also you would like to have it updated ad it's also going to be data now we're gonna have the light problems it's going to be an empty array dislike oops display problems so we're gonna have solve problems and maybe art problems right our users want to start the problem and I think that was all the fields that we need let me just double check that update created at solve problems start dislike liked email display name and ID yeah this is the old thing that we need so it gives us some error maybe ID does not exist on so that should be user.uid not the ID and this field is coming from the firestore if you don't know and after this maybe we would like to do some um so they may be user friendly stuff where we're gonna import our toast it's gonna be toast.loading we're just gonna say maybe creating your account and then we can give it some object as like the position is going to be top tenor we're gonna have also the toast ID which you'll see why in a minute so those ID could be maybe the loading toast and then once we so instead once we have an error we would like to also do toolstad error and you'll like show that error.message in our top Center we don't want the toast ID so we can just delete this and open this and finally either it's um so either we success or we have an error we we just want to remove that floating uh toast so now you can toast that dismiss with this ID that we just give now the toastify you will know that it should only remove this loading tools from our screen and I think with this we should be ready to go so let's just save it and try to sign up one more user so I will come back to here and I would like to log out from this account which was John Doe so I will click this and I just realized that there is some bug here we don't want this timer to be here and we don't have a user right when we log that we don't want to see this timer so for this I will come back to here I think it was inside the top bar so we had this Pro if we had in the problem page we would like to show the timer but it should be if we have logged in and you are in the problem page then we would like to show this timer I'll save this come back to here it should be yeah like we don't see that right now so now let's try to sign up with a new account I will create an account I'm gonna say test thing ADD test dot com and display name could be test we're not using that anyways so for the password we'll say John Doe so let's try to register you see that creating your account and yes this is awesome we have our user we are logged in and now let's just check our collections in our database so refresh this and hopefully you're going to see that users collection and there we go so we're going to click this so this is the uid that we got and we have all these fields created at updated at dislike problems like problems they are empty arrays for now and we got the email display name and everything really so all the data that we just provided here right so this object is passed into our database within our users collection and for the ID we give the user ID and here now we can delete that to John Doe because so the first John Doe that we created because we didn't implement this part now if John Doe like the problem or disliked the problem it will not be added into here so we can basically come to here and just delete the John Doe from here and yeah this is the only user now we have if you realize we have like user ID starts with j g and maybe as jdd if we take a look at here we'll also see that ID as the user ID right so it is because we are using it from here yeah so as the next step since we have our data in our database the problem data and the user data now I actually want to fetch that problem data which was the like dislike count and the difficulty of the problem so for this I will come back inside this on the problem page so let's just collapse everything for now inside the pages inside the problem page PID where we sent our workspace right inside workspace we had the problem description and it had the it was this left hand side right we had the like and dislike count so here what I'm going to do is um actually just fetch that data from our database so for this I'm going to use the same apps Direction logic where I'm just gonna call my hook that I will be creating I'm going to say use maybe get current problem right because in this page we are only going to have one problem right so let's see this is the two sum page and then we will be have maybe Jump game so this page is only gonna be for one problem as you already know so I want to send this problem ID to this page so that we know which data should be fetched okay and at the bottom of our page I'm gonna create my function which is going to be use get current problem and it's gonna take the problem ID and it's going to be the type of string and inside here we're gonna do some data fetching logic right since we are going to be doing data fetching the first thing that comes to my mind is that use effect all right and let's just initialize it on Mount and we need to import this let's do a control space it doesn't suggest us for some reason so I'm going to just delete this react and I'm going to say use effect coming from react So Below this what we're going to be doing like we're gonna have that pitching data logic but we need to have some state right so first thing that we'll have is going to be that current problem and it's going to be type of actually B problem right we are pitching that from the database so it either is going to be that DB problem or it's going to be null and initially it's going to be null so let's import use date it'll not um suggest us so let's just do it manually so I'm going to say use date from react and then the next thing that we need is going to be the loading so set loading is going to be Boolean and initially it's going to be true and also we'll need a problem difficulty class so maybe yeah difficulty class and then set difficulty class so set problem and yeah so initially it's going to be actually an empty string and you'll see why we use this so actually like depending on the problem type or like the difficulty of the problem we're gonna have different classes so here I want to fetch the data but before that let's just say return an object with the current current problem that we fetched the loading State as well as difficulty class so here I'm gonna have an asynchronous function so I get problem from DB so it's going to be cons to get um maybe like the current uh problem maybe async function and inside this first we'll say set loading to be true and at the end we're going to say it's uploading to false but let's just do the intermediary step which is going to be fetching the data so I don't know how to fetch the data so I'm gonna go back to Google uh to the Firebase documentation so just type get data from uh so from Firebase and open the first link so get a document right we previously did get multiple documents from a collection but now we would like to get only one document so click here and it'll take us to this code example so in the example they use this document method which they pass the database as well as the collection name and then as the last parameter they pass this document ID and they use get doc to get the document and then they check if it exists or not so we're going to be doing pretty much the exact same thing so let's just go back to vs code where I'm gonna say so first get the document reference so I'm going to say const document reference is going to be um that document method coming from Firebase if we take a look at it it is coming from here Firebase slash slash firestore and then below here we're gonna say so we're gonna pass actually the our database it's gonna be firestore and then we're gonna pass our collection name there's going to be problems and then the uh so did that look like fetch is going to be that problem ID so we're gonna pass the problem ID let's say it is twosome it is gonna fetch this to some object and it is gonna return us this data so that's why we're passing that and below this we're gonna say cons document snap and it's going to be equal to a rate document ref.get so maybe that was the old way that's why co-pilot suggests us but we're gonna say get talk and that should be importing from firestore as well and we're gonna pass this document reference so this is how it works with Firebase so now we're going to check if the document exists so we'll say const problem and it's going to be document snap dot data and now actually we can just console.lock this problem and you could say uh current problem is your problem is here and then we need to call this function right it's going to be a head current problem and for the dependence area we're going to add that problem ID that we're getting as the parameter so let's just save this and take a look at our localhost refresh the Page open the console and we'll get the current problem so this is the data that we have in our database right for the two sum we got the title ID category difficulty likes dislikes order and the video ID so for this we can so let's do the rest actually so at the bottom once we get got this data we would like to change our state rate so we'll say Set current problem to be an object so we'll say it's gonna get the ID which is gonna be the document snap dot ID and then we'll have we're going to just basically restructure the problem as be a problem so the last thing that we would like to do is going to be updating this set problem difficulty class now it can be either be easy or like medium or eventually it's going to be hard so we'll say that problem difficulty class so let's just expand this and we'll say if the problem is going to be a lowercase the problem that difficulty if it is easy so it should be uppercase or like um capitalized so if it is easy then our class name is going to be BG Olive and text all it so if it is not easy then there is two other um for the possibilities either is going to be medium or it's going to be hard so if the problem that difficulty is equal to medium then it's going to have BG yellow and text yellow I guess for text dark yellow as well as BG dark yellow and if it is not medium then there is only one chance or the option which is going to be that PG dark pink for the heart problem and then text dark pink so just like this and eventually we can set our loading state to false and now just save this one come back to here um so take this data from here we're gonna destructure it so we'll say get the current problem loading State and problem difficulty class foreign actually we would like to replace the data with the real data right now we have the light count display count and the difficulty so I'm just gonna actually cut this div from here and for a second I'm gonna cut it and I will say if it is not loading and if there is the current problem if you got this now we want to render this so I'm going to paste it again so here it's gonna be current problem that difficult okay and then here we're gonna have the current problem that likes and here we're gonna have um the current problem that dislikes and so far that should be good but also we would like to have that class name that we got so that should be inside this one so we can delete this text Olive BGR live this is going to be dynamic so dollar sign and the curly braces you're going to say problem difficulty class that is coming from our hook so now let's just save this and go back to our Local Host now this is the data that we got for the two sum great so it is easy zero likes zero dislike so far now let's just update this to some with difficulty of medium and let's say it's going to be medium up it is refresh this page it is going to be that um yellow color that we can see here and if you make it so to make it hard then it's gonna get that pink dark color as we can see in for a second it doesn't show us because it is in the loading State and maybe we could add some skeleton for this so I'm just gonna update this to some with easy this is how it should be so now this is the correct data we are going to come back after this um where it should be so after this loading stuff we will say if it is loading then we're gonna return something else so and render this portion and now let's take a look what are we doing in our original demo so if if you can see here now let me just slow down this little bit so fast 3G preface the page we have one rectangular one circular two more rectangular and one more circular skeleton so this is what you'd like to have so I'm gonna say um here we're gonna have a div with the with some classes it's gonna have class name margin top three flags base X to be two to give some spacing and now as we said before it's gonna have one rectangular and one Circle two more rectangular and then one more Circle so for this I can just say rectangular or like rectangle so rectangle skeleton rectangle skeleton I'm just gonna call this and then I will have Circle so Circle skeleton and then like two more rectangular skeletons and then one more Circle skeleton right and I'm just gonna create this at the bottom of our file or maybe let's actually create its own file so inside the components you're gonna have our skeletons folder Kelly so if I can type skeletons and then we're gonna have the Circle Circle skeleton that should be TSX and then rectangle dot TSX let's do a tfcd to get the boilerplate we don't need any props so delete this and inside our Circle for like rectangle skeleton let's just rename this rectangle skeleton and now we can just say oops so rectangle skeleton and then here we're gonna have some class names and two more tips I guess so the first one is gonna have class names of space um space y 2.5 and animate is going to be pulse and then inside we're gonna have one more div which is gonna have class names of flags items thinner and width of full X of 2 and then inside we will have one more div and it's going to have some class names it's going to be height of six width of 12 and then round it full if I can see that rounded full and an arc but actually like background is going to be a park fill of three and so it should be PG dark fill 3 like this and now we can save this it's going to be for the rectangle and for this circle we're gonna have some kind of similar stuff so we can delete props and so inside is gonna have some class names almost the same thing I don't know why I type everything from scratch so I'm gonna now import keys and import this one as well now let's save this and change this for so to no throttling so that we got our original state so I'm gonna refresh this now for a second we see that loading state so this is the output that we got we have that same loading skeletons as we have in our demo app so now we would like to so we would like to be able to like the problems and dislike the problems but before that we need something some data which is going to be if we already like the problem or we didn't so did we dislike the problem or we didn't because now there is no way to know if I already like this problem or not and depending on this we're going to update the UI so once I like it like it it's gonna be that blue button and then like count is going to be incrementing so for this we need to get the user's data on the problem so we're going to create one more hook and it's going to be again be at the bottom of our file so I am going to call it as some function so it's going to be a hook so that's why it should start with the name of use so use get a problem or maybe use get users data on a problem right we're gonna give the problem ID and it's going to be type of string and then we're going to do our logic here so if you didn't understand still like why we're using this hook um I think you're gonna understand that once we use this and get the data out of it so if you still didn't understand it let me just uh finish this hook and integrate it and then you're gonna see why we are using this so as always fetching data logic is going to be here so user f8 says I am here dude don't forget me so we're gonna import this and it's going to be in on Mount we're gonna add that dependence area later so it's going to have a function that gets the user's data on the problem and then we're going to call this function on get users data on problem and then here we're gonna have some state right so we're gonna have cons data set data and initially it's going to be an object right so it is going to have the like so light pulls dislike pulse start false and solved goals right so initially we're gonna think that user didn't like the problem didn't dislike didn't start and didn't solve the problem so it's going to be initial State and like immediately after we call this we're going to be fetching that data and then update this so here we would like to also get our user which is going to be coming from our old uh good friend which which was used both stage that is coming from react Firebase hooks so we're gonna pass our authentication object into this so and now we are ready to actually build this function so I'm gonna say const user ref it's gonna be the document firestore users so I will import this import the document maybe so actually we already imported that because we used it up here so from the users you're gonna have from the user's collection you will get the user.uid so we can say it's going to be all we are going to always have this user object so we can show it with a question mark and then below this we're gonna again have the user snapshot so that should be cons if I can type const user snap and then it's gonna be a way to get the document user ref so it will say if user snap is exists right if it exists then you will get the data from it so it's going to be usersnap.data so if you remember in this data so inside our the database for a user we had the liked problems array solved problems start problems and dislike problems array as well as these other sorted fields and in this case we would like to just get this arrays right so it's going to be cons structure this and by the way I I think here I said that we are destructuring this but actually we are spreading this okay that was kind of mispronounced so here we are gonna get the solved problems and then the light problems array problems and then it's like problems as well as the start problems right and it's going to be coming from the data and we would like to set this data if this light problems array includes this current uh the problem so we're gonna get we're gonna do the same thing for dislike problems uh start problems as well as the solve problems and this is going to be our state so if user um so inside that so so this is going to be actually that's like the problems array so it's going to have maybe two dash sum so that was the problem ID so maybe we would like if we're gonna have the jump game if you go there so solve this problem then it's gonna have these values and if this problem ID is inside this liked problems array then it's going to be returning true for this uh liked field so I think this is how I would explain this I think it could be explained a little bit better but I hope you get the point so we are going to be calling this function if we have a user right if you don't have user so if we are logged out so we cannot get that data right so we need to just self guard this by telling or like if God is we're going to say if we have user then call this function and one more thing when we uh so like unmount this project or like unmount this component not the project so we're gonna call this function so it's going to be running on unmount so it's gonna set this data to the initial state so let's just present this problem ID into here as well as well as the user so when I in our original demo when I go to the next problem it is gonna just um so it's gonna set this light disliked and solved and start stage two false initially and then it's gonna fetch it so when I go to the previous one this unmount function runs inside use effect and it set this data state to this object which is exact same as with this the default state right so this is why we are doing this and then at the bottom we're gonna say return an object which will get all the data as well as this fit data right set data so that we can so we're going to be using this later so I think this is the all function that we need so this will give us the um so the light dislike start and solved state of the user okay so now we would like to use this so go to above where we will use const so from here we'll say use um get users data on problem and we're going to give the problem ID and then we're gonna destructure some stuff it's gonna be if user like this select comma is like and solved set data and start and now I think we are ready to build our uh handle like dislike and start functions so when we click this it's gonna like or unlike and we're gonna click this it's gonna dislike or like undislike and then it's gonna start a problem or it's gonna unstart a problem but before we Implement that functions I just wanna do that hard coded because I just want to show you so inside this like stuff so where it was let me just find it um here so it is going to be here actually and we're gonna say if we didn't so like open actually braces we're gonna say if we like the problem okay we're gonna show this AI if you like okay so we're gonna cut this and just paste it and that should be maybe end end so I feel like you're going to give some class themes which is going to be text Arc blue s all right it's coming from that Tailwind config if you remember and then if it is unlike okay if we didn't like this then we're gonna show that without any classes so now save it and initially it is disliked straight we cannot like it so far that's why we are seeing it in this way and we have the user testing so I'm going to go to my database and inside users liked problems array I want to add some field into this it's going to be two dash sum so add this now this user has like this problem so refresh the page and hopefully we're gonna see that blue button right so this is what I mean so light is now true because this user so the liked problems array includes that problem ID which is the two sum and this evaluates the true and inside the dislikes array let's say it doesn't have that two sum right so inside the dislikes dislike problems or solved and start problems it doesn't have any Fields that's why they return pools so this is what I mean and now we can we are ready to build our handle like function so it is going to be this right so we're gonna say when we click this actually it's going to be this okay this function I'm sorry it's going to be this button I cannot speak today so I'm gonna say on click it is gonna preference the handle click function which we are going to create right now so I'm gonna say const handle click or maybe that should be handle like and the like so copy this paste it and then it's going to be an asynchronous function we're gonna do the like uh so the like logic here so first I'm going to say if we don't have a user so if we don't have a user then what I would like to do is I just wanna return from this function so it is not gonna run anymore and we have got some problems it could be so we are missing this Arrow so if we don't have user we're gonna return and before that we're gonna say post the error and we're going to say you must be logged in to like a problem and we can give some uh for the object the position is going to be top dinner as well as the theme gonna be let's say dark and we don't have this user it's going to be this user let's copy this come here paste it so take this above and yeah now if you don't have User it's going to give us this error so save it come back to here maybe in like now log out so save it just refresh this if I try to log in or I'm sorry if I try to like this it's gonna say you must be logged into like a problem so I want to actually make this the top left so that it'll give me from this side so try to like it'll it's gonna come from here I think it looks better so now I'm gonna log in so it was testing at test.com and John Doe now login it's gonna oops so it is not right so testing at key.com was in it like this testing at test.com now login so now we are inside we're gonna go to Tucson and we'll like this for some reason because we added it into our database so I'm gonna just exclude that from our liked problems um array so I'm going to delete this now if you refresh this it's gonna be false and we're not gonna have that blue button so now there are three states so our user might be already like the problem or maybe like this state he didn't liked it or he didn't dislike the problem when it when he clicked this like button the button will convert like the transfer to the blue button and then this count is going to be incremented by one so watch this so it's updating and now it's gonna be 11 and now the button is blue so the second case is if user already like this problem and still tries to like this problem one more so like once more let's just click this what's gonna happen so we cannot like twice this uh so the user is going to be unliking this problem so it's going to be decrementing by one and now we didn't like this and the last case is going to be if user is already dislike the problem so if he tried to like it what's gonna happen so if he cannot like and dislike the problem at the same time the light count is going to be incrementing by one and the dislike count is going to be decrementing by one now watch this I click this it's going to be 11 and now it's gonna be three so we got three cases and it is going to be like if he already liked if already disliked right already disliked and maybe neither so didn't like it and didn't dislike so when you click the like button it's gonna like it but if it is liked and you click like button again it's gonna unlike so the stuff that I just explained and so this function is going to be the really the most complicated one in this project so far it is because it it is gonna have really it's a lot of if else statements we need to handle and then there's one more stuff that is transactions okay we're going to be using Firebase transactions and what it really means is that I just uh created a diagram that I can explain better so here when you like the problem right when you click that like button what's going to happen so there is so there are gonna happen two different operations the first one is gonna be you would like to update the problems collection which means you're gonna increment the like count of the problem right when you click this it's going to be incrementing the light count and then you also need to update users collection which you need to add problem ID into liked problems array of that user because when that user log Dodge and then login back you need to hold that problem ID so that you can show hey you already like this problem and there you go a blue button right so when you like the problem if you update this and then the internet connection went off so you would not be able to update this one so this is not we want and to handle this Firebase really helps us and they introduce this um transactions where it is all of the operations is either gonna success or all of them is going to fail so this is what we would like to do and for this you'll we would like to go to the Firebase documentation so one last thing that before we get into the documentation so this idea allows our database something we called consistency so can assistant so your application or like your database is going to be even though they're in the different collections the data is going to be informed with each other so instead of let's say the inform but so they are going to be at the same kind of state the one of them is not going to be different than the other one okay so they are gonna act with each other so this is the benefit of transaction and now let's take a look at the documentation so I just typed in transaction file store to Google and click the first one so there are there is one one more thing that we call the batch rights so it is kind of similar to the transactions so it is but it's a little bit different where a batch rate is a set of write operations on one or more document and the transaction is a set of read and write operations and so we need to read some data beforehand so we're going to be using the transactions but I highly recommend you to just read this documentation so this page it is only maybe like five minutes read so you can take a look at the batch rates but I think I will go with the transactions so let's click the first one so updating data uh with transactions so as they say and as I said before so transactions will fail when the client is offline and so one more stuff read operations must come before write operations so this is really what you like to do and it just group multiple operations into a single transaction so we have like multiple group of operations but it's going to be uh so it's going to be come together and it's going to be act as one transaction so either it's gonna fail or it's gonna success and in their example they use this run transaction method pass their database they get a callback function with the transaction object and then read the data if it exists and do some update stuff so this is what we'd like to do and now let's build our handle like function so inside our handle like function I will set the code so I'm going to say a rate run transaction and it's going to be coming from the firestore Firebase so I will pass the firestore and then I will get my callback function with the transaction object so what I am going to do uh inside first I need to get my reference to the user wrap problem wrap and user data in the problem data so for this I'm going to say const user wrap and you're going to see why we need this so we're going to say document from firestore and get this user and then const problem graph I could say and it's going to be again from the problems and get this problem reference and then I'm going to say get the user document and now we should use transaction.get and we can see it here we use transaction.get and pass the reference so now we read our data for the user and now we're going to get the problem document or like the problem we're asking a problem document we're going to pass the problem reference and then now we have the user reference problem reference and user document as well as the problem document now we are going to say um so if both of them exists then we are going to say if user already liked the problem right so we got three cases so the first one is he or like did she already like the problem so in this case what you'd like to do we wanna up user reference by uh removing that problem ID inside that liked problems array so let's let me just comment it out so remove problem ID from liked problems on user data or like user argument and then the other case is we would like to increment the likes on the problem document so for this I'm going to say transaction dot update and here I'm gonna pass the user reference as well as an object this object is going to say liked problems and here what I'm going to do I will say get user document.data and filter the liked problems and just remove the current problem from that like problems array and then we would like to now up the problem document so we're going to get the problem ref and close this what we're going to do is just decrement the light count by one so we'll say like get the problem documented data likes count and -1 now this is we did all these inside our database now we need to show we need to update the UI right for this we we got some stuff in our uh so some stage not stuff but like here I forgot to also export this the Set current problem we also need to pass this here so we're going to get Set current problem and we're going to be updating that here so I will say control space get this Set current problem So Below these updates I'm gonna say Set current problem it is going to take the previous object like the previous date value and it's going to be returning an object with the previous values as well as we're going to be decrementing the likes count by one so so far we got some typescript errors and we're going to be handling that in a little bit and then we're going to say now we also need to since we that liked was true right if we liked then means the light is true now we need to make that false because we unlike this problem so we're going to say set data to have like only change the liked field so we're going to say get the previous state value and return an object with all the previous state and only change the like to be false so yeah this is actually what what we want to do in our liked case and now if like user else if dislike we're going to be doing something else and in the else case so neither like or neither already this late so what it says I cannot find this light so it should be this light and now we're going to be doing pretty much the same same thing here but let's just write it so we're gonna say transaction dot update and then we're gonna get our user reference Cloud close this object and then inside we're gonna say I liked problems just add that new problem ID into this so this is the case so I just want to make sure that we are all in the same page um so it's going to be this case so when user dislike this problem and now we are clicking this like button now what's gonna happen so the this icon decremented like can't uh increase right incremented so here we add that like problems into so that problem made into light problems and now also we'll take it from the dislike problems array we want to remove that problem ID now let's uh up a problem reference we're going to say transaction dot update and we're going to get the problem reference close this object and inside we're going to be doing is you just incremental Icon by 1 and decrement the display count also by one so we're going to say likes plus one dislikes minus one and now let's just update the UI it is going to be Set current problem so let me just take a look what it uh so what it suggests us so legs count is incremented with previous and dislikes count is decremented depending on the previous state so I think that looks good to me this is correct and then we need to also update the set data and it's going to change the like to true and select to false and with this I think we handle this case as well and now let's do let's just format this a little bit like this this and maybe like this now we're in the else case so this case is the easiest one so user didn't liked or didn't display it you're going to be only updating the like count by one and add that problem ID into the liked problems so we're gonna say transaction dot up up it and user reference close this object and we're going to say like problems into the like problems array add this problem ID which is going to be two sum in this case and then yeah and then we're gonna come here we're gonna say transaction dot update problem reference Clauses object and just increment the light count by one then update the UI because this is for the database stuff and now we need to show that it is updated on the UI we're going to say Set current problem hit the previous values and just incremental I count by one and then make the liked field to true so to be honest this is all we need for this function at least so far so now let's just save this and come back to our localhost and let's just hope that it's gonna work so refresh this just in case and when I click this it is for a second it it was loading and now as you can see it is updated the light count is incremented by one and I think that to some ID is added into the liked problems array um so let's take a look so just to make sure that it works so inside our users like problems as we can see this testing user has uh so inside that live problems array we got the two sum ID and then inside our problems so let's see two sum the light count is one so as we can see we increment the light count by one and update the user collection by adding that problem ID into this array and now the one thing left is just let's show that floating state for this we can create one more state it is going to be cons updating and set updating and initially it's going to be false right use State initially it's going to be false uh when we click this then it's going to be true so we can just delete this so we're going to say set up hitting or like yeah set updating to be true and at the end of this it's going to be here we're going to say set up reading to be false and if it is updating we don't want to like it again so if it is updating we are going to return out of this function and what it really means so here in our original demo so when I like dislike or like unlike it's gonna have that loading seat for a second now just watch this now I cannot click this again it just um dislikes me so like returns from that function so I cannot like dislike again um this is what we would like to do that's why we're adding this line on 28. so now let's just show that um like spinning animation so it is gonna be I guess here we add that um so maybe this this side very if it is light we show this button with this color oops and now here if it is liked and it is not updating right then we want to show this so I'm going to just type all of them and then explain I think you can understand that better so I'm gonna say if it is updating and we want to show um that the loading animation so it's going to be AI outline loading three quarters AI outline so I would line three quarters loading three quarters and close this it's gonna have some class names and actually it's gonna have only one which is gonna be animate spin so it is updating and we're going to be showing this if you didn't like we're going to show that gray button and if you're late and it is not updating right if because it's updating we would like to show this um that loading spinning spin so if it is light and up not updating we want to show that blue button now let's just save this and pass it once more so in our localhost I'm gonna I would like to refresh this and now I am gonna click this it is gonna unlock this and as you can see for a second that has that loading animation so once more let's try to uh like this and as we can see so there is some flickering effect what's going on here ah I just realized so here if it is not light and it is not updating so it is not live and it's not upbeating then we want to show that gray button and now save this and now that should be exactly the same as our original demo now I'm gonna click this it's gonna have that loading animation for a second and now let's just double check if you unlike it so now if you take a look at here we got one like in the twosome right we got one like and in the user's problem I liked problems you got that to some now let's just unlike this I'm going to click that once more now the light count is zero and this user doesn't have that twosome inside this array it's going to be removed and inside the two sum the light count is zero so it's it's really 100 working so now I think we are ready to build this handle this light functionality and actually before we build that uh dislike functionality I would like to just get rid of this typescript errors so here what it really says is that like this Set current problem that we have here is expecting the type of DB problem or it's going to be null right it's going to be one of them so here we need to return either that object or we need to return null so I'm going to say if there is that previous state on the previous value I'm going to return this object but otherwise I'm gonna return null so now it just um it is happy with us so we're gonna do the same thing here so I'm gonna see if there is previous and return this return this otherwise just return null and then the same thing here if previous return this object otherwise just return null so there might be some other solutions that would work but I think this is uh it's the most straightforward in our case so now we can actually create our handle dislike function so I'm going to come here and I'm gonna say const handle this Lake and it's going to be async function again so inside here we're going to have our logic and let's just copy this and we're going to attach it into here in the dislike button so I'm going to say on click we're gonna paste this handle so we're gonna call this handle this like function so here it's going to actually be really similar to the handle like okay so we're gonna say if it's actually let's just copy this um just copy this part and then here I'm gonna paste it you must be logged in to it's like a problem and if if you don't have user we're going to show this error and if updating we're gonna return out of this function and setup bidding is going to be true so we're gonna have a weight run transaction we're going to give our database as well as we're going to get our call like function with our transaction object and now there is going to be some repeated code which I would like to create a function for this so we're gonna get the user reference problem reference uh user document as well as the problem document so instead of this let's just create a function that will return us these data so for this I'm going to come back to here like I'm gonna go here I'm gonna say const so what name could we give this so it returns us the user and problem data so I'm gonna just say cons to return uh user header and problem so name is pretty long but it doesn't really matter as long as our code is readable so it's going to be an async function and I think it's going to take a transaction object because or maybe it doesn't right so I'm just gonna call this like this and I will say so copy oops just copy this and paste it so we're gonna definitely have a user here um so it's not going to be null we can tell to the typescript that it's not going to be null with this exclamation point and then it says transaction um so it doesn't see this transaction for some reason and this is because that should be called within this run transaction method so for this I'm gonna give transaction parameter and it's going to be type of any and so now it should work and eventually we're going to return the user document as well as the problem document and then here we're going to check if it exists or not so now I can safely just delete this and I'm gonna call um return user data and problem data so passive transaction into this and then it is going to be so it's going to be actually reading this because it's an asynchronous function and I am gonna restructure that data so it's going to be a problem document and user document so we update our handle like function now I'm going to copy this line and paste it right here but there is some error that I just realized so I'm gonna paste it here but so here we also need user reference so I'm just gonna actually return everything so user reference and problem reference and get them structure them from here so problem reference is user reference so now it works and we're gonna do the same thing on here we're gonna import this import user reference and yeah this actually should be it now we got the user document everything and now we're gonna check the same thing that we did here so copy this and paste it so close that if statement or like the curly braces now there is again gonna be if I think three cases where user already so already disliked when you click that button maybe that problem should be would be already disliked or already like and or like neither Keys it's going to be not slight or not light so let's just first do the if it is already displayed so if it is like then what do you want to do so we're gonna say transaction dot update here as a reference call this object and then um we would like to inside that it's like problems we want to just remove that current problem that we are on disliking right so I don't know how to say that but we are removing that problem ID from that this like problems array and then we also need to update the problem reference where we're gonna document that as I count by one and now we updated the database now we need to update the user interface so the UI we're going to say the current problem is uh what's happening here we're decrementing the light count by one and this light is going to be false right and then now this is gonna be in the display uh statement now else if it is light so else if oops else if like and now we're gonna do transaction dot update and we're gonna pass our user reference and now what's gonna happen if it is light and we are now trying to dislike it because we're in the dislike function so we are going to add this problem into our dislike problems um array great and then we're gonna remove that uh problem ID from our light problems array because we cannot like and dislike at the same time as we talked about it this before so now we would like to also update the problem reference as always we're gonna be decrementing uh account by one and incrementing this I can't by one so increment this and decrement this and now a UI we're gonna get uh this likes count as plus one and likes count minus one and then set the data I'm sorry we're gonna have the dislike as true and like the state is going to be false and now the last case which is going to be else so the user didn't like or didn't dislike and now tries to dislike it this kind of um I would say like is confusing but I hope you get the point so we're going to be doing that transaction update stuff where we're going to have user reference and now we are trying to add that into our dislike problems array and then let's up hit our problem reference where we increment it is like count by one and then update the UI with just like count plus one and then let's just accept all them and this slide state is going to be true and then at the end of this I think it should be this one yeah at the end of this our transaction we're gonna say set updating is gonna be false right so we got everything done in this function save it and now let's try to test it so just refresh this page and now we are in the two sum problem and if we take a look at our database so the two sums doesn't have any Lake doesn't have any dislikes and user testing user doesn't have any liked and dislike problems so far so let's just try to like it and immediately take a look at it as you can see it is real time um so it just added into this like problems and actually we need to we should be testing the dislike count so it doesn't really matter now likes is working and now let's try to dislike this so as you can see it worked but we need to update the UI with that button so we're going to be implementing that right now but let's take a look at our database so the problem to sum now this like count is one and like count is zero and it is matching with our uh UI so here also let's take a look at our users inside this dislike problems we got the two sum ID but in the like problems we don't have anything now let's just do the reverse now I'm gonna like it as we can see this documented and light count is incremented by one and if we take a look at our database as we can see it just replace it so it is fully working now let's just update the UI as we did before so it was decide so it is going to be here where we can just uh you can say if it is it's like and it is not updating and we're going to show this uh this button with this class names and or like this icon and then if it is not it's like so if it if it is not disliked and not updating then we're going to show this in gray button without any color and otherwise if it is updating then we're going to show that spinning uh like the spinner I'll save this and come back to here and if you try to dislike it you're gonna get that button as blue because wait where it is like this and it's not updating then we're going to give that class name and now let's just uh reverse this if we click this once again so it's going to be decremented by one so we got the like and dislike functionality and now let's try to add that starring functionality so go back to inside TBS code inside this button we're gonna say on click we're going to call the handle star function which I will create right now I'll come back to here cons Kindle start it's going to be an asynchronous function and inside you're gonna actually copy and paste these lines copy this paste it and at the end eventually we're going to say setup reading to be false and if you don't have a user so we're going to say you must be logged in to start a problem and if it is updating we're going to return out of it and now set updating is true now there is two cases when our user tried to start it so if he or she is already like started when they click that again it's going to be OnStar this problem right but if it is not start and when they click that it's gonna be start so this is what you'd like to do and for this we don't need to use any transaction because um we are only updating one collection or like one document and it's gonna be that users collection and then user document and field is going to be that start problems array we're gonna only be taking that problem ID and then we're going to be appending that into this array so we don't have any data inside this problem as we can see inside the problems documents we don't have any Star account or Star rate anything like that so for this we'll just use the normal updating stuff where inside this edit document uh so the documentation we see also there is updated argument and here this is what we'd like to do so go back to inside PS code if user already if not start the problem actually if user not start the problem then we're going to try to start it so I'm going to say const user ref and it's going to be document firestore um inside users collection and get this user with giving it ID so this is what they do and what we're doing and then we'll try to actually update the document so I'm going to say a rate of this document and user ref close this object and then we're gonna say that start so start problems and we're gonna say a reunion and add that problem ID so this is how we add a data inside inside an array with Firebase import this and now this is I think what we would like to do now we up the database and let's uh just reflect that into our UI and now that start field should be true that state and now in the else case if user uh not start the problem already if did not already start the problem we're gonna try to uh I'm sorry so user did not already start the problem we run this portion and if he or she already start a problem we're gonna do undo this right and for this I'm gonna say const user reference again the same user and update the document to this user ref and we're gonna remove that problem ID from this array I'm going to say start problems and remove array remove the problem ID and update UI we're going to say set data start is going to be false and setup meeting is now false as well but before we test this let's just come back to here and add that loading State into so this line so for now let's just cut this and what we're going to be doing is actually the same thing that we did here so if it is star and if it is not updating then we want to show aif we'll start with a class name of text dark yellow takes dark not blue but it's going to be yellow and yeah this is our class that is coming from tail with config so import this from react icons Ai and then if it is not start and it's not operating then we're gonna be doing this um let's say not this one but so this icon here is our outline so after that if it is up hitting then we're going to show that uh spinner and now if we save this and come back here try to test it now I'm gonna refresh this and as we can see inside our test user we don't have any uh problems inside this start problems array so I'm gonna try to oops so we got an error okay that's great I wanted to show you this actually so you got the hydration error but this is not related to Firebase so we can just ignore this for now we're going to be handling that soon just refresh this it's gonna hopefully be gone so now try to start this and as we can see we got that updating and now it has been started actually let's take it at least um so double check it inside your database so it has been added into this third problems and now let's try to undo this it is going to be removed from here and it update the UI and now everything works perfectly as we wanted to have now we disliked it and started start problems got the twosome and dislike problems also got the two sum and this is going to be working for all of our problems so let's try to go to home page and let's check the valid parentheses and select it and start it so here it's going to be inside the start problems we got the two sum as well as the valid parentheses and inside the light problems we got valid parentheses as well so this is working as expected and now also let's just remove this like check icon if we have not solved this problem yet so we're gonna say but actually we don't have that Salt Field right so it's actually false yeah we got this so that should be what was it I don't remember so maybe Bui okay BS check to Circle so maybe we'll take say just cut this for now and if it is sold so if it is solved then render this and paste it since it's gonna be false it's not gonna show us and we're going to be implementing that as well okay now let's just try to add this uh logic where when we click the next Arrow it will gonna take us to the next problem and when we click this previous Arrow it'll gonna take us to the previous problem so as we got here when I click this I will be at the next problem and when I click this it I'm gonna be in the previous problem as I can see here so there are three main cases here so the first one is when you or it'd be a less problem and you are still trying to go to forward so it's going to be taking you to the first problem and then the second case is here when you're at the first problem and you are trying to go backwards it's going to be taking you to the less problem right so we're going to be so we need to handle that logic and the third case is like when you're in the middle so no logic actually is needed you just need to when you click the next one you're gonna be only incrementing the order by one and when you're in the like when you go to the previous one you're going to be decrementing your order by one so these are the three cases that we need to handle so for this uh let's just go to inside PS code and it's going to be inside the top part component and so let's just create our function which is going to be cons to handle problem change and it's going to take a parameter it's going to be is forward and it's going to be type of Boolean so when you click the next problem this forward is going to be true so which is going to be this right button so I'm going to say on click handle change problem and it's going to be is forward to true and on the previous button it's gonna be false so on click and delete this queue it's going to be a handle change problem to be false and now we need to get the current order of our problem and I'm going to be doing this by using my router that is coming from xjs so I'm going to say Roger use Roger import this from next router so now if I just try to console.log rotor.query okay so I'm gonna save it and open open my console in my local host and when I click this next button I'm gonna get my router.query and it has a field called PID because this is what we called our file right inside so as we can see the problem page ID was PID that's why we get it so now I'm going to use this actually so I'm gonna say um so let's just get hit current order where I'm gonna say uh problems that is problems that is coming from util's problems and then brought your query that PID so now it's going to be to sum and it's gonna get through some object within this problem object so I'm just gonna console.log this just to make sure that we are in the same page so save it and now if I click this I will get it to some object and if we take a closer look we can see that we got a field called order so let's just try to destruction this I'm gonna say so delete this console.logs and then this structure this const equal to order and so we got it and we can type cast this by saying as string and this is going to be the type of problem it's coming from utils types to the local problem type and then so our direction is going to be if it is forward it's going to be one otherwise it's going to be negative one right and then so get next problem order now const next problem order and it's gonna be order plus Direction so let's say we're in the first problem and we're trying to go to forward then it's going to be one plus one and let's say we are in the second problem and so we are trying to go backwards it's going to be 2 minus one it's gonna be one so the first problem and when we are in the first problem if you are trying to go backwards we're going to get the order of zero so this is not what we want so we're going to be handling that and it's gonna be one of the cases that I just mentioned so this is the next problem uh order and now let's just do that if else statements so if we are trying to go forward and there is not any next problem so next problem key and we need to create this next problem key so const next problem he which is going to be object the keys testing problems object and then from this we need to find it so each key so just Loop through them and problems the key dot order if it is equal to the next problem order so if this is the case so this is going to find the next problem order actually let's just uh console.log is so I know this is kind of complicated but you just need to take a look at code for a second so save it and if you are if I am in the first problem in the two sum when I click this it will get me to the like the next problem key which is going to be that reverse link list because in the home page um so the second problem is reverse link list now within this if I try to go forward what I'm gonna get is Jump game right because this is the third problem in our home page um so if we here try to go backwards that direction or like the next problem key right so the next problem key is undefined so we need to handle that so let's just try to do that first case where when we are in the last problem and we are still trying to go forward right we will get undefined so we need to push our user to the first problem so let's do this so I'm going to say if we are trying to go forward and there is not the next problem key not so let's just add that exclamation point and then we're gonna get the first problem key const first problem key and we're gonna say object dot piece and pass the problems inside and try to find so that should be a DOT and let's try to find that first problem key so I'm going to say Loop through each key and problems dot e dot order okay if it is equal to um if it's equal to one right and you are going to be pushing our user to that page so save it now let's try to do this in our last problem we are trying to go forward it's going to take us oops it take us to the twosome but that should be problems actually we uh so we missed an S here so save it and now let's go to this problem again so when I click this it is going to take me to the two sum so this is the first case and now if you are in the first problem and we are trying to go backward so let's try to do this what else if if it is not forward right and if it is so we don't have any next problem key we will try to get to the last problem key so we're going to say cons Last Problem D and it's going to be doing the same logic where if it's equal to the length so you just read this line to get it and we're gonna push our user to this page so now save it in inside our localhost if I try to go backwards from our first problem I will get to the next problem so the last problem and I click this I will get to the first one so now if I let's just do the last case this is going to be the regular one so I'm gonna say const or actually just Roger that push to the next problem key which is this one that we got so that should be it so from the two sum now I can go to forward forward backwards right it's kind of working fully perfect and this is what you'd like to have so I kind of feel like this function looks like a little bit complicated but just pause the video and read it for a second like maybe five minutes at most you should be able to understand it um not really complex stuff there is only like a lot of key handling going on here but this is our function that we have okay so previously we got an error of hydration and I said that we're going to be handling that soon or later now it is time to handle that and to handle that you need to understand what hydration means and I will I like highly recommend you to read this uh create blog post that has been written by Josh and it just covers everything that you need to know and as well as the solution I will immediately get into the solution but basically white hydration really means is that what has been rendered on the server and client if it if they don't match you will get an error so and specifically you will get the hydration error so to solve this you will have you so you need to kind of create a hook that says has mounted and let's just copy this and when we implement this you're going to be like you'll understand that better so inside the vs code um so let's create hook so collapse everything inside source not public so let's have a folder called Hooks and I'm gonna say use has mounted that on yes so I will just paste it so what we got and maybe instead of react we could just import the use effect from here so import ant use okay and use state from react so just delete this and eventually at the end you would like to return this has mounted State and also the component I'm going to say export default use has mounted so we have a state once this hook has been initialized like on Mount we got this has mounted to be true so now just save this and inside the home page so that should be index.psx so that was our home page and now we can basically use this so I'm gonna say const has mounted that is coming from use uh has mounted and just call it so here if it is not mounted still we're gonna return now so we're not gonna return anything until the our component has mounted and this is the solution so I again highly recommend you to read this um blog post so at most it's going to take you 10 minutes to read all of it and yeah this is our solution so now let's try to add code submission so this is the correct code for the Tucson problem and when we submit this we get this confetti as well as this congratulations message if it passes so for this we're going to be using a package called react confetti so let's just install this I will come back to here open up a new terminal and I'm going to say npmi react to confetti so just install this and we're going to be adding this into the workspace so inside the source components workspace so here we're gonna have that confetti so I'm gonna say import confetti from react confetti so this is going to be that container so I'm going to say confetti and so it's gonna have some parameters or props so the first one is going to be the gravity so it's going to be like how fast it's gonna be coming down so it's going to be a 0.3 and we're gonna have three in duration going to be basically like how many seconds it's gonna take and for us we're gonna put four seconds and then it's gonna have the width and height so for now let's just uh skip that so save it and now here in our demo so it only shows it in this uh top left corner so to just make it full width we're gonna add to one hook which is gonna be uh calculating the width of our screen uh dynamically so inside the hooks I will create one more hook called choose window size dot yes and now I'm gonna paste it which is going to be this hook I have got this from the chat GPT so it doesn't really matter it just calculates the height and width of our screen so I'm gonna save it and now here we would like to use that width and height so I'm gonna say use window size and call it so from here we're gonna say const with and height and we're gonna pass it so it's gonna have with as with and height as the height I'll save it here we're gonna see that it takes the full screen but there is like one pixels of overflow so just to solve this um what we're going to be doing is gonna be just minus one from the width and -1 from the height so now save it and hopefully it's gonna work without any overflowing stuff so we're not going to be showing this unless we submit the problem so we're gonna have one state for this so I'm gonna say const success And subscribe and set success and initially it's going to be false and import the use state so use State coming from react so just cut this Line it's gonna be if it's success then show that line that we just cut it so save it now it's not gonna show it because initially it's false and now if you make it through it's gonna work and it's gonna show that confetti so now let's actually try to implement that code submission so for this I'll come back to here and I will first change this to false and I want to send this set success uh function into this playground because we're going to be changing that success stage once we submit the code correctly so I'm gonna send this so it's going to be set success and inside the playground we're going to be taking that prop so it's going to be set success and it's going to be dispatch and Boolean so this structure this and now inside the editor footer we had that submit and run buttons so for this I will create a function that that says fonts handle submit and it's going to be just a function that alerts for now let's just submit it and or like maybe submit so I'm gonna send this function into this so I'm going to say handle or like yeah handle submit and I'm gonna say handle submit function so this component need to take this function so I will click this and as prop we're going to say handle handle submit it's going to be a function that returns nothing so this structure this function that's going to be handle submit and on collected this function as well as this function or like this button we're going to say on click just call that Kindle submit and so let's save this save this and save this one so when I click to this buttons it's just gonna alert as submit so this works as well now here what we're going to be doing is that inside the code mirror like that code editor that we had on change we are going to call a function called on change and let's just initialize it the const on change on change so it's going to be taking a value it's going to be the Playbook string and then here we're going to say console.log the value so save it and take a look at it in our console so I'm gonna open up here and in the localhost now if I try to write something I will get that latest code that I had in the editor so now I would like to save this right this is the user code I'm going to say const user code and set user code is going to be an empty string or actually it's not going to be empty string but it's going to be that problem problem the starter code so it's going to be that boilerplate initially and then once we try to change or when we type something in we would like to update that state with the latest value now we we are ready to build this handle submit function so first if if we don't have a user rate you would like to just return some errors so I'm going to say if not user then let's get the user from here we're going to say cons user is going to be used oh State and then we're gonna pass the authentication object that we had so now if you don't have a user I'm going to say toast and import this error please log in oops twist that error please log in to submit your code and let's give it some uh so to say like options I'm going to say position oops position and it's going to be top Center and Auto close gonna be three seconds in theme is going to be dark and then we're gonna return out of it so we're not gonna run the rest of the function so we handle our error if we don't have a user now what you'd like to do is to try to run our code right so I'm going to get give some try and catch block and I'm gonna make this asynchronous so that we can do some database stuff here so first of all I'm just gonna say um so let's just do the catch uh stuff here so I'm gonna say just post or maybe like console.log the error for now at least and then in the try block we will try to run the user's code so for this let's what I'm going to do is I'm going to say just cons to callback it's gonna be new function and what we're going to be doing here is that like we have a string right this is our string and we need to convert this into a function so that we can run it and evaluate its value so to make it from this like from a string to have a function we can use this new function Constructor that is built in in JavaScript so here I'm going to say return the user like dollar sign and user code so if we execute this it's going to give that user's code as a function not a string so now we would like to test this and I'm going to say result and we're gonna pass this into that um so the problem uh so the Handler function so let me just type in and I'm going to show you it's going to be from the problems that is coming from utils and we'll say PID which we are going to take from our um so the router so I'm going to say const launcher and it's going to be use router now if you remember router was an object that has the query field right to query and then query has APK the field so now I just destructured it like this and this is how you can do multiple destructuring in one line so we got the PID now PID as string and then we would like to just run that Handler function and then we're going to pass the Callback inside so far we have a typescript error but we're going to be handling that soon so now what are we doing here so we got the user's code and converted it into a function now we get it as a callback function or like just a regular function but we're going to pass it as callback function so here inside the problems so let's take a look at it so problems.pid so so far we are in the which problem like search the 3D Matrix so it will come to here okay so it's gonna pass this search 3D Matrix here and then it will try to run the Handler function and pass that callback into it so it's going to try to run this Handler function which is this one right search it 3D Matrix Handler and it's going to pass that callback here as a function and then we will try to run that function for all of our test cases and if it passes all of them so if it is equal to the result so result is equal to answer then at the end we're going to return true but otherwise we're gonna throw an error so so now I'm gonna say if the result right or like I can say this could be success because it's going to be either true or false now I'm going to say if success then I would like to just say uh maybe post a success um so let's just take this and change it so congrats congrats and all has passed so it's going to be on the top Center in autoclase three seconds theme dark and set success is gonna be true now that we were getting as a prop and now after this so once the set success is true we are going to show that um confetti and we don't want it to have like for the um so you want to remove that after like three or four seconds now I'm gonna say set timeout after this uh toast.success right I'm gonna say set timeout and just initialize it like this and give it like four seconds and I'm gonna say set success now should be false so now if we save this and come back to here inside let's try to solve it to some and I'm just gonna get the solution from here so I can just copy this and I'm gonna paste it now if we try to run this or submit this we're gonna get is congratulation message because our test passes now let's just do some errors so it's not going to be the correct code and now we're gonna get an error in our console and as we can see it says uh expected values to be strictly deep equal so basically this is our error so now we can basically just come to here and say toast dot error that error but I want to just show some L bit better error message so I'm gonna say if error write error in the message if it starts with okay so and just come here and try to copy this portion so if it starts with this and I know that it is an assertion error so the expected value is not equal to the one that we're expecting so I'm gonna just copy it and paste it so we got an e here so if this is the case then we're gonna say closed dot oops it was that error so we'll say oops one or more test cases failed and we're gonna pass our object inside but first let's just correct this and we're gonna pass our object so it's going to be position tab Center Auto close and theme dark so otherwise so this is going to be also type of any and now if this is not our message in the else case we're just going to say toast.error and it's going to be here I'm sorry this is going to be else plus that error just something ran wrong or maybe the error.message we can show it here so error the message so now let's try to do this and in this case if we write the wrong code we are going to get an error and it's gonna say so didn't we save it so actually saved it now let's try to do this one more and try to copy this paste it inside so that was the correct code but now let's try to run code so I think we copied that wrong so let's just come here and console.log the error again or like error.message maybe so now submit this okay so if it starts with this I'm going to just copy this and replace this here so if this is the case then we're gonna say test cases failed so here now let's try to do this one once more so I'm gonna submit it's gonna say one or more test cases failed and yeah this is actually the function that we are doing so let me just quickly reiterate what we are doing here so first we check if the user is not logged in then we're going to show this error and remove like get out of this function and then if you have a user we will take the user code and convert it into a function then we store it inside the Callback variable we're gonna pass it into our Handler function as a callback function so currently we're in the two sum problem right and our PID is two sum as you can see here so inside the problems object we're going to find the two sum which is going to be this object and then from here we'll try to call that Handler function I'm just going to call this Handler to some and we pass that callback and we'll Loop through our test cases and all of them passes successfully then we're gonna return true otherwise we're gonna throw an error and then we're gonna if we have an error we're gonna catch it here and we will show some error notifications but otherwise we are gonna show that congrats message and now we would like to since we solve the problem correctly we would like to add this into our database so inside this if success uh close I'm gonna come here I'm gonna say const and user wrap so if you remember in our database so here inside our users we had a solved problems array now we would like to push it into here so here I'm going to say use ref so it should be I think document right so document imported from Firebase and pass the firestore inside users collection and our current user so we got user reference now you would like to just update that field or the update that user reference I'm going to say update the document import this and I'm gonna pass user reference with an object so I'm going to say solve problems it's going to be array Union right it's going to add that PID inside to the solved problems array so save it now once we submit this right here so I'm gonna just this is the correct code I'm going to try to submit this it's gonna say congrats all tests past and now if we just refresh this we are gonna get that check mark because we solved the problem and if we take a look at it in our database we're going to see that this user has two sum inside the solves problems array so one more optimization that I would like to do so let's just remove this from here so another user did install this problem and we got a hydration error in the problems page as well we're gonna handle this in in a minute so if you just refresh the page We're not gonna get that submitted uh or like sold check mark so I want to get this whenever I when I submit this okay if I pass then I immediately wanted to have here I don't want to refresh the page to see that if I solved it or not so this is kind of a better user experience and for this I will come inside the workspace right so I'm gonna say const and I'm gonna say sold it's going to be a state sold and set sold and initially it's gonna be false okay I'm gonna send this sold uh function or like the state so I'm going to say salt and maybe that should be underscore sold and press that solved inside open up the problem description so here if you remember we already have a solved field that is coming from the database now also I'm gonna have once one more that is going to be the Boolean but it's going to be the local state so I'm gonna say underscore salt and when I am going to change this is once I submit the problem inside here so here I'm gonna say uh playground should get that is that so set solved state or like function set so pass it here and inside the playground we're gonna get that as a prop so here just import this and when I submitted successfully right at the bottom here I'm gonna say that sold to be true now I'm Gonna Save this file in here what I'm going to be doing is that we got some like solved and if we solve then we're gonna show that check mark but I'm gonna say if it is solved or okay so or if it is underscore solved right if it is just sold right um then I wanna render this portion so what are we doing here so initially we're gonna check if this problem has already been solved if it has been solved then we're gonna show that check mark if it is not been solved and when the user tried to click that submit button if that passes this is going to be true and if it's if it's that true then we're gonna show it so now let me just show you I think you're gonna understand this I'm Gonna Save it here and come back to here now I'm gonna delete this from here okay and I'm just gonna refresh the page now I will get the solution and this problem is not been sold yet I'm gonna paste it and this is the correct code when I submit this just watch this it's gonna immediately update in real time because our state has been is gonna change and now when I click the submit as you can see I got that submission check mark here so this is how we can mutate your state or like have them in like in concurrent state with your database um I just want to show you guys uh this one so now we can try to have this code in our local storage because watch what's gonna happen when I refresh this I just lost that code that I just submitted so I want to save it in our local storage and before we do that I actually want to solve that hydration error in our problem page so here I will come back into pages so here inside the home page we added it so which was this two lines I'm going to copy this and come here and paste it to here and import this and now that should be that error should be gone and if you get it anytime I mean like when you refresh the page just let me know in the comments or ask it in my Discord channel so now let's try to add the local storage so here I would like to just come back into vs code and I think it's going to be inside the playground where we were changing the value of the code editor so we're not gonna only update the state but I'm gonna also say local storage dot set item and that item it's gonna be back takes it's gonna be code dash problem ID and we're gonna pass the value by stringifying it so we're gonna stringify it and we're gonna have it in our local storage so now if we take a look at it in our console application here whenever I type something in like as you can see it is updating in real time so hi this is working so this is uh in our local storage now what I'm gonna do is inside a user effect I'm gonna fetch it so I will say use effect and initialize it on Mount for now and let's import this use effect so use State as well as the use effect here I will say let's get the code from the local storage I'm gonna say local storage and get the item and with the code dash PID and if we have a user and if we don't have a user so we're going to be handling that depending on the user so if we have a user then we're gonna say set the user code to be the code that we have and so if you have the codes I'm going to say json.parse if I can type json.parse the code and otherwise we're going to give that boilerplate the starter code and in the else case if the user is logged out we're just gonna immediately pass that boilerplate code and we're gonna pass dependencies it's going to be PID user as well as the problem dot starter code and in order to work we need to change this code mirror value so where it was to be the user code so user code save it and now if I just refresh the page I will hopefully still get this code right so whatever I type in so I'm gonna copy this solution and paste it submit it so we passed it and now if I refresh it hopefully I will still get that code because it is trying to fetch it from the local storage but however if I log out it's gonna be the um I could say the Border plate code and you can handle this however you want so now we have one more problem so let's just log in first so it was testing at test.com I guess in the password because John Doe try to log in okay now if we come back to here inside the reverse link list so if I try to just say console.log hey and if I just try to submit this it's going to say FN is not the function so this FN is that callback that we had in our so here so I'm going to say linked list so it's gonna be this FN so where is it so this is so this is where we are getting that error but why this is not a function because here we have some string or like the comment and we are trying to convert this into a function so it was inside the playground and here right we were trying to use uh return this code as a function convert this user code into that function and here we have some comments it cannot it is not able to convert this a function because of this lines so this is why we had the field so if you remember I said that we're gonna have this starter function name and I'm gonna explain that later now it is time to explain this so we are gonna slice this code okay we are only gonna take from here until the end when we execute the user's code so we will not uh evaluate this part because this is uh so to say a comment so let's say user uh write the solution for the twosome and he also want to say like the time complexity is going to be o of n but now he wants to just submit this and it's going to get the same error so for this we don't want to evaluate this lines and so let's say we have more we don't want to evaluate all these we just wanna evaluate from here until the end so that's why we had that starter function name and for each problem we have it function in the function name so for the two sum it's going to be function two sum and the parentheses so for this it's going to be function reverse link list in here so you can even include all these lines it doesn't really matter so here I'm gonna say inside the playground so I will first make this user code by making it let and now I'm gonna mutate this I'm gonna say the user code is going to be equal to user code dot slice and it's gonna take from user code but index of and problem that starter function name and now what I'm gonna do is what is happening here it only takes from that starting from here it tries to evaluate it doesn't really care about these comments before the actual function so this is kind of complicated and I don't know if I explained explain it in the past way but this is what it is now if we try to save it and let's try to run this function it's gonna say um so this is a error for the reverse like this but here if we try to submit here it is gonna hopefully work as you can see it says all test passed and it didn't care about these comments that we have here so now I say like space complexity is going to be of n as well it's gonna still work and it doesn't really care so now if we try to run the correct code for the reverse link list and I'm gonna paste it so this is the correct solution and if we submit this it is also going to work and now if I go to this problem it is going to get this from the local storage and if I go to this one it is going to get this from the local storage so I think we are done with all the functionalities we did the local storage we submit our code and it has been added into our database now we can see that reverse link list is also in the salt problems array and we got pretty much everything in this page the only left stuff is this full screen and then the settings now I think it is time to add them so before we add them I just want to get rid of this error so here this Handler function can be type of string or the function so it says string is not callable if this is a string so since string is not callable we can just convert this into like we're not gonna call it but it's going to be a reference to this function and I can say it's going to be the Handler and here we're going to say if type of a Handler is equal to function then we would like to run this so I'm going to say cons success is gonna be calling that Handler with the Callback so now I can just put all these into this if statement and now this is we how we get rid of that error so we didn't change anything any implementation we just got rid of this error so now if I save this it should work exactly the same that it was working so yeah if we go to the two sum here we can submit this and it's gonna run correctly we can even run it so yeah this is how it works and now let's try to add this full screen first so for this if you remember we had preference navbar um here what you'd like to do is whenever we click this button right so on click I will say will have a function that says handle full screen it's going to be calling that function and we're going to create this phone's handle full screen and it's going to be empty function for now and then here what you'd like to say is actually if it is not full screen right if it is not full screen then we want to show this icon that we have bottom and if it is full screen then we're going to say AI outline full screen exit and we're going to import this now we can oops can delete this line and have a state called is full screen so cons is full screen and initially it's going to be false now let's import the use date as well as use effect to State and use effect so now inside this function we are going to say if if we are in the full screen so if it is full screen then we're gonna say document dot exit full screen and if you are not in the full screen then we're gonna request for the full screen so we're going to say document dot document element and request full screen and then we're gonna set our state to whatever it was previously to like to negate it okay so if it was false then it's going to be true and it was true it's going to be false and now finally inside the use effect which I'm gonna just gonna paste it so here we are first checking like listening for the event listener of full screen change and we add three more lines to uh affect the other uh the browsers so for the Safari and chrome Mozilla and Microsoft Edge so once the full screen change events uh happens it's going to call this function and it says if document dot full screen element so what it basically says if it is not in the full screen mode then set is full screen state to false and otherwise set it to true now if we save this and you can just pause the video and analyze this code for a second and when I click this I'm gonna get into full screen and as you can see the icon has changed here and now if I click that again it's gonna be exiting the full screen and SK keyword I think is also gonna work and yeah so this is how we added a full screen functionality okay so now let's try to add this functionality of settings model and you'll be able to change the font size depending on this um drop down so it's going to be from 12 pixels to 18 pixels and once we change it it's going to be changing the inside the code editor and then we're gonna save it into local storage so that when we refresh the page it's still gonna be the font size that we um put in in the last in the last time so here I will go back into the playground and I am going to create the state so it's going to be cons settings and it's going to be inside an array so settings set settings so it's going to be a use state of an object so it's going to have the font size initially it can be like 16 pixels and then it's gonna have two more fields which is going to be settings model is open is open it's going to be false and drop down so drop down is open and it's also going to be false now let's just create an interface for this I'm going to say I settings and create it here export interface eye settings it's gonna have these fields font size type of string headings model is open type of Boolean and then drop down is open also Boolean so here settings model is open State we have it because like when you click this Now settings model is open is going to be true and then when you click this the drop down also going to be true and when you click this again now it's going to be false it's not going to show us that drop down and when we close this the settings model is open state is also going to be false that's why we have the like two of them and now what we would like to do is pass the settings to the preference nav bar so I will come back to here and I'm gonna say this component is going to take settings and then it's going to take the set settings function settings and then let's go to inside the preference nav bar and here I would like to also say that font size is going to be settings but set settings but settings Oops why it does this okay now it's gonna take the font size but it doesn't give me did I did that wrong so settings okay now it's gonna work and I'm gonna say settings dot font size and now I can go to the inside preference nav bar it's gonna take two props I'm just gonna be the settings and it's going to be a type of interface settings and I'm going to import this and then it's also going to have the set settings which is going to be the type of dispatch of interface settings and then I'm gonna say set headings and get the settings so here what I would like to do now I'm gonna say at the bottom of our page I'm gonna say if settings dot uh if settings model is open and I'm gonna I would like to show a component which is going to be that settings model component which will create in a minute settings model and then so it's going to be just like this now let's try to build this components so for this component I will actually give you the Bare Bones of it in a coded way so let's just go to the inside models now I'm going to say settings model dot ESX and then I'm just gonna paste it and you can grab it from the GitHub gist in the description below so if you just save this and then come back to here uh import this save this file and then save the playground and inside the localhost what are we gonna see so we're gonna see nothing because um this initially is false right so we say if the settings model is open then show this but here the setting model is open field is going to be false now if you make this through then we should be able to see that in our local host and yeah this is what you'd like to see for now and what is happening here let me just quickly walk you through so first what do we have here so I'm not going to explain the HTML and CSS part but right there I'm going to explain the logic so here we're gonna have an overlay which is going to be that background that you can see that is around this model and then we have the settings header with a close button which is going to be this part and then we have a little bit of description and then the drop down menu so this drop down is open we have it as true now if I say that it's going to be false it is not going to show this portion so save this now it's not gonna show me that but if it was true it's gonna show and then we have an array of editor editor font sizes so here it starts from the 12 pixels to 18 pixels that's what we can see here and then for each of them right so the each of these like 12 pixels 13 14 15 so each of them is a list value and then I extracted it into its own component so we'll Loop through these font sizes and each of them is going to be this one sizes like 12 13 14 until the end of it so for each of them we render this component which is at the bottom of our component or like at the bottom of our file so what it does it takes a font size and it renders that so this is that like uh that font size field and then it says selected option so the selected option is like 14 now if I said that it's going to be 18 pixels now then it's gonna put that check mark into here so what it does is whatever the selected option is it checks and if so it changes the font uh so the font weight the medium and then put that check mark as you can see here it even makes it visible or invisible and then we also have an interface for this components um so I think this is basically it for now and now we will try to add all the functionalities to this component so now first of all let's just go back to here and let's say that um and also I want to show you this now we can just delete this um but okay like I will show you later so here let's just make this false to the initial state and we can save this now here I'm gonna say um we're just gonna be this button okay now on click I'm gonna say on click we would like to change that settings model is open field to true now I'm just gonna call an arrow function which is going to say that that settings and just pick all the previous values and then change the settings model to true and then close this function so if I click this here oops now if I click this this field so this model is going to be shown because we changed that set settings model field to true and then we would like to pass this settings in set settings into settings model so set settings it's also gonna have this set settings function and inside so save this file inside here we're going to take that as props so I'm gonna say settings model prompt and it's gonna be maybe type or interface and then you'll see it's gonna have the settings as a type of so this interface settings and import this and then it's gonna have the set settings which is going to be this dispatch and then let's just import this so it doesn't do this so but fittings model props I'm just gonna copy this paste it and then structure these so now when we click this overlay what I would like to do is to set that settings so the drop down or like the settings model is open to false so this is what I'm going to do and then do we have anything else to change here and yes actually we have so I'm gonna just delete this and then instead of that constant I'm gonna say so delete this so settings Dot is like drop down is open and then we're gonna show that drop down so I can basically save this and let's check the localhost so now it is closed by default and when I click this I would like to open that drop down so for this I would like to create another function and it's going to be called as const handle click drop down and then here first I will take the event so in where are we going to call this function is going to be I think it's going to be here because this is where we had that uh chair run down so it's going to be this button so here I'm going to say handle click drop down and then it's gonna take the event and here it's going to be so it's going to be the type is actually going to be a most event isn't it so yeah it's going to be a most event and inside I'm gonna first say event stop stop replication so that it doesn't close the model but it is going to be set the drop down is open so it's going to negate it so let's save it in here if I click this it's gonna open and now if I click this again it is gonna close it and what I would like to do is also when I click to this close button I would like to so I want to close it so I am going to come to here inside that close button here we have it here so I think this button so I'm just gonna say head settings model and then we are gonna change the setting settings model is open field to false and now if I click this it's going to close it I'm gonna open it close it from here and then like here it doesn't do anything and then I can open up the drop down and then close it so now I would like to um so what I would like to do now is to create a local storage hook so whatever value I choose here it is gonna put it into the local storage and then when we refresh the page it is going to fetch it from there so for this I would like to come up into the vs codes I will create the hook and it's going to be called as use local storage dot yes and then I'm gonna paste the local storage hook so it is gonna be like this and you can grab it from the GitHub fist but basically I just went to chat jpt and asked it for like can you type can you give me a used local storage hook that is gonna be working inside an xjs typescript application and less than 10 seconds it just gave me this one and I don't need to think about any implementation detail of it um so I need to work on the other functionalities of my application so this is what I would recommend you to do and if there is any error prone stuff here you can modify it so I already checked it it doesn't it's gonna work 100 for our use case and now I can just save this file and then here I will call that hook so I'm gonna say use local storage and then I will give the first one is gonna be the key and then the second parameter is going to be the initial value so I'm gonna say Lee code clone um maybe like font size and for the initial value I'm going to say it should be 16 pixels and now it's gonna return me two values which is going to be the value and the set value so the value and the set value and if we just take a look at it here we can see that it's going to return us the value and then the set value which we can just say font size and so it's gonna be font size and then the set font size so now what you'd like to do is when we click one of these settings list items you would like to call a function so I'm gonna say here it's gonna take a prop it's going to be handle font size or like candle font size change and I'm gonna do some stuff here and now I would like to have it as a prop so it's not going to return anything so we can just accept it like this and then take this handle font size change so when we click to this font size it's gonna have this font size and then what it's going to do is to say set font size and it's also going to change the settings so set settings and then it's only going to change the other font size field so we could just change take all the settings and then say font size is going to be the font size we are taking and now we need to change this here which is going to taking a parameter it's going to be font size type of string so whenever we click one of these font sizes on click we're gonna call our function so handle font size change and it's going to take the font size now what is going on here so let's take a look at it here um so when we click that it is gonna so like we are in the 12 pixels right now and if we click the let's say 16 pixels it's gonna update here because so like what's going on here we click this 16 pixels we run this function and we pass the 16 pixels into this function and what it does was to change the value from the local storage as well as it changed this set settings state to have that 16 pixels font size and we're using the settings inside the code mirror if you remember that we had here so we are using it from here that's why it changes the code editor font size but if we refresh the page it is not going to be that default value so not from the local storage actually because we didn't use it here so we also need to use that local storage value from this hook so I'm gonna say use local storage again and it is going to be so what did we say it well so what the name was it it was leeco clone font size I'm gonna copy this well actually this line completely and then I'm gonna paste it we will get the font size as well as the headphone size and Method from here so I am going to take it and put it above here and then we're gonna say the font size is either going to be um actually it's going to be the font size that is coming from the local storage so let me just quickly reiterate what we did so here from the local storage we try to get the font size of our font size and if there isn't any font size in our local storage then by default it's going to be 16 pixels and then we said that our state is going to be that font size either going to be the local storage value or 16 pixels now we're gonna come back here inside the code mirror we said that our font size is going to be the settings font size now I can save this and it's gonna hopefully work now if I just come here and I say 12 pixels or like 11 yeah 12 pixels or like 13 14 15. this is just gonna work however uh so the expected way and now we need to change this UI so whichever we uh whichever we select so here inside this line where we have this hard-coded 14 pixels but I'm gonna say font size that is whatever we choose right this is coming from the local storage and then here for the that check mark um so for the selected option it's gonna be again the maybe the font size or settings up on size so save it in here if we take a look at it now it should work let's just refresh it so I'm going to click the settings model and I am going to click to here and 12 pixels now it is updating the UI as well as the phone settings so now if we refresh the page it is still going to be in the 12 pixels because we did it into our local storage and now let's just double double check it in our application so here we see that inside the local storage tab we got the Lee code font legal clone font size as 12 pixels and now if I would like to change it to 17 it's going to be updated and the UI is going to be updated as well now if I refresh it it's gonna be in the 17 pixels if you take a look at it here so we are getting the our code from the local storage our settings from the local storage and everything from the database from the local via render our description site and so everything is completed in this um so in this page actually so the last thing that we have is inside our home page to add this status so we're gonna again fetch it from the database and so now let's just add it so back to the vs code it's going to be inside the home page so it's going to be indexed and if you remember the last time we fetched some data from this problems table inside this problems table and we used it by using this hook and now let's try to do the same thing for solve the problems if we're going to call this book and we're gonna create it so I'm gonna say function use get sold problems and initially it's going to be an empty array with type of string and then since you are going to be fetching some data we're going to have use effect in place so here we're gonna have the function that says cons to get solved problems it's going to be a synchronous and then at the bottom we're gonna call this function gets solved problems and then at the bottom we're gonna return this array so that we can use it up here right so I'm gonna say const user ref it's gonna be the document method I will pass the firestore users and user ID which I will get it from my hook I'm gonna say const user use of state and then pass the authentication object inside so this will give me the user and then I'm gonna use this I will say user dot uid right and I'm gonna make it like this so that it's gonna make sure that you already have the user will not get that typescript or if it was like this and then I will get a cons oops const user document and I will evade a get dark method by passing the user reference and then I'm gonna say if user document if it exists then what I'm gonna do is to set the solved problems to that um so user document that data that solved problems array so if you remember in our database we had it so this array now it's going to be set it to this array in our state and one more thing that we are missing is going to be if we have a user operate then we can paste the data if we are logged out we cannot get the status because we don't know which user this is and which problems did he solved so that's why we're gonna only get the problems if we have a user and now I think I can save this and what it says it's kind of weird but like we have this function and maybe we're missing some curly braces oh now it's it's working okay so here let's just try to console that like this solve problems console.log he solves problems and here we're gonna get that same array that we have in our database so we have the two sum and reverse linked list so this is what we have now let's try to add one more and try to add field it's gonna be Jump game and then add it so here refresh it and hopefully we're gonna have three values now and we got the jump game as well now let's update the UI and here we have that check mark I'm gonna cut it for a second and I'm gonna say false problems includes that problem ID then I want to just render this check mark and then now I can save this and here hopefully it's gonna work now if I remove this it is gonna update the UI as well and one more thing that we are missing is that when we log out that should update the UI by removing this check icons so for this I'm gonna come here and I'll say if user is logged out then we just wanna set this array to an empty array so now that should be gone and let's try to test it out again login and now I'm gonna log out and it's gonna immediately update the UI all right guys now believe it or not this is the end of our application we build everything from scratch from authentication to code submission and now application is completed and there is one last thing that I would like to talk about and it is going to be this code submission so here we are taking the user's code and immediately submitted inside our application and this is not safe so let's say we have a user that is hacker or like malicious user that is trying to bring down our database so they will come to here and they will write some bad code or like slash malicious code and then they will try to submit it and maybe this malicious code will bring our application down so for this we would like to use the idea of sandboxing so what it really means is that we have our application and our application contains our user's code so when they try to submit it we would like to send this code to our code execution engine so we need to create this for us and then our code execution engine is going to evaluate the code and then it's gonna return back the result so it's either going to be true which means that the code was successful or it's going to be false which also is going to mean that um so the code didn't pass so it wasn't successful and then our application is going to show that um so to say the notification if it passes or not so here uh so this is the idea of sandboxing so let me just type in send boxing and like if you're building a real application for your startup or your let's say for your company you would like to have that code execution engine but in our application we didn't build this because this is a normal um so to say a demo project that you'd like to add into our resume so we cannot go that complicated and the main advantage here is that our application is going to be safe our users can rely on our application without having any doubts but the disadvantage here is to it is really hard to implement this code execution engine so you need to know really advanced stuff about this code execution engine so with this I think I'm gonna wrap things up and we'll try to deploy this application to our cell but before that let's just submit all the uh changes place I mean let's just commit it and then push it to our GitHub and then from then there will take it to yourself so now inside TVs code I'm going to open up a new terminal and I will basically just say get at dot so I will change my so I will just change stage my changes and I got all these files now I'm gonna commit it and I'm gonna say git commit the dash M it's going to be complete the project and I'm going to commit this then I will try to push this to GitHub I'm going to say hit push so it's gonna try to push it and I already have a GitHub repository for this so I will go to my GitHub account so now as you can see it is updated just now so we would like to push this into your cell so I'm gonna go and so go to reversal so here this is our virtual dashboard so also Universal is the company that built the next JS so it is really easy to deploy your applications uh so specifically your next applications to yourself so I'm gonna click to this add new button and then here I'm going to click the project so I will get to this leeco clone YouTube I will try to import it and then I'm not going to change the project name but here we will try to change or like add the environment variables so for this I'm gonna go to my vs code so here inside the env.local it should be so we will try to get this environment variables so I'm gonna copy this and then here I'm gonna paste it and take value and I'm going to do this for all of them so I'm going to get the paste and then add now I will fast forward this and add all these variables okay so now I have added all of my variables and I will try to just deploy it and the chances are we're gonna get some errors so this is normally how it works first you deploy it and in the first few times you will get some errors until you resolve them so the deployment started now and let's wait if you'll get an error or success so now it took me to this page and we didn't get any error to be honest and now we can just continue to dashboard I think it's because we don't have any errors and now if I click to this link so let's visit this and as we can see it is now working we have the complete project here it is deployed on the internet so now I can just sign in or like the account that I already have I'm gonna say John crypto and login and as you can see we got data so we already solved these problems and so yeah this is what we have and now it is time for us to add our Firebase database rules to make our application a little bit safer so for this I'm gonna go back inside the Firebase so firestore database go to rules so here when we initialize the project now we are so this is the development mode where we allow to read and write operations uh for all the operations to to be honest so until the we are not in the 23th of the May so we will allow to read and write um operations now we would like to change this so I'm just gonna comment this out and I will write my own rules so first of all we would like to just allow our users to read user document if and only if they have been authenticated so I will create my comment and I will say user documents can only be read and written by the authenticated users so now I will try to write my rule so here first we're going to say match and then we're going to say the users collection and then we can pass here a dynamic value which I will say user ID but you could just add user ID hello it doesn't really matter so it should be something meaningful so here I will open up my curly braces and I'm gonna say Hello read Ella read comma right and so like Colin if request dot oauth is not null so if the user logged in if user is authenticated and the request but oauth dot uid is equal to this document ID so user ID so this uh here what we have is going to be each document inside users collection so if the user is authenticated and its ID is equal to that I so the document ID then we will allow to read and write operations so I will just tap this inside and then we would like to have one more rule for our for our problems document so I'm gonna say problem documents can be read by anyone but it can only be written by authenticated users so right this is what we do so here we just allow for all users if they logged in or like they logged out they can read the problem they can see the data but if and only if they logged in then they can like the problem right so this is going to be our database Rule and I'm gonna say match the problems uh collection and then you'll get a problem ID and open up my curly braces so tap inside allow read if it is true so it's gonna just work in any case and allow right if so colon if the request dot oath is not empty so if we have an authenticated user so I don't really want to get really com so it gets really Advanced with these rules you can read the documentation you can do like you can add a lot more into here but so this is the basic idea you just use the match keywords in your collection and then the so like a dynamic value for your documents so now I will just publish this so now it's been published and changes can take up to one or two minutes and then so if we just take a look at it here the so it's been published I was going to take effect in our application and inside this versatile dashboard we got three different domains and I think I like this one the most so we have the GitHub repository name and then dotversal.app so yeah this is the end of tutorial to be honest and now you can add a lot more stuff into this application you can expand this problem list or you can and just feel free to add your solutions by the way into the solution tab where when we click them you will get to my YouTube channel but put your YouTube video IDs into that solution that I showed you in the previous sections so maybe you could add a like the user profile page where when you go to that user profile page you will see all the problems that the user solved and like the um problem submission history which problems did they like they disliked and maybe you can add a comment section to each problem where users can add their own Solutions with the explanations so really a lot more stuff infinite amount of uh so like the possibilities you can add into this project and if you do that just let me know in the comments and I would like to see your versions so as always if you like this content the project and it helped you just feel free to like And subscribe it really supports the channel a lot and if you have any problems any bugs any any stuff that is not working or you would like to just learn it from me or our Discord server just click the link in the description below you can join to other developers who already built this project and you can learn from them and then I will also be there to help you out so with all this I really thank you for watching this tutorial and hopefully I will see you in the next projectin 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 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 I'm just gonna say const problems and I'm gonna call my hook which is going to be use get problems we're going to create this and I'm just gonna call this hook it'll give me the problems so I don't care about the implementation detail let's say after like one month two months later when I come back to this project I just when I read the code I just like to see how it fetches so like where it fetches and not actually how it fetches so for this I'm gonna also paste it on this that loading problems so that we can change the state inside this hook and now I'm gonna create this hook below this file where I'm gonna say so it is going to be a function called use get problems and it's going to be taking that satelliting problems as the first parameter and then inside here we're gonna return the problems and these problems is going to be actually a state where initially it's going to be an empty array and once you fetch it we're gonna change it with the original problems so since we are talking about the fetching Logic for this the only thing that we can think of is going to be use effect in react so we're going to be calling this on like the initial Mount so for this I initialize my use effect like this and then here I'm gonna have a function called get uh maybe the get problems like this and it's going to be an async function and I'm going to call this function to execute the code inside so this function is going to be the um the function that we use the fetching data logic right from the firestore so here initially the set lighting problems is going to be true since we are trying to fetch the problems and then now I don't know how to fetch the data from Firebase right so for this I'm going to come back to Google where I'm going to just type get data from firestore so I'm going to click this so we already initialize our cloud firestore and the thing that we would like to get is get multiple documents from a collection if you remember we had our collection which is the problems collection and we have multiple documents that we would like to fetch them so this this is what you what I would like to do and what they show us is a kind of example code example or like example of a code block so we have a query we choose this collection and it it passes our database which is going to be our firestore and then from the collections it's going to be problems for our case if they use cities and they also have a different query but in our case it's going to be ordered by we're going to be ordering from this uh depending on this order from ascending order right so it's going to go from the first order to the very last so this is what you would like to do so let's just come back to inside the vs code where we're gonna they cost query is going to be a query that we import from firestore Firebase so it is coming like from let me just show you Firebase firestore and then below here we're gonna have a collection so inside we're gonna pass our firestore which is coming from this file um so which we initialize at the beginning of the project and we are importing this firestore object so that we can use our database and below here what we would like to do is pass our collection which is going to be the problems and then what we'd like to do is as I said we're going to be using order by it's also coming from Firebase and the field that you would like to order by is going to be that order field and it's going to be in ascending order and if you just control space here you can see also there is this descending option if you use but in our case we'd like to use ascending order and then you would like to pass this the query inside get dogs um so the function the method they just show us so I'm gonna say const query snapshot it's going to be a weight um so get dark not dark but get dogs and I'm gonna pass that query inside so let's just take a look at this query Snapchat what it is so I'm gonna save this come back to our so the localhost so now if we just take a look so it's already in loading State we didn't change this so here if you take a closer look we have our data or like documents here right it has array of 10 because we have 10 problems and each problem has like a lot of data that we don't need but if we take a closer look at here inside the underscore document inside the data value map value Fields so this is data that you'd like to do and for this they show us like they have this the document.data function they so it only returns you the data that you would like to get so I'm just going to copy this line okay I control so I copy this now I'm going to just paste it here and now let's just take a look at the data that we got which is refresh this page and as you can see we got the ID as well as the problem itself for all of them right so we got the two sum Jump game all the way down so each problem has only these fields that we give in our database so for this I am gonna just keep this uh the thing that I just copied but I'm gonna have a temporary array and the reason is for this because we don't want to get that unrelated data so we only need the problem data so for this I'm going to say Temp and it's going to be an amp array for now and inside this for each but I am going to do is I will say temporary inside it's array just push and object for all of them so it's gonna have an ID field which is going to be this document that ID and we're gonna just structure that document dot data so now if we take a look at this temperature array so let's just console.log temp save it and here what we're going to be seeing is that we have an array of objects and each of them has the only problem data this is what we would like to do and now I can easily say that this set problems is going to be this temporary array and now the set loading problem state is going to be false and we can also remove this warning which is passing the set lighting problems to make eslint happy and it's temporary array for now we can just say um so we have an error here which is going to be typescript error but we're going to handle that later so now I think this is gonna so this should work perfectly now I'm going to save this and if we take a look at these problems that we are taking so we are getting them from database not mock data anymore so we can just delete this and this is the problems that we are getting right each problem has the difficulty it has the ID so write this document we can actually change them with maybe a problem so let's just Ctrl B for all of them and I'm going to change it with problem of this problem now so we have difficulty we have the video ID we have category so title ID everything now I'm Gonna Save this if we take a look at here so this is the data that we are getting from our database so let's just come here for the two sum maybe we can change the difficulty to medium and update this now refresh our page we are going to see that difficulty has changed from easy to medium so now we really know that the data is coming from our database so I'm going to change the difficulty to easy again it is and yeah this is what we would like to do and so just let's just uh resolve this um the type error we're getting from uh typescript so here we didn't give any type for this problems right this is why we are getting this and for this let's just come back inside our types where we had so this is the type that for the local data right local problem data so that was we're holding that inside this folder right so that has like the starter code starter function like Handler function starter function name examples constraints all this stuff and what we have in our database is actually a little bit different we have the video ID so maybe the difficulty dislikes likes and all this stuff so for this we would like to create another type which is going to be actually also a problem type but we're gonna call it something different so for this I'm going to create another type which is going to be maybe I could call DB problem and maybe you could change this to local problem uh however you want but I'm not gonna do that in this tutorial so it's gonna have an ID so the ID is going to be able to string as you can see here then it's gonna have the title also going to be string we're going to have the category is going to be string we had difficulty so we had the light it's gonna be number we got dislikes also a number we got order it was number as well we got the video ID so video ID it was an optional field and it was a string type we also got the link which was also optional and it was stream so now we can save this and we're exporting this now we can come back here where I'm gonna say this is gonna be BB problem and so just like this array of DBA problem now if we take a look at here what do we get so this temporary is also going to be TD problem type of DB problem of arrays right and then we can catch this as oops as DB problem and with is now we just uh get rid of all that compiling errors so we can save this and everything is going to work perfectly as it before you can refresh this we got our loading State and now as we can see once it fetches we don't see that loading State anymore so in the home page everything works other than the status field where we're gonna handle that soon um so then as the next step we would like to maybe add this user data once we log in or create our account so we would like to put this data in our database as one more collection uh but should this step be the next step let me just think and come back in a second so before we do anything else actually we would like to use that problem link so when we click one of these from the sixth problem to the very last one we would like uh so we would like it to take us to the problem link page so when I click this right now it'll take us to 404 because we did not add this maximum depth of binary tree into our problems object so if we take it take a look at our original demo when I click one of them it'll take me to delete code as we can see um but here what we would like to add that link property into our code so it was here so I can just cut this where it takes us to the problem page I'm gonna just cut it for now and I'm gonna say if problem dot link if we have it do something and if you don't have it do something else or render something else and in the else case we're going to have that link that takes us to the problem page but otherwise we're gonna have a link tag or yeah we're gonna have a link which is gonna have the hrap as so the problem dot link and it's gonna have some class names it's gonna be one hover you would like to text to Blue 600 and then maybe it's gonna have the cursor pointer and also you would like to have it the target to be blank so that it will take us to the uh which is gonna open a new tab and inside we're gonna say the problem dot title I'm Gonna Save it and here in our localhost when we click one of these so from the sixth one to the last one when I click this it it'll take me to delete code to this problem that we got the link for this but for the jump game let's say we don't have that um so the link in our problems uh so in our database so let's go to jump game for the link we don't have anything so it'll take me to the problem page as you can see we got our boilerplate test cases and all the things that we added so the next thing that I actually want to do is like display this like scan and when I click them it'll do that like operation but for this we actually need to First create this user's collection because what happens is that when you click so when you like a problem that problem ID is going to be pushed to this liked problems array in our users right so that when we log in again it'll show us that you already like that problem so for this we actually want to just create this data in our database so for this I want to head over to the sign up component where we sign up our users right we created with email and password and once we sign them in or like once we sign them up we would like to create that document as well so we're gonna have that user's collection and it's going to be inside our database and each document is going to be one of our users and each user will have inside this Fields it's going to have this add Fields right it is display name email like problems dislike problems and the rest so for this we're going to be also using that set document method which is coming from the documentation so if you don't remember that just type Firebase add data to Google and click this where we did this uh maybe two sections before and we had that temporary form so inside this add a document we use this set document method right so we're going to come back to here and what we'd like to do is use that method as well so we're going to say await set talk and it's going to take this document method and then we're gonna have our database which is it's firestore let's just import this and then we're gonna have inside users collection and as the ID we can we need to give it because we are using this set method they give that ID and we actually want that as well so we're gonna say new user that we just created new user it is coming from here right new user Dot user.id and then we want to give now the data so I'm going to say user data is going to be an object which we're gonna have here so this user data is going to have the uid right we're gonna say the user ID is going to be new user ID it's going to have the email it's gonna have the display name which is coming from our input so we would like to have it created at Fields so created add which is going to be maybe date start now and also you would like to have it updated ad it's also going to be data now we're gonna have the light problems it's going to be an empty array dislike oops display problems so we're gonna have solve problems and maybe art problems right our users want to start the problem and I think that was all the fields that we need let me just double check that update created at solve problems start dislike liked email display name and ID yeah this is the old thing that we need so it gives us some error maybe ID does not exist on so that should be user.uid not the ID and this field is coming from the firestore if you don't know and after this maybe we would like to do some um so they may be user friendly stuff where we're gonna import our toast it's gonna be toast.loading we're just gonna say maybe creating your account and then we can give it some object as like the position is going to be top tenor we're gonna have also the toast ID which you'll see why in a minute so those ID could be maybe the loading toast and then once we so instead once we have an error we would like to also do toolstad error and you'll like show that error.message in our top Center we don't want the toast ID so we can just delete this and open this and finally either it's um so either we success or we have an error we we just want to remove that floating uh toast so now you can toast that dismiss with this ID that we just give now the toastify you will know that it should only remove this loading tools from our screen and I think with this we should be ready to go so let's just save it and try to sign up one more user so I will come back to here and I would like to log out from this account which was John Doe so I will click this and I just realized that there is some bug here we don't want this timer to be here and we don't have a user right when we log that we don't want to see this timer so for this I will come back to here I think it was inside the top bar so we had this Pro if we had in the problem page we would like to show the timer but it should be if we have logged in and you are in the problem page then we would like to show this timer I'll save this come back to here it should be yeah like we don't see that right now so now let's try to sign up with a new account I will create an account I'm gonna say test thing ADD test dot com and display name could be test we're not using that anyways so for the password we'll say John Doe so let's try to register you see that creating your account and yes this is awesome we have our user we are logged in and now let's just check our collections in our database so refresh this and hopefully you're going to see that users collection and there we go so we're going to click this so this is the uid that we got and we have all these fields created at updated at dislike problems like problems they are empty arrays for now and we got the email display name and everything really so all the data that we just provided here right so this object is passed into our database within our users collection and for the ID we give the user ID and here now we can delete that to John Doe because so the first John Doe that we created because we didn't implement this part now if John Doe like the problem or disliked the problem it will not be added into here so we can basically come to here and just delete the John Doe from here and yeah this is the only user now we have if you realize we have like user ID starts with j g and maybe as jdd if we take a look at here we'll also see that ID as the user ID right so it is because we are using it from here yeah so as the next step since we have our data in our database the problem data and the user data now I actually want to fetch that problem data which was the like dislike count and the difficulty of the problem so for this I will come back inside this on the problem page so let's just collapse everything for now inside the pages inside the problem page PID where we sent our workspace right inside workspace we had the problem description and it had the it was this left hand side right we had the like and dislike count so here what I'm going to do is um actually just fetch that data from our database so for this I'm going to use the same apps Direction logic where I'm just gonna call my hook that I will be creating I'm going to say use maybe get current problem right because in this page we are only going to have one problem right so let's see this is the two sum page and then we will be have maybe Jump game so this page is only gonna be for one problem as you already know so I want to send this problem ID to this page so that we know which data should be fetched okay and at the bottom of our page I'm gonna create my function which is going to be use get current problem and it's gonna take the problem ID and it's going to be the type of string and inside here we're gonna do some data fetching logic right since we are going to be doing data fetching the first thing that comes to my mind is that use effect all right and let's just initialize it on Mount and we need to import this let's do a control space it doesn't suggest us for some reason so I'm going to just delete this react and I'm going to say use effect coming from react So Below this what we're going to be doing like we're gonna have that pitching data logic but we need to have some state right so first thing that we'll have is going to be that current problem and it's going to be type of actually B problem right we are pitching that from the database so it either is going to be that DB problem or it's going to be null and initially it's going to be null so let's import use date it'll not um suggest us so let's just do it manually so I'm going to say use date from react and then the next thing that we need is going to be the loading so set loading is going to be Boolean and initially it's going to be true and also we'll need a problem difficulty class so maybe yeah difficulty class and then set difficulty class so set problem and yeah so initially it's going to be actually an empty string and you'll see why we use this so actually like depending on the problem type or like the difficulty of the problem we're gonna have different classes so here I want to fetch the data but before that let's just say return an object with the current current problem that we fetched the loading State as well as difficulty class so here I'm gonna have an asynchronous function so I get problem from DB so it's going to be cons to get um maybe like the current uh problem maybe async function and inside this first we'll say set loading to be true and at the end we're going to say it's uploading to false but let's just do the intermediary step which is going to be fetching the data so I don't know how to fetch the data so I'm gonna go back to Google uh to the Firebase documentation so just type get data from uh so from Firebase and open the first link so get a document right we previously did get multiple documents from a collection but now we would like to get only one document so click here and it'll take us to this code example so in the example they use this document method which they pass the database as well as the collection name and then as the last parameter they pass this document ID and they use get doc to get the document and then they check if it exists or not so we're going to be doing pretty much the exact same thing so let's just go back to vs code where I'm gonna say so first get the document reference so I'm going to say const document reference is going to be um that document method coming from Firebase if we take a look at it it is coming from here Firebase slash slash firestore and then below here we're gonna say so we're gonna pass actually the our database it's gonna be firestore and then we're gonna pass our collection name there's going to be problems and then the uh so did that look like fetch is going to be that problem ID so we're gonna pass the problem ID let's say it is twosome it is gonna fetch this to some object and it is gonna return us this data so that's why we're passing that and below this we're gonna say cons document snap and it's going to be equal to a rate document ref.get so maybe that was the old way that's why co-pilot suggests us but we're gonna say get talk and that should be importing from firestore as well and we're gonna pass this document reference so this is how it works with Firebase so now we're going to check if the document exists so we'll say const problem and it's going to be document snap dot data and now actually we can just console.lock this problem and you could say uh current problem is your problem is here and then we need to call this function right it's going to be a head current problem and for the dependence area we're going to add that problem ID that we're getting as the parameter so let's just save this and take a look at our localhost refresh the Page open the console and we'll get the current problem so this is the data that we have in our database right for the two sum we got the title ID category difficulty likes dislikes order and the video ID so for this we can so let's do the rest actually so at the bottom once we get got this data we would like to change our state rate so we'll say Set current problem to be an object so we'll say it's gonna get the ID which is gonna be the document snap dot ID and then we'll have we're going to just basically restructure the problem as be a problem so the last thing that we would like to do is going to be updating this set problem difficulty class now it can be either be easy or like medium or eventually it's going to be hard so we'll say that problem difficulty class so let's just expand this and we'll say if the problem is going to be a lowercase the problem that difficulty if it is easy so it should be uppercase or like um capitalized so if it is easy then our class name is going to be BG Olive and text all it so if it is not easy then there is two other um for the possibilities either is going to be medium or it's going to be hard so if the problem that difficulty is equal to medium then it's going to have BG yellow and text yellow I guess for text dark yellow as well as BG dark yellow and if it is not medium then there is only one chance or the option which is going to be that PG dark pink for the heart problem and then text dark pink so just like this and eventually we can set our loading state to false and now just save this one come back to here um so take this data from here we're gonna destructure it so we'll say get the current problem loading State and problem difficulty class foreign actually we would like to replace the data with the real data right now we have the light count display count and the difficulty so I'm just gonna actually cut this div from here and for a second I'm gonna cut it and I will say if it is not loading and if there is the current problem if you got this now we want to render this so I'm going to paste it again so here it's gonna be current problem that difficult okay and then here we're gonna have the current problem that likes and here we're gonna have um the current problem that dislikes and so far that should be good but also we would like to have that class name that we got so that should be inside this one so we can delete this text Olive BGR live this is going to be dynamic so dollar sign and the curly braces you're going to say problem difficulty class that is coming from our hook so now let's just save this and go back to our Local Host now this is the data that we got for the two sum great so it is easy zero likes zero dislike so far now let's just update this to some with difficulty of medium and let's say it's going to be medium up it is refresh this page it is going to be that um yellow color that we can see here and if you make it so to make it hard then it's gonna get that pink dark color as we can see in for a second it doesn't show us because it is in the loading State and maybe we could add some skeleton for this so I'm just gonna update this to some with easy this is how it should be so now this is the correct data we are going to come back after this um where it should be so after this loading stuff we will say if it is loading then we're gonna return something else so and render this portion and now let's take a look what are we doing in our original demo so if if you can see here now let me just slow down this little bit so fast 3G preface the page we have one rectangular one circular two more rectangular and one more circular skeleton so this is what you'd like to have so I'm gonna say um here we're gonna have a div with the with some classes it's gonna have class name margin top three flags base X to be two to give some spacing and now as we said before it's gonna have one rectangular and one Circle two more rectangular and then one more Circle so for this I can just say rectangular or like rectangle so rectangle skeleton rectangle skeleton I'm just gonna call this and then I will have Circle so Circle skeleton and then like two more rectangular skeletons and then one more Circle skeleton right and I'm just gonna create this at the bottom of our file or maybe let's actually create its own file so inside the components you're gonna have our skeletons folder Kelly so if I can type skeletons and then we're gonna have the Circle Circle skeleton that should be TSX and then rectangle dot TSX let's do a tfcd to get the boilerplate we don't need any props so delete this and inside our Circle for like rectangle skeleton let's just rename this rectangle skeleton and now we can just say oops so rectangle skeleton and then here we're gonna have some class names and two more tips I guess so the first one is gonna have class names of space um space y 2.5 and animate is going to be pulse and then inside we're gonna have one more div which is gonna have class names of flags items thinner and width of full X of 2 and then inside we will have one more div and it's going to have some class names it's going to be height of six width of 12 and then round it full if I can see that rounded full and an arc but actually like background is going to be a park fill of three and so it should be PG dark fill 3 like this and now we can save this it's going to be for the rectangle and for this circle we're gonna have some kind of similar stuff so we can delete props and so inside is gonna have some class names almost the same thing I don't know why I type everything from scratch so I'm gonna now import keys and import this one as well now let's save this and change this for so to no throttling so that we got our original state so I'm gonna refresh this now for a second we see that loading state so this is the output that we got we have that same loading skeletons as we have in our demo app so now we would like to so we would like to be able to like the problems and dislike the problems but before that we need something some data which is going to be if we already like the problem or we didn't so did we dislike the problem or we didn't because now there is no way to know if I already like this problem or not and depending on this we're going to update the UI so once I like it like it it's gonna be that blue button and then like count is going to be incrementing so for this we need to get the user's data on the problem so we're going to create one more hook and it's going to be again be at the bottom of our file so I am going to call it as some function so it's going to be a hook so that's why it should start with the name of use so use get a problem or maybe use get users data on a problem right we're gonna give the problem ID and it's going to be type of string and then we're going to do our logic here so if you didn't understand still like why we're using this hook um I think you're gonna understand that once we use this and get the data out of it so if you still didn't understand it let me just uh finish this hook and integrate it and then you're gonna see why we are using this so as always fetching data logic is going to be here so user f8 says I am here dude don't forget me so we're gonna import this and it's going to be in on Mount we're gonna add that dependence area later so it's going to have a function that gets the user's data on the problem and then we're going to call this function on get users data on problem and then here we're gonna have some state right so we're gonna have cons data set data and initially it's going to be an object right so it is going to have the like so light pulls dislike pulse start false and solved goals right so initially we're gonna think that user didn't like the problem didn't dislike didn't start and didn't solve the problem so it's going to be initial State and like immediately after we call this we're going to be fetching that data and then update this so here we would like to also get our user which is going to be coming from our old uh good friend which which was used both stage that is coming from react Firebase hooks so we're gonna pass our authentication object into this so and now we are ready to actually build this function so I'm gonna say const user ref it's gonna be the document firestore users so I will import this import the document maybe so actually we already imported that because we used it up here so from the users you're gonna have from the user's collection you will get the user.uid so we can say it's going to be all we are going to always have this user object so we can show it with a question mark and then below this we're gonna again have the user snapshot so that should be cons if I can type const user snap and then it's gonna be a way to get the document user ref so it will say if user snap is exists right if it exists then you will get the data from it so it's going to be usersnap.data so if you remember in this data so inside our the database for a user we had the liked problems array solved problems start problems and dislike problems array as well as these other sorted fields and in this case we would like to just get this arrays right so it's going to be cons structure this and by the way I I think here I said that we are destructuring this but actually we are spreading this okay that was kind of mispronounced so here we are gonna get the solved problems and then the light problems array problems and then it's like problems as well as the start problems right and it's going to be coming from the data and we would like to set this data if this light problems array includes this current uh the problem so we're gonna get we're gonna do the same thing for dislike problems uh start problems as well as the solve problems and this is going to be our state so if user um so inside that so so this is going to be actually that's like the problems array so it's going to have maybe two dash sum so that was the problem ID so maybe we would like if we're gonna have the jump game if you go there so solve this problem then it's gonna have these values and if this problem ID is inside this liked problems array then it's going to be returning true for this uh liked field so I think this is how I would explain this I think it could be explained a little bit better but I hope you get the point so we are going to be calling this function if we have a user right if you don't have user so if we are logged out so we cannot get that data right so we need to just self guard this by telling or like if God is we're going to say if we have user then call this function and one more thing when we uh so like unmount this project or like unmount this component not the project so we're gonna call this function so it's going to be running on unmount so it's gonna set this data to the initial state so let's just present this problem ID into here as well as well as the user so when I in our original demo when I go to the next problem it is gonna just um so it's gonna set this light disliked and solved and start stage two false initially and then it's gonna fetch it so when I go to the previous one this unmount function runs inside use effect and it set this data state to this object which is exact same as with this the default state right so this is why we are doing this and then at the bottom we're gonna say return an object which will get all the data as well as this fit data right set data so that we can so we're going to be using this later so I think this is the all function that we need so this will give us the um so the light dislike start and solved state of the user okay so now we would like to use this so go to above where we will use const so from here we'll say use um get users data on problem and we're going to give the problem ID and then we're gonna destructure some stuff it's gonna be if user like this select comma is like and solved set data and start and now I think we are ready to build our uh handle like dislike and start functions so when we click this it's gonna like or unlike and we're gonna click this it's gonna dislike or like undislike and then it's gonna start a problem or it's gonna unstart a problem but before we Implement that functions I just wanna do that hard coded because I just want to show you so inside this like stuff so where it was let me just find it um here so it is going to be here actually and we're gonna say if we didn't so like open actually braces we're gonna say if we like the problem okay we're gonna show this AI if you like okay so we're gonna cut this and just paste it and that should be maybe end end so I feel like you're going to give some class themes which is going to be text Arc blue s all right it's coming from that Tailwind config if you remember and then if it is unlike okay if we didn't like this then we're gonna show that without any classes so now save it and initially it is disliked straight we cannot like it so far that's why we are seeing it in this way and we have the user testing so I'm going to go to my database and inside users liked problems array I want to add some field into this it's going to be two dash sum so add this now this user has like this problem so refresh the page and hopefully we're gonna see that blue button right so this is what I mean so light is now true because this user so the liked problems array includes that problem ID which is the two sum and this evaluates the true and inside the dislikes array let's say it doesn't have that two sum right so inside the dislikes dislike problems or solved and start problems it doesn't have any Fields that's why they return pools so this is what I mean and now we can we are ready to build our handle like function so it is going to be this right so we're gonna say when we click this actually it's going to be this okay this function I'm sorry it's going to be this button I cannot speak today so I'm gonna say on click it is gonna preference the handle click function which we are going to create right now so I'm gonna say const handle click or maybe that should be handle like and the like so copy this paste it and then it's going to be an asynchronous function we're gonna do the like uh so the like logic here so first I'm going to say if we don't have a user so if we don't have a user then what I would like to do is I just wanna return from this function so it is not gonna run anymore and we have got some problems it could be so we are missing this Arrow so if we don't have user we're gonna return and before that we're gonna say post the error and we're going to say you must be logged in to like a problem and we can give some uh for the object the position is going to be top dinner as well as the theme gonna be let's say dark and we don't have this user it's going to be this user let's copy this come here paste it so take this above and yeah now if you don't have User it's going to give us this error so save it come back to here maybe in like now log out so save it just refresh this if I try to log in or I'm sorry if I try to like this it's gonna say you must be logged into like a problem so I want to actually make this the top left so that it'll give me from this side so try to like it'll it's gonna come from here I think it looks better so now I'm gonna log in so it was testing at test.com and John Doe now login it's gonna oops so it is not right so testing at key.com was in it like this testing at test.com now login so now we are inside we're gonna go to Tucson and we'll like this for some reason because we added it into our database so I'm gonna just exclude that from our liked problems um array so I'm going to delete this now if you refresh this it's gonna be false and we're not gonna have that blue button so now there are three states so our user might be already like the problem or maybe like this state he didn't liked it or he didn't dislike the problem when it when he clicked this like button the button will convert like the transfer to the blue button and then this count is going to be incremented by one so watch this so it's updating and now it's gonna be 11 and now the button is blue so the second case is if user already like this problem and still tries to like this problem one more so like once more let's just click this what's gonna happen so we cannot like twice this uh so the user is going to be unliking this problem so it's going to be decrementing by one and now we didn't like this and the last case is going to be if user is already dislike the problem so if he tried to like it what's gonna happen so if he cannot like and dislike the problem at the same time the light count is going to be incrementing by one and the dislike count is going to be decrementing by one now watch this I click this it's going to be 11 and now it's gonna be three so we got three cases and it is going to be like if he already liked if already disliked right already disliked and maybe neither so didn't like it and didn't dislike so when you click the like button it's gonna like it but if it is liked and you click like button again it's gonna unlike so the stuff that I just explained and so this function is going to be the really the most complicated one in this project so far it is because it it is gonna have really it's a lot of if else statements we need to handle and then there's one more stuff that is transactions okay we're going to be using Firebase transactions and what it really means is that I just uh created a diagram that I can explain better so here when you like the problem right when you click that like button what's going to happen so there is so there are gonna happen two different operations the first one is gonna be you would like to update the problems collection which means you're gonna increment the like count of the problem right when you click this it's going to be incrementing the light count and then you also need to update users collection which you need to add problem ID into liked problems array of that user because when that user log Dodge and then login back you need to hold that problem ID so that you can show hey you already like this problem and there you go a blue button right so when you like the problem if you update this and then the internet connection went off so you would not be able to update this one so this is not we want and to handle this Firebase really helps us and they introduce this um transactions where it is all of the operations is either gonna success or all of them is going to fail so this is what we would like to do and for this you'll we would like to go to the Firebase documentation so one last thing that before we get into the documentation so this idea allows our database something we called consistency so can assistant so your application or like your database is going to be even though they're in the different collections the data is going to be informed with each other so instead of let's say the inform but so they are going to be at the same kind of state the one of them is not going to be different than the other one okay so they are gonna act with each other so this is the benefit of transaction and now let's take a look at the documentation so I just typed in transaction file store to Google and click the first one so there are there is one one more thing that we call the batch rights so it is kind of similar to the transactions so it is but it's a little bit different where a batch rate is a set of write operations on one or more document and the transaction is a set of read and write operations and so we need to read some data beforehand so we're going to be using the transactions but I highly recommend you to just read this documentation so this page it is only maybe like five minutes read so you can take a look at the batch rates but I think I will go with the transactions so let's click the first one so updating data uh with transactions so as they say and as I said before so transactions will fail when the client is offline and so one more stuff read operations must come before write operations so this is really what you like to do and it just group multiple operations into a single transaction so we have like multiple group of operations but it's going to be uh so it's going to be come together and it's going to be act as one transaction so either it's gonna fail or it's gonna success and in their example they use this run transaction method pass their database they get a callback function with the transaction object and then read the data if it exists and do some update stuff so this is what we'd like to do and now let's build our handle like function so inside our handle like function I will set the code so I'm going to say a rate run transaction and it's going to be coming from the firestore Firebase so I will pass the firestore and then I will get my callback function with the transaction object so what I am going to do uh inside first I need to get my reference to the user wrap problem wrap and user data in the problem data so for this I'm going to say const user wrap and you're going to see why we need this so we're going to say document from firestore and get this user and then const problem graph I could say and it's going to be again from the problems and get this problem reference and then I'm going to say get the user document and now we should use transaction.get and we can see it here we use transaction.get and pass the reference so now we read our data for the user and now we're going to get the problem document or like the problem we're asking a problem document we're going to pass the problem reference and then now we have the user reference problem reference and user document as well as the problem document now we are going to say um so if both of them exists then we are going to say if user already liked the problem right so we got three cases so the first one is he or like did she already like the problem so in this case what you'd like to do we wanna up user reference by uh removing that problem ID inside that liked problems array so let's let me just comment it out so remove problem ID from liked problems on user data or like user argument and then the other case is we would like to increment the likes on the problem document so for this I'm going to say transaction dot update and here I'm gonna pass the user reference as well as an object this object is going to say liked problems and here what I'm going to do I will say get user document.data and filter the liked problems and just remove the current problem from that like problems array and then we would like to now up the problem document so we're going to get the problem ref and close this what we're going to do is just decrement the light count by one so we'll say like get the problem documented data likes count and -1 now this is we did all these inside our database now we need to show we need to update the UI right for this we we got some stuff in our uh so some stage not stuff but like here I forgot to also export this the Set current problem we also need to pass this here so we're going to get Set current problem and we're going to be updating that here so I will say control space get this Set current problem So Below these updates I'm gonna say Set current problem it is going to take the previous object like the previous date value and it's going to be returning an object with the previous values as well as we're going to be decrementing the likes count by one so so far we got some typescript errors and we're going to be handling that in a little bit and then we're going to say now we also need to since we that liked was true right if we liked then means the light is true now we need to make that false because we unlike this problem so we're going to say set data to have like only change the liked field so we're going to say get the previous state value and return an object with all the previous state and only change the like to be false so yeah this is actually what what we want to do in our liked case and now if like user else if dislike we're going to be doing something else and in the else case so neither like or neither already this late so what it says I cannot find this light so it should be this light and now we're going to be doing pretty much the same same thing here but let's just write it so we're gonna say transaction dot update and then we're gonna get our user reference Cloud close this object and then inside we're gonna say I liked problems just add that new problem ID into this so this is the case so I just want to make sure that we are all in the same page um so it's going to be this case so when user dislike this problem and now we are clicking this like button now what's gonna happen so the this icon decremented like can't uh increase right incremented so here we add that like problems into so that problem made into light problems and now also we'll take it from the dislike problems array we want to remove that problem ID now let's uh up a problem reference we're going to say transaction dot update and we're going to get the problem reference close this object and inside we're going to be doing is you just incremental Icon by 1 and decrement the display count also by one so we're going to say likes plus one dislikes minus one and now let's just update the UI it is going to be Set current problem so let me just take a look what it uh so what it suggests us so legs count is incremented with previous and dislikes count is decremented depending on the previous state so I think that looks good to me this is correct and then we need to also update the set data and it's going to change the like to true and select to false and with this I think we handle this case as well and now let's do let's just format this a little bit like this this and maybe like this now we're in the else case so this case is the easiest one so user didn't liked or didn't display it you're going to be only updating the like count by one and add that problem ID into the liked problems so we're gonna say transaction dot up up it and user reference close this object and we're going to say like problems into the like problems array add this problem ID which is going to be two sum in this case and then yeah and then we're gonna come here we're gonna say transaction dot update problem reference Clauses object and just increment the light count by one then update the UI because this is for the database stuff and now we need to show that it is updated on the UI we're going to say Set current problem hit the previous values and just incremental I count by one and then make the liked field to true so to be honest this is all we need for this function at least so far so now let's just save this and come back to our localhost and let's just hope that it's gonna work so refresh this just in case and when I click this it is for a second it it was loading and now as you can see it is updated the light count is incremented by one and I think that to some ID is added into the liked problems array um so let's take a look so just to make sure that it works so inside our users like problems as we can see this testing user has uh so inside that live problems array we got the two sum ID and then inside our problems so let's see two sum the light count is one so as we can see we increment the light count by one and update the user collection by adding that problem ID into this array and now the one thing left is just let's show that floating state for this we can create one more state it is going to be cons updating and set updating and initially it's going to be false right use State initially it's going to be false uh when we click this then it's going to be true so we can just delete this so we're going to say set up hitting or like yeah set updating to be true and at the end of this it's going to be here we're going to say set up reading to be false and if it is updating we don't want to like it again so if it is updating we are going to return out of this function and what it really means so here in our original demo so when I like dislike or like unlike it's gonna have that loading seat for a second now just watch this now I cannot click this again it just um dislikes me so like returns from that function so I cannot like dislike again um this is what we would like to do that's why we're adding this line on 28. so now let's just show that um like spinning animation so it is gonna be I guess here we add that um so maybe this this side very if it is light we show this button with this color oops and now here if it is liked and it is not updating right then we want to show this so I'm going to just type all of them and then explain I think you can understand that better so I'm gonna say if it is updating and we want to show um that the loading animation so it's going to be AI outline loading three quarters AI outline so I would line three quarters loading three quarters and close this it's gonna have some class names and actually it's gonna have only one which is gonna be animate spin so it is updating and we're going to be showing this if you didn't like we're going to show that gray button and if you're late and it is not updating right if because it's updating we would like to show this um that loading spinning spin so if it is light and up not updating we want to show that blue button now let's just save this and pass it once more so in our localhost I'm gonna I would like to refresh this and now I am gonna click this it is gonna unlock this and as you can see for a second that has that loading animation so once more let's try to uh like this and as we can see so there is some flickering effect what's going on here ah I just realized so here if it is not light and it is not updating so it is not live and it's not upbeating then we want to show that gray button and now save this and now that should be exactly the same as our original demo now I'm gonna click this it's gonna have that loading animation for a second and now let's just double check if you unlike it so now if you take a look at here we got one like in the twosome right we got one like and in the user's problem I liked problems you got that to some now let's just unlike this I'm going to click that once more now the light count is zero and this user doesn't have that twosome inside this array it's going to be removed and inside the two sum the light count is zero so it's it's really 100 working so now I think we are ready to build this handle this light functionality and actually before we build that uh dislike functionality I would like to just get rid of this typescript errors so here what it really says is that like this Set current problem that we have here is expecting the type of DB problem or it's going to be null right it's going to be one of them so here we need to return either that object or we need to return null so I'm going to say if there is that previous state on the previous value I'm going to return this object but otherwise I'm gonna return null so now it just um it is happy with us so we're gonna do the same thing here so I'm gonna see if there is previous and return this return this otherwise just return null and then the same thing here if previous return this object otherwise just return null so there might be some other solutions that would work but I think this is uh it's the most straightforward in our case so now we can actually create our handle dislike function so I'm going to come here and I'm gonna say const handle this Lake and it's going to be async function again so inside here we're going to have our logic and let's just copy this and we're going to attach it into here in the dislike button so I'm going to say on click we're gonna paste this handle so we're gonna call this handle this like function so here it's going to actually be really similar to the handle like okay so we're gonna say if it's actually let's just copy this um just copy this part and then here I'm gonna paste it you must be logged in to it's like a problem and if if you don't have user we're going to show this error and if updating we're gonna return out of this function and setup bidding is going to be true so we're gonna have a weight run transaction we're going to give our database as well as we're going to get our call like function with our transaction object and now there is going to be some repeated code which I would like to create a function for this so we're gonna get the user reference problem reference uh user document as well as the problem document so instead of this let's just create a function that will return us these data so for this I'm going to come back to here like I'm gonna go here I'm gonna say const so what name could we give this so it returns us the user and problem data so I'm gonna just say cons to return uh user header and problem so name is pretty long but it doesn't really matter as long as our code is readable so it's going to be an async function and I think it's going to take a transaction object because or maybe it doesn't right so I'm just gonna call this like this and I will say so copy oops just copy this and paste it so we're gonna definitely have a user here um so it's not going to be null we can tell to the typescript that it's not going to be null with this exclamation point and then it says transaction um so it doesn't see this transaction for some reason and this is because that should be called within this run transaction method so for this I'm gonna give transaction parameter and it's going to be type of any and so now it should work and eventually we're going to return the user document as well as the problem document and then here we're going to check if it exists or not so now I can safely just delete this and I'm gonna call um return user data and problem data so passive transaction into this and then it is going to be so it's going to be actually reading this because it's an asynchronous function and I am gonna restructure that data so it's going to be a problem document and user document so we update our handle like function now I'm going to copy this line and paste it right here but there is some error that I just realized so I'm gonna paste it here but so here we also need user reference so I'm just gonna actually return everything so user reference and problem reference and get them structure them from here so problem reference is user reference so now it works and we're gonna do the same thing on here we're gonna import this import user reference and yeah this actually should be it now we got the user document everything and now we're gonna check the same thing that we did here so copy this and paste it so close that if statement or like the curly braces now there is again gonna be if I think three cases where user already so already disliked when you click that button maybe that problem should be would be already disliked or already like and or like neither Keys it's going to be not slight or not light so let's just first do the if it is already displayed so if it is like then what do you want to do so we're gonna say transaction dot update here as a reference call this object and then um we would like to inside that it's like problems we want to just remove that current problem that we are on disliking right so I don't know how to say that but we are removing that problem ID from that this like problems array and then we also need to update the problem reference where we're gonna document that as I count by one and now we updated the database now we need to update the user interface so the UI we're going to say the current problem is uh what's happening here we're decrementing the light count by one and this light is going to be false right and then now this is gonna be in the display uh statement now else if it is light so else if oops else if like and now we're gonna do transaction dot update and we're gonna pass our user reference and now what's gonna happen if it is light and we are now trying to dislike it because we're in the dislike function so we are going to add this problem into our dislike problems um array great and then we're gonna remove that uh problem ID from our light problems array because we cannot like and dislike at the same time as we talked about it this before so now we would like to also update the problem reference as always we're gonna be decrementing uh account by one and incrementing this I can't by one so increment this and decrement this and now a UI we're gonna get uh this likes count as plus one and likes count minus one and then set the data I'm sorry we're gonna have the dislike as true and like the state is going to be false and now the last case which is going to be else so the user didn't like or didn't dislike and now tries to dislike it this kind of um I would say like is confusing but I hope you get the point so we're going to be doing that transaction update stuff where we're going to have user reference and now we are trying to add that into our dislike problems array and then let's up hit our problem reference where we increment it is like count by one and then update the UI with just like count plus one and then let's just accept all them and this slide state is going to be true and then at the end of this I think it should be this one yeah at the end of this our transaction we're gonna say set updating is gonna be false right so we got everything done in this function save it and now let's try to test it so just refresh this page and now we are in the two sum problem and if we take a look at our database so the two sums doesn't have any Lake doesn't have any dislikes and user testing user doesn't have any liked and dislike problems so far so let's just try to like it and immediately take a look at it as you can see it is real time um so it just added into this like problems and actually we need to we should be testing the dislike count so it doesn't really matter now likes is working and now let's try to dislike this so as you can see it worked but we need to update the UI with that button so we're going to be implementing that right now but let's take a look at our database so the problem to sum now this like count is one and like count is zero and it is matching with our uh UI so here also let's take a look at our users inside this dislike problems we got the two sum ID but in the like problems we don't have anything now let's just do the reverse now I'm gonna like it as we can see this documented and light count is incremented by one and if we take a look at our database as we can see it just replace it so it is fully working now let's just update the UI as we did before so it was decide so it is going to be here where we can just uh you can say if it is it's like and it is not updating and we're going to show this uh this button with this class names and or like this icon and then if it is not it's like so if it if it is not disliked and not updating then we're going to show this in gray button without any color and otherwise if it is updating then we're going to show that spinning uh like the spinner I'll save this and come back to here and if you try to dislike it you're gonna get that button as blue because wait where it is like this and it's not updating then we're going to give that class name and now let's just uh reverse this if we click this once again so it's going to be decremented by one so we got the like and dislike functionality and now let's try to add that starring functionality so go back to inside TBS code inside this button we're gonna say on click we're going to call the handle star function which I will create right now I'll come back to here cons Kindle start it's going to be an asynchronous function and inside you're gonna actually copy and paste these lines copy this paste it and at the end eventually we're going to say setup reading to be false and if you don't have a user so we're going to say you must be logged in to start a problem and if it is updating we're going to return out of it and now set updating is true now there is two cases when our user tried to start it so if he or she is already like started when they click that again it's going to be OnStar this problem right but if it is not start and when they click that it's gonna be start so this is what you'd like to do and for this we don't need to use any transaction because um we are only updating one collection or like one document and it's gonna be that users collection and then user document and field is going to be that start problems array we're gonna only be taking that problem ID and then we're going to be appending that into this array so we don't have any data inside this problem as we can see inside the problems documents we don't have any Star account or Star rate anything like that so for this we'll just use the normal updating stuff where inside this edit document uh so the documentation we see also there is updated argument and here this is what we'd like to do so go back to inside PS code if user already if not start the problem actually if user not start the problem then we're going to try to start it so I'm going to say const user ref and it's going to be document firestore um inside users collection and get this user with giving it ID so this is what they do and what we're doing and then we'll try to actually update the document so I'm going to say a rate of this document and user ref close this object and then we're gonna say that start so start problems and we're gonna say a reunion and add that problem ID so this is how we add a data inside inside an array with Firebase import this and now this is I think what we would like to do now we up the database and let's uh just reflect that into our UI and now that start field should be true that state and now in the else case if user uh not start the problem already if did not already start the problem we're gonna try to uh I'm sorry so user did not already start the problem we run this portion and if he or she already start a problem we're gonna do undo this right and for this I'm gonna say const user reference again the same user and update the document to this user ref and we're gonna remove that problem ID from this array I'm going to say start problems and remove array remove the problem ID and update UI we're going to say set data start is going to be false and setup meeting is now false as well but before we test this let's just come back to here and add that loading State into so this line so for now let's just cut this and what we're going to be doing is actually the same thing that we did here so if it is star and if it is not updating then we want to show aif we'll start with a class name of text dark yellow takes dark not blue but it's going to be yellow and yeah this is our class that is coming from tail with config so import this from react icons Ai and then if it is not start and it's not operating then we're gonna be doing this um let's say not this one but so this icon here is our outline so after that if it is up hitting then we're going to show that uh spinner and now if we save this and come back here try to test it now I'm gonna refresh this and as we can see inside our test user we don't have any uh problems inside this start problems array so I'm gonna try to oops so we got an error okay that's great I wanted to show you this actually so you got the hydration error but this is not related to Firebase so we can just ignore this for now we're going to be handling that soon just refresh this it's gonna hopefully be gone so now try to start this and as we can see we got that updating and now it has been started actually let's take it at least um so double check it inside your database so it has been added into this third problems and now let's try to undo this it is going to be removed from here and it update the UI and now everything works perfectly as we wanted to have now we disliked it and started start problems got the twosome and dislike problems also got the two sum and this is going to be working for all of our problems so let's try to go to home page and let's check the valid parentheses and select it and start it so here it's going to be inside the start problems we got the two sum as well as the valid parentheses and inside the light problems we got valid parentheses as well so this is working as expected and now also let's just remove this like check icon if we have not solved this problem yet so we're gonna say but actually we don't have that Salt Field right so it's actually false yeah we got this so that should be what was it I don't remember so maybe Bui okay BS check to Circle so maybe we'll take say just cut this for now and if it is sold so if it is solved then render this and paste it since it's gonna be false it's not gonna show us and we're going to be implementing that as well okay now let's just try to add this uh logic where when we click the next Arrow it will gonna take us to the next problem and when we click this previous Arrow it'll gonna take us to the previous problem so as we got here when I click this I will be at the next problem and when I click this it I'm gonna be in the previous problem as I can see here so there are three main cases here so the first one is when you or it'd be a less problem and you are still trying to go to forward so it's going to be taking you to the first problem and then the second case is here when you're at the first problem and you are trying to go backwards it's going to be taking you to the less problem right so we're going to be so we need to handle that logic and the third case is like when you're in the middle so no logic actually is needed you just need to when you click the next one you're gonna be only incrementing the order by one and when you're in the like when you go to the previous one you're going to be decrementing your order by one so these are the three cases that we need to handle so for this uh let's just go to inside PS code and it's going to be inside the top part component and so let's just create our function which is going to be cons to handle problem change and it's going to take a parameter it's going to be is forward and it's going to be type of Boolean so when you click the next problem this forward is going to be true so which is going to be this right button so I'm going to say on click handle change problem and it's going to be is forward to true and on the previous button it's gonna be false so on click and delete this queue it's going to be a handle change problem to be false and now we need to get the current order of our problem and I'm going to be doing this by using my router that is coming from xjs so I'm going to say Roger use Roger import this from next router so now if I just try to console.log rotor.query okay so I'm gonna save it and open open my console in my local host and when I click this next button I'm gonna get my router.query and it has a field called PID because this is what we called our file right inside so as we can see the problem page ID was PID that's why we get it so now I'm going to use this actually so I'm gonna say um so let's just get hit current order where I'm gonna say uh problems that is problems that is coming from util's problems and then brought your query that PID so now it's going to be to sum and it's gonna get through some object within this problem object so I'm just gonna console.log this just to make sure that we are in the same page so save it and now if I click this I will get it to some object and if we take a closer look we can see that we got a field called order so let's just try to destruction this I'm gonna say so delete this console.logs and then this structure this const equal to order and so we got it and we can type cast this by saying as string and this is going to be the type of problem it's coming from utils types to the local problem type and then so our direction is going to be if it is forward it's going to be one otherwise it's going to be negative one right and then so get next problem order now const next problem order and it's gonna be order plus Direction so let's say we're in the first problem and we're trying to go to forward then it's going to be one plus one and let's say we are in the second problem and so we are trying to go backwards it's going to be 2 minus one it's gonna be one so the first problem and when we are in the first problem if you are trying to go backwards we're going to get the order of zero so this is not what we want so we're going to be handling that and it's gonna be one of the cases that I just mentioned so this is the next problem uh order and now let's just do that if else statements so if we are trying to go forward and there is not any next problem so next problem key and we need to create this next problem key so const next problem he which is going to be object the keys testing problems object and then from this we need to find it so each key so just Loop through them and problems the key dot order if it is equal to the next problem order so if this is the case so this is going to find the next problem order actually let's just uh console.log is so I know this is kind of complicated but you just need to take a look at code for a second so save it and if you are if I am in the first problem in the two sum when I click this it will get me to the like the next problem key which is going to be that reverse link list because in the home page um so the second problem is reverse link list now within this if I try to go forward what I'm gonna get is Jump game right because this is the third problem in our home page um so if we here try to go backwards that direction or like the next problem key right so the next problem key is undefined so we need to handle that so let's just try to do that first case where when we are in the last problem and we are still trying to go forward right we will get undefined so we need to push our user to the first problem so let's do this so I'm going to say if we are trying to go forward and there is not the next problem key not so let's just add that exclamation point and then we're gonna get the first problem key const first problem key and we're gonna say object dot piece and pass the problems inside and try to find so that should be a DOT and let's try to find that first problem key so I'm going to say Loop through each key and problems dot e dot order okay if it is equal to um if it's equal to one right and you are going to be pushing our user to that page so save it now let's try to do this in our last problem we are trying to go forward it's going to take us oops it take us to the twosome but that should be problems actually we uh so we missed an S here so save it and now let's go to this problem again so when I click this it is going to take me to the two sum so this is the first case and now if you are in the first problem and we are trying to go backward so let's try to do this what else if if it is not forward right and if it is so we don't have any next problem key we will try to get to the last problem key so we're going to say cons Last Problem D and it's going to be doing the same logic where if it's equal to the length so you just read this line to get it and we're gonna push our user to this page so now save it in inside our localhost if I try to go backwards from our first problem I will get to the next problem so the last problem and I click this I will get to the first one so now if I let's just do the last case this is going to be the regular one so I'm gonna say const or actually just Roger that push to the next problem key which is this one that we got so that should be it so from the two sum now I can go to forward forward backwards right it's kind of working fully perfect and this is what you'd like to have so I kind of feel like this function looks like a little bit complicated but just pause the video and read it for a second like maybe five minutes at most you should be able to understand it um not really complex stuff there is only like a lot of key handling going on here but this is our function that we have okay so previously we got an error of hydration and I said that we're going to be handling that soon or later now it is time to handle that and to handle that you need to understand what hydration means and I will I like highly recommend you to read this uh create blog post that has been written by Josh and it just covers everything that you need to know and as well as the solution I will immediately get into the solution but basically white hydration really means is that what has been rendered on the server and client if it if they don't match you will get an error so and specifically you will get the hydration error so to solve this you will have you so you need to kind of create a hook that says has mounted and let's just copy this and when we implement this you're going to be like you'll understand that better so inside the vs code um so let's create hook so collapse everything inside source not public so let's have a folder called Hooks and I'm gonna say use has mounted that on yes so I will just paste it so what we got and maybe instead of react we could just import the use effect from here so import ant use okay and use state from react so just delete this and eventually at the end you would like to return this has mounted State and also the component I'm going to say export default use has mounted so we have a state once this hook has been initialized like on Mount we got this has mounted to be true so now just save this and inside the home page so that should be index.psx so that was our home page and now we can basically use this so I'm gonna say const has mounted that is coming from use uh has mounted and just call it so here if it is not mounted still we're gonna return now so we're not gonna return anything until the our component has mounted and this is the solution so I again highly recommend you to read this um blog post so at most it's going to take you 10 minutes to read all of it and yeah this is our solution so now let's try to add code submission so this is the correct code for the Tucson problem and when we submit this we get this confetti as well as this congratulations message if it passes so for this we're going to be using a package called react confetti so let's just install this I will come back to here open up a new terminal and I'm going to say npmi react to confetti so just install this and we're going to be adding this into the workspace so inside the source components workspace so here we're gonna have that confetti so I'm gonna say import confetti from react confetti so this is going to be that container so I'm going to say confetti and so it's gonna have some parameters or props so the first one is going to be the gravity so it's going to be like how fast it's gonna be coming down so it's going to be a 0.3 and we're gonna have three in duration going to be basically like how many seconds it's gonna take and for us we're gonna put four seconds and then it's gonna have the width and height so for now let's just uh skip that so save it and now here in our demo so it only shows it in this uh top left corner so to just make it full width we're gonna add to one hook which is gonna be uh calculating the width of our screen uh dynamically so inside the hooks I will create one more hook called choose window size dot yes and now I'm gonna paste it which is going to be this hook I have got this from the chat GPT so it doesn't really matter it just calculates the height and width of our screen so I'm gonna save it and now here we would like to use that width and height so I'm gonna say use window size and call it so from here we're gonna say const with and height and we're gonna pass it so it's gonna have with as with and height as the height I'll save it here we're gonna see that it takes the full screen but there is like one pixels of overflow so just to solve this um what we're going to be doing is gonna be just minus one from the width and -1 from the height so now save it and hopefully it's gonna work without any overflowing stuff so we're not going to be showing this unless we submit the problem so we're gonna have one state for this so I'm gonna say const success And subscribe and set success and initially it's going to be false and import the use state so use State coming from react so just cut this Line it's gonna be if it's success then show that line that we just cut it so save it now it's not gonna show it because initially it's false and now if you make it through it's gonna work and it's gonna show that confetti so now let's actually try to implement that code submission so for this I'll come back to here and I will first change this to false and I want to send this set success uh function into this playground because we're going to be changing that success stage once we submit the code correctly so I'm gonna send this so it's going to be set success and inside the playground we're going to be taking that prop so it's going to be set success and it's going to be dispatch and Boolean so this structure this and now inside the editor footer we had that submit and run buttons so for this I will create a function that that says fonts handle submit and it's going to be just a function that alerts for now let's just submit it and or like maybe submit so I'm gonna send this function into this so I'm going to say handle or like yeah handle submit and I'm gonna say handle submit function so this component need to take this function so I will click this and as prop we're going to say handle handle submit it's going to be a function that returns nothing so this structure this function that's going to be handle submit and on collected this function as well as this function or like this button we're going to say on click just call that Kindle submit and so let's save this save this and save this one so when I click to this buttons it's just gonna alert as submit so this works as well now here what we're going to be doing is that inside the code mirror like that code editor that we had on change we are going to call a function called on change and let's just initialize it the const on change on change so it's going to be taking a value it's going to be the Playbook string and then here we're going to say console.log the value so save it and take a look at it in our console so I'm gonna open up here and in the localhost now if I try to write something I will get that latest code that I had in the editor so now I would like to save this right this is the user code I'm going to say const user code and set user code is going to be an empty string or actually it's not going to be empty string but it's going to be that problem problem the starter code so it's going to be that boilerplate initially and then once we try to change or when we type something in we would like to update that state with the latest value now we we are ready to build this handle submit function so first if if we don't have a user rate you would like to just return some errors so I'm going to say if not user then let's get the user from here we're going to say cons user is going to be used oh State and then we're gonna pass the authentication object that we had so now if you don't have a user I'm going to say toast and import this error please log in oops twist that error please log in to submit your code and let's give it some uh so to say like options I'm going to say position oops position and it's going to be top Center and Auto close gonna be three seconds in theme is going to be dark and then we're gonna return out of it so we're not gonna run the rest of the function so we handle our error if we don't have a user now what you'd like to do is to try to run our code right so I'm going to get give some try and catch block and I'm gonna make this asynchronous so that we can do some database stuff here so first of all I'm just gonna say um so let's just do the catch uh stuff here so I'm gonna say just post or maybe like console.log the error for now at least and then in the try block we will try to run the user's code so for this let's what I'm going to do is I'm going to say just cons to callback it's gonna be new function and what we're going to be doing here is that like we have a string right this is our string and we need to convert this into a function so that we can run it and evaluate its value so to make it from this like from a string to have a function we can use this new function Constructor that is built in in JavaScript so here I'm going to say return the user like dollar sign and user code so if we execute this it's going to give that user's code as a function not a string so now we would like to test this and I'm going to say result and we're gonna pass this into that um so the problem uh so the Handler function so let me just type in and I'm going to show you it's going to be from the problems that is coming from utils and we'll say PID which we are going to take from our um so the router so I'm going to say const launcher and it's going to be use router now if you remember router was an object that has the query field right to query and then query has APK the field so now I just destructured it like this and this is how you can do multiple destructuring in one line so we got the PID now PID as string and then we would like to just run that Handler function and then we're going to pass the Callback inside so far we have a typescript error but we're going to be handling that soon so now what are we doing here so we got the user's code and converted it into a function now we get it as a callback function or like just a regular function but we're going to pass it as callback function so here inside the problems so let's take a look at it so problems.pid so so far we are in the which problem like search the 3D Matrix so it will come to here okay so it's gonna pass this search 3D Matrix here and then it will try to run the Handler function and pass that callback into it so it's going to try to run this Handler function which is this one right search it 3D Matrix Handler and it's going to pass that callback here as a function and then we will try to run that function for all of our test cases and if it passes all of them so if it is equal to the result so result is equal to answer then at the end we're going to return true but otherwise we're gonna throw an error so so now I'm gonna say if the result right or like I can say this could be success because it's going to be either true or false now I'm going to say if success then I would like to just say uh maybe post a success um so let's just take this and change it so congrats congrats and all has passed so it's going to be on the top Center in autoclase three seconds theme dark and set success is gonna be true now that we were getting as a prop and now after this so once the set success is true we are going to show that um confetti and we don't want it to have like for the um so you want to remove that after like three or four seconds now I'm gonna say set timeout after this uh toast.success right I'm gonna say set timeout and just initialize it like this and give it like four seconds and I'm gonna say set success now should be false so now if we save this and come back to here inside let's try to solve it to some and I'm just gonna get the solution from here so I can just copy this and I'm gonna paste it now if we try to run this or submit this we're gonna get is congratulation message because our test passes now let's just do some errors so it's not going to be the correct code and now we're gonna get an error in our console and as we can see it says uh expected values to be strictly deep equal so basically this is our error so now we can basically just come to here and say toast dot error that error but I want to just show some L bit better error message so I'm gonna say if error write error in the message if it starts with okay so and just come here and try to copy this portion so if it starts with this and I know that it is an assertion error so the expected value is not equal to the one that we're expecting so I'm gonna just copy it and paste it so we got an e here so if this is the case then we're gonna say closed dot oops it was that error so we'll say oops one or more test cases failed and we're gonna pass our object inside but first let's just correct this and we're gonna pass our object so it's going to be position tab Center Auto close and theme dark so otherwise so this is going to be also type of any and now if this is not our message in the else case we're just going to say toast.error and it's going to be here I'm sorry this is going to be else plus that error just something ran wrong or maybe the error.message we can show it here so error the message so now let's try to do this and in this case if we write the wrong code we are going to get an error and it's gonna say so didn't we save it so actually saved it now let's try to do this one more and try to copy this paste it inside so that was the correct code but now let's try to run code so I think we copied that wrong so let's just come here and console.log the error again or like error.message maybe so now submit this okay so if it starts with this I'm going to just copy this and replace this here so if this is the case then we're gonna say test cases failed so here now let's try to do this one once more so I'm gonna submit it's gonna say one or more test cases failed and yeah this is actually the function that we are doing so let me just quickly reiterate what we are doing here so first we check if the user is not logged in then we're going to show this error and remove like get out of this function and then if you have a user we will take the user code and convert it into a function then we store it inside the Callback variable we're gonna pass it into our Handler function as a callback function so currently we're in the two sum problem right and our PID is two sum as you can see here so inside the problems object we're going to find the two sum which is going to be this object and then from here we'll try to call that Handler function I'm just going to call this Handler to some and we pass that callback and we'll Loop through our test cases and all of them passes successfully then we're gonna return true otherwise we're gonna throw an error and then we're gonna if we have an error we're gonna catch it here and we will show some error notifications but otherwise we are gonna show that congrats message and now we would like to since we solve the problem correctly we would like to add this into our database so inside this if success uh close I'm gonna come here I'm gonna say const and user wrap so if you remember in our database so here inside our users we had a solved problems array now we would like to push it into here so here I'm going to say use ref so it should be I think document right so document imported from Firebase and pass the firestore inside users collection and our current user so we got user reference now you would like to just update that field or the update that user reference I'm going to say update the document import this and I'm gonna pass user reference with an object so I'm going to say solve problems it's going to be array Union right it's going to add that PID inside to the solved problems array so save it now once we submit this right here so I'm gonna just this is the correct code I'm going to try to submit this it's gonna say congrats all tests past and now if we just refresh this we are gonna get that check mark because we solved the problem and if we take a look at it in our database we're going to see that this user has two sum inside the solves problems array so one more optimization that I would like to do so let's just remove this from here so another user did install this problem and we got a hydration error in the problems page as well we're gonna handle this in in a minute so if you just refresh the page We're not gonna get that submitted uh or like sold check mark so I want to get this whenever I when I submit this okay if I pass then I immediately wanted to have here I don't want to refresh the page to see that if I solved it or not so this is kind of a better user experience and for this I will come inside the workspace right so I'm gonna say const and I'm gonna say sold it's going to be a state sold and set sold and initially it's gonna be false okay I'm gonna send this sold uh function or like the state so I'm going to say salt and maybe that should be underscore sold and press that solved inside open up the problem description so here if you remember we already have a solved field that is coming from the database now also I'm gonna have once one more that is going to be the Boolean but it's going to be the local state so I'm gonna say underscore salt and when I am going to change this is once I submit the problem inside here so here I'm gonna say uh playground should get that is that so set solved state or like function set so pass it here and inside the playground we're gonna get that as a prop so here just import this and when I submitted successfully right at the bottom here I'm gonna say that sold to be true now I'm Gonna Save this file in here what I'm going to be doing is that we got some like solved and if we solve then we're gonna show that check mark but I'm gonna say if it is solved or okay so or if it is underscore solved right if it is just sold right um then I wanna render this portion so what are we doing here so initially we're gonna check if this problem has already been solved if it has been solved then we're gonna show that check mark if it is not been solved and when the user tried to click that submit button if that passes this is going to be true and if it's if it's that true then we're gonna show it so now let me just show you I think you're gonna understand this I'm Gonna Save it here and come back to here now I'm gonna delete this from here okay and I'm just gonna refresh the page now I will get the solution and this problem is not been sold yet I'm gonna paste it and this is the correct code when I submit this just watch this it's gonna immediately update in real time because our state has been is gonna change and now when I click the submit as you can see I got that submission check mark here so this is how we can mutate your state or like have them in like in concurrent state with your database um I just want to show you guys uh this one so now we can try to have this code in our local storage because watch what's gonna happen when I refresh this I just lost that code that I just submitted so I want to save it in our local storage and before we do that I actually want to solve that hydration error in our problem page so here I will come back into pages so here inside the home page we added it so which was this two lines I'm going to copy this and come here and paste it to here and import this and now that should be that error should be gone and if you get it anytime I mean like when you refresh the page just let me know in the comments or ask it in my Discord channel so now let's try to add the local storage so here I would like to just come back into vs code and I think it's going to be inside the playground where we were changing the value of the code editor so we're not gonna only update the state but I'm gonna also say local storage dot set item and that item it's gonna be back takes it's gonna be code dash problem ID and we're gonna pass the value by stringifying it so we're gonna stringify it and we're gonna have it in our local storage so now if we take a look at it in our console application here whenever I type something in like as you can see it is updating in real time so hi this is working so this is uh in our local storage now what I'm gonna do is inside a user effect I'm gonna fetch it so I will say use effect and initialize it on Mount for now and let's import this use effect so use State as well as the use effect here I will say let's get the code from the local storage I'm gonna say local storage and get the item and with the code dash PID and if we have a user and if we don't have a user so we're going to be handling that depending on the user so if we have a user then we're gonna say set the user code to be the code that we have and so if you have the codes I'm going to say json.parse if I can type json.parse the code and otherwise we're going to give that boilerplate the starter code and in the else case if the user is logged out we're just gonna immediately pass that boilerplate code and we're gonna pass dependencies it's going to be PID user as well as the problem dot starter code and in order to work we need to change this code mirror value so where it was to be the user code so user code save it and now if I just refresh the page I will hopefully still get this code right so whatever I type in so I'm gonna copy this solution and paste it submit it so we passed it and now if I refresh it hopefully I will still get that code because it is trying to fetch it from the local storage but however if I log out it's gonna be the um I could say the Border plate code and you can handle this however you want so now we have one more problem so let's just log in first so it was testing at test.com I guess in the password because John Doe try to log in okay now if we come back to here inside the reverse link list so if I try to just say console.log hey and if I just try to submit this it's going to say FN is not the function so this FN is that callback that we had in our so here so I'm going to say linked list so it's gonna be this FN so where is it so this is so this is where we are getting that error but why this is not a function because here we have some string or like the comment and we are trying to convert this into a function so it was inside the playground and here right we were trying to use uh return this code as a function convert this user code into that function and here we have some comments it cannot it is not able to convert this a function because of this lines so this is why we had the field so if you remember I said that we're gonna have this starter function name and I'm gonna explain that later now it is time to explain this so we are gonna slice this code okay we are only gonna take from here until the end when we execute the user's code so we will not uh evaluate this part because this is uh so to say a comment so let's say user uh write the solution for the twosome and he also want to say like the time complexity is going to be o of n but now he wants to just submit this and it's going to get the same error so for this we don't want to evaluate this lines and so let's say we have more we don't want to evaluate all these we just wanna evaluate from here until the end so that's why we had that starter function name and for each problem we have it function in the function name so for the two sum it's going to be function two sum and the parentheses so for this it's going to be function reverse link list in here so you can even include all these lines it doesn't really matter so here I'm gonna say inside the playground so I will first make this user code by making it let and now I'm gonna mutate this I'm gonna say the user code is going to be equal to user code dot slice and it's gonna take from user code but index of and problem that starter function name and now what I'm gonna do is what is happening here it only takes from that starting from here it tries to evaluate it doesn't really care about these comments before the actual function so this is kind of complicated and I don't know if I explained explain it in the past way but this is what it is now if we try to save it and let's try to run this function it's gonna say um so this is a error for the reverse like this but here if we try to submit here it is gonna hopefully work as you can see it says all test passed and it didn't care about these comments that we have here so now I say like space complexity is going to be of n as well it's gonna still work and it doesn't really care so now if we try to run the correct code for the reverse link list and I'm gonna paste it so this is the correct solution and if we submit this it is also going to work and now if I go to this problem it is going to get this from the local storage and if I go to this one it is going to get this from the local storage so I think we are done with all the functionalities we did the local storage we submit our code and it has been added into our database now we can see that reverse link list is also in the salt problems array and we got pretty much everything in this page the only left stuff is this full screen and then the settings now I think it is time to add them so before we add them I just want to get rid of this error so here this Handler function can be type of string or the function so it says string is not callable if this is a string so since string is not callable we can just convert this into like we're not gonna call it but it's going to be a reference to this function and I can say it's going to be the Handler and here we're going to say if type of a Handler is equal to function then we would like to run this so I'm going to say cons success is gonna be calling that Handler with the Callback so now I can just put all these into this if statement and now this is we how we get rid of that error so we didn't change anything any implementation we just got rid of this error so now if I save this it should work exactly the same that it was working so yeah if we go to the two sum here we can submit this and it's gonna run correctly we can even run it so yeah this is how it works and now let's try to add this full screen first so for this if you remember we had preference navbar um here what you'd like to do is whenever we click this button right so on click I will say will have a function that says handle full screen it's going to be calling that function and we're going to create this phone's handle full screen and it's going to be empty function for now and then here what you'd like to say is actually if it is not full screen right if it is not full screen then we want to show this icon that we have bottom and if it is full screen then we're going to say AI outline full screen exit and we're going to import this now we can oops can delete this line and have a state called is full screen so cons is full screen and initially it's going to be false now let's import the use date as well as use effect to State and use effect so now inside this function we are going to say if if we are in the full screen so if it is full screen then we're gonna say document dot exit full screen and if you are not in the full screen then we're gonna request for the full screen so we're going to say document dot document element and request full screen and then we're gonna set our state to whatever it was previously to like to negate it okay so if it was false then it's going to be true and it was true it's going to be false and now finally inside the use effect which I'm gonna just gonna paste it so here we are first checking like listening for the event listener of full screen change and we add three more lines to uh affect the other uh the browsers so for the Safari and chrome Mozilla and Microsoft Edge so once the full screen change events uh happens it's going to call this function and it says if document dot full screen element so what it basically says if it is not in the full screen mode then set is full screen state to false and otherwise set it to true now if we save this and you can just pause the video and analyze this code for a second and when I click this I'm gonna get into full screen and as you can see the icon has changed here and now if I click that again it's gonna be exiting the full screen and SK keyword I think is also gonna work and yeah so this is how we added a full screen functionality okay so now let's try to add this functionality of settings model and you'll be able to change the font size depending on this um drop down so it's going to be from 12 pixels to 18 pixels and once we change it it's going to be changing the inside the code editor and then we're gonna save it into local storage so that when we refresh the page it's still gonna be the font size that we um put in in the last in the last time so here I will go back into the playground and I am going to create the state so it's going to be cons settings and it's going to be inside an array so settings set settings so it's going to be a use state of an object so it's going to have the font size initially it can be like 16 pixels and then it's gonna have two more fields which is going to be settings model is open is open it's going to be false and drop down so drop down is open and it's also going to be false now let's just create an interface for this I'm going to say I settings and create it here export interface eye settings it's gonna have these fields font size type of string headings model is open type of Boolean and then drop down is open also Boolean so here settings model is open State we have it because like when you click this Now settings model is open is going to be true and then when you click this the drop down also going to be true and when you click this again now it's going to be false it's not going to show us that drop down and when we close this the settings model is open state is also going to be false that's why we have the like two of them and now what we would like to do is pass the settings to the preference nav bar so I will come back to here and I'm gonna say this component is going to take settings and then it's going to take the set settings function settings and then let's go to inside the preference nav bar and here I would like to also say that font size is going to be settings but set settings but settings Oops why it does this okay now it's gonna take the font size but it doesn't give me did I did that wrong so settings okay now it's gonna work and I'm gonna say settings dot font size and now I can go to the inside preference nav bar it's gonna take two props I'm just gonna be the settings and it's going to be a type of interface settings and I'm going to import this and then it's also going to have the set settings which is going to be the type of dispatch of interface settings and then I'm gonna say set headings and get the settings so here what I would like to do now I'm gonna say at the bottom of our page I'm gonna say if settings dot uh if settings model is open and I'm gonna I would like to show a component which is going to be that settings model component which will create in a minute settings model and then so it's going to be just like this now let's try to build this components so for this component I will actually give you the Bare Bones of it in a coded way so let's just go to the inside models now I'm going to say settings model dot ESX and then I'm just gonna paste it and you can grab it from the GitHub gist in the description below so if you just save this and then come back to here uh import this save this file and then save the playground and inside the localhost what are we gonna see so we're gonna see nothing because um this initially is false right so we say if the settings model is open then show this but here the setting model is open field is going to be false now if you make this through then we should be able to see that in our local host and yeah this is what you'd like to see for now and what is happening here let me just quickly walk you through so first what do we have here so I'm not going to explain the HTML and CSS part but right there I'm going to explain the logic so here we're gonna have an overlay which is going to be that background that you can see that is around this model and then we have the settings header with a close button which is going to be this part and then we have a little bit of description and then the drop down menu so this drop down is open we have it as true now if I say that it's going to be false it is not going to show this portion so save this now it's not gonna show me that but if it was true it's gonna show and then we have an array of editor editor font sizes so here it starts from the 12 pixels to 18 pixels that's what we can see here and then for each of them right so the each of these like 12 pixels 13 14 15 so each of them is a list value and then I extracted it into its own component so we'll Loop through these font sizes and each of them is going to be this one sizes like 12 13 14 until the end of it so for each of them we render this component which is at the bottom of our component or like at the bottom of our file so what it does it takes a font size and it renders that so this is that like uh that font size field and then it says selected option so the selected option is like 14 now if I said that it's going to be 18 pixels now then it's gonna put that check mark into here so what it does is whatever the selected option is it checks and if so it changes the font uh so the font weight the medium and then put that check mark as you can see here it even makes it visible or invisible and then we also have an interface for this components um so I think this is basically it for now and now we will try to add all the functionalities to this component so now first of all let's just go back to here and let's say that um and also I want to show you this now we can just delete this um but okay like I will show you later so here let's just make this false to the initial state and we can save this now here I'm gonna say um we're just gonna be this button okay now on click I'm gonna say on click we would like to change that settings model is open field to true now I'm just gonna call an arrow function which is going to say that that settings and just pick all the previous values and then change the settings model to true and then close this function so if I click this here oops now if I click this this field so this model is going to be shown because we changed that set settings model field to true and then we would like to pass this settings in set settings into settings model so set settings it's also gonna have this set settings function and inside so save this file inside here we're going to take that as props so I'm gonna say settings model prompt and it's gonna be maybe type or interface and then you'll see it's gonna have the settings as a type of so this interface settings and import this and then it's gonna have the set settings which is going to be this dispatch and then let's just import this so it doesn't do this so but fittings model props I'm just gonna copy this paste it and then structure these so now when we click this overlay what I would like to do is to set that settings so the drop down or like the settings model is open to false so this is what I'm going to do and then do we have anything else to change here and yes actually we have so I'm gonna just delete this and then instead of that constant I'm gonna say so delete this so settings Dot is like drop down is open and then we're gonna show that drop down so I can basically save this and let's check the localhost so now it is closed by default and when I click this I would like to open that drop down so for this I would like to create another function and it's going to be called as const handle click drop down and then here first I will take the event so in where are we going to call this function is going to be I think it's going to be here because this is where we had that uh chair run down so it's going to be this button so here I'm going to say handle click drop down and then it's gonna take the event and here it's going to be so it's going to be the type is actually going to be a most event isn't it so yeah it's going to be a most event and inside I'm gonna first say event stop stop replication so that it doesn't close the model but it is going to be set the drop down is open so it's going to negate it so let's save it in here if I click this it's gonna open and now if I click this again it is gonna close it and what I would like to do is also when I click to this close button I would like to so I want to close it so I am going to come to here inside that close button here we have it here so I think this button so I'm just gonna say head settings model and then we are gonna change the setting settings model is open field to false and now if I click this it's going to close it I'm gonna open it close it from here and then like here it doesn't do anything and then I can open up the drop down and then close it so now I would like to um so what I would like to do now is to create a local storage hook so whatever value I choose here it is gonna put it into the local storage and then when we refresh the page it is going to fetch it from there so for this I would like to come up into the vs codes I will create the hook and it's going to be called as use local storage dot yes and then I'm gonna paste the local storage hook so it is gonna be like this and you can grab it from the GitHub fist but basically I just went to chat jpt and asked it for like can you type can you give me a used local storage hook that is gonna be working inside an xjs typescript application and less than 10 seconds it just gave me this one and I don't need to think about any implementation detail of it um so I need to work on the other functionalities of my application so this is what I would recommend you to do and if there is any error prone stuff here you can modify it so I already checked it it doesn't it's gonna work 100 for our use case and now I can just save this file and then here I will call that hook so I'm gonna say use local storage and then I will give the first one is gonna be the key and then the second parameter is going to be the initial value so I'm gonna say Lee code clone um maybe like font size and for the initial value I'm going to say it should be 16 pixels and now it's gonna return me two values which is going to be the value and the set value so the value and the set value and if we just take a look at it here we can see that it's going to return us the value and then the set value which we can just say font size and so it's gonna be font size and then the set font size so now what you'd like to do is when we click one of these settings list items you would like to call a function so I'm gonna say here it's gonna take a prop it's going to be handle font size or like candle font size change and I'm gonna do some stuff here and now I would like to have it as a prop so it's not going to return anything so we can just accept it like this and then take this handle font size change so when we click to this font size it's gonna have this font size and then what it's going to do is to say set font size and it's also going to change the settings so set settings and then it's only going to change the other font size field so we could just change take all the settings and then say font size is going to be the font size we are taking and now we need to change this here which is going to taking a parameter it's going to be font size type of string so whenever we click one of these font sizes on click we're gonna call our function so handle font size change and it's going to take the font size now what is going on here so let's take a look at it here um so when we click that it is gonna so like we are in the 12 pixels right now and if we click the let's say 16 pixels it's gonna update here because so like what's going on here we click this 16 pixels we run this function and we pass the 16 pixels into this function and what it does was to change the value from the local storage as well as it changed this set settings state to have that 16 pixels font size and we're using the settings inside the code mirror if you remember that we had here so we are using it from here that's why it changes the code editor font size but if we refresh the page it is not going to be that default value so not from the local storage actually because we didn't use it here so we also need to use that local storage value from this hook so I'm gonna say use local storage again and it is going to be so what did we say it well so what the name was it it was leeco clone font size I'm gonna copy this well actually this line completely and then I'm gonna paste it we will get the font size as well as the headphone size and Method from here so I am going to take it and put it above here and then we're gonna say the font size is either going to be um actually it's going to be the font size that is coming from the local storage so let me just quickly reiterate what we did so here from the local storage we try to get the font size of our font size and if there isn't any font size in our local storage then by default it's going to be 16 pixels and then we said that our state is going to be that font size either going to be the local storage value or 16 pixels now we're gonna come back here inside the code mirror we said that our font size is going to be the settings font size now I can save this and it's gonna hopefully work now if I just come here and I say 12 pixels or like 11 yeah 12 pixels or like 13 14 15. this is just gonna work however uh so the expected way and now we need to change this UI so whichever we uh whichever we select so here inside this line where we have this hard-coded 14 pixels but I'm gonna say font size that is whatever we choose right this is coming from the local storage and then here for the that check mark um so for the selected option it's gonna be again the maybe the font size or settings up on size so save it in here if we take a look at it now it should work let's just refresh it so I'm going to click the settings model and I am going to click to here and 12 pixels now it is updating the UI as well as the phone settings so now if we refresh the page it is still going to be in the 12 pixels because we did it into our local storage and now let's just double double check it in our application so here we see that inside the local storage tab we got the Lee code font legal clone font size as 12 pixels and now if I would like to change it to 17 it's going to be updated and the UI is going to be updated as well now if I refresh it it's gonna be in the 17 pixels if you take a look at it here so we are getting the our code from the local storage our settings from the local storage and everything from the database from the local via render our description site and so everything is completed in this um so in this page actually so the last thing that we have is inside our home page to add this status so we're gonna again fetch it from the database and so now let's just add it so back to the vs code it's going to be inside the home page so it's going to be indexed and if you remember the last time we fetched some data from this problems table inside this problems table and we used it by using this hook and now let's try to do the same thing for solve the problems if we're going to call this book and we're gonna create it so I'm gonna say function use get sold problems and initially it's going to be an empty array with type of string and then since you are going to be fetching some data we're going to have use effect in place so here we're gonna have the function that says cons to get solved problems it's going to be a synchronous and then at the bottom we're gonna call this function gets solved problems and then at the bottom we're gonna return this array so that we can use it up here right so I'm gonna say const user ref it's gonna be the document method I will pass the firestore users and user ID which I will get it from my hook I'm gonna say const user use of state and then pass the authentication object inside so this will give me the user and then I'm gonna use this I will say user dot uid right and I'm gonna make it like this so that it's gonna make sure that you already have the user will not get that typescript or if it was like this and then I will get a cons oops const user document and I will evade a get dark method by passing the user reference and then I'm gonna say if user document if it exists then what I'm gonna do is to set the solved problems to that um so user document that data that solved problems array so if you remember in our database we had it so this array now it's going to be set it to this array in our state and one more thing that we are missing is going to be if we have a user operate then we can paste the data if we are logged out we cannot get the status because we don't know which user this is and which problems did he solved so that's why we're gonna only get the problems if we have a user and now I think I can save this and what it says it's kind of weird but like we have this function and maybe we're missing some curly braces oh now it's it's working okay so here let's just try to console that like this solve problems console.log he solves problems and here we're gonna get that same array that we have in our database so we have the two sum and reverse linked list so this is what we have now let's try to add one more and try to add field it's gonna be Jump game and then add it so here refresh it and hopefully we're gonna have three values now and we got the jump game as well now let's update the UI and here we have that check mark I'm gonna cut it for a second and I'm gonna say false problems includes that problem ID then I want to just render this check mark and then now I can save this and here hopefully it's gonna work now if I remove this it is gonna update the UI as well and one more thing that we are missing is that when we log out that should update the UI by removing this check icons so for this I'm gonna come here and I'll say if user is logged out then we just wanna set this array to an empty array so now that should be gone and let's try to test it out again login and now I'm gonna log out and it's gonna immediately update the UI all right guys now believe it or not this is the end of our application we build everything from scratch from authentication to code submission and now application is completed and there is one last thing that I would like to talk about and it is going to be this code submission so here we are taking the user's code and immediately submitted inside our application and this is not safe so let's say we have a user that is hacker or like malicious user that is trying to bring down our database so they will come to here and they will write some bad code or like slash malicious code and then they will try to submit it and maybe this malicious code will bring our application down so for this we would like to use the idea of sandboxing so what it really means is that we have our application and our application contains our user's code so when they try to submit it we would like to send this code to our code execution engine so we need to create this for us and then our code execution engine is going to evaluate the code and then it's gonna return back the result so it's either going to be true which means that the code was successful or it's going to be false which also is going to mean that um so the code didn't pass so it wasn't successful and then our application is going to show that um so to say the notification if it passes or not so here uh so this is the idea of sandboxing so let me just type in send boxing and like if you're building a real application for your startup or your let's say for your company you would like to have that code execution engine but in our application we didn't build this because this is a normal um so to say a demo project that you'd like to add into our resume so we cannot go that complicated and the main advantage here is that our application is going to be safe our users can rely on our application without having any doubts but the disadvantage here is to it is really hard to implement this code execution engine so you need to know really advanced stuff about this code execution engine so with this I think I'm gonna wrap things up and we'll try to deploy this application to our cell but before that let's just submit all the uh changes place I mean let's just commit it and then push it to our GitHub and then from then there will take it to yourself so now inside TVs code I'm going to open up a new terminal and I will basically just say get at dot so I will change my so I will just change stage my changes and I got all these files now I'm gonna commit it and I'm gonna say git commit the dash M it's going to be complete the project and I'm going to commit this then I will try to push this to GitHub I'm going to say hit push so it's gonna try to push it and I already have a GitHub repository for this so I will go to my GitHub account so now as you can see it is updated just now so we would like to push this into your cell so I'm gonna go and so go to reversal so here this is our virtual dashboard so also Universal is the company that built the next JS so it is really easy to deploy your applications uh so specifically your next applications to yourself so I'm gonna click to this add new button and then here I'm going to click the project so I will get to this leeco clone YouTube I will try to import it and then I'm not going to change the project name but here we will try to change or like add the environment variables so for this I'm gonna go to my vs code so here inside the env.local it should be so we will try to get this environment variables so I'm gonna copy this and then here I'm gonna paste it and take value and I'm going to do this for all of them so I'm going to get the paste and then add now I will fast forward this and add all these variables okay so now I have added all of my variables and I will try to just deploy it and the chances are we're gonna get some errors so this is normally how it works first you deploy it and in the first few times you will get some errors until you resolve them so the deployment started now and let's wait if you'll get an error or success so now it took me to this page and we didn't get any error to be honest and now we can just continue to dashboard I think it's because we don't have any errors and now if I click to this link so let's visit this and as we can see it is now working we have the complete project here it is deployed on the internet so now I can just sign in or like the account that I already have I'm gonna say John crypto and login and as you can see we got data so we already solved these problems and so yeah this is what we have and now it is time for us to add our Firebase database rules to make our application a little bit safer so for this I'm gonna go back inside the Firebase so firestore database go to rules so here when we initialize the project now we are so this is the development mode where we allow to read and write operations uh for all the operations to to be honest so until the we are not in the 23th of the May so we will allow to read and write um operations now we would like to change this so I'm just gonna comment this out and I will write my own rules so first of all we would like to just allow our users to read user document if and only if they have been authenticated so I will create my comment and I will say user documents can only be read and written by the authenticated users so now I will try to write my rule so here first we're going to say match and then we're going to say the users collection and then we can pass here a dynamic value which I will say user ID but you could just add user ID hello it doesn't really matter so it should be something meaningful so here I will open up my curly braces and I'm gonna say Hello read Ella read comma right and so like Colin if request dot oauth is not null so if the user logged in if user is authenticated and the request but oauth dot uid is equal to this document ID so user ID so this uh here what we have is going to be each document inside users collection so if the user is authenticated and its ID is equal to that I so the document ID then we will allow to read and write operations so I will just tap this inside and then we would like to have one more rule for our for our problems document so I'm gonna say problem documents can be read by anyone but it can only be written by authenticated users so right this is what we do so here we just allow for all users if they logged in or like they logged out they can read the problem they can see the data but if and only if they logged in then they can like the problem right so this is going to be our database Rule and I'm gonna say match the problems uh collection and then you'll get a problem ID and open up my curly braces so tap inside allow read if it is true so it's gonna just work in any case and allow right if so colon if the request dot oath is not empty so if we have an authenticated user so I don't really want to get really com so it gets really Advanced with these rules you can read the documentation you can do like you can add a lot more into here but so this is the basic idea you just use the match keywords in your collection and then the so like a dynamic value for your documents so now I will just publish this so now it's been published and changes can take up to one or two minutes and then so if we just take a look at it here the so it's been published I was going to take effect in our application and inside this versatile dashboard we got three different domains and I think I like this one the most so we have the GitHub repository name and then dotversal.app so yeah this is the end of tutorial to be honest and now you can add a lot more stuff into this application you can expand this problem list or you can and just feel free to add your solutions by the way into the solution tab where when we click them you will get to my YouTube channel but put your YouTube video IDs into that solution that I showed you in the previous sections so maybe you could add a like the user profile page where when you go to that user profile page you will see all the problems that the user solved and like the um problem submission history which problems did they like they disliked and maybe you can add a comment section to each problem where users can add their own Solutions with the explanations so really a lot more stuff infinite amount of uh so like the possibilities you can add into this project and if you do that just let me know in the comments and I would like to see your versions so as always if you like this content the project and it helped you just feel free to like And subscribe it really supports the channel a lot and if you have any problems any bugs any any stuff that is not working or you would like to just learn it from me or our Discord server just click the link in the description below you can join to other developers who already built this project and you can learn from them and then I will also be there to help you out so with all this I really thank you for watching this tutorial and hopefully I will see you in the next project\n"