Build & Deploy NextJs Eraser.io App Clone | Full Stack React App | Convex, Typescript, Tailwind Css

hey there and welcome back to tube guruji channel today we are going to build eraser. clone and this application we are going to build completely from the scratch eraser. is a best combination of the documents and diagram where you can do or collaborate a same time okay so on the left hand side you can do the documentation and on the right hand side you can have a whiteboard where you can draw the diagrams and lot of things and that's what we are going to be a fully functional application like eraser. so let's first walk through the application which we are going to build today so if you see we have this simple landing page because we are not concentrated on the landing page we are more concentrating on the functionality and then on this particular page you have option to login with the social authentication as soon as you click on the login you will redirect to the login page where you have option to login with the Google Facebook or you can log in with the the email as well and we will learn how to add that authentication so let me log in with this Google account select the account where you want to log in and then you will redirect it on the dashboard and this dashboard will be the similar to the eraser. application okay here you will see on the beautiful sidebar once you click on this you will get a beautiful option similar like eraser. where we have you can you have different different teams you can create the new team you have log out option setting option and the user which on which you log in okay now once you click on create team you can create a new team okay so here you can create a new team whatever team you want to create give the name and boom your new team will be here okay so if I go back here right now your new team is okay now on the bottom section you will see you have option to create a new file but right now I pred a maximum file item of five files okay because if I try to create a new file it will giving me option to update my current plan because on the free plan you can maximum create only five files so now now here you can have option to select a different team as well okay and from here you have option to create a new file and here you will see how much file you already created your maximum limit and lot of things now create a new file give the file name so I will say uh YouTube docs okay and click create and boom your document is get created here you will see this beautiful tost message and on the dashboard you'll see the file name when you get created the authors and everything now let's open this file and as soon as you open you will see the document option on the left hand side and the canvas and whiteboard option so on the left hand side you have beautiful documentation here you can uh add any type of documentation and now if I want to add some like checklist you can add that checklist see okay here you can add as many checklist you want okay now if you want to if you want to add something else you can click here you can add a list for example you can add a list one list two okay not only this one but you can change the type of any list whenever you want you can unorder it and order it whatever you want not only this but you can add a heading and for this heading you can change any type c okay but don't worry I'm going to tell you a bunch of different option there are more than 50 plus option you can add for your documentation okay let's talk about the workspace at whiteboard or called canvas okay where you can draw whatever diagram you want okay you can color it you have option to color each of these diagram not only this you have option to change the sharpness you have option to change weight opacity if you want to make this at the behind you can do that same so good right you can add the image okay just select the image you want to add and you can add it like this see okay you have option to add a frame tool embed and lot of things but if you want to export this image as a PNG file you can do that I'm going to tell you how to do it how to implement this application completely from the scratch everything okay now if you want to save this let's click save and and you will see the message that it a document is updated okay now if I go back to previous page and come back again see your data is there and to save all of this data we are going to save inside this convex database that's everything we going to learn from this scratch guys if you don't know how to create application if you don't know how what is next J if you don't know how to react build a react application don't worry because everything I'm going to tell you or I'm going to teach you in this particular course and if you have any question throughout the course any doubt let me know in the comment section or you can DM me on my Instagram Channel or you can DM me uh directly on my email guys without doing any further delay let's begin to develop this application and if you did not subscribe to my Channel please do subscribe so in order to create a react application we are going to use nextjs so nijs is one of the best react framework for the web application and if you don't know how to use neck JS and you don't know about anything don't worry guys because in this particular course we going to learn everything from the scretch even on next JS as well okay so first thing let's go to this uh next js. org okay and this is official website for the nextjs and if you see this is the command to create a project okay so this project is a react project only but uh nextjs is a framework on the top of the react okay so it will help us to build the application much easier much faster and you don't need to make any um special configuration for some of the features so first let's copy this particular command let's go back to or open Terminal and inside here just paste it now if you see this command name is saying npf create next app and latest at latest will give you the latest version of the nextjs click enter and you have to provide the project name so in this case I will say eraser _ clone and click enter so it will ask you do you want to use typescript so in this particular course we are going to use typescript so say yes then es link say no the telin CSS obviously we are going to use telin CSS and here here is thing nexts is taking care of installing the telin say and everything so you don't need to worry about that one so so here click yes the source D directory say no and app router obviously we need a app router so say yes and allice you can say anything so I will say no here and if you see now some of the dependency is getting installed like Crea react Dom and next and some de dependency for the telin CSS and the typescript now once the installation is completed if you if you see this project is now ready okay now let's close this window and open a vs code go to the file open the folder where you created this particular project so in my case I created in this particular folder so I will open it so and here we go and this project we need to open so open it and if you see say yes trust author and on the left hand side you will see all the bunch of files and folders get created so let's walk one by one so first thing the app folder okay which contains or which is the basic folder where we are going to write all our files and code and everything okay so inside this folder you will see we have this global. CSS the layout. TSX okay uh which is the heart we can say for application where all the pages all the route is going to render inside from this children tag okay and if you see we have the HTML body tag inside that one we have meta data for the SEO purpose also here we added the font as well then this is the default page called page. TSX okay so once you run this application uh we'll see uh this particular uh page get open on the uh default as a default page so this is the page uh then we have this node module so whatever the dependence we install right uh the package get exted inside this node module obviously we are not going to touch to this particular folder then we have this public folder where we are going to keep all our images font assets everything so that you can directly use inside your application without providing path once you define the uh any uh assets path okay means the direct path the next uh JS will automatically consider that you are accessing from this public folder then we have next. .ts file then next. config MGS file which is help us to configure the next related uh configuration then we have package.json which contain the name of the application the version also it has a script to run the application and the dependency which is used or installed for this particular um application then if you see we have this list of De dependency as well then we have post css. config.js and the T.C config.js which contain the tailin CSS related information so this is all about our application now let's run the application so go here inside the terminal click new terminal it will open the terminal like this and just R just type npm run Dev so it will open the port uh 3,000 and if you see this is the URL on which our application is running so open this URL if you see the Lo uh URL name is local 3,000 and this is the default page it opens now let me bring this side by side so you can understand much better as I say very beginning that this is the default page okay and if you see this is the page. TSX file this is the default page which get render on the screen if you see we have this get started by editing then app. page. TSX and everything is written over here now let's clean this out and just add the DU tag and save it and if you see now screen is blank now if I type something on h2 tag Sub sub subscribe to tube guruji okay guys if you did not subscribe to my Channel please do subscribe and if you see as soon as I save it it get render on the screen without refreshing this particular uh window okay so so beautiful right this is called U fast reload okay now live reload now if you see on the background you getting this line right because of this uh CSS is applied uh to this particular page so inside the glob CSS which contains all the uh styling which is applied throughout the application so you can remove this two line of code save it and boom now you have complete a clean page with a white background and this uh text return on it okay so this is how you can create the next JS application and then you can run the application as well now next as we know that we are using telin CSS okay and along with that we are going to use one Library called shad CN okay and if you don't know about this shat C UI it's a very much popular Library currently in the market and it's based on telin CSS again and very easy to install so I'm going to teach you about how we can use this and how to add it in our application everything so first thing go to this ui. shen.com and then uh go to this docs where we can have option called installation okay so as we are using this nextjs framework so click on nextjs and then we will follow step by-step guide so that we can install this Shad here so first thing obviously we already created the project and we already installed the Tailwind CSS so we'll skip this step then uh we need to run this CLI uh command to install the uh Shad CN UI so copy this particular line of command as we are using npm then make sure to open the terminal and click new new terminal okay and run this application sorry run this particular command now it will ask you some few question so it's asking first which style you would like to use so it has a two style default and New York okay let me show you the difference between them so let me go to inside CN and over here we have option called themes so inside theme if you see this is I think this is the default theme okay but if I click on customize okay this is a New York theme but if I click default you will see the change okay just I feel it's a uh size change okay so it's up to you which size do you want to use size do you want to use I will prefer the default one so I will select the default one then you have option to choose the base color okay if you see this we have the slate gray zinc neutral Stone okay and these are the some of the uh color combination we have right I will select the zinc maybe yeah that's will be good so select Z now will you like to use CSS variable for colors okay so you have option yes or no so we will say yes then now it installing the all the dependency which is required for our application and if you see we are done now once we install this application let's see what are the files and folder get created so if you see here on the left hand side the new folder get created out inside a root directory called components this component is created when we install the sat in UI so whenever we want to use any component like button or dialogue or table anything we have to install that component from the Shaden and that particular component get added inside this component folder in a minute I will tell you how it works then we have this Library folder inside that we have .ts file which again added by the uh sharn UI and after that we have uh let me go to this app folder we have Global CSS if you see right the bunch of uh CSS variable get added over here okay and also in the tailin doc config.js file which is TS file here as well if you see the bunch of uh uh uh configuration get added here okay so you can obviously customize you can change it no um restriction to this one okay so it's up to you how you want to use it so let's try to install one component from the uh shadan so here let me go to this uh call components and here I will search for the button the simplest one so click button here if you see this is how button will look like once you install the component and in order to install this component you have to copy this command npm and then just paste it in a new terminal like this okay now once this is installed in in inside the component folder right it was before empty now once we install this button the UI folder get created and inside this UI folder we have new component called button. TSX and inside the button it has some default code added here okay now obviously we are not going to touch this one but if you want to customize it if you want to change the layout or something else you want to do you can do it because Shad giving you a complete uh control over your component okay okay now in order to use this component here you can say or I'm in page. TSX here I will just add button and if you see now this button get added from the component /i/ button and then save it now let's go back to our application and if you see the button is added okay but this button don't have any text let's add some text so inside the button I will add subscribe and then save it and if you see boom how beautifully the button get added without adding any styling or any T CSS classes because sh is already taken care of that one right and if you see you have button now obviously uh you can add your own class name for example if you want to change background to Red you can do that guys see okay so as I say full control on uh the compony which you added but um with the help of the strategy and you can add a lot of thing and you can uh minimize your coding as well that is very helpful when you are developing any big application okay so I hope you understand how we beautifully set up the Shad as well now in this section we are going to implement the landing page in that landing page we have we're going to add the header as well as we're going to add the hero section as well so for that one uh let's clean this out first from the page. JX and right now if you see our page is uh completely empty now inside the app folder we going to create a new folder now in nextjs whenever you add a new folder okay or you create a new page. TSX file it will consider as a route but in this case we don't want the route okay and obviously uh after this section we going to learn about the routing and all okay but currently as I uh told you right we don't need a route so in order to create a folder okay you have to start with the uh this particular underscore okay and then you have to give the uh folder name uh so in this case I'm giving underscore components now whatever the components I want to create and I want to add for this home screen I want to keep in this particular folder okay so and now inside this folder I'm going to create a new file and we'll call heer do TSX okay and I will create another file and we'll call it hero. TSX okay perfect like this now it's time to add the template okay so if you see in page. txx we have this template right and we need to copy and paste it here but every time when you create a new file right or new component you need to copy paste and uh copy from the previous component paste it here that's a big headache right so for that one uh you need to create one extension and which is called es7 plus react Redux extension and also install one more extension called telin CSS intell sense okay so this telin CSS will help us to give the suggestion when you are writing the telin CSS classes and es7 plus react Redux snippet tool help us to create a beautiful template for you within a few clicks let me show you how for example uh for this heer you want to create a template just type RFC which stand for react functional export component click it and boom you got the default template just like that right you don't need to type or do anything you have the template ready same thing we'll do it for this hero so just type RFC enter it and boom right now you have two components now let's add these two component inside the page. TSX because we just create the component right and if you still see we don't have anything screen on the screen because we did not added that component inside our default page which is page. TSX so here I'm going to add heer and if you see this heer component from theore component /her and then another component for the hero section and if I save it you will see this two text called Herer and hero which is from the header and the hero file okay now let's add the header first now obviously I don't want to give more focus on this landing page because it's just a static uui nothing goes like any Dynamic thing anything okay so for that one what I'm going to do I'm going to use existing predefined component so for that one I'm going to use this hyper UI Library okay uh which is based on telin CSS and as you know that we are using the telin CSS so if I go to this hyper ui. D you will find a predefined component and there are lot of components if you go to this alert you'll find this different kind of alert right you will have the code just copy and paste it in this case we want the header okay just search for the uh header okay and you'll find this header component like this see okay and this is how you want right logo this I menu and the buttons see everything you will find it here now you can even check how on mobile or small screen will look like medium large full right now on the dark screen how it looks on left to right you can do it okay everything is there now obviously if you want to copy this code just uh go to this View and then copy this jsx file or change to jsx because we are doing typescript and then copy let me go back to a project here and inside the header or I will replace this one with the actual header which we just copied and then save it now if I go back to a project and if you see boom how the header is comes up right if I extend it this is how it looks and so beautiful right so this is how you can add the beautiful header now just customize according to your needs so for example if I want to change this logo we can change it so I already added the logo.svg file okay which is the erer logo you will find in the source code so all the assets all the source code you will find in in my source code the link is in the description you can check it out now in order to uh if you once you put this logo inside this public folder you can easily access it so for example I don't want this existing logo so I will remove it if you remove it see the logo is gone now let's add the image okay so this image tag is from the uh we need to import from this next / IMC okay then it has a property called Source here you need to provide the source as I say you don't need to give complete path because we kept our assets inside the public folder you just need to write SL logo.svg okay obviously it's showing error because it's the alt property is missing so just type alt we'll say logo then we'll give width of 100 height of 100 and then save it and boom it's the logo is showing on the screen now logo it just logo is showing because actually the name of the logo is in the background is in the white color so what I'm going to do I will change this background color to Black and save it and boom so this is how it look see okay perfect now I'm going to change this color to white so all of this color so here if you see right now it's text Gray if I change to White you will see the change okay oh sorry see okay perfect so for everywhere I'm doing this one one on how as well I'm going put gr not gra 75 I will put 100 only okay now here I'm going to put text to height I will just copy this one and paste it here like this okay I will remove the last one and then here as well I'm going to put 100 100 100 and 100 and now if you see how beautifully is looking see okay perfect now let's change this button as well so if I scroll down I don't want anything like this we'll change this background okay I don't want background actually so we'll remove this background we'll make text white it's already white I think that's fine perfect okay and for this one let's bring this down if I increase the size I want to put the background white that's fine and the text color I want to Black so I put black text and on Hover I will change to slate maybe 200 okay if I increase the size this is how beautiful it looks right text I will change to 800 perfect okay now we have logging button on how it's showing awkward background so let's remove that on how effect so I will just remove this one okay now we have beautiful header section see Perfect Right Next what we are going to do we want to add the hero section okay the which is the langin page actually so in order to add it go to this hyper UI and just search for the uh I don't know call what is called called but just search for this Banner maybe yeah see okay so you will see this kind of uh UI so this is how it looks uh you have different different option actually now you will see why I'm just copying and pasting here okay because as I say uh I don't want to focus more on this landing page because it's just a uh static code to display the landing page okay so what I'm going to do now I will just copy this code call jsx copy this code and then inside the hero section I will paste it here like this okay perfect if I save it and this is how it looks for now okay now I want to keep the background as black so here instead of gray I will keep make it black okay then for this text right now it's a black color I will make I will change this to White okay and here we have text called increase conversation here I'm going to change this to White as well okay now little bit change here I'm going to change do Sky maybe 300 something like this C okay and here we have this text C here I'm going to change this to something like uh text slate 200 okay see Button as well I'm going to remove this learn mode button and I will just keep this button I will call it as a learn more I will change this color to white save it and text color will text black color okay and if I increase size this is how it looks okay now I'm just trying to um make uh similar like eraser. iio okay if you want to uh see how the eraser. I look like let me show you okay so this is how it look like okay everything I will keep as it is just I will copy this particular text documents and diagrams and I will paste it here okay I don't want to make exact copy of this particular landing page okay just near by that one then for the second text I will paste here and then the subtitle which will be this one okay and paste it here like this and save it okay and if I go back and this is how it looks now now if you think this this this particular space is little blank you can add some text okay so if I go back here and inside the um maybe here we can add it let's try to add h2 tag and we'll say um see more okay now the text is black so I will change this class name we'll add a text of white okay see this is how it looks okay now I'm going to add a border as well okay and we'll change the Border color to white now we want to want to be in Center so text uh Center okay and then I will part this de I will wrap this in a du let's bring everything down okay and over here I will just say class name Flex item Baseline okay and here I will say item uh justify Center we do padding X to padding X to three oh not here actually we need to give for this h2 tag then padding of two we'll make rounded corner to full so the corner will be rounded okay and we'll padding top to S sorry not here top to it maybe let's see how it looks on bigger screen oh let's let's make more bading we need padding top actually okay see something like this okay now here is some Gap we can remove that Gap so if you see right here we have the padding 32 we don't want that much we keep just six maybe eight okay if I increase the size oh still it has more padding because here if you see we have this line of code which we don't want I will remove this one if I increase the size now looks good and here I will just add he screen perfect okay see if still if you think still there I don't know why it's still there let me check so let's let's remove this item because on large it keeping on the center of the screen actually and now much better okay perfect just I will change this iage see we see see what's new and AI diagram okay something like this see okay here you can change this color to something else so I just copy this paste it here and we'll change this class name we'll change the text of Sky maybe 400 perfect like this maybe 3 okay perfect like this and uh only thing that I want to do more padding over here okay and if I increase size this is how beautifully our landing page is ready okay as I say just uh use it the existing code paste it here because landing page is not our Target okay um and I hope you understand okay and guys this is completely responsible complete application which we are going to build is going to be a complete responsive okay so don't worry about that one throughout application or throughout this particular course I'm going to tell you each and every concept okay if you miss anything let me know in the comment section if you don't understand anything or anything and also um as I say the link is in the description for the source code you can access it any time so guys next the very important concept which we are going to learn which is called app routing okay so see you in the next section so so in this section we are going to learn a very important concept called app routing so in order to uh add a new route or new page right for example if I want to add a route called dashboard okay if I enter it right now if you see we are got getting 404 error because we don't have that route in our application right so in order to add that route in NE just is quite simple okay let me show you how so in inside the project folder if I go to the app folder right which we have here inside the app folder you just need to add a new folder called dashboard okay so I'm going to create a new folder called dashboard inside that folder I have to create a new file called page.js or maybe TSX okay and add a default template here we will rename it as a dashboard dashboard and here as well dashboard and then save it and if you see it's showing dashboard now and the 404 error is gone because we have a complete route called SL dashboard okay and you now you can able to access this dashboard route as well so beautiful right so this is how you can add the routing this is called Simple routing that just uh you need to add a new folder inside this app folder and then you easily add the route in your project and that's how and that's why nextjs is quite uh helpful to add because routing is very critical part in the application okay now this is a called a simple routing okay let's talk about the uh Dynamic routing so inside the dynamic routing for example if you want to access a dashboard and for example let's say slash 1 2 3 okay this 1 2 3 maybe you can say user ID okay and if I click enter if you see it's showing 404 error okay obviously this particular uh ID or user ID whatever is going to change okay for each user see for five for seven kind of thing okay and now you have to add that Dynamic route okay obviously you cannot create a different number of folders depends on the user right so in order to add Dynamic routing you need to go to this dashboard for example inside this I'm create I'm going to create a new folder and let's call uh let's you have to add that folder name inside the bracket in order to add a dynamic route and here I will say for example uh user ID okay and click enter now this once you add this fold folder name as inside this bracket it act as a dynamic one okay it means the value of this folder going to change whatever you will add it okay and now inside that one you're going to add page.js it need to be TSX that's fine let's make TSX because we are using typescript and let's add a default template okay here I going to change for example user okay this is for the only for the example purpose okay and now save it now if I go to this seven if you see right now text 7even is showing and if I go to for example 15 see still I'm not getting 404 error now you can put any number over here okay any number and still you will see your page okay because this Dynamic route we added inside our application using the simple bracket okay so this is how we can you can add the dynamic route same way you can add the next by creating another folder inside the existing route and then it act as a nested route okay now one more another important thing here if I go to this app folder okay and inside this app folder you can create a new folder but if I start the folder name within this bracket and if I say routes okay and inside the routes I will keep all my route okay so I will drag it here and move it okay say yes and save it now if I go to this dashboard still act as a dashboard only same route without affecting anything because once you define the folder name start with this brackets okay the circular brackets it will not consider as a route only for the folder structure and organization purpose you can add or you can structure your folder like this okay so cons make sure that once you add this circular bracket it will not consider as a route okay very important things and throughout the application obviously all the routes and everything we'll keep inside this route folder okay I hope you understand this how the routing app routing will work is working in nextjs obviously once we add the authentication in our application we need to give access some of the route and obviously we don't want to give access to other uh routes okay everything we going to learn uh in the next section but I hope you understand how the app routing work in nextjs if you have any question let me know in the comment section and guys if you still did not subscribe to my Channel please do subscribe in this section we are going to add authentication for our application the authentication is very important in order to add in any application because we we can prevent some of the uh route or pages from the unauthorized user so for that one we are going to use a modern authentication Service call.com which is one of the best alternative for the clerk okay and this skin uh is completely free to use okay and is very easy to integrate in any uh application so obviously for the next J they already have a hdk and it's very easy to add in your application so first thing uh let's go to this uh k.com and once you launch on this page if you don't have an account before just create a new account and once you create the new account go to this my business okay uh it will jump jump it to your dashboard page okay here uh you will see that um for my existing application I already have some users which is registered but you have option to create a new application so click on ADD application here you have to give the application name so in this case I will give uh clone now as we are using nextjs so we need to select the back end web okay if you using react or any um react new application or mobile application you can select front end mobile okay you can have another option called machine to machine okay but obviously for nextjs we will select back end web and then click save once you save it you will see uh you will jump on this uh detail page of the particular eraser clone application where you can select the option okay the language option or framework which you are use or you which you want to use the kind so in this case is nextjs then you can see the documents I will just click it and this is the document for that one you will see some app uh Keys like domain client ID client secret key also we you can add a call back URLs okay right now we'll just save this one and let's go to this documentation okay and then we'll follow step-by-step guide in order to add the kind authentication in your application so first and very important thing to install this uh dependency guys and you can you can access this uh documentation link as well from the description now just copy this uh ex uh dependency and then inside your project open a terminal let me go here and open a new terminal let me close all of this window and just paste it here like this okay now what it will do it will install the kind authentication for nijs then if you scroll down it's saying that you need to set a call back URL now obviously we are developing application on local right so you have to add this uh call back URL so I will copy this and we'll paste it here okay same thing you have to add the log out URL as well I will just paste it here and add it here okay now once you deploy your application to production right you can Al even uh update this um enrollment variable as well okay I will let you know at the end once we uh deploy our application to the production then you have to configure some of the variables okay if you scroll down you have to copy this all these um variables inside the. loal file so copy all of this and then inside this um okay we don't have file let's create a one in a root directory so let's create env. local and inside this one we will paste our uh all this very variables okay now obviously we need to replace this client ID with the actual client ID if I go to this dashboard you will see the client ID okay just copy this one and then paste it here then copy the client secret key paste it here and the last is you need to update this is your name which is the actual domain okay like this and then save it okay obviously uh we have the site URL post back log out redirect URL and the post login rir URL okay you can update that once you deploy in production as well right now I will save this one and go back here and then you need to create a new folder and file okay which is which is this uh API actually this is actually API okay so what you can do you can copy this path okay copy this path then let's go back to our project and inside this app folder let's create a new file okay this you have to click this icon and then paste it so what it will do it will create automatically all the folders and then file for us okay and then just copy this all of this content as it is and save it now if you scroll down little bit okay so just they are mentioning that they recently upgraded this um import statement so that we are good for now now uh I think we are pretty much done okay now let's close all of this window now our kind is is ready to use now in order to go to this signin and sign up page if you see we have this login link and register link okay so what it will do it will uh this component will redirect you to the actual login and register link okay let me show you how so if I go here and uh go to this page okay and inside that we have header okay for what I will do for this login uh uh text I will just wrap it inside this login link okay and this this login link is importing from this next or nextjs and I will paste this text login inside this okay and then save it and same thing if you want to register I will just push this register link and uh o sorry and then I will just put this register inside this component name and make sure to import this register link from the kind and then save it now if I go back to this this particular local 3,000 where we have this page okay so we got one error is not function okay so this error is come came because we need to mark this page as a used client if you did not mark it so make sure to add that as a used client we have three error but we'll check it out later on let's see uh just to navigate to the login screen and okay so it's saying sorry we don't see any authentication at your moment okay so so obviously we did not add any authentication Service so if I go to this uh um Our Kind dashboard right here we have option called authentication and here you can enable authentication Service for example we want a password email and password authentication okay or you can add passwordless as well or phone authentication as well and we want Facebook and Google as well okay now you can add more as well here okay so inside this uh kind authentication you have option to customize as well if I go to this home and if I go to this design right here you can customize you can upload the logo and you have lot of option even though you can update the colors of the screen and all of these thing okay not only that one but you can add a more authentication Service from here okay so if I go to this so inside setting you'll find more option okay but for now we'll conent it on our existing application so now let's go back to our Pro project okay so let's go to this local 3000 click login and if you see now boom you have beautiful page okay and obviously I uh uh design or customize this page uh through this kind dashboard okay so as I say you can go to the design and then you can change this all these colors combination everything okay and now you have option here if you see uh for the Google Lo Google login or Facebook login or you you you can do the email and password login as well okay so now now let's log in with the Google so here you you got the option to choose the account and once you select the account it will uh redirect to this dashboard page see how beautifully right because it is redirecting the dashboard page here uh if I go to this environment variables okay where we Define this variables here we Define the login redirect URL okay see now you can customize the login redirect URL depends on your requirements okay if I go to the documentation they also mention how you can add the post login redirect URL okay so if I copy this one okay and go back to our header where we use this login link component here you simply Define that login post back redirect URL okay you can change to any other URL it's not big deal okay we can keep as it is as well by default we are navigating to the dashboard page okay now in order to get the user detail right you have if you are using client side then you have option to use this option called let me scroll down the kind browser client okay where you can get all of these option the permission user access token and the lot of different things okay but if you're using on the server side right then you can use uh this get kind server session okay but obviously right now we are using on the uh client side let me show you inside the page. jss okay so let's go to this page. TSX file okay here simply what we are going to do uh let me if I go down below okay here so here I will just simply say constant user okay is equal to and you use kind browser client okay like this and if you see this is the import statement and save it now inside the use effect we'll just print this out okay in the console so you can see what are the data we are getting inside this user so I will simply say console user and when the user is available then I'm going to execute this use effect okay if I go back to our project go to the inspect panel and inside the console okay let me refresh this one okay so it's not printing because we are on the uh local 3,000 page okay so let me go to this on loc 3,000 page because we already loging right and that's fine and if you see now here let me close this error and if you see we got this data it contains the email the family name the given name and ID of that each user okay and the picture as well okay this is the profile Pak and all these detail we are getting from the user and now you can use that information uh to store in database and any lot and you can um play with this particular information depends on your requirements okay so this is how you can guys add the kind authentication in your application and this is how simply it is okay uh there is a uh just minimum line of code you have to add and then you are ready to use authentication Service inside your application now here is thing uh you can even Explore More uh different kind of project okay and there lot of things that you are going to you can uh explore from this kind documentation and uh this is one of the best and free authentication Service which you can use it in your application if you have any question about this kind uh authentication let me know in the comment section and if you really like this kind authentication let me know in the comment section as well and we'll see you in the next section now so we add the authentication but we did not implement the page protection uh logic okay because we need to protect our Pages uh from unauthorized user currently if I go to this dashboard because we already log to the application and right now if you see we are able to access the dashboard okay uh let me go to this dashboard screen and there we will add the log out button okay so here what I'm going to do I will just add one button and will say log out okay so we'll wrap this button maybe we can add it here as a log out okay so if you see it uh kind also provide the log out link as a component okay and just on the click of that one we can easily log out now if I go back to our application obviously you are getting this error okay because um we need to make this application or the sorry make this page as a Ed client so just mark it as a use client and then save it now if I click on log out right if you see it's redirect back to the home screen but if I try to log into the dashboard okay go to the dashboard still I'm able to access the dashboard and that's what we don't want to give authorized to the any user who did not log into the application and not able to access this page right so the question is how can we protect this page if user is not authenticated right so for that one uh nextjs is providing one the powerful U tool we can call it as a middleware okay so middleware allow you to run a code before request is completed okay and based on the incoming request you can modify the response by writing or redirecting the to specific URL right so what it do actually do it will check on the application whether is authenticated or not if user is authenticated then only it will redirect it okay but there as well we can Define the route which uh on which we can give authentication and for which we don't want to give authentication right so it's very simple once you go to this middle copy create a new file called mare. TS so inside the root directory okay make sure to you will add inside the root directory and create a new file called middle. TS and copy this content as it is and then save it okay now kind also providing uh the pce production functionality okay this is very important if I go to here and if you see you have option called protecting routes okay so what it will do it will protect your routes you can add the route on which you want to give authentication okay you have uh full control on your all the routes or pages okay so now in our application in this case right what we need to do once I go to this dashboard we need to add or we need to give this route uh to the only user who is loging to authenticated to the our application right so right now anyone can is authenticated right so what we can do if I go to this kind documentation here it's simply uh you can check if if you see this example right it's checking is user is authenticated or not if user is authenticated then we can uh uh redirect to the particular screen if not then youer need to sign in okay so let's Implement that one so first thing you need to do you have to copy this lineup code and this simply checking is user is authenticated or not okay and make sure to import this get kind server session okay so copy this import statement and then paste it here okay next you need to check if await is authenticated okay so we are using await make this function as a sync and here once we check is authenticated we'll put inside the E block and inside here okay we'll redirect to specific page if I scroll down little bit right um so this particular API end point here we are going to rir so I will copy this one and I will just paste it here okay as we don't have protected okay once user is log out right we will go to this uh Slash button or maybe go to this dashboard okay because this is the post login rir URL okay and save it now most important thing you have to provide here path okay so in this case we want to protect a page called dashboard route okay you can Define like this if you have multiple Pages which you want want to protect you can Define inside the brackets like this okay now if I give comma and then you can provide the second page now if I save this one and then go to this local 3000 dashboard and then if you see it's redirect to the login page because now dashboard is a protected page and you are not able to access that one but if you go to this loog local 3,000 you can able to because we did not add this page as a authenticated authentic or we did not add authentication for this page but only for the dashboard you need to log in now if I log to this account now it will redirect to the dashboard page okay so okay so we got one error that oh wait let me refresh it there's some error so this error we are getting because um in Middle we if you see we added this uh a we authenticated right and then we are reacting it's not supposed to it's supposed to be um not not authenticated right then only it's supposed to redirect so now if I refresh it go to this local 3000 dashboard and boom if you see now you are able to access the dashboard efficiently okay and if I log out again it will redirect to the login page okay and even though you sign in or try to access this dashboard you will not because it will redirect you to this page okay so I hope you understand how we can protect our Pages uh from unauthorized user right now it's time to add a database and back end for our application and for that one we are going to use convex so convex is a modern way to store a data and very easy to integrate in any web application conx will provide a lot of different feature like it provide a function it provide a realtime data okay and it's very helpful if you are building application like a chatboard or something like that right where you want to get realtime data without refreshing the screen and that's where the convex play a very important and interesting role also conx uh provide a lot of different feature with third party application like a payment Gateway stri or twillow or open a as well okay and it's very easy and fast to build application and obviously we will learn it uh throughout the application how we can able to use the convex okay and most important thing guys this is free to use okay so you you don't need to buy any uh database or anything the convex will help help you uh to implement or act as a back end for your application okay now if you go to this convex dod you will land on this convex official website and here you can create a new account now once you create the account just go to this dashboard and where uh you can able to create a new project uh uh for your application now here you have option to create a new project just click on on that and give the project name so in this case I'm going to use this eraser undor clone just create and once you create the application boom you will see uh some of the option right function data files schedule and lot of things right now here uh you can even uh run the Chrome job as well okay and you can store the files images and everything along with the data and you can even run the functions as well okay now uh let's uh start integrating this convex inside our application so if you see uh let's click on this docs okay so it will jump you on this uh convex documentation now as I say very beginning that convex use in various different platform like you can use in react nextjs react native even python nodejs as well so right now in this case we are using nextjs so click nextjs and these are the some steps we need to follow okay so obviously if you want to create a project project from the uh very scratch you can use this command but we already have the project ready okay so we will use this existing project uh so what we going to do we're going to install this convex first so let me bring this down and then let me close this one let me close all of this window and open the terminal so inside the terminal just paste this link okay so it will install the convex so this dependency help us to install all the convex uh things okay once you install the convex uh you just need to set up or run this convex do okay so what I will do I will just run this one okay in order to set up the convex so once you run it it will ask you do you want to uh configure okay and you can configure the new project or existing project as we created the existing project so I will select the existing project then it will give the option which project you want to select so in this case I will select this is clone which we select just now and then boom if you see the convex function is ready to use now okay and if I go to this file structure right it added some of the files if you see this is new folder get added called convex inside this folder there are um another folder called underscore generated and there are some of the files get added inside your convex folder okay so don't worry guys if you don't know about this file or anything because once we start developing our application you will get to know now once you done this one if you scroll down little bit obviously they say that you can um add a sample data and then you can just uh UT it in your database but we'll skip this step because we will going to use actual data to add in the database okay now if you scroll down so we need to create a new uh client component called convex provider okay and this is very important in order to use convex uh throughout the application so first thing uh you need to create a file name with the convex provider. TSX inside the app uh folder okay so let me close this one and if I if I go to this app folder create a new file with the file this particular file name then copy this all of this content so I will just copy as it is and then save it now what you have to do you have to wrap uh your children inside this convex client prider like this see okay so that is inside this layout. TSX file so what we will do let's go to this layout. TSX file and inside this file let me bring this down we have to wrap it like convex client provider okay because we already added this uh uh what is the context provid this particular context provider okay so this one and inside that we added that children and uh we are pretty good now okay and that's how we completely set up uh our convex okay and now it's ready to use it and if you see uh the convex obviously as soon as we save it automatically run it okay whatever the changes you make in the database you don't need to deploy it because convex uh it will not like a Prisma right every time you make the change in database you have to deploy it it's not the similar like convex con is much Advanced okay you don't need to do anything just make whatever changes you want in background convex is running for you everything doing all the configuation is doing for you okay so this is a basic setup uh that how we can integrate the convex in the application next what we are going to do we going to add uh some data through the convex in our database so that you will learn how we can add a uh data to the database through the convex and how we can f it as well okay obviously there are a lot of things that we are going to learn uh in this particular course so stay tuned and please like button if you did not uh press like button here and subscribe to my channel as well now in this section we are going to create an convex API so that we can fet and store the data as well okay and if you don't know how to write the API and everything you can uh anytime go refer the convex document which is very reach document where you can access each and every query you will learn how to create a document how to read the documents and everything okay every everything is mentioned in this document so uh in order to create an API let's go to this convex folder and here we'll create a new uh file called user. TSX okay now this file it acts as a API for us now let's go to this user. TSX file let me close this window and here we going to write um a query to get the user information so before that let's import uh V from convex SL value okay and then we'll export constant and here we need to get the user so we'll say uh get user is equal to query and then we'll write inside that one now here you can first thing you can accept the parameter and before that make sure to import the Square from this generated SL server and then here we accept the params so obviously uh we will check with the help of email if user uh users email is already uh inside the database or not once we add this argument we need to add the Handler so if you see this Handler we going to add so we'll make this async oh sorry async and the arrow function like this okay now inside this Handler we need to write a query so I will write constant result is equal to await CTX okay dot to refer the database obviously we want to use database so DB do query and inside that you have to provide the table name okay then it's a user and uh obviously if you write this uh collect it will F all the data from the user okay but we want only specific data so what you can do you can just write option called filter and here you can write query and you can add the filter operation so Q Dot and if you see you'll get a bunch of different um options like you can add equal greater than greater than equal okay so in this case we want equal and then we have to write condition on which field you want to um add that condition so in this case We'll add q. fill comma arguments. email like this okay and then do collect to fet the data once you done with this one we'll just return the result okay so if you face any issue let me know so here we just refer the database uh then we uh we add the query we refer to the uh table name okay which is user then we will only want to F those user which matches with this email address obviously it will be one only and then do collect to f it and we just return this result okay okay and then save it now our query is ready now let's go to this go to this dashboard and here I will Define the uif okay like this now in order to use this query okay you have uh the convex hook okay so you can write get user is equal to use Query okay and if you see this use Query uh is importing from the convex SL react make sure you you using this use Query okay then you can refer a API this API is importing from this atate convex dot user and then you have to give the method name which is or endpoint name which is get user okay then you have to provide the argument because it accept the argument which is email okay and here you need to provide the email so right now obviously we need to provide the email where user log so constant we'll get the user information using this use kind browser client and then user doil okay perfect like this now it's saying that string undefined is not a similar of type string so simply for this user we'll make of type any so it will not give any error and then save it now if you see right now we are showing that error that object is missing the required field email consider wrapping field validator okay that's fine and inside the US effect if we'll say if the user is available then call get user okay now obviously we will just console the result like this and obviously we will execute whenever the user is available now inside the console make sure in the convex uh terminal nothing uh you you not getting any error or something like that right now if I refresh it right now nothing is showing on the screen that's fine but if I go to this console if you see right now it's showing undefined okay because inside our database we don't have any table called user and we don't have any information for now even though we we have table but we did not added any record okay so what we can do now we create another endpoint okay uh to add or create a new user if the user is not exist so what you can do we'll create another Endo here and which will be a mutation okay so export constant create user is equal to mutation now mutation is used to update or to insert the data or to delete the data to make some C operation so inside the mutation uh we need to pass some arguments so arguments we'll pass it here so first is name we have to provide a type okay V do string means it's of type string now you have you if you go to this convex um and we'll say data types you'll find a bunch of data types okay so it need to be a convex and if I go here you will find a bunch of data type of if you see we have ID int number string okay lot of things then email is of type we V do string and then last we have the image of V do string okay and this is a mutation so make sure to import this mutation I think we already did it perfect now once we did this one we have to add the Handler and this need to be a sync and make it aror function like this now inside the Handler we need to write a we C CX sorry CTX do database or means DB do insert because we want to insert the record and here we need to provide in which uh data uh table we want to insert okay so that table name so in this case I will say user or users let me say user comma and then list of argument which you want to pass so in this case I will pass all of these three value and save it now you can uh return this value okay directly that's fine and then save it now once you have this end point let's go here and add that mutation reference so we say constant create user is equal to use mutation okay make sure to import this use mutation and then you have to refer which mutation you want to use so in this case api. user and then you'll get suggestion for create user okay now here we'll check if get user is present okay sorry the if get user is undefined we say if undefined then we'll insert it so we'll say create user inside that we have to provide all the arguments for example uh name of the user which we get it from user dot um user dot I don't know why it's not getting it so here we'll just just write gcore and name comma then email which is user do email and then image is user. picture okay and now our creative user is there now this is a promise so you can write then response you can just console the response as well if you want okay perfect and then save it so this need to be like this and save it okay and now if you see uh we cut the information that okay record is inserted and we have this uh two record I don't know why we insert it to okay maybe we refresh it but now if I go to the database the new uh table is get created call user and it has a two records okay that's because we need to make uh this use actually get executed two times okay so that's the reason it's showing twice but that's F we can uh clean that out it's not not big deal right now we'll delete one record so let's delete this one now as soon as even though if you don't have table right and uh we have the mutation query it convex will automatically taken care of that one and it automatically uh insert or create a table for us and then it will insert a record okay not only this one but here if I go to this function right here you will see the function called user it inside that we have this gate user and the create user and here you'll see the St ICS okay where did you get error or something like that now for this one if you see we got some errors initially when you are trying to execute but each function will give you how much uh uh uh the speed and you will get the execution time and lot of things perfect so that's all for this particular uh section guys I hope you understand how we um fade the data from the convex database also we learn how we inserted record inside the convex database okay next we'll learn about the schema how you can add the schema inside the uh inside our application through the convex so uh we implemented the cery and mutation with the convex but there is one problem with this one so if you see here uh we use this use Query and we pass the users email address but there might be a uh some server side loading to get the client or user detail from this kind browser okay and that time the user email will be undefined or it might be a null and it might throw error when you are try to execute this used query okay and try to connect with the convex back end so the question is how to solve this issue okay so what we are going to do for that one uh conx provide a very um important uh function where you can skip the particular query okay so here if if you see right uh this is the uh convex documentation where you can skip the query if you don't want to connect a call to the back end if you don't uh if you uh don't have an parameter value okay but if you know that parameter value is going to come up but it will take some time okay so that time you have to call this one of queries okay this one of query you have to call with this await function and you have to Define this use convex hook and with the help of this convex do query you can uh call that API and then pass the parameter so same thing we are going to do uh here okay so instead of this use Query I will commment this code over here and inside the if you uh user right um here we need to add the Asing function so better we can write a new method so call constant we'll say check user and this will be a sync so here we'll check constant we'll say result is equal to await and as I say we have to define the one hook called constant convex is equal to use convex and this use conx who is importing from the react now let's use that one so we'll say con await convex do query and then the query is api. user. gate user okay and here we need to pass the parameter so which is from user do email because we know that once we call this check user right uh we have this user information now we call all of this method over here okay and we'll just check if result. length because we have the um all the result and if there is a length oh sorry we need to write uh if the result do length is not there then only create a new user otherwise don't create and this this check user method we'll call it here okay so whenever the user information is available we'll call this check user method and it will check the user is already there or not if he's already there then we don't need to add it or or if the user is not there then we will add the user data now save everything go here and then let's test this out so clean everything refresh it so if you see nothing is happened right it means no user data is added newly okay but in the database let me clean everything for now okay so this is the database and if you have if you see we only have one user okay if I delete this user now okay because we don't have any new user now and try to refresh it now if you see we got obviously adding two data we will fix it in moment but it means our data is inserted and if you see the database now we have to user let me delete one and now if I refresh it it will not add any new data okay still we have only one data or one record okay perfect so that is working now the question is that we we are getting two record inserted right because um we inside this next. config.js we have to add here a react stct mode and just make it false okay because what happened if you did not mention this react mode this use effect actually execute twice okay uh it's not sure but it's execute twice so if you mention this react mode as a false it will exort only once okay and let's test this out as well so let me clean this one we refresh it oop let me check again so if you see now only one record get inserted okay and let's see the database as well see only one record now okay perfect so that's all for this particular section because that's uh that's what I wanted to tell you how we can solve this issue is okay because there are some many time that you need to uh wait for the previous data some parameter which you need to pass or provide to this convex query okay or convex API um need to connect with the back end and that time you need to use this uh convex query where it uh in in convex they call it as a uh what is this called one of queries okay or here we have you can even skip the query as well okay if you don't have the par value and you don't want to connect with the data back end okay so yeah if you have any question let me know in the comment section now it's time to understand the application workflow so if you see this is the actual the Eraser application which we are going to clone uh in this particular course so here on the top left side we have this beautiful uh sidebar and then we have a header uh with a search option along with this uh different option okay or different tab so here uh inside this uh sidebar we have this option called uh Team selection okay where you can select the team or you can even create new team as well okay so once you click on this create button it will open a new route and where you can add the details and then you can just press continue to create a new team inside your organization now each team has a number of documents okay and obviously if I select or change this team obviously document will obviously uh you have to add new documents in that particular team okay so it's a team wise thing also here we have some of the uh option like all files the folders and these are some of the option um and also you can even create a new file as well and here obviously you have only five files you can create per team okay so that limitation also you have here so everything we are going to implement so don't worry but let me uh tell you one important thing here that we need to create a method or one on uh screen as well which will help us to create a team okay and under this team obviously you can add multiple documents okay and each team has a different different documents for example team one document cannot belong to team two okay that is very important second thing if user don't have a team once he sign up to the application and once launch on this particular dashboard if user don't have a team we have to make sure that you you will redirect it to the uh create team page this particular team uh particular page so that user will first create a team name or add the team name and then uh obviously we need to store that data in database and then only we'll redirect it to a dashboard uh with the team name and all okay so that we can show it here and everything will connect to that team uh information okay so that is important so first thing let's create a new route okay uh so let me go back here so here uh let me close all of this tab and first thing we will do we will create a new uh route here okay so inside the route folder we create a new route called uh we'll create a new folder called teams inside the team folder we a new folder again called create and inside that we'll create a new page do TSX file and then add the default template and let's rename this one to say create team and then save it okay let's test this out so let's go to our application here if I go to this team slash create if I open it and if you see the create team page is showing on the screen perfect now we have to make sure once we uh land on the dashboard we have to make sure that we we need to check that team is already uh added to this particular user or not at least one team need to be there under this user's name okay so we need to create a new API so inside the convex so inside the convex folder I will create a new file called teams. TSX so inside this uh teams. TSX we'll create a new query so before that let's add import V from convex SL values okay and here let me close this one I will say simply con export constant get team query and inside this I will just add uh first we'll get the arguments arguments will be users email we check with the users email ID that this team is belong uh any team is belong to this particular user so we just say v. string and then we'll need to add a Handler this need to be a sync and we add Arrow function and then we add constant result is equal to await CTX do db. query oops query and here we need to provide the table name so in this case We'll add a teams as a table name then we add a filter option let me bring this down and similar we have to add the filter option like Q is equal to Q do equal and equal to q. fill with the name uh created by okay if created by is match with the arguments do email dot collect like this okay and then you'll simply return the result like this perfect okay now this get team method will save this one let's go to this page. TSS okay but instead of that one uh obviously not here but we need to call that method inside the dashboard okay so inside the dashboard we'll create a new uh layout uh uh file okay so which help us to divide our layout uh one for the sidebar and one for the uh other section okay so what I'm going to do we create a new file call we say layout we have to call with the name layout. TSX and we'll add the default template here I'm going to call uh dashboard layout okay here we need to pass the children so here I will add a children like this okay and we will pass the children over here now here we need to provide the uh data type and all so from this layout. TSX I will just copy everything as it is because we are using typescript right like this and uh everything's look good to me oh the spelling is incorrect yeah children and save it now even go if I go to this Local Host 3,000 SL dashboard see nothing get changed okay only thing that now our all the dashboard pages will re render from this children now inside this uh dashboard layout we're going to call that particular method okay but here is the catch again in this case as well uh we need to get the that user information okay because we need to pass user email so what we will do I will write constant then we'll say uh user is equal to use kind browse client okay to get the users uh detail and then um we'll add the use effect okay and we'll plus empty now here we'll write one method called constant check team method it will check with the user already have the team created or not and we'll make this a sync now here we'll add a constant result is equal to a weight and obviously we need to get the convex do query so let's define that convex hook convex is equal to use convex we simply call convex do query and then we have to pass that query okay so API do teams.get team okay and here we need to pass the parameter which is is email and it will be um user. email okay so if you see it's saying that your user is might be un email might be undefined because let's define any it type any okay perfect now here we will simply check if response is uh dot sorry response. length result of this need to be a result if result. length is not there then we need to navigate to the uh create team page okay which we created the new route just and then here we need to navigate so let Define the router is equal to use router from the next SL navigation make sure you'll import from this next SL navigation and then here just add router dot push oh sorry push and here we need to define the route pass which is team/ create okay let me check is team is teams SL create and then save it now here we use the use effect so here we need to make this as a use client okay and let's test this out so okay so we need to call this check team method inside the use effect and only when the user information is available so I will pass the user and I will add the condition let's refresh it and oh wow so here we got one error okay so it's saying team/ team/ create okay so okay so let's let's go to dashboard again and boom if if you see as soon as go to dashboard it's redirect to create team because inside our database we don't have a table name called teams or any record about the team okay so here now what we can do uh we need to create a uh UI page for the create team so that we can add the um team name information okay so similar like what we have here so if I go back to this uh eraser application and click on this create team this is how page will look like okay so let's add that one let me close all Tab and let's go to this page. DXs to create the team page okay so first thing let's add a image and we'll add the logo so here is SL logo black.png okay okay here we need to give all tag called logo we'll give width of 100 and then height of 100 and if you see this is how it looks okay you can increase the size maybe 200 and 200 perfect now for this class name let's give padding of seven uh let's give more padding or maybe 16 perfect then we'll add a new du inside the DU we'll say added S2 tag and it will just write this what should be call your team and another is tag for this line subheading okay perfect now some let's apply some styling to this one so class name We'll add font bold text of 40 pixel and padding y to 3 and for this one I'm going to add a class name of text gr 500 and this is how it looks so for this du let's add a class name make it Flex Flex column let's make item to be in the center and margin top to right okay if I increase the size this is how it looks see perfect now let's add the uh another de which contain the label inside this label we'll just say team name and then we want the input box like this okay so which we can get it from the Shad CN UI so let's go to the Shad CN and inside the component you will find the component called input so this is how we want right so let's uh install this uh component so let's copy this n sorry the npm command and paste it here inside that so it will install the input component and then you can just add the input component from this component San component okay now here you can add the placeholder let me check so placeholder name you can give like team name okay and let's add a class name margin top to three and let's save it now for this du I'll add the class name we give margin top to seven and we give WID of 40% if I increase the size this is how it look beautifully look see only thing that I'm going to change this class name to text Gray 500 perfect after this one we need to add a button so let's add a button from the Shad only and for that button we'll just say create team now let's give class name We'll add the background of blue 500 and for that one as well uh I give imin top to 9ine and then withd to 40% see okay now if you see on the smaller screen it's not look good okay so what you can do we added this pading 16 right so what we can do I will add the padding X to 16 and padding y 20 maybe uh 16 perfect and this padding Sy is applicable only when the screen size is medium or larger for the smaller screen we can add padding X to maybe 10 yeah maybe six yeah and if I increase the size see this is how beautifully it looks okay and this is the one which already have obviously we will not match the exact ex uh exact same one but somehow we will develop it because our main goal is to implement the feature actually okay and uh I hope you understand how we beautifully implemented this uh create team page now once user uh input something right we need to store this value in some State and on the click of this create team we need to uh add it inside our database so first thing let's save it in a state so call constant team name comma set team name is equal to you state and this need to be a string so I will pass the empty string and for this input we will add one property called on change it has a event e and we'll just set the team name as e do Target dot value okay so it will set the name now obviously we use this uh use state so we have to make this page as a used client okay next uh we have to make sure that if the input is empty then we have to disable this button so we have to add property called disable and here we'll add the condition if not and then we'll add the team name and and team name. length is greater than zero see and if I enter some value ABC it's enable immediately okay also on how if you see it's little darker so I will add the on Hover method so for the CSS I add h we'll add the background little darker okay so if I overun it yeah perfect maybe a little lighter perfect okay now obviously if I type something and create team we have the data inside this uh use State called uh team name okay now we have to create API endpoint which will store or create a new record in inside our team table so let's go to this convex folder and inside this we have this team. TSX file right so here I will add the con export constant we say create team is equal to mutation obviously because we are doing the crude operation and inside that we'll first face the arguments which will be the email call v. string and then Handler so this Handler is of type async okay and now inside this one we have to add constant result is equal to a wait this say cx. DB now obviously we want to insert the record so we'll say insert and then table name which is teams okay and then we need to pass the arguments which is our email information okay and then save it now here is thing obviously this argument is little different so here we need to pass a different argument okay first is team name we need to pass so what are the team name so we team name is of type string and then created by okay so who created that email address we need to pass so obviously the type is of three and whatever the argument we pass it will create a a column name with the T name and the created by okay and here we'll return the result simply and save it now inside this uh Team uh page we need to uh call the method uh inside this uh one method we need to call this create team API so let's go here first Define this mutation called constant create team is equal to use mutation and here we need to Define API do teams dot create team and now we'll Define one method called constant create new team okay and here we'll just call this method called create team okay say this mutation and here we need to pass argument for first is team name which is the team name which we uh which we already have and then user email which is which we need to get it okay so not email we need to add created by actually and we need to get user email so by using constant user is equal to use kind browser client and here we just simply user. okay now it's saying that string uh might be a null so make this as a type any and this is a promise so we'll just console the response okay and if the response is successful we going to show some toor message that okay you created a new team and then we will redirect it to to the dashboard okay so first thing let's in order to add the toast message so shui has a um beautiful component called toast okay and if I click on this button this is how the toast will look like but they also newly added this another component called son which also uh toast again but the toast is little different if i h on this one you will see the previous toast myage as well okay and this is much easier than a toast okay so first thing let's import this sonar so I will copy this one and then you have to add this toaster component inside your parent layout okay so over here I will add it make sure to import this toaster from the sonar and then in order to use this one you just need to call Toast if you see this toast from the sonar and then message so we can say uh Team created successfully okay and then save it now obviously we need to redirect it as well so I will Define router here and we say router. push and just simply we add a dashboard okay and obviously we going to show the tost message as well let's save everything and let's test this out so if you see right now currently in our data uh uh inside our uh convex database we don't have the table name called teams okay but let's create a new team code we can call it as a uh tube guruji YouTube and we'll say create team and nothing is happened because we did not connect this create new team component to this button okay so here for this button we need to add a on click method so on click and then we need to call this create new team meth uh method okay now let's add this you gyt create team and boom if you see on the bottom we have this beautiful team created successfully to message and also we redirect to this dashboard page but if you see the database we have new uh table called teams and inside that we have the new record with the created by which is the username but with the team name the which we created and the date as well okay and obviously each record has a unique ID which is important because we going to need that in later to F that team information okay so this is how you can easily add uh the create team uh or you can add the new uh newly add the create team with the help of new page and uh this is how uh with the help of convex we store the record as well now in this section we are going to design the sidebar so if you see this eraser application here we have this side navigation bar and it contains this uh options where we can select the team from the existing one then you have some option to join or to create the team settings log out and the users information okay and more other details as well so first let's implement this drop- down and some option in that one so let's go to our application and then we'll open it here and inside this uh dashboard right uh we need to we will create a new folder called component okay so underscore components and all the components related to this dashboard will keep inside this components now here I will put side now dot s now. TSX file Okay add the default template and then save it now once we add this side navigation bar we need to add it inside this layout dotx because we want to divide the screen into two parts right one part where um the sidebar will be fixed throughout the application uh means at least at the work workspace or in onside inside the dashboard at least and only this content going to change right so what we are going to do um let's go to the layout and inside this layout I will add the side navigation bar over here okay like this but let's divide the screen into two parts so inside D I will add one D for the side and one de for the children okay so I'll put this side now in one CH de and this children in another de okay and then for this du I will mark it as a grid then we'll make grid columns four okay we'll divide the uh complete screen into four uh columns and then we'll assign out of four column we will assign three column to this children so we'll say grid column 3 like this okay and Let me refresh it once and if you see now side navigation by showing on the screen if I increase that size this is how it looks perfect now uh let's go to this side navigation bar first thing uh just to make sure that it's visible so I will add the little bit class name um background gray color of maybe 100 okay so it will be visible to our eyes and we'll add the height to screen also we'll fix it and then we'll add the width of 64 maybe 6 before uh like this okay and then save it if I increase the size this is how it looks on the screen so uh I already make it this 72 and that's fine now okay let's add a border on the right so border on the right so you'll get border and perfect now to this sidebar navigation bar we're going to add our all the details okay so first thing let's add the image for the icon Source make sure to import this image from the next SL image and then we'll add a source in the tag and we'll add logo one.png we'll give the all tag as a logo then give me width of 30 and then height of 30 see like this okay we uh if I increase the size this is how it looks it's very small let make it little bigger make it 40 and 40 after that I going to add h2 tag and inside that h2 tag it will show the team name okay right now we don't have the list of team so just now I will hard code it here and once we have the information we will update it now let's bring in everything one line so let Wrap This D inside One D like this and make it class name to be Flex make it item to be in the center and for this parent uh du I'm going to add padding of six okay UPS uh inside the class name add padding of six okay then here I will do gap of three perfect if I increase the size this is how it looks after this one I'm going to add uh One logo so from the Sher La down sh I don't know what is called sh La down okay now if you see this logo is importing from the Lucid react okay and when we added the uh Shad CN library that time also the Lucid uh icon get added okay so this is the beautiful Library if I go to this Lucid day you will see a bunch of Icon and it's very easy to use okay when you type it you'll get the suggestion and then you can just add it so if you see this sh and down and if this is how it looks right let's make it in one line so for this S2 tag I will add a class name I will make it flex and gap of two see like this okay make item to be in the center and now let's give some styling so first thing uh I will add a h effect to this one so I will add a h and uh we'll say background to be gray 20 100 okay so if I hor on this one this is how it looks uh let's add some padding of two and make we make corner to be rounded maybe medium see like this okay then also we'll make the curs to be pointer perfect now looks good to me then let's make padding three for this uh team name text we going to add a font to be uh medium or maybe we can add bold and we'll change text to 17 pixel little bigger okay see like this uh I will make this rounded Corner large little bit so it look like this yeah perfect okay next uh now what we need to do once you click on this particular uh uh selection of the team right we are supposed to show the menu icon so let me show you how it looks so like this okay only thing I want to change here if you see this is a gray let's try to make this slate and yeah that's much better perfect now for getting the drop down right uh we're going to use a Shaden component okay let's go to the shad cn.com and inside the component we are going to use the popover so pop this is this is how it looks right uh so when you click it obviously uh it will show this beautiful popup uh dialog box kind of thing and then you can update this content okay it's not fixed so let's add this npm uh Library so just add this component First Once you add this component you have to import this uh pop or okay but before that what I'm going to do uh we'll put this all this content in one uh component because we want to add a lot of things see here we need to add this particular section then we have this bottom section as well okay so just what we can do we can create a new component and we get side now top section. TSX and add the default template save it and we'll add another one which will say side now bottom section. TSS and add the default template okay now inside the side uh whatever we wrote in side navigation bar I will just copy I from not from this one uh from this de I will cut it from here go to to the top section and just paste it here okay and let's make sure to import this image and this icon as well okay and then save it obviously we need to import this side navigation top section and save it and this is how it looks nothing get change see okay now let's add the pop over because uh we need to copy this input statement so I will paste it here and then uh we'll use this pop over okay okay now let me put this oh we are putting in different component let me cut it from here and let me paste it here and then copy this pop like this okay now this pop or uh if you see it if I save this one and let me show you how it looks right now so if you see we have this open Button if you click on this this is Pop will show okay so this is the trigger button where the pop will enable or will display on the screen right so what we need to do we need to put all of this du inside this pop over okay so let me bring this pop over at the parent level and then this de I will keep inside this trigger okay now if I click on this one see the pop displaying on the screen okay perfect now let me make this this format documents okay perfect now uh we'll we'll uh add some styling to this uh content so add a class name we'll say margin left to seven okay and now if you see it will align to this one perfect and also We'll add a padding of four let me remove this content and then we'll add our own content here okay so first thing obviously uh we display the team information so it will be a we will add a do S2 tag and we'll just display team name okay this is sample name obviously we will replace it with the uh once we have the all the list of Team then we need to display the list of menu okay so what I will do I will write a constant we say menu inside that I will add add one name I will add a name as a maybe uh cre create team as one option and we give path so path will be team/ create okay so once user click on this one it will check for the path and will go to that part and second I will add of ID to name we add settings and then we'll add uh we'll add path but right now we don't have path for we'll keep empty so for this one we'll also add icon so icon will be users okay from the Lucid Rea and for this one I will add the icon and which is the settings okay perfect now next let's uh add this menu icon so here what I will do I will say team section okay just to uh realize and this is menu section or we say option option section okay and here then now we need to iterate that one so menu do map and inside that we'll add item comma index and then we have to add uh a display that Lop menu okay so inside the h2 tag I will just add item do name okay like this and save it and if you see now we have this two menu called create team and setting also along with this one we need to add the icon so here we'll say item do icon like this and save it and if you see the icon is also displaying now let's apply some styling so Flex Gap two item to be in the center so this is how it looks that's look good to me then uh we do padding of two okay and on H we'll change background gray to 100 okay if I hover on it this is how it looks obviously we'll change this corner to be large and text I will make it small also for this icon we'll change the size so class name I will add height of four width of four okay perfect see obviously we'll make this cursor pointer and that's pretty much for this particular icon or sorry this menu okay now this will be a third menu for the logout as well okay so obviously log out will be a button because we have the kind log out link button so what I will do I will copy this existing S2 tag I will paste it here only thing that here I'm going to change to actual icon which is log out and here I will change this text to log out okay and nothing will get change see and also I will I will wrap this S2 tag inside the log out link okay and if you see this logout link is improving from this kind authentication just W this S2 tag oops like this and then save it okay okay so we have one error somewhere I don't know what okay nothing okay everything is good perfect and if you see now we have this log out button as well now we need to add a separator here okay separator means the horizontal line so again uh this shat SC is providing the separator component as well okay it's just a horizontal line like this see so I'll just import the separator component first and then we'll add the separator after this one so add a separator and for this one I will say class name margin top to two yeah and same separator I will add after this log out as well so after this de okay and then we'll add this section will be now uh we'll say user info section okay we we going to show the user information like this here if you think that color is little lighter you can change the color actually background we'll say slate 50 yeah maybe let's say 100 how it looks 100 is good same thing I will add for this separator as well okay and now next we we need to add a user information so I will add a one de inside that we'll add a image here we need to provide the source okay so in this case we need to provide a source of the users's login profile pick okay now we need a user information over here so you can get it from the constant so there couple of way because and we are in the uh child component right uh one another way that we can fet it here and then we can just pass it inside the side navigation top section okay so you don't need to call that um uh hook again and again so simply I will add a constant user ins inside the side navigation okay is equal to use kind browser client I will make this as a type any because we don't know the type okay but for now we'll keep as it is and this user information I we just pass it here user and user is equal to user okay so if you see uh right now we don't don't know the type okay and then if I go here let's accept it here as a prop okay if I try to put this uh kind user okay I don't know the type here but but for now I will keep as it is we'll change this type later on let's save this one okay so we got error I don't know why con is showing here okay so it's saying the pop or is unexpected let me see okay so maybe we miss this one all so let's refresh it and put user over here let's save this one and then we'll use user profile pck over here okay so that's the reason you for showing error and here will be the picture alt will be the user let's save this one okay we have one error that's fine if I click on it okay so as as soon as I click on it it's saying that uh this particular domain is missing the width property so let's add a width obviously we need to add a width for the image so we'll add a width of maybe 30 height maybe 30 okay and canot read property of null if I put user and also oops also I will wrap this du inside the user okay if user is present then only show this particular du save it let's open this one oh wow so this error is showing that uh you need to add a host name uh this particular host name inside the next. config.js this error CES because if you are using any picture from the URL okay or any Source from the URL uh next just need to make sure that this uh URL uh you are aware of and you need to add that particular domain inside your next. config.js okay this is for the security purpose so let's go to this next. config MJS file here you have to write images inside the images you have to provide the domain which you want to allow okay so in this case uh let's copy this domain so I will copy this domain and just paste it here if you have multiple domain you can Define inside this array okay now as soon as you update this next. config.js file and uh you can actually uh rerun the project or make sure to refresh it again okay if it did not did not work then stop the server and restart it again now if I open it and if you see now the beautiful uh user profile pick is showing on the screen now I will just add a class name we'll add a rounded Corner rounded to be full and that's all okay um I think let's add a class name to this one so add margin top to two Okay and save it perfect now after this one I'm going to add one VI inside the vi I'm going to show uh users's name this will be a user Dot and it will be a given uncore name and another one for the user underscore familycore name okay so this is obviously everything is coming from the uh kind and one is for the email so here another is tag for the email now let's bring everything in one line so for this de I will make it Flex let's give gap of uh two and make item to in center now for this de sorry for this particular h2 tag of the title users name I will add the text of 14 pixel okay if you see sometimes I give uh the value inside the bracket because I want to give value custom value and not from the uh uh tail CSS classes so that's time whatever value you want to give C or custom Val you want to give you can give inside this brackets next we add a font of font bold see like this same thing I will add a class name to this one and we'll make text of 12 pixel and then we'll make text Gray text Gray save it maybe we can change to 500 and save it okay and beautifully we beautifully showing this user information as well and if you see the current one the this is how uh the user is displaying and this is how our UI displaying quite similar right perfect now the one last important thing is to F the team's information right we need to get the team information here we mark it as a type any okay oh outside of this we need to Mark actually okay I don't know the type means because obviously we are getting this information you can create an interface but I will keep as it is for now now as I said we need to create one method called get constant get team list and this method will get the team list from the back end okay so obviously we need to uh Define the convex first so convex is convex is equal to use convex and then we get constant result is equal to await convex dot we have to write a query and then from the API do team.get team okay and this will give give us a a list of Team okay but here we need to pass uh the user email address okay only that user email address teams will f it out so we have to pass email as user. email okay perfect obviously this is a way we have to make this method as a async okay now inside that we have the list of uh teams okay we'll just consolid so team list ups and here we'll say team oh God I don't know why this I hate this suggestion kind of thing we just display the result okay and save it now obviously get team list we need to call inside the US effect as soon as this component get load and when the user information is available so here I will pass the user and when the user is information is available then only we'll execute this G team list okay and then save it now if I increase the size go to the inspect panel go to the console and over here uh Let me refresh it once okay so if you see now we got this team list and inside the team list we have this list of Team currently inside the uh database okay if I go to the database if you see the teams only one record is there and that is what it's displaying on the screen if you see we have error because it's saying that each child in a list should be a unique key prop so obviously we map we show you the list over here for this to tag I will add the key as a index and now if I refresh it now you will not see that error okay and now only the team list now once you have the team list we need to save in one state so let's Define constant team list comma set team list is equal to use State okay now here we need to define the type of the team uh team list right so Define the interface so I will Define export constant I will Define interface with a team and then inside this one you can Define for example created by and is of type string right uh string sorry this need to be interface this has to be inter interface like this okay then once type we let write a team name okay which will be the type string and uh we say create we will need ID so underscore ID is of type string okay so whatever the information you need it you can just use that one and if you see these are the field you need to add it inside the interface okay so that just you are defining the type okay so that you will not make a mistake uh in future now here you have to define the type called team and as this is the list of array you have to define the empty array like this okay and now simply you have to save it using this you have to set the team list using set team list and the result and boom okay perfect now we have to iterate the list of team so here we Define the team name okay and this is a team section so here we just iterate it so we'll say team list do map inside that we'll get team comma index like this okay and we'll just push this S2 tag inside the team list and then I will just add a team Dot and if you see you got the suggestion now you select the team name if I save this one let me okay so here again we need to define the key property to this one so key as a index and if I increase the size let me close this one now but if I uh drop down it if you see now the team name is coming up okay perfect obviously we will add some styling to this one so add a class name and uh for this one I'm going to add a background onhover color as well but along with that we'll add a padding of two then we onhover we'll change background blue to 500 and on Hover as well I will change uh T to White okay and save it and if you see if i h on it this is how it looks let's make corner to be rounded so rounded will be the large margin bottom I will give one and we'll make cursor pointer see like this okay perfect now uh one user click on this one right now if you see right uh we have to make one one of the uh team as a default one okay so let's create one state constant we'll say uh selected team or we say active team okay active team comma set active team is equal to use State and we have to Define type is of type team like this okay now by default we'll uh we will set the first uh team as a default one so we'll say just add set active team and we'll get the result from the zero one like this as simple as that right and here obviously we'll show active team. team name okay and save it and now if you see the default team name is coming up over here see if I drop down it you will see the team name as well okay and obviously uh if the team name is the selected team name is there we will change this background to Blue so uh oh so over here okay let me bring this down as as well or not here but inside the class name we need to add a conditional styling okay conditional classes so make sure to wrap this in curly braces add this particular tag remove this single code and then you can inside the dollar sign like this you can write your condition for example in this case I will say uh active team. team name it matches with the team do team name or you can say ID as well I think ID is much better so I because ID will be the unique right and then I think then we can write condition and and and we can say background oh something we okay inside that we have to write and then and then we'll say background to be blue 500 and text to be white and save it and boom if you see now right because this is a selected one it will it show this one perfect okay also we'll write on click method to this this X2 tag okay so okay let me bring this down here not this one but this tag now here I will on click and on the click of this particular tag right we'll just set active team as a team okay save it now right now obviously only we have only one active team so that's the reason it's not showing but if you just click on create team we want to show the new page and there if you user add a new team it will show displayed on the screen right let's do that one now so on the create team we need to add we'll add one constant and we'll say um menu on menu click method okay it will take the item as a value I will put uh is of type any form now and on the main click we have to add it for this menu section the option section right so for this S2 tag I will add here so on click on menu click we'll pass the item okay and save it so let's go here and we'll add a check with the condition if item. path is available right then we'll simply route to this particular page right in order to Route it we need to define the router from the next SL navigation and then simply we'll write router. push and then the path which is item. path and then save it okay perfect now if I open this one click on create team okay and if you see it jump to the create team now let's try to create a new team we'll say um test team environment for example okay and if I click on create team if you see the team created successfully if I create the drop down and if you see the your team name is showing on the screen if I click on this team see now this team will be the active one and here the name also get changed see so beautiful right perfect same thing if I log out from the screen it will get log out from the uh screen and it will navigate to the dashboard sorry the home screen landed screen okay and then we have this beautiful uh section as well perfect so I hope you understand how we beautifully design this uh section where you can able to see the settings the create name the you can even log out and this beautiful drop down with the Shad C and pop over component now we going to add this bottom section along with this all file uh button okay so let's go back to our application and in the top section uh to the bottom so let's let me wrap this pop over in one D actually okay so we'll add one de and we wrap inside this one okay and here we'll say all file button so in this one we will simply use the button from the Shad scene like this okay inside this we'll write all files okay and we want to show the icon as well so here I will going to add layout grid icon just save it and let me refresh it once and this is how it looks right now see okay now obviously we want to change this button so we'll change this variant to outline okay and then we'll uh add some class name class name we'll make with to be full and also we'll make a base uh sorry justify at the start so it will what it will do it will uh the text will show the from the start then we'll go Gap of two something like this perfect and if you see right now we applied this gray color okay we'll remove this gray color now because we are done with that one so I will just remove this gray color perfect and obviously We'll add a border of one pixel like this okay let's go back to our uh this particular button okay now over here uh um we'll add a font to be bold and we'll change the size of this icon class name height of five width of five perfect and then I'm going to give margin top to8 something like this perfect also we'll change background to gray 200 maybe we'll do 100 perfect okay and this is similar like this one only the icon is different but that's fine because we don't have the fil filled menu icon that's the reason okay so this is how we complete with the top section obviously uh just ignore this one okay we'll fix this out because this is a fixed one that's the reason it's showing on the top of that one but that's fine now we need to design the bottom section and if you see in the bottom section we have this U menu some options then we have this button to create a new file okay if you see this is button we can create obviously right now you are done with the maximum limit but yeah this is how it works and then we will show uh this progress bar as well so let's go back here and let's close all of this window and then open the side navigation bottom tab navigation okay make sure to add this one so obviously once you add inside this top navigation bar sorry not top the side navigation bar here we want to add that one so du and inside this du let's add the Side Bar bottom section okay but if you see right now it's coming at the top we want it at the bottom so what you can do for this particular d uh make this D as a flex then make it Flex column okay and for this side top navigation bar uh let's wrap inside One D and just mark this D as class name Flex one okay and automatically the bottom section will come at the bottom of this particular side navigation bar now we want to show the menu okay so what I will do I will add a uh constant menu list is equal to and inside that we'll add ID of one then we'll add a name and we can call it as a getting started then I will add icon I will add as a flag icon from the lucid and then path we'll keep empty for now so I will copy this one couple of times and one is for the GitHub we say GitHub and other we say archive here we'll say GitHub and here I will say archive okay let's change this idea as well this two two yeah perfect now let's iterate this uh oh my bad actually we added this menu list inside this side navigation we want that inside the side navigation bottom section let's cut it from here and paste it inside bottom navigation not big deal and make sure to add this all of these icons as well perfect now let's iterate this one so here I will just uh write in uh menu list. map sorry menu list. map inside that we have menu comma index and then h2 tag so inside the h2 tag we display menu dot name so it will display the list of menu name right then obviously we want to display the icon as well so here we'll say menu do icon and then obviously we'll uh apply some styling to this S2 one S2 TX so add Flex let's go Gap of two um then we'll add a pading to one and padding X to two Okay we make text of 14 pixel little smaller and let's add a how effect as well so on on how we change the background to gray color and we'll make round it to be medium we'll make cursor to be pointer okay and if i h on this one see this how it looks make padding of two perfect I think let's make pading one only okay yeah perfect once you done with this one uh let me change this it con size to S to be four with to be four I think five is enough perfect now once you have the Manu list right you need to add a one button to add a new file right so here we add say add button add new file button add new file button so this will be a button okay from the uh shaten and here we'll just say new file okay so make sure to import this button from the button here and if you see now we have button let's apply some styling so we make it withd to be full background to be blue and we'll add on on H we change background blue to 700 and we want this text on the left hand side okay so we'll just say justify start and also you give margin top to three perfect and now we have this beautiful new file button and on H as well you'll see this effect perfect after this one we need to add this kind of progress bar right so we say progress bar okay here obviously you can add it from the component as well but we we going to add own custom one okay it's very easy to do it so once you define the de let's add a class name and here we will just say height of four and then WID to be four okay obviously it's not visible but if you do the background of maybe um gray 200 and make rounded full okay also give margin top to five it will come like this see and your progress bar is ready right now in order to show the some uh the completion progress right so you can add another du inside the existing du and here as well you can add a class name height to be four okay WID to be full and in this case background will change to the background different color for example 600 see like this okay but now obviously we want to show the progress right so for example in withd if I converted to 40% see this is how it will look like right and otherwise make this round to be four see your progress bar is ready so simple right obviously once we have this uh percentage right we want to change this dynamically this value we will change dynamically okay later on but now for now we keep as it is and the last is uh to show the how much progress is come file is get created and all right so for that one I'll create h2 tag and inside the h2 tag we'll say for example one out of five files Ed okay and another text is this one now for this h2 tag let's add a class name we'll say text of 12 pixel and margin top to three okay and only thing that I will put this one inside the strong tag because it's a bold right so if I put inside the strong tag oh this need to be strong one and same thing I will copy and paste it here as well perfect see same thing I'm going to do for this one as well only thing that we'll change this class name we will add change this to 12 pixel size and margin top to one perfect and see our sidebar is ready right now if I go here and if you see this sidebar it's quite matching what we build it okay very clean as well if I increase the size let me increase the size actually see okay and this is how our eraser um application sidebar is ready okay so there are a couple of things now we need to work on so first thing when you click on this new file right we going to add the uh we we want to navigate to the new screen right for example uh if I click new file right now if you see this if this is fill right you want to show this kind of dialogue later on but we if you creating the first time the file right once us click on new file it will open the workspace where we have the uh uh the document and the uh side side uh container where you can draw it as well okay so that kind of thing we going to show but for now I hope you understand this one next what we are going to do we going to add uh this particular section okay where you can user can see the list of files as well and this beautiful header section as well okay now user click on this new file button right we not we need to give option to the user that he can enter the uh file name and then once we add the file name it will it will get added into the database as well okay so on the click of this new file we need to show some dialogue box where user can enter the input value for the file name so for that one let's go to this components uh the shadan components and just search for the dialog component so it's very easy to use for this dialog okay and this is how it will look like so first thing you need to import this uh component so just copy this dependency and paste it here and once you done this one right you have to C copy this um import statement as well so I will copy this one and obviously we need to import this one on the side navigation bottom section right because that's where we have this um add new file button correct so what I'm going to do I will add it over here okay oh sorry this is import statement We'll add it here and then for the code let's copy this code as it is and inside this add new file you can p oh I don't know why it's not copyed just copy it here and paste it okay now this is the dialog trigger okay so obviously on the click of new file we need to make sure our dialog trigger will be added here okay and click it now if I go to our project and click on this one if you see we have this beautiful dialogue but this button is a smaller right so what we can do for this dialog trigger just make this we to be full like this and if I click on this one this is how it looks perfect now uh we'll change this dialog uh title to create new file and then here on the dialogue description I'm going to add a simple input box okay so input I will add it here we'll add a placeholder we'll say uh write file name or enter file name and save it okay see like this we'll give margin top so I will class name margin top 2 three and after that one I'm going to add the button so for the button right obviously on the click off button we need to also we also need to close this dialog box and then we need to save the data so first thing if I go here right there is one option to add a custom close button okay and if I click on this close button see the dialogue is getting closed so this similar button we need to add for for that one let's add the footer then a dialog closed uh component and instead that we have the button so I will just copy everything as it is and we'll add it after the dialog header like this make sure to import this dialog footer and dialog close and the variant I will keep I will remove this one and we'll change the class name to background blue 600 and on Hover we'll change background blue to 700 okay and here we'll just say create and save it and let's test this out and this is how it looks here okay if I click this one it will close it on how I think it need to be like this yeah perfect okay now we need to uh write one State uh to save the file name okay so what enter we need to store that one right so here I will Define constant we'll say uh file input comma set file input is equal to use State and this is of type string I will pass empty string here and this is the input right over here I will add onchange method e and here we'll say uh set file input the event dot Target do value so it will save the file input input information but also we need to make sure if user did not enter the file name okay we have to disable this create button correct so for that one okay and also I don't want this style I will just remove because I want create button on the right hand side okay and let's go back here and here we'll add a condition so we need to disable this button okay this is how it looks but only when we'll add the condition so condition will be uh file input is available and file input. length greater than zero is not true okay this condition we added and if you see let me close this one let me open it now and if you see the button is disabled if you enter the file name now you it enable right or you can add a condition at at least Max minimum three character need to be there like kind of thing okay until unless I did not enter the three character see is disabled but as soon as I touches the fourth character it's enable Okay so that kind of thing validation you can add it perfect now once I click on this create button we need to add on click event so we'll add on click event and we'll say on file create and this method we going to pass okay obviously with this method we have to pass the file input and we'll pass this method back to our parent component which is the sidebar and for this one I'm going to give the type of any and then if I go to the side navigation bar here we'll accept it okay on obviously on file Creator we have to create this method so here I will just say constant on file create like this okay and here obviously just console the log and the file name I will add it here okay so here will be a file name and obviously the type is three okay perfect and save it now let's test this out just we will enter the value and click on this create will display the file name okay so this whenever you develop something right you have to go step by step and you have to make sure that you are getting exper result at each of the point so let me clean this one let me add some value so test file name click uh create and if you see the dialogue is gone but also uh similar in the similar time we got the file name perfect that is working fine now there are couple of uh uh thing we need to do obviously we need to write an API to save the file information so let's go here inside the convex folder we create a new uh file and we can call it as a files. TSX so in inside this one let's import uh V from convex SL values and after that we'll write export constant and we'll give we'll write a create file method is equal to mutation and inside that mutation we need to write the for argument because we want to insert the file okay create a new file information so first thing is argument the argument will be a file name is of type string then we need to add a team ID that is very very important because on under which team this file we need to save right so that team ID so obviously this team ID is of typ string and then created by okay who created this file so that uh that name as well sorry that one also we need to save so that is also of typ string then we need to add a Handler and this is a sync so we'll add a sync and inside the Handler we write constant result is equal to to await and then we need to have CTX do database. insert statement okay and inside the insert we need to give the table name which is files comma and the argument which we want to save it so I will pass all the argument as it is and then we'll simply return the result okay perfect now our create file API is ready let's save this one close this window and over here we need to get that one right so first thing let's define constant create file is equal to use mutation right because anywhere once you define the AP anywhere you can use this uh API now right with the help of Just Right Use mutation here we need to add API do files. create file okay and now inside here we'll just write create file and then we need to pass some of the argument right first is file name We'll add a file name then we need to add a team ID we don't have Team ID in this particular uh uh component right so we need to get team ID and then the last is user uh email which is created by so which will be a user. email okay so the question is now we need to get this information so whenever okay let's go here inside navigation um top section okay so in inside side navigation top section whenever user click on this uh uh select uh set active team right we need to send uh back that active name right so what we can do simply I will add one use effect okay and this okay let me so this use effect will execute whenever the set active get changed okay so active team value get changed okay so whenever active team value get changed what I'm going to do here I will write oh sorry oh God so here if active team is available means there is some value and and we'll say uh we'll just add some value for example set active team info we say okay this method I'm going to call and inside this method I will just pass this active team information okay now this method I'm going to call and we'll pass here I will we need to pass back to a side navigation bar so I will write save active name is of type any for now and then inside the side now right this is side now so here we need to add it okay so set active name here will be the active active team okay and here obviously we need to save in one state so I will Define one state actually constant we say active team comma set active team is equal to use State like this okay and is of type uh is of type actually team okay so because we exported this team so that's fine right and here we just say set active team will be the active team so is of type active type of let me put the team yeah that's fine perfect okay now we have the active uh team name as well okay here we'll just get active team Dot and the team ID perfect like this so here we are getting one error okay the set active name is not function because we Define this is outside so what you can do uh let me remove this one and we'll inside like this okay and save it now if you see we got we that error is gone but we have three more ER regarding this hydration issue okay it's saying that expect a server to HTML contain matching button and blah blah blah blah so this is comes because we use the okay inside the bottom navigation bar right we use the button inside the dialog trigger so for this dialog trigger we have to mark it as a uh as a child I think okay so similar like this one see okay and save it now you see this error is gone okay perfect now let's go back to our side navigation bar okay and okay just ignore this error because this is just kind of warning okay but here now once we Define this create file what I will do I will add then operator because this is promise and we'll add if response is successful we'll show the toast message okay so we'll just say uh file created successfully like this okay and then save it now if you got any error so if I write the error message here as well and we'll show the to message and we'll say error while creating file simple okay now let's save this one and let's test this out so if I click on create new file and let's enter enter the file name but just to make sure that right now if you see we don't have the file uh table okay but as soon as we enter some file name here let's add a test file okay and click on Create and if you see it's saying the file created successfully and if I check on the database inside convex we have this file table and beautifully we have uh record which we inserted okay perfect now another important thing I want to tell here inside conx right we attach this team ID right we added the team ID but automatically convex connect this team ID to the existing team uh record right if I click on this one see and it will show the team information same thing it did for the created by and if you see on the created by if I open this one it will connect to this uh users as well okay so this is how you can connect uh sorry this conx is automatically connect our tables to one other and that's very useful when we want to fetch uh data from the two tables okay so I hope you understand how we beautifully added the uh file information and now here you can say for example uh new files okay and we'll say create and if you see the second file is created with the new files and with the time who created it with the team ID and everything here we created the new file with this particular details okay which has created by file name and team ID but as we also need a three more column the one is for archive whether this file is AR or not the second is for the to store the document which we are going to implement in future uh in this course only and another is for the Whiteboard okay so these three column we need to add it so first thing let's go to our API let me bring this down and inside the convex API right if you go to this files API here we need to take some more arguments okay when we are creating the file so for one is archive and archive type is will be a bully sorry Boolean okay then our another is the document is of type string and then the last one is the white board and of type string okay now I save this one obviously when we creating uh this file right then that time also we need to uh I provide that default value okay so inside this create file right here we need to add that one so first is archive okay and here obviously I will send it as a false okay then document it will be empty for now and then last is whiteboard okay and that also empty so I will pass the empty string like this okay and then save this one now let's go back and try to create a new file let me delete the existing one I will delete all of them and let's create new one now okay let's refresh once create a new file and here I will say ABC 1 2 3 and then click create so now if you see the file get created okay let me check the file is not get okay yeah oh the file is not get created maybe due to some uh reason so here the issue is the the we mispel this uh word called archive okay so let's change that one so let's go to here and here is correct let's go to the files and if you see this is incorrect fi name okay now let's save it and let's test this out so let me open this one click new file and we'll say abc1 2 3 4 let's create it and it's saying file get created and if you see in the database as well we have the file with the field now or column name called archive the created by which was already there then we have the new column name called do document along with this whiteboard that's good right that's what we wanted so now we are going to f the list of all the files which user created and then we need to show uh inside this progress bar okay depends on the file size and depends on the number of files which user created depends on that one we going to show this progress bar change okay so let me our project over here and inside now this one let me close all of this tab first thing we need to create an API so let's go to this convex and inside this files folder okay we we already have this uh mutation query or mutation endpoint here we'll create for to get the query uh get the list of files so we'll say con export constant get files and then we'll write query here we need to pass the arguments okay so this arguments contains a team ID okay in particular uh given team how many files are there obviously team ID is unique you don't need to pass the user information here so we'll just say team ID v. string okay and then we need to add a Handler so Handler and we'll make this a sync and arrow function now inside that we'll write constant result is equal to CTX do database. query okay because we want to face the data here we need to give the that table name and then we need to pass the arguments so in this case um we just need to pass this team ID okay okay obviously we actually we don't need to pass it here what we will do we will face the all the query then we'll just simply add the filter option on the query q then Q do equal we will um add this equal operator and then here we will add the expression so for example Q do fi and here we'll say uh Team ID comma and then on the right side we will say arguments do team ID okay and then we'll add a collect method like this and then will simply return the result okay so this is a filter option what it do it will uh get all the files and depends on the team ID matching with the given uh files team ID then it will get that only uh records and then we'll return that result now save this one and then let's go to this file called side navigation okay so inside the side navigation o yeah we we'll create one one method called constant get files like this okay we'll make this a sync perfect now make sure to we need to add a convex over here so I will add a constant convex is equal to use convex okay because we going to add we will call our uh we'll get that files from the query okay so constant result is equal to convex so we we will add a weight then convex dot query and and then we have to pass API do files. get files okay and then here we need to pass the team ID so obviously we have the team ID here so from the active team. ID we'll pass that team ID and that's all okay now we have the result let's console this result like this okay now this G files we need to call uh inside the use effect okay or maybe we can call whenever the uh active team is uh ready okay so what we'll do we'll call one US def over here and whenever the active team uh information is available then only we will call this method okay so we'll call get files like this and then save it now let's test this out whether we will check whether we we are getting the file list in console or not and if you see we got the file list okay with the file name taste file and another file name with call new files perfect now the length of this file we need to send to this side navigation bottom section okay onto this section so what we will do we'll create one state called constant total files comma set total files is equal to your state okay and this will be a number so we'll type number and here we'll simply set the total files will be the result do length Okay like this and save it now once we have the total files we will just send it to this bottom section we say total files will be the total files and inside side bottom navigation here we'll pass it as a total files okay now inside the bottom side bottom navigation section we have the total files let's save everything and to this one right we will just display over here for now just to test out whether we have getting the correct value or not so if I scroll down here we add the total files and if you see right now that we have two files and it's showing the two files that's good now let's add to the progress bar so right now if you see right um when we create this progress by we I told you that we will change this width depends on the number of files we have right so what I'm going to do I will wrap this oop sorry in curly braces like this okay and this width will be a dynamic okay so what I'm going to do for this one I'm going to write condition so dollar for and this sign and the or the logic will be um we'll say total F divide by five and then we'll into 100 so into 100 Okay the reason is five because the maximum user can create only five files right and depends on that it will give some percentage and that percentage will pass it here and let me save this one and if you see we have this two files obviously that is filled out but if I create a new file okay let's let's do one thing let's delete the one file okay so from the files we delete we'll delete the one file Let me refresh it okay so something is not right let's see what's the issue okay so just refresh this one sometimes it's not reflected but now if you see we have only one file and that much only progress is showing as a completed okay now what we need to do let's create a new file okay and we'll see whether it's reflecting over here or not if I created a new file called abc1 2 3 just click on create now let's see in the database if we have this new file but still it's showing one file right but if I refresh it now it will show two files the thing is how can we update immediately as soon as we create the file right so for that one let's go to the side navigation bar right and over here we have this on file create method right so as soon as the file is created and we are calling we are showing this toast right along with that we'll call this uh file what is this method name called get files so we'll call get files method like this okay and save it now let's test this out so refresh it once and let's go back here and we'll say new file for T if I click create and boom if you see it's showing the three files but this logic is not working correctly so let me let me check it out why so the issue is here right uh I remove this class name and just put this style uh width inside the style okay so uh in TN CSS sometimes the dynamic value is not get updated immediately so let's add a style and then for the we I added this Dynamic value okay and make sure to add this percentage sign as well and then save it and now if you see we got this three item okay perfect now let's test this again so click new file we'll say uh M1 2 3 4 Create it and boom the file is get created and our progress bar is get updated with this file number of files and everything okay perfect now also one more important thing we're going to do here that uh we can even disable this button when he reach uh the five files okay or uh on the click of this new file if the five file is reach we can show this dialogue okay obviously that we will do it later in this particular course but for now I hope you understand how we uh beautifully uh show this message and show this progress bar with this file number of files and everything now it's time to implement the dashboard and if you see this is how we are going to design okay on the right hand side we will add search bar the user profile image and this invite button okay we will not keep this right now okay if needed in the future we can add it but we will keep it uh just this table as well so first thing let's go to uh your vscore project and inside here let me close all of this tab and we have this component folder inside this component folder I'm going to create a new file called header. TSX add the default template save this one and then inside the page. TSX let me remove this code here we're going to add that heer dot sorry heer component okay like this and save it and if you see this text header is showing on the screen now as I told you before right we need to fix this issue okay if I decree the screen size is is coming on the top of this one right so to do that if I go to the l. TSX right let we get it here here you have to mark this do as a class name we add height of screen as it is then width we need to show as a 64 and then we need to mark it as a fix okay and obviously if you see the header is coming on the left hand side so for that one we will just give margin left to 64 and boom okay if I increase the size this is how it looks still uh we need to give more margin maybe so here we gave the 72 72 before so I will add 72 only okay and that's good now see okay perfect let's save this one and let's go back to our header so let's try to add a class name and let's say U padding of eight and then inside the header let's add header here okay so first thing uh we need to add the search bar so I'm going to add a custom one okay so let's add a du here I will add icon of search then we'll add a input of type is equal to text let's add a placeholder we'll say just search and end the tag and save it now for this one let add a class name make it Flex gap of two then for this uh search bar I'm going to change this is height to four and WID to four okay let me increase the sides okay I don't know why this search bar is not displaying so here if you see um the icon is not showing right maybe inside the layout we did some mistake so here if you see right instead of this grid call 4 we have to get column span column span 4 and right that's good let's go to header again and here I'm going to add item to be in the center perfect and then we going to add uh the background as well okay so first what we'll do so here let's add a border and we'll make rounded to be MD oh uh we added border not here we need to add a border to this TP and we also add a padding of one okay perfect now uh we need this particular search bar at the end okay so what we can do uh for this de we'll add a class name we'll make it Flex justify end and we'll make sure to wa will be the full and let's see how it looks see perfect along with that one uh we'll give more padding maybe padding of four see how it looks yeah that's okay let's not give padding for now here and we'll make item to be in the center okay now here after this one we want to add a user image button okay so here I will add a d instead that I will add a image okay here we need to pass Source now we need a users information okay so instead of getting the user information in the heer what we can do uh we can get it from the uh page. TSX and then we can pass it to the user okay either way or or you can just Define over here let's define user use kind browser client okay like this and then we just simply do user do picture and right now we'll keep off type any now for this one I'm going to you all tag as a user then we'll give a width of 30 and then height of 30 okay and let's save this one so let me increase size and this is how it looks for now but let's make it rounded to be oh sorry the class name and make rounded corner to be full perfect like this now let's give some gap between this uh search bar and the text so let's add a gap of two see like this okay and after that uh we need to add a button so after this de um let's add a button and the button will say invite for this button I'm going to add uh send icon maybe send icon and make this class name as a let's give gap of two make it Flex let's see how it looks see this button okay obviously we change L height and width so here I'm going to give um height of it and on H I'm going to change background blue to 700 and obviously I'm going to give background blue to 600 like this also for this button sorry this icon I'm going to change the height of four and width of four perfect and let's make text to be small and if I increase the size this is how beautifully it look like okay perfect now our header is almost ready and this is if you see this is how similar it is okay now we need to add a table and this is very important part to add a table so let's create a file so here I'm going to create a file inside the component folder and we can give name as a file list. TSX add the default template let's save this one and inside the page. txx of the dashboard here we going to add the file file list okay make sure to add the file list from this component okay and then save it and if you see the only file list is showing on the screen now for that one I'm going to use the hyper UI okay which is uh the rade component we going to use okay and just search for the table and if you see we have bunch of option for the table so I will select this one so go to the view select jsx and this copy and then inside the file list component let's paste it here okay and if I save it you will see this dummy data okay now if You observe here this name is not aligned with this particular uh rows or column right so to fix this because this is happen and I don't know why when we copy it okay I will replace this particular TD tag okay with this one like this and if you see now now it will be align okay only thing that the change we need to do we'll change this name okay so here we need to give name uh as a file name okay so we'll just say file file name and let me copy this one all of this place so these are our column heer okay the next we have the uh created we say created at then here will be uh edited and will be the author okay so these are the four uh column we have and uh then we'll add a body okay so obviously we don't want all of this TR tag so I will delete the some of them okay now obviously this is just D data okay and we need to pass the actual data over here so in order to pass the actual data and let's make sure give margin top let's give margin top to this deal let me clean this out margin top to six let's see how it looks let's give margin T perfect now we have to get the user all the file list okay and that we are already fetching inside the sidebar okay only that uh uh list of file will get it here as well okay because whenever we add new file we are updating the states and everything so what we can do let's close all the tab here we will create a new context inside the app folder and if you don't know what is context so context uh whenever you want to uh share some parameter some value from one component to another component right now we need to pass from the parent to child right but if there are lot of nested uh component where you want to send a file from parent to sub child and Sub sub child right that time uh context is very helpful I'm going to tell you how it works okay so first thing let's go to the app folder create a new folder called context and inside that I will create a file called uh file list contact. TSX here we need to get export constant file list Contex is equal to and here we need to write create context okay and this create context will be importing from this react okay like this now here I will uh give the type any and here we'll just add the undefined and then save it now once you create this uh context right you have to wrap your application inside this context where you want you want to share your uh data so to that layout or to that compony you can wrap it okay so in this case I will wrap it inside this um dashboard layout okay so if I go to the route because that's where we want it right so here I will just wrap it like this so we'll say uh file list context. provider okay just wrap it here and here we need to provide the value okay so now once we wrap it right so all the side navigation bar this to this component or all the components which render inside the children it will able to share or update this uh value okay so here now I'm going to Define one state a default state so constant we say file list okay underscore set list underscore is equal to use State and then we'll just share it here so file list comma set file list okay now file list will be shareable to this all the component which Define inside this provider now if I want to use it let's go to the side navigation and let's define it here that uh context so in in order to define the context this is very important you have to Define in curly Braes then you have to define the exact same name which is file listor comma set file list underscore is equal to use context okay this need to be a context and then you have to define the which context you want to use so in this case File list context okay let me bring this down so this one okay perfect now when we create the file right or not not create by B when we get the file this result we going to store it so set file list and this result we will store it here simply okay and then once we store it obviously you can use now in any component so for example if I want to use inside the file list sorry file list component you can use it okay here only thing you need to do you have to import that uh context first so in this case constant file list comma set file list is equal to use context and the context name which is the file list context okay and now it's uh easy to use that file because we already have the list of files so what we can do we can Define one state called file list comma set file list equal to use State and inside the use effect we'll write a condition whenever this file list value get changed okay then you have to set the file list so set file list which is the file list like this okay and then save it and obviously we will make file list and I okay whenever it's change perfect now we just only thing we need to do is to iterate this value okay but to make sure that we are getting file list let's console the file list here and let's save it now let's go to the inspect panel go to the console let's clean everything and refresh the screen and if you see in the inside the fly list at line number 11 we got the list of file automatically okay so this is how the context will helpful now this is the uh key property for inside the bottom tab bottom section navigation let's fix that so let's go to bottom tab navigation sorry section where we use the mapping really so here we need to provide the key and the index okay so that error will gone now if I refresh it see there it is gone okay this is different property because we need to add some we are still in process right okay so let's go to Flat list now and here we'll iterate that value okay let me close this one and here I will say flat list so what's the name okay flag file list okay file list so file list do map we'll say file comma index and inside this one I will go on to put this TR tag okay now only thing we need to change is to update this value so obviously here will be the file name we say file dot uh the name of the file right uh which is the maybe file name yeah here uh we need to write file list and then because it will check first whether file list is there or not and we got eror that map does not exist of type never so here we need to define a type okay so right now if I Define any this error will gone okay and here as will Define the type but we can better Define a interface here so export interface of type file okay and inside that one we need to define the fields which uh need to add okay so for example if I go to the inspect panel let's go to the console and these are the field we need to add it okay so let's add add that fill so the first is uh we'll say Archive of type string oh sorry Boolean so it's a Boolean then we'll add a created by op typ string then document op type string file name as well team ID whiteboard then underscore ID which is about again type string and the creation underscore creation time time is of type number okay so all of this will be added perfectly fine now here we change to type file okay and it's saying that m app does not exist on type file wow so the reason is is not defined right maybe we can Define any type here because we need to update everywhere else and here we'll Define of a type of file and here obviously it's a number okay and now we have the file name perfect let's save this one make sure the file name is coming at least see ABC 1 2 3 4 that's good then we need to add created ad okay so obviously if you see the created ad is a timestamp right and we need to convert that time stamp in a specific format the which is the date okay so for that one we want to use this moment JS Library okay uh and this is very powerful library to convert any date in any specific format so let's copy it uh the command to install it and paste it here and in order to use it it's very easy so first you need to add moment okay so inside the bracket we you need to add moment okay which is inputting from the moment and then you need to define the input first so in this case the file do creation time then you need to add a format on which format do you want so in this case if I say uh DD mm y y y okay and let's save this one and let me show you the result and if you see this is how the result will come like look like this see 23 f 2 24 okay then same thing for now I'm going to copy for the editor column so here for the editor column and the last is user profile image okay so here I will just let me check whether do we have user information let's add a user isal to use C project client and then we'll get the users user. picture and let's save this one if I increase the screen okay sorry we need to this is the image right we need to wrap it inside the image the source and the tag and here we'll give all tag as a user you width of maybe uh 30 so let's write 30 and height is of 30 and this is giving error so make sure make this type any for now and let's save this one if I increase size see the author image also showing on the screen that's good also one more thing let's add a class name make it rounded Corner rounded to be full so it will look rounded full perfect and one more thing we need to add is the uh uh option to delete this file okay so what I'm going to do I'm going to add a TD tag over here like this and here we just add um more horizontal icon okay and this is how it looks see and for this one I'm going to add option okay so let's go to this uh shadan dialogue okay let's import this dialogue it's very easy to use it so let's import it first then you have to copy this import command and then copy this um basic uh template code okay so I will add it here then obviously our trigger is this uh icon right so copy this icon and put it inside this trigger and then save it okay and let's go back and test this out if I click on this one see oh this is dialogue actually we want don't want dialogue my bad so we want actually the drop down this drop down menu okay so if I open this one this is how we want right so let's install this one first okay and let's me undo everything so now you can import this drop down menu option and then basic code so this will be our basic code here will be more horizontal we need to add as a trigger let's save this one and let's test this out now so click on this one see how beautiful menu displaying right let's customize this one so obviously we don't want this menu label and the separator I will remove this one all this three menu and we only want the archive for now okay you can add more menu or more option over here and here I'm going to add the icon as well and for this one I'm going to change the height and also I will give the Gap gap of three and for this icon we'll change the size of class name height of four width of four and if I go here and see how beautifully display okay perfect and if I create a new file right let's create a new file we'll say uh file one two click create and boom you you see here the file name is immediately update as soon as you add it here okay because we we are depending on the context okay and we are updating context as as soon as we are inserting file and we are getting or fetching the file that context is updating everywhere wherever we use that context okay that's the reason we use the context if you want to share some value across a multiple components now if you see right as soon as create the file this file is get created at the last and we want the in a descending order okay uh the latest file will be at the top so it's very easy so if I go back here let's go to this API okay so files API from the convex here we have this get files uh query right so here we'll just add do order by plus so this is order and here you need to Define in which order you want so in this case just write ascending and now if you if I refresh this file 12 will come at the top so if I refresh it if you see the file 12 it GES at the top okay if I create a new file say file three can create it see file three at the top now okay and here as well the progress by beautifully showing the progress how much file you added and everything perfect okay so I hope you understand how we beautifully design this uh dashboard and to display the list of files next we need to define the we need to show the workpace uh where we going to add documents and the Whiteboard now it's time to add a workspace screen where we going to show uh when you just click on any file we want to show this document and this um canvas uh side by side and also this beautiful header section okay but if You observe this particular URL okay we have this workpace and then this file ID okay this file ID is is a dynamic one or it's it will be changed every time when you click on the different different files okay so let's go to our uh VSC project and inside here let me decrease the size uh inside this routes we'll create a new folder called work space okay workpace and inside this folder we need to create a new file but this workspace ID will be dynamic we'll say just file ID and inside the file ID We'll add uh page. TSX add the default temp template just rename this to workspace and then save it okay now once uh you need to add on click event right so once user click on this particular uh file right we need to navigate to this workspace page so uh let's go to the dashboard where we have the flat list correct so here we need to add onclick event to this team block sorry TR tag okay so first thing we Define the router so here I'm defining the constant router is equal to use router this Ed router obviously we need need to import it from this next SL navigation okay because we are using next uh 13 plus version and app routing next um inside this tier block we need to add on click event so inside the on click we uh we'll just use router do push and here we need to navigate to the workspace slash and the file ID so here will be file do ID and then save it now let's go back to our application and also just to make sure uh I will make this as a cursor pointer perfect now let me refresh once and if I click on this one okay and if you see now it navigate to the workspace and this beautiful uh file ID okay it means our routing is working as expected next oh let me close this next we need to get uh we need to add a header okay so let's go here and inside the workspace folder we'll create a new folder called underscore components so all the components related to the workspace we will keep in inside this underscore component folder here we will create a new file called hder do TSX we I will rename this to work space header okay just to make sure it's different from the existing header add the default template and then once you add this template make sure to add this workspace heer and save it okay see now let's go to this workplace heer and then let's add the first thing let's add image after that let's provide the source so in this case is uh make sure that our logo is there with the logo one I think let me check yeah logo one so just say logo-1.png then give the alt tag so alt uh logo here I'm going to give height of 40 and then width of 40 if I save this one this is how it looks that's good then we need to add h2 tag and this will be our file name okay so right now I will just hard code it here like this file name now let's add one D wrap this d uh sorry W this image and h2 tag inside this du and for this du I will add a class name make it flex and gap of two and make item to be in the center okay now for this do I'm going to add class name We'll add a padding of three and add border at the bottom perfect now at the right hand side I'm going to add one button and this button will be for share after that I'm going to add a link icon like this and let's uh update this one so I will add a height of eight then text of 12 pixel then gap of two background blue blue so I will add a background blue of 600 and on Hover I'm background blue of 700 let's save this one this is how it looks now let's bring sorry uh everything in one line just make this as a flex and make justify between and make sure to add item Center as well okay obviously uh we'll change the height or size of this icon so class name height of four width of four perfect see how beautifully it looking and then our header is ready now also let's define the layout so here for the uh layout right I will go to this page. TSX and here I will say workspace layout okay here I'm going to add a de oh sorry D so inside d one d uh we have to add for the uh document and one de we want to add for the canvas which is our whiteboard so we can say white board SL canvas I don't know whatever you call that's fine and then so let's add a du and one do for this canvas okay now obviously we have to uh divide the screen into two parts okay so I will add a class name I will make it as a flex sorry grid okay and when the screen size is smaller I will make grid column one okay but when the grid size is uh medium or larger we'll make grid Columns of size two okay if I increase size obviously nothing is display because we don't have anything let's add a Word document and then here I will add a canvas okay just to make sure I will add a um background color maybe I will add a blue 400 and here I will add a class name background of red 400 just to show you okay so if you see I'm on the smaller screen and that's why it's showing one below other but if I increase the size you'll see document on the left hand side and canvas on the right hand side okay that's cool so here I will say screen and here I will also say screen just to make sure you'll see the difference okay perfect so our layout for the workspace is ready okay now next thing we need to do is to add a document and the next in the next section that is very interesting that we will learn how can we add a document the re document editor so that you can do the document like this you can add a lot of things okay and okay another thing that we going to add a more advanced document than this one so stay tuned subscribe to my channel if you did not subscribe to uh and press like button uh hit notification Bell icon so that you will get the latest update from me so in order to add a text editor we are going to use editor. JS Library which is one of the best and underrated Library available and it's completely free you don't need to pay anything it's free it's a open source okay and if you see uh if you go to this editor uh .io js. here you will see the example how rich it is and very easy to integrate and obviously in this uh particular section we will learn everything about the editor. JS how to integrate it and lot of things so this editor. JS give a complete control on what you want to show and lot of things okay if you see they also give you the API feature where you can add your own icon or a lot of things okay we'll learn uh all of these things so first thing go to this this uh site and go to this documentation so here uh they show basic concept how you use and everything just click on get started here the first thing you need to do is to install this editor JSO copy this command and then go back to your project and obviously install this editor JS and once it install let's it's good now obviously if you see uh here we want to show the document and the canvas right so first thing let's create a new component for this editor okay so inside this component folder I will create a editor. PSX file add the default template and then inside the page. JX so here we have the document I will add that editor editor oh sorry editor component okay like this and save it and make sure it's showing on the screen Let me refresh it once see editor okay let me remove this background blue color okay perfect now let's go to this documentation and here the first thing you need to do is to import this editor chairs so copy this one and then uh inside the editor. TSX file where we are going to add our editor so let's uh save this one then if you scroll down right this is how you can use this one okay so obvious um I will use this uh particular code okay because if you see this is equivalent okay but there is a reason that we are going to use this one okay so just copy this editor JS which is the call okay and for this one what I'm going to I'm going to add a method called constant and we'll say init uh editor and inside that I will initialize it okay and obviously inside the use effect I will call this particular method to initialize our editor like this oh sorry okay perfect now once we Define this holder editor JS obviously we need to Define that our editor okay so here I'm going to add one du for this du we have to give ID and the ID should match with this editor JS like this okay then let's save this one and let's go back to our application so it's saying that you we use the use effect so we have to make this page as a use client okay and let's save it and make sure perfect and if you see right now you can type a lot of things here our editor the basic editor our ready here you will see the option to add a text you can add a text if I hold on this one you will see that you can bold it you can add a italic and lot of things right see our basic data is ready within a couple of lines only okay this is how cool it is now obviously there are lot of things you can add for example you want add a header right if you see we have the header option if you click on this one right there are lot of tools that you can add it and in order to add a tools this is how you can add the tools okay now the tools means what let me show you one example let's go to the header and this is the uh uh repo right where you can install this header tool so copy this obviously it's a Yan so I will just copy the half one and we'll add mpm and then this add editor header okay once you add that one this is the example that you can add it so copy this import statement first let's paste it here obviously it will show error so don't worry because um uh in it's it's for react okay and we are using next yes it happen doesn't uh just don't um uh you a must focus on this one okay just ignore this one and if you scroll down this is how you can use the heer okay tools and add header okay so what you can do here I'm going to add tools and after that I will just add a heer as oop sorry heer add heer okay so whatever heer you added that header you have to refer here make sure to give comma here and then save it and now you'll see the magic so if I go back to this page and here we have this add button right if you see now Hing heading option is enabled for you if I click on this one now you have a heading option here okay now obviously this plus sign is going at the very uh left side and also if you see these dots okay you'll see the option to make this heading um uh heading one H1 H2 kind of tag up okay also if you see this plus sign going to the left so what I'm going to do for this editor let's add a class name let's give margin left U maybe 20 okay and now if I go back here okay so that's came on this side that's fine it's not big deal okay now you have option now if you see this heer option uh if I go here and okay let me add a new tag called heer heading if if I type something and I want to change the level of this one right see we have the lot of level like H3 which not working right so the issue is right uh uh right now we use telin CSS and with the telin CSI and editor telin CSS it on the top of that one obviously tell CSS override some editors uh CSS classes so for that one what you have to do let's go to the global CSS and I already have one code okay I paste it here so if you see it's saying H1 and see editor and here you have you have to define the uh equivalent telin CSS classes see okay and save it and now if I go back here and try to add a heading for example let's add a heading and now if you see we have big heading now you can change the heading for example if heading one and heading five heading six like that okay perfect also uh let me show you some few example like this okay if you type something and if you want to move this block uh at the below right you have option here as well see move down see and it's came down here how beautiful right so this is how you can easily implement the editor now you can Al even customize this one for example if you want to add a a shortcut key or you want to add some placeholder you can do that if you want to make only some of the level enabl you can do do that you can add the default level as well okay let's add some of the property for example you want to add a header like this with the shortcut key you can do that let's go to the header here we just replace this along with this one and then if you want to add the configuration you can add the configuration so add the config and here you can say placeholder we'll say uh enter header something like this okay and if I go back go here let's add a new header and boom see not only this but now for the heading like you will get this shortcut key as well cool right now if I go back here okay let's go back to our name now you have more option like checklist you can add you can add a list embed code and lot of things okay you can give try all of this one so obviously we will Implement some of them okay let's implement the list as well so if I go to the list and scroll down make sure to import this uh NP M package so inside the terminal I will add this npm pack oh sorry npm then this package and this with the make sure to import this one and then you can just add this list okay so let's add this list you can have the default style option in line toolbar true and lot of things okay you can even have option like this right see there's lot of things guys so let's copy this code okay for the list or you can simply if you want to Simply design a list and a list like this you can also do that okay but let's add we we need to add in tools actually in tool folder only okay something like this see let's save this one and make sure we have the list okay so if I Plus in and if you see we got the list and you can type the list now so cool right now obviously when you are uh do uh doing the SAS application right you can enable kind this kind of feature only for the premium user who buy your subscription or kind of thing right and you can do that you can enable only some of the uh uh Library only okay now I'm going to tell you one more important thing here here if you see we have the option called awesome plugin if I if you go to this awesome plugin you will find a bunch of plug-in a lot of plugin you will get it here okay so obviously we'll Implement some of them like checkbox that is very popular so let's uh if you see that here we have the checklist option okay just click on this one and this is how it looks see checklist right so copy this npm package and let's import this one and in order to use it you can copy this one one paste it here and you order to use checklist just copy this one okay like this and save it now you might have a question why this inline toolbar okay let me show you what is it means now if I add the checklist okay and this is check one check sorry check two see how beautifully is coming right check three and you can even mark this one see okay now inline is used for if I double click on this one right something like this see you are getting option and you can convert it into some text or you can even mark it bold italic and that is nothing but a inline toolbar okay you can uh even move up and down as well see move down something like this okay so this is how the checkbox will work now you have more option like you can add the Ned checkbox and and many more you can add add the image as well okay so for example if you want to add a image uh let's take some example here I don't know let's add this image okay because I never tried this one and we'll add this okay let let's do one thing let's add your own because there are a lot of things you can explore here okay you can add a code section as well like this okay you can add a button as well so for example let's add a button I'm quite interesting so if you see this is how you can add a button see okay on the button click obviously you can add some action and then you can just uh add the button over there okay so for example let's add this mpm package obviously you have to add this um include model and then you can add the button like this okay cool and as I say there are lot of um different different option you have okay let's add a paragraph which is very common and very useful actually so I will add add this paragraph section so npm add that paragraph and then you have to add this import statement and then simply add this paragraph option okay so these are the inside the tools you can add as many tools you want right okay so depends on how you want to or what you want to give to the user you can add all of these things now here I added some of the more Fields like I added the warning I said checklist list and you can as I say you can explain more okay now uh let's talk about this particular warning that which we are getting right so for this one in order to uh just ignore that warning right you can just add SL slash um at the TS and then you can say ignore okay so if you see now that particular uh error get ignored okay so just paste it everywhere you want to ignore that particular error okay so this is just typescript warning so I just add that as ignore this one now next thing uh you we will add a reference here so comma reference is equal to use reference that we going to use it later in this particular course or section obviously so editor JS of type and then circular bracket right now as I as I mentioned right so outside of this one we will just add the reference uh or attach that reference okay so simply we can say reference do current is equal to editor like this and then save it if I refresh it obviously nothing will dis affect it but that's how you can add now let me show you another important thing so let's go back to our uh editor just documentation and here we have the option called saving data here you will see how to save data okay okay that we'll see in the next section to save it okay but this is the actual output format uh when you want to save data okay but uh whenever uh you open any existing um file or document right obviously we have some data which we want to display it on the screen okay or if user open the first time he created new file and open first time right that time as well we want to um show some default value right that we we are going to add now so for that one you need to create one uh data uh constant so here what we are going to do here we want to add constant uh raw document I will say raw document is equal to and then I'm going to add this uh simple option called time blocks the version I will keep as it is and inside this one I'm going to add first the data inside the that we can say uh text we'll say a project name for example okay or we'll say document name document name and the lbel because we are giving as a height so level I going I'm going to give level two okay here we going to we need to tell uh that some ID okay so I'm going to give you some ID 1 2 3 maybe and then I'm going to use some type okay so type will be I will give heer Okay so this type is nothing but the whatever that you added inside the tool okay make sure the type which you're defining here that that is already inside the header asual okay and then this raw document you can provide to the existing editor okay so inside the tool or after uh holder you can Define this as a data and then you can Define the predefined data as well okay so obviously you can Define that a raw data but instead of that one I'm going to create one state because we want to show the existing data as well and that we will store in one state so we can call it as a document comma set document is equal to use State okay and ins said that I'm going to add raw data if we did not update obviously it will show this raw document if it's a new obviously and here I'm just add document okay and then save it and let's test this out and if you see by default as soon as I refresh it it will show this document name okay perfect Al so if you want to add some more uh value you can add it for example let's copy this one paste it here I'm going to add level maybe four okay and text I'm going to I'm not giving any text okay but I want to uh let's add ID maybe four and the type header and let's save it and now if you see you got the placeholder because let me get it here because here we have this we use the header but we don't provide value so obviously it will show the placeholder okay so this is how you can beautifully add uh documents and it's a very rich as I say you can add more value to this one you can add a checklist okay and obviously next we'll learn how we can save this one okay and then we can store it in our convex database okay so that is how we are going to do next but I hope you understand how we easily integrate this editor JS inside our application and there are lot of things we are going to do because we also want to add a whiteboard or canvas to draw diagrams and add a different different diagrams and all okay so let's guys um I hope you understand what we learn in this particular section and if you have any question uh let me know in the comment section the source code is available for free okay so the link is in the description you can access it now in this section we are going to save our document and for that one uh for this Simplicity purpose as well I'm going to add the button for the saving this document as well as canvas as well so first thing let's go to the header so let me decrease the size and here inside the header we have this button right so let's go to this workspace and inside the component we have this workspace header so before this share I'm going to add uh du tag because we will trap inside One D this all these two buttons and then I'm going to add this button let me format this document first now inside this button uh I will copy all this class as it is and then obviously I want uh the icon as well and we'll say save obviously I'm going to change this to save uh icon and I will change this color to Yellow yellow so it will be a yellow button and this will be yellow 600 and then save it and if you see this is how it looks right now quite weird let me add a class name make it Flex item to be in the center and then I'll go Gap of four okay perfect and this look beautiful if I click on this one see okay perfect now obviously what we have to do on the click of this save we have to trigger the event inside the document save as well as this canvas as well okay and that's little tricky part but let's do one by one so here I'm going to write on click method on this on sa uh button and here I will just say on Save that's it o sorry on Save okay now here I will copy this on Save and then pass back to the parent component of this workspace hiter okay so if I want to give type any I can give to type any and then save it now if I go to this uh parent component which is the page. TSX file so over uh here we have the header right here what I'm going to do I will add that on CC okay and I will save or some state or update some state so here I will Define one state called con here we'll say um trigger save comma set trigger save is equal to use State and it should be false means I give the type true or false automatically and here what I will do I will just set the trigger value which is opposite every time opposite of the trigger say okay so it might it means uh when user click button it might be a true might be a false okay and then save it now obviously we use use State use State here so you have to make this uh page as a use client and if I refresh it okay so it's saying too many renders so here we have to define the method like this because okay now we are good see now once we have this trigger save what you have to do we have to pass this trigger save to this editor uh component okay so here I will say on Save trigger and I will pass this trigger s okay now you can pass the this method name doesn't matter okay but make sure whatever you give here you have to give over here as well editor like this okay obviously the value is a Boolean so I give the Boolean value really uh okay so it's saying that it we never use does not exist of type Boolean okay let's do type any just to avoid confusion now whenever the on sale trigger value change we have have to execute the one method called on Save right inside this editor but uh we use the use effect obviously for that one okay so that it will call that other method here we'll say trigger what is this method called on Save trigger okay so whenever on Save trigger will uh method update this use effect will get executed and here I will just say trigger value okay and here I will add on Save trigger value okay and then save it just to show the save method so go to the inspect panel go to the console let me clean everything now if I click save see you got the value true now if I click on again save you got the false but if you see now the method or the user which we Define inside this document is getting changed every time okay perfect so that's good now let me close this console and now we need to save uh this uh whatever we wrote inside the document okay so we'll write constant on Save document okay like this now inside that one we have to Define if reference do current is defined okay it means let me show you so whatever the um editor we Define here right this particular editor we have to make sure this uh Define properly okay second thing now how to save the value how to get the value from the document so inside this documentation right we have the option called inside documentation you'll find the saving data how to save data and if you see this is the simplest way that you can save the data okay so I will copy this as it is go back to your project and paste it here okay now only thing here you have to Define reference do current because we already referring to that one and now we have output data okay so once you click on this save you will see that now let me save this one and then on Save document we will call in inside this on Save trigger use effect cool right and that is the logic behind how we uh implement this save button okay whenever user click on save button this us effect will get execute and then this onve document will get called let's save this one let's go back to your project and okay so we got error that reference current is not function okay let me check it out so the problem with this one right when we execute um this use effect right this onale document we get call and that time the reference do current is not ready okay so what we can do we can just write uh this particular method onsave trigger when the onve trigger value is there then only it will execute and if you see that error is gone perfect that's good now uh let me show you the result let go to this inspect panel go to the console okay we don't have anything right now let's type something so this is sample document let's click save and boom if you see we got the result inside that we have two blocks because one is the document name and one is sample document if you see in the first block we have the data called document name and inside the second block we have the data called sample document now obviously if you add something like checklist we'll say check one check two and if I click check two okay and let me clean this one let me click save and if you see now we got a three block inside the third block we have a data and inside that we have two two item called check one and check to see that's what we wanted okay because this data we are going to store inside our database okay so inside our database if you see we have the inside the file we have this two opt two column called document and whiteboard okay so obviously we are storing document for now so let me go back to our application and here obviously we need to call or update our document so for that one let's update create one API so over here we'll create a new API called constant update document okay is equal to and here we're going to add a mutation like this okay now inside the um this mutation We'll add the arguments okay the first argument is the file ID so let's add underscore ID which is the uh we need to add a file ID but little differently okay so here we'll get V do ID because we are referring to that particular file information right so we'll say we. ID files and then we say document which is of type string okay then after that one we need to add a Handler so Handler o sorry Handler and then here will be a sync and then Arrow and inside the Handler we will simply add constant result is equal to await and CTX do database dot where we need to patch the information right so update the information so it will it is patch then we have to give the which id id we want to update so in this case argument. ID and here we already defined the file okay obviously it will con will taking care of of the on which table you are updating the value so you don't need to Define it again and then the value which you want to update right the column name which is document and then argument which is arguments. document okay and you are done and obviously we'll return the result like this okay now we have this update document let copy this one let's save it and then go to the editor jsx okay here we have to Define this mutation so over here we'll Define this mutation called constant update document is equal to use mutation inside this mutation we have to Define API do files dot so okay we have to export this method first I think we forgot to export this method let's save it so that we can use it here okay now update document perfect and let's save it now let's go to this on document where we have this output data here I will just use update doc doent and here we need to pass two information the first is the ID of the user and then second is the document the document which we already there right only thing for this document you have to convert it into a string so I will just write Json do stringy because we have this Json object right and then we will just convert it into string and we'll write output data okay because we give the type as a string here if you remember right so here we document is of type string that's why we converted into a string now how to get the ID obviously if you remember uh this is the ID which we want to uh save it right because this ID is nothing but the file ID and we pass it to this workspace SL file ID if you remember okay so if I go to this page. TSX right here if you see right this is the dynamic file ID right you can get this Dynamic file ID by using providing passing this params and D structurize this param for now you can give the type string okay okay let's give any actually and then from this parameter you get the file ID okay let me show you inside the use effect okay so you will be little bit understand understandable how to get that one so I will just console it we just print it file ID comma params I will just print the param for now okay let's save this one and let me show you if I go to the inspect panel go to the console and if you see uh Let me refresh this once H now if you see inside the file ID we uh we have this file ID as object and inside that we have this value and if you see this value is matching with this one that's that's what we wanted right so perfect so now obviously params do file ID contains the actual file ID okay and this field name should match with this particular folders name now let's pass this value to this editor so here I will say just file ID is equal to parents. file ID okay and obviously we have to accept that parameter ID inside the editor so this is the editor here I will P file ID and then save it okay and now inside the underscore ID we'll just pass this file ID okay now once it is successful as this is promise we will write then response and we'll say if response is correct then we'll show the toast message saying that document updated document updated okay and if you got any error let's write the error message as well we'll just write toast message error server error we just write server error okay like this and then save it now everything is good let's test this out so let me refresh it once and you'll say uh testing file save okay you can add more uh Fields here now click save and okay good so nothing is happened actually let me go to the inspect panel to check if I got any error okay nothing's happen Okay let me click it oh wow so let me check it out go to the console click save okay now we have have the article data that is printing let's check in okay so if you see here the document get updated okay and if you see the document which has a two document and that's what we return testing file say okay it's get updated but I don't know why the toast message did not uh show it out okay we have the response here let me remove this response and let's test this out now so we'll say testing let's click save and if you see document updated is showing now perfect it means there is some issue with the response okay it's not getting correctly but that's fine maybe I did not return the response here yeah we have the response result okay never mind but if you see from the response uh we got the actual result and that's what we did and here as well if you see in the convex database the value get updated immediately whatever we wrote it is updating inside the database okay perfect so if you have any question until this point let me know in the comment section obviously you can put the atos as well okay just you have to write the time interval and then you can do the atos but for now as this is a beginner I don't want to confuse you guys so that's the reason I kep this button to save the document okay next we going to learn how to face document existing document so that we can save it so whenever you go back to the dashboard okay let me refresh it again and once you okay I need to log in I I sign out so once you log to the uh dashboard right you can just open the file whatever you file you want and then the whatever file you already saved it will displayed on the screen that's what we are going to learn next now it's time to F the data which we saved before and then we as soon as user open the file we will show that data but before that one let me tell you about this tub guru.com where you can search and you you can get access to the exclusive content you can get access of the source code the demo you can access not only that one but you can keep a track of each chapter okay so here once you go in the or you start learning you'll see every chapter you will see uh one by one you can keep a track of that one everything you'll get it here for free just think that you need to join the membership just for $499 so let's go back to our project and then let's go here so first thing we need to do is to write the API to get the uh file information so let's go to this files. TSX where we wrote this API so here we'll write export constant get file by ID okay here it will be a query so we'll just write query and then inside this one we need to pass the arguments so arguments now this argument will be uh first thing is ID and then this ID is of type means that we need to get the ID from the files so I write V do type of uh uh the particular ID okay then we have to define the Handler so comma Handler and then you have to give a sync the arrow function like this and then instead of here we will say constant result is equal to await dot sorry await cx. DB doget here we are using G operator because we just want to f a single document okay and if you go to this can uh convex DOD inside the documentation you will find uh if you go to the database we have option called reading data okay and in order to read a single document this is how you can get it okay exact same thing we implemented guys okay here we just pass the ID of that particular uh table that's it and then you'll get the uh file information so here we'll just pass the get and the arguments sorry arguments. ID that's it and then obviously we need to return the result so we return the result and then save it now let's go back to our uh page. TSX which is the workspace page okay so this particular workspace page we uh we are we are in and over here we need to fetch this file information we'll write convex uh constant convex is equal to use convex hook Okay the reason that we are not using the use Query because we are getting this params okay and obviously we want to pass this file ID okay as a underscore ID and it will take some time to F it okay so that's the reason um we will write the query inside the method so constant here we'll write um get file file data I will say and uh Arrow function like this and here we'll write constant result is equal to await so make this function as a sync then convex dot query and inside that we have to pass the query which is API do files dot get file by ID okay then we have to pass the argument so in this case is ID okay so ID we are getting from the params dot uh file ID okay and then we'll get the result obviously what we will do we'll console the result for now just to make sure that we are getting the result okay now inside the use effect whenever the param do file ID file ID is ready or it's there then we will call this gate file data like this okay as simple as that and let's save this one now let's go back to our application open the inspect panel go to the console let's clean everything Let me refresh it once and boom see you got the data of that given file and if you see the the ID okay so ID of this file see is matching right perfect this is team ID we are not passing team ID okay we are passing file ID so make sure it's matching and then you got the all the data that's good now let's store the data in one state so constant we'll say file data comma set file data is equal to you state okay and is is of type file and this one okay now here we just say set file data and then result I will remove this one save it now once we have this file data obviously we need to pass to this editor okay in order to display it so here I will sa file data and we'll just pass file data okay and let's go to the editor now inside the editor okay obviously on Save trigger and file ID is of type any okay but obviously we need to pass the file data but file data is of type files okay so obviously here we need to change it so here you can explicitly give the type so on Save trigger you can give of type any file ID is of type uh string I think right we can give string as well I don't know what is the type but let's give any because I give any before and then file data is of type file okay so this is how you can give the of type of each of the params differently now we have the file data okay now this file data you have to pass as a default value to this document okay so here what I will just say uh file data do document because we want to show the document okay but one more important thing we need to convert this into a Json object currently the value of this file data. document is in the string because we converted into string then we save it now when we fetch back and want to show we want to convert it into a Json object so here simply we'll say Json dot pass so pass is to convert string to the just one again and boom we are done let's save this one here we have one error it's saying that file might be an undefined okay let me see one thing here we can do like this okay no so what you can do you have to mention of type any as well or you can Define undefined as well okay it's up to you perfect let's save this one and okay so here we got that cannot read a property of undefined okay so typescript is saying telling us that the file data might be an undefined better you can check before adding that one okay so here what we can do we can say file data if file data is there show this one otherwise show the default document or raw data Maybe we have raw data right so we can show the raw raw document as well and then save it but if you see right now even though we provide the value it's not showing our default value and it's showing uh the raw document only the reason is when we uh this us when this us get executed the init editor get executed and that time might be file data is not present and that's the reason this particular condition get failed and then it's showing this raw data raw document okay so what you can do go here and just write file data okay whenever the file data is available then only execute init editor now here is thing you might think what if the file data is not there that will be not the case because file data will be there every time because before opening this particular workpace we are creating the file we are saving the data and then only we are redirecting to this page okay let's save this one uh and if you see boom we got the document see okay now we have this default value if you see this is the default value we have the document name we have the text A B C D and then we have the text 1 2 3 4 okay and that's what is showing now now let's do one thing let's write um add some checklist okay we'll say check one check two check three okay and if I do mark check one save it if you see document updated let's go back and then let's come to the file three I think we yeah and boom see because we already stored that value as soon as we open this workpace our previous stored value is opening here so cool right so that's how you can face the value and display it on the screen whatever the value we store for the the document if you have any question let me know in the comment section and uh guys if you did not subscribe to my channel yet please do subscribe because there are a lot of things we need to learn now we are going to learn how to implement the beautiful canvas SL whiteboard on the right hand side okay so we see you in the next section before moving forward I have one quick fix here so right now if I open any of this value see you are getting this document okay but the we are not getting any error because we have some document already there okay but what we open this document which don't which is empty okay and which don't have anything so let's try to open uh this document called ABCD abc1 2 3 4 and boom we got that error right so to fix this error uh what we need to do uh here we are we need to check if the document is there or not okay and then only uh pass the result okay because what happened this file. document has a only empty string and it's try to pass it and then that's the reason it giving error okay now let's save this one let's go back and let's test this out again if I open ABC 1 2 3 4 five and if you see now there is gone and we don't have value that's the reason is showing the default value okay and over here it's showing the as expected value now we are going to look into a most interesting part which is to implement a whiteboard SL canvas okay so on the right hand side uh we already have space to add a canvas uh so for that one we are going to use a beautiful and one of the most popular Library called Excel draw if you don't did not heard about this Excel draw let's go to this Excel draw.com and you will find how to use or you will you will see the demo actually but in order to implement it you have to go to this docs. excel.com now once you are here let's go to get started and uh here if you see we have the installation St so first thing you need to do to install this Excel drop don't install react react because we already have this react react okay so what I will do I will just copy this line go back to your project inside the terminal let's we have to install mpm I and paste it once it installed if I scroll down little bit okay and go to this integration you will find how to use it okay so here you need to cop copy this input statement and then you have to go to your uh project folder we we have this workspace hiter and editor okay so we need to add a new component call uh we say we can say canvas actually canvas. TSX here we'll add the default template and inside that we will import this statement okay before that let's make sure inside the page. TSX inside uh this whiteboard canvas section we will just add this canvas um what this name canvas component like this okay and save it make sure that it's rendering if I increase the size you'll see over here okay the canvas is rendering now once you import the statement you have to just use this canvas draw obviously I'm going to put this height okay and if I go back here inside the canvas. TSX I will just paste this code okay because we already added the Excel dra and save it now you will see the real magic okay let me do one more thing Let me uh remove this background now because we don't want it anymore save this one let's refresh it once and boom you got a real uh editor see everything is there guys everything okay now if you think the height is little low you can increase the height so what I will do I will go back here instead of 500 okay let's me go to this canvas and we increase to 700 let's see whether it's affecting or not and yep that's good actually okay we have uh we give the specific height if you think you can little give 6 70 maybe okay so it will come little bit up and boom see and now you can draw you can do anything what you want see every everything is here okay now you think you want partition let's add the partition as well so what we can do we can go to this page. TSX and here we'll just add border left okay let's see whether we got the Border or not boom see how beautiful right and now you have a complete access to this particular Library okay uh you can draw anything you can have option and everything now let me talk talk about the customization the Excel draw you can customize 100% when I say 100% you can customize this icons you can customize this menu as well okay if you don't want this menu you can do that you can even customize this color combination you can give option and lot of things okay let's do couple of customization let me walk through that one so that you can understand okay so if you scroll down little bit in the document they give how you can uh add some data in some different now let's go to this customization style okay here you can customize the theme and all okay let's go to this API where you will see uh what are the props that uh you can provide okay this is very important if I go to this prop and the main thing if you see here is the initial data you can provide the initial data okay and that is very important when we want to load we want to open the existing document or existing canas as well okay so that is that what we needed okay we will use it in in a moment then we have Excel draw API is collaborating on change on change is uh is used when uh user change something and then it will return some data okay let's Implement that on chain so if I click on this on chain this is how uh you will get the response okay so these are the props or patterns it will return so if I go to this canvas this is Excel draw here I will say on change and if you see we got the uh recommendation then here you need to just write this Excel draw elements and all of these things and for now I will just console this Excel draw elements that's very important okay this Excel draw elements because that's what we are going to save in our back end now let's save this one let's go back to application here I will open in inspect panel go to the console okay go to the console and if I draw something see immediately you have the first element in that one you have all of this data obviously we need to to store this all of this data okay that's what I wanted to show next if you go uh let me go back here we have pointed down um call back pointer update call back on paste what you have to do you can do on paste what you need to do you have lot of different things guys okay you can put the theme now if you want to keep the theme as a light you can do that just add theme and just add a option you have dark and light I will keep the light one okay then you can give the name of the file the UI option that is very interesting part okay uh in the UI option uh these are important for this particular section so you can keep the control on this section okay let me show you how for example if I go back and uh let add a UI options here like this okay inside this UI option I will add a canvas action okay and inside the can action I will say save to active file I will say false okay let's add one more thing that uh uh let me show you first okay what we are doing so for example if you want if you don't want this one you can remove it you can if you don't want to save to you can remove it also uh there are couple of option you can just remove if you don't want okay for example C2 F I removed this one then load scene which is open right option we can make it false then export option I will make it false and another is toggle theme I will make it follow because we already mentioned that we want to light white and now you will see the thing you will see the effect if I open it now see the open file is gone the export option is gone OB obviously you can remove this one as well okay but there is another way that you can Implement that uh this particular functionality I will tell you in moment as well then we have this um a lot of uh different props as well and here you can see how you can use that props okay lot of different uh in the documentation you will see see everything okay now if I go to this initial data okay this initial data is of type Excel draw element and the ABS data as well okay this is how you can provide the initial data this is the simplest element okay and this is appstate you can provide mty as well it's not big deal and this is the example that you can check it out okay then uh if I go to this UI option right and here you will find some UI option as well to how to modify it Main important thing is go to the children component go to the main menu as I say that this particular handling you can do on your own if you want to remove this Excel draw links you want to keep some of the object here you have you can use this main menu component which is our main menu API which is very powerful let me show you uh how you can use it okay if I scroll down if you scroll on this default item okay now default item means you can actually use the you uh the Excel draws or their own uh option or you can use your own option if you want your custom option right here is the result if I click on this one see you got the custom object item links you can add your own option see okay let's let's try to add some default option so what I'm going to do let's add a main menu first okay so I'm going to so here obviously inside the Excel draw you have to add it here I I'm going to add main menu main menu okay and if you see this is inputting from the Excel draw okay then inside the main menu I will add a main menu dot default item dot I want to uh keep you can keep only item which you want okay so I want to add clear canvas that is important okay means user can able to clear canvas then you can add option like main menu Dot and we'll say default option oh sorry default items Dot and we'll say save as a image that I want to keep okay so whatever the item you want to keep you can just mention it here and then uh it help us to add it okay change canvas background that is good option actually okay and I think that's all that's what why I need it okay and save it now you will see the magic so if I go back here if I go back and only three items you are able to see okay if I draw something here okay and if I want to reset the canvas see it will give you giving you dialogue that you want to really want to clear confirm see the dialog gone even though you can change the background see how beautifully you can change background okay you can add your custom background as well see if you want to add a the back you can add black color as well okay this up to you how you want to add okay so this is how you can do all the customization there are lot of things you can even customize the welcome screen okay you can add your own logo right now we did not add the welcome screen not only that one because you but you can also update this particular change as well okay if you want to see the example let's do the one example okay so let me go back to application and over here after main menu I'm going to add welcome screen okay inside the welcome screen I'm going to add welcome screen do hints Dot and let's say menu hint okay let's add one more hint welcome screen do hints dot menu hint and one more welcome screen do hints dot to bar and then you will see the magic here and boom see you got this hint as well say pick tool start drawing export and wow that's actually cool right not only this one but you can even add this uh heading as well okay you can add this welcome screen menu as well so let's I like to add a heading I don't want to add logo for now you can add logo not big deal okay let's welcome screen do uh Center okay inside the center you have to write welcome screen because we want to show the item in the center right Dot Center dot heading save it let me see what's the error we have let's that's fine let's try it okay Welcome screen. Center inside that we have the heading right I think that's right let me refresh it something is in correct here but requir children Rea no if you see I added the help I don't know why this heading is not working but if you see we have option call help you can where you can see the some um shortcuts and everything but as soon as you start drawing see it's gone that's what we expected right so this is how beautifully you can add the canvas in your project guys okay with the help of excel draw and then on the left hand side you have document on the right hand side um you have this uh Excel draw and everything okay so guys if you have any question any doubt let me know in the comment section obviously we are going to uh save the document once you draw everything and then once you come back open this document we want to show the previous canv save data as well now it's time to save the canvas uh data okay so whatever we draw on this canvas we're going to store in our can um in our convex database okay so for that one we have to write an API okay uh so let's go to this files okay inside the canvas folder and over here the similar the one which we write for the document we going to write it for the Whiteboard okay so I will copy the existing one because it will be a similar one oop sorry and then I will paste it here I will rename this one to to update canvas then here the name will be the canvas and obviously I'm going to store it as a whiteboard I think whiteboard let's say whiteboard everything because I don't want to confuse so whiteboard here whiteboard here and here I will say white board okay and then same thing nothing get changed because we have this file ID we need to pass we need to pass whiteboard information okay and if you see inside the uh convex database okay here we have the column called whiteboard so everything is look good let's save this one and let's go back to our application now let me go to the page dot uh TSX of that workspace okay remember the we here we pass this on uh save trigger right same thing we're going to pass to this can uh con canvas okay along with the file ID okay so we'll pass this information first and obviously if I have file ID we will pass that file ID as well because obviously we need the file ID information now let's go to this uh canvas component here first thing uh we need to get it is on Save trigger on Save trigger then we have the another com uh is file ID and then the file data okay obviously we need to define the type so on Save trigger has a type let me copy all of this string I will paste it here and just only thing that I'm going to give the type any file ID is of type string or any I don't know but I will give any for now and this file data has a type file okay and let's save it now we have to write one method called constant save um whiteboard like this okay and this method we will call whenever this on Save trigger get execute okay so use effect inside the use effect I'm going to add uh on Save trigger and whenever the onve trigger get executed we going to call uh our save whiteboard method okay now obviously if you see right here we for now we consoling this uh console log into the Excel draw element okay let me bring this down actually and we want to store this Excel draw element in one state so here I will Define one state called constant we'll say uh whiteboard data comma set white board data is equal to use State okay and obviously this is uh uh this Excel draw element has a very big object so I will give any type because it's very large to Define each and every element okay and instead of console log we'll just set whiteboard data as a Excel draw elements okay now obviously here we need to Define uh save the data okay so we have to define the mutation first so constant here we'll say update whiteboard and is equal to use mutation okay from the canx here we have to Define API dots sorry API do uh files. update whiteboard okay now let's go to the update whiteboard so update whiteboard and inside that we have to first pass ID so ID which we are getting from this file ID so I'll copy this file ID then uh from the Whiteboard we want to pass this whiteboard data so white board data okay and then because this is promise we'll just console it console.log response okay and let's save everything save this page as well and let's open our application okay right now if you see inside the database we have we don't have any value for the Whiteboard okay now let's draw something so here I draw this line you can change the color you can draw something like this okay let me open this back panel as well so and let's click save okay if you see the document uploaded is saying and let me check the database okay so nothing get updated in the database so something is not correct I think let me see okay so if I click on Save okay so yeah so our file is not getting updated okay let's see why so my bad actually uh Let me refresh it because it's not get updated okay let me refresh once okay now we are good let's draw something okay here I some I draw up sorry yeah I need to draw so I need to draw something now let's click save okay so we got error okay and if you see we have very big error the reason is uh we need to convert this Excel draw elements into a string so we have this error because we are saving as object obviously we need to save it as a string string only okay so we have to convert it into a uh string so just write Json do stringify okay the similar way what we did it for the documents okay now let's save it go back to application let's draw something so let's draw Circle let's click save so it's saying document updated let's see the database and boom see if you see inside a whiteboard we have the data okay let's draw something else so let's draw uh the lines you can add picture wow you can add picture as well okay so here I added the picture see you have a lot of option guys see you can remove something okay let's save it and let's document updated let's see the database here is we have the database and boom see now obviously we added a lot of things but if you see all the data is showing on the screen okay perfect it means we are able to save our whiteboard data simply way the whatever we did for the documentation that same way we are we we want to face the data and and then we want to display it on the screen now once we save the data right let's face the data because we already have everything set up so let's go to our project so here if you remember right we we are passing this file data okay from our pattern document okay similar way we pass for this editor we are also passing to this canvas okay and inside the file data obviously we have the uh field name called whiteboard okay that's what we are going to pass it directly so let's go back to our application and inside the canvas right so for the Excel data we have one option called initial data okay for this initial data you have to pass the elements okay and element will be the file data do whiteboard okay but this white file file data. whiteboard is in the string form obviously we need to convert in into the OR into Json object so we have to pass that uh complete string so I will pass and then we'll WRA it here like this and obviously we will check if file data is available and and okay but not necessary actually what we will do uh we'll check if the file data is available then only show Excel uh draw okay like this and I will add this condition okay perfect let's save this one let's go back to our application and let's see whether we are getting result so if you see it's saying that undefined is not valid Chon so it's saying might be a file that might be an undefined so let's better to add condition over here and let's test this out okay so what again we have undefined not valid just one let's see what's the issue okay the issue is here uh it should be a small B I think okay so whiteboard and it should be start with a small B if you see see we got the data okay let me just if you see we have error okay so inside the file object we incorrectly mention the Whiteboard okay so let's go to the teams and here inside the team we have this let me open this one not the team I think it's in dashboard right file list yeah here it should be a small uh white board and on the create as well we have to update okay so let's save this one and when we create it it should be a small I don't know where we created okay so here is correct okay perfect now let's close everything and uh make sure inside the canvas we are passing this initial data we are adding this Jon oh sorry over here we are checking if file data is there and then we are passing data perfect now good now refresh the screen and boom we got the result okay let's do one thing let's add some more value here I will say tube GES subscribe guys if you did not subscribe yet okay I will add some Arrow let's save it now we see document updated okay let me refresh the screen now and whether we will check with getting data boom we got the data right let's go back to our application okay come back it and our data is still there so cool right let's try with the another file so I have this file okay so wow we got one error that unexpected end of Json input because here we also need to check because we have the file data but we don't have the Whiteboard so I will just add option if these are there then only uh pass it okay and now if you see error is gone perfect let's draw some diagram so I'm going to add uh this diagram with the red color then I'm going to add this Arrow okay with the green color and I'm going to write some information subscribe to tube guruji guys okay and let's save everything okay now you see document updated here we can say uh subscribe to tube Guru G buy membership for 4 $99 on tube guru.com okay let me remove this one let's save it and if you see it's saying document updated let's go back this is our file let's open it and boom everything is there guys right so cool if you refresh it right also it will work for you okay if I open this URL in somewhere else then also it will work same okay so that's how we can save the workspace we bring it back again on the screen and everything we done it and that's how the convex database is quite helpful because it's very easy to handle lot of things is taken care by convex you don't need to config do any configuration you don't need to set up any server you don't need any special database conx is there for you obviously one more important thing I want to tell you here if you go to the log here you can say if you fail something right you will see here for example if you see I fail this particular API when we are testing right and that time it fail you see because we are passing the juston object we supposed to pass juston string and that's why it fail and but you can check it what's the error and everything over here okay you will see the success rate you will see the failure rate um also you can see the function how you how your um uh your code is performing everything you will see here okay how much execution time it take to save data how much execution time it take to save the data and everything okay so guys uh that's all for this particular section if you have any question any doubt let me know in the comment section I'm happy to help you and if you did not subscribe to my Channel please do subscribe now there are we are about to end of this particular course but there are couple of things that we are going to learn now we are going to implement this limitation of the file okay so once user uh reach to maximum file uses obviously we going to not allow user to create a new file instead of that one we will show dialogue to buy a membership or buy a plan okay so right now we have three files so user can create a a couple of more so C create more I will say uh new file two then I'll create another one we'll say new file for okay now we have five file five files and if you see at the bottom it reach maximum capacity but still we are giving option to create and that's what we need to avoid okay so let's go back to our application and first thing what I'm going to do I will create a new folder inside the app folder we'll say a constant okay inside this constant folder I'm going to create another folder called uh let's say uh constant again okay do T six and over over in this particular constant folder I'm going to just export default and we say maximum free files okay which we are going mentioning some value like five okay because once we mention it here right you uh whenever you want to change in future to 10 files or two file three fil you can change at one place and it will affect throughout the application okay now let's save this one and then let's go back to our side navigation bottom section where we have this particular section okay so if I go down here if you see we have this total files out of and here we'll just refer to that constant okay so constant so this particular constant actually dot Max Max 35 see like this okay now save this one and then here we going to write one condition okay so whenever the maximum F because we have the total files value okay so here what we can write for this dialog content okay very important here we're going to write total files is less than maximum sorry uh constant do maximum pref file okay if this condition matches and obviously it need to be a question mark then we will show another component for the pricing okay here obviously we need to create some component fire now I will show null okay and then save it now if I use a try to create okay so okay so it's Let me refresh this ones and let's see and if you see even though if I press it nothing is happening because it's going to this null condition and in N we don't have anything right so now what we can do for the pricing I'm going to create a new component and here I will call pricing section. TSX pricing dialogue you can call because that's will be a dialogue okay dialogue add the default template and then save it now for this dialogue obviously we need to add this dialogue content okay because everything we want uh as a dialog content so let me copy this dialog content obviously we want to change the uh inside content okay and make sure to import all of this dialogue and paste it here okay now obviously we don't want input okay remove that title I'm just giving uh upgrade plan and dialog close I don't think so we need it for now I will just remove it okay now inside the description we need to display the pricing uh UI okay so let's go to this hyper UI okay so hyper ui. da here just search for the prizing and if you see if I go here you will see this this is one of kind and this is another pricing okay I will use this simple one so go here go to the view select j6 and then copy this one let's go back to our application let me go back here okay and then I will put it inside the description okay so something okay not description my bad we need to put inside the cont right uh I think that's correct let me see what's the issue over here so I don't know why this games okay so here we need to close the tag maybe now we are good let's save this one and I also upgraded this some text value okay let me show you so here if I click new file okay oh I don't know why it's okay so we did not added this component inside the bottom section so let's add that component instead of null now we are going to add the pricing dialogue okay now obviously it will show the dialogue because we are added our content inside the dialogue content okay inside the pricing dialogue and boom we got it it's where I know if I click new file see you are getting this window but it's quite weird right because here we need to update uh the width of the dialog content okay so obviously you can give your own custom WID for the dialog so what I'm going to do I'm going to add class name here I will give maximum width of uh 4 XEL okay which is equivalent to around 896 so save this one and if I click new file see how beautifully you are getting uh this dialog okay now you have free option and you have upgrade option if I click upgrade obviously going to the different link okay where you can buy the membership I obviously I'm connected my buy me coffee to this application as well okay but this is how you can do it okay obviously if I reach new file you have to do it okay so I hope you understand how we easily implemented this limitation and this particular logic to avoid to create a new files now interesting thing about this one right obviously you can create this team okay and for this team if you see this team has only one file obviously you can create a new file see okay uh second new file I created and boom you can create it you can open this file you can update everything whatever you want okay because you change the folder you you are you are in different folder right okay so guys that's all for this particular section if you have any question let me know in the comment section and uh if you did not subscribe to my Channel please do subscribe now it's time to deploy our application to production obviously we are not just deploying the njs but we also need to deploy our convex uh database as well okay so first thing we need to do to push this complete project on a GitHub report okay so if you don't have any GitHub account create a new account on github.com and then here you need to create a new repository here gives proper name so in this case I'm going to give eraser and clone okay simple and then you can make a public private okay and then you can create a repository once you create a repo uh you have to set this remote origin so I will copy this one and over here first thing we need to do to initialize the git okay once you initialize the git you have to add this remote report then we have to add all of these changes so just type get add space dot then you have to give commit message initial commit okay and then last you have to do uh push this uh all the changes okay so as soon as push see everything is done let's go to repo refresh the screen and you will see your changes okay now if you remember if you see here our when you push the changes right the GitHub sorry the. Lo file did not add it okay because obviously we ignore that file from this dogit ignore uh do G ignore command Okay so that's the reason we are not adding. loal obviously uh it's that's that's because of this protection issue okay so that's good now let's open or go to this wor.com and create a new account worel is completely free and it's very easy to deploy on the uh for production okay so if you want to deploy your application use woral or you have option for netlify or you can use a custom deployment as well here you have to add a new project once you add the new project you have to connect uh uh your Depot with the git or GitHub you have different different option okay so I already have connected so uh I I have this account okay then if you see you you will see your project which you pushed just one minute ago see let's click import you will see the project name okay now here is a catch if I go to this conx uh documentation okay and go to this production uh option inside the production option you will see this hosting and deployment obviously we are using worel to deploy our application so for the worel okay once you push everything you have to override your bill command okay so if you see override build command to be npx convex deploy command npm run bill so NPS convex deploy will deploy your convex database and npm run bill will build or deploy your application so copy this one go to the versal and then here you have the build output setting npm build command here you have you have to click override then paste this command okay like this and let's see what else do we need to add so let's go to this documentation and then we have to set up a convex deploy key okay so copy this convex deploy key then go to your veral here you have to add environment variable okay if you see here you have to add that inside this environment key okay make sure that is correct yes if I go here you have to add it here and just to make sure that everything is correct okay then here we have have to add the value so that value you will get from the convex dashboard okay so this is our dashboard go to the setting inside the setting you will see um the project setting and here you have option to generate a production deploy key so click on that one you will see this option and if you see this key enable reading and writing data to deployment without needing to login so it should be not shared or commit to the git okay so copy this one obviously you don't commit to to the git okay paste it here and click add okay now obviously you add this uh deployment key but along with that you have to add all this uh. loal key that is important okay so copy this client ID like this then you have to obviously paste this key as well let me bring this side by side Okay click add then client Secret and this big uh big key okay then issue URL and this uh URL as well okay then obviously we going to change this URL once we deploy our application in versal and then again we'll deploy it okay then convex deployment that is I think we already did okay so deploy key but let's let's put that one as well okay I'm not sure but let's put this one as well and this particular key I think we need to add it okay this is important and next public convex URL okay so I paste this one and add it now once you add everything I will go to this convex and make sure everything's good okay and I think that's pretty much and if I go here and now click deploy okay now once you start deployment obviously it will take some a couple of minutes to deploy your application so we'll wait I will pause the video here and boom our application is live you will see this preview and here you will see the domains as well which Associated this one so if I click on this one you will see the er. clone. H.A on this domain our application is L but here is thing this applications authentication might not work obviously it will not work because your kind authentication Service is only for now is applicable for the Local Host 3,000 Port correct and if you see if I try to go on this one it's saying the call back URL is invalid because the call back URL which we Define inside the kind uh setting is not valid okay so log into this kind and let's update it now and I log to this one let's go to this uh iter clone and inside this details section you have to add the call back URL okay so copy this existing call back URL but the domain you should change to this one okay so I will just copy this domain and then I will paste it instead of this local 3,000 like this okay same thing I have to add the log redirect URL as well okay and this is the call back URL what else do we need I think that's all okay let's save this one along with this one you have to also update in your application so if I go to this application and let me go to this env. local file so here okay so obviously you obviously we need to update in sorry environment variable inside the veral directly so I forgot to add this uh URLs as well because we don't have the time the our domain okay so what we can do go to this eraser and then uh go to your project okay this project here you have option called settings inside the setting you can add uh or you can change the environment variable any time okay so here I'm going to add uh oh not this one sorry but the value should be this one as a site URL okay let me bring this down and this call as a client key this is the site URL add another key for the oh that's correct I'm adding right yes then the post log out redirect URL okay which is the similar one which we have which is again domain and the last is login redirect URL which is this one okay dashboard obviously I will copy this one slash dashboard okay then you have to click save now once this environment variable added you will see it over here okay just confirm this one then obviously it will not activated until and unless you have to make another deployment so what you can do instead of uh change code and deploy it again you will just click here okay inside the deployment section and click redeploy because you know our site is already deployed okay here just click redeploy now one more thing I want to tell you here okay because we connected our worel and git together okay here as soon as we make some changes in the our code and push it to the GitHub the worsal is automatically deploy the new changes and the new application changes okay if you don't want that kind of things you can change it anytime inside your worsal uh application setting now let's wait for this new deployment and now if you see our application is deployed let's go to the login and if you see now our authentication is working click with the Google login I will select the account and let's go back to the account and if you see right now I'm on the homepage okay obviously database I uh clean out now create a new file we'll say my first page create and boom everything is working as expected see okay so that's how you can deploy your application and this is is how your domain look like perfect so guys that's all for this particular section so guys uh that's all for this particular course uh so there is one more feature that you can add it okay the one which we did not implement it and if you really want to know how to implement let me know in the comment section you will get exclusive on my tug.com if you really want it so if you want to delete any file you have the option called archive okay and once you click the archive actually we are not deleting that file we will keep that file in inside this archive folder okay and we already have the archive column where we can change from false to true if we want to Archive it okay as simple as that and you can try on your own because everything is set up just on the click of that you have to call the API you have to store it inside the archive and then you can retry it anytime if you want to retry okay so guys that's all for this particular course I I hope you learn a lot of things if you really enjoy this video please comment down that you like this video and press like button if you did not subscribe to my Channel please do subscribe and press that notification Bell icon so that you will get a latest update from me also you can connect me you can contact contact me anytime on my email or on my Instagram Channel okay and join my membership for exclusive content for the complete free source code of any project on my channel and you will everything you'll find on my tui.com website the link of all the website all the uh all these content courses and the link for the associated documents everything is in the description you can check it out so guys uh I hope uh you enjoyed this video and that's all for this video we'll see you in the next video

Channel: TubeGuruji

Views: 26,474

Keywords: Build & Deploy NextJs Erasor io App Clone, Full Stack React App, next.js tutorial, next.js 13 full-stack apps, React Nextjs Typescript project, Tubeguruji, Convex

Id: sxn2GPQjJgc

Length: 298min 28sec (17908 seconds)

Published: Mon Feb 26 2024