[Music] hello everyone now welcome to this video so in today's video I want to create an application uh sort of one of my uh own problems and I hope in this application it can help maybe uh others uh maybe in the long run uh I may say I also want to try and create maybe the source that can help others maybe also contribute to the community so uh as I created this course uh over time uh you need a a lot of things uh on the website and the one thing that I want to I want to collect on the website after number of people taking my course uh right now I have about I think about 25 and plus people who are doing the course and uh most people on the WhatsApp group we are in um those ones who are already doing the course they are happy with the course and they would want really to review and recommend other so I was looking for way how I'm going to correct the reviews so one way is just correct uh to write or uh just create an endpoint on this uh website and then I design a form that I'm just going to send to the students and then they fill in and then they get uh they get the reviews but then as I create my second product third product for instance this very stter kit let's say I want people to give me ideas or they tell me their experience with the stter kit I created it will still do the same thing I will have to create an end point uh sorry a a route here to collect the reviews so there is a need uh to create a platform that can collect um reviews like you simply go create your project and then you correct the reviews and then later on you get like an end point that can give you all the list of reviews that you can actually plug in into a website so that's what I'm going to try to create or the S is going to be about creating something like that so let me just give you here the uh what I was just like planning here um I just call it like feedbook sync uh for lack of a better name all good names for sure like short names are taken but I just simply just I got this one I think it will just work um so I want to create a platform uh streamline the process of correcting and managing and inting uh and integrating custom reviews uh for digital product and services so imagine you have your client website or you have built a website and you would want these clients to recommend you or to write a review that you can easily put into your website and for us developers that is very important if for instance you have been working uh on different projects first of all you can also use it as a service for your clients let's say you buil for them a certain website or a certain uh product and you would want to give them a way of correcting the reviews okay so that one would be really really nice uh whereby you tell them I will collect reviews for you and then I will put them onto the website it would be an added service that you can charge to your customers and I'm trying to create a platform that can really streamline that process instead of just having like multiple feedback channels like while you're creating like multiple routes all the time you would have a service they just like you simply take create a project and then you customize the form and then you collect your reviews and then plug them onto the website so just going to try to see um how we are going to do that and basically what the process is is that we want to be able one someone to create a project that's why you see there is a project one here someone need to be create a project say say do I have next JS course I can just create a project and call next JS course and then after creating the next year course I will now create uh customize my form for this project uh the review form that they can send so someone should be able to uh create a form or uh like uh the form will be already created but just simply to customize it and then share that form like get a link that you can share or even embed um and then afterwards we should be able to collect your reviews okay so you can create and then like when person submits a review then we correct it after that then we can integrate okay we can integrate uh this using the API key so we generate API key and then using this API key we create for you the endpoint that you can use uh in your application uh so that you can f all these reviews into your app and then finally uh we also just like put for you some components that you can maybe quickly design you might not be maybe good at designing and that but we can just give you a component that you can plug in for the reviews and maybe it can help you just like that so just a look at this is the project we want to create I don't know if we can pull it off but I I think we can just like be able to create it okay there will be also some sort of like building like on a free plan someone has ability to create only one project like this but when you are on the paid plan then you can create multiple projects uh maybe up to 10 or something and then like uh the One Forever plan where you can un limited uh projects uh for better organizing and having all the so this just going to create uh it is a s and it might just seem like on the dashboard here very easy but it's not okay so just going to try to pull this and we try to build it and see if we can pull this off okay so the first thing I'm just going to do is I'm just going to to use this uh the the next St kit I have a full dedicated video of How I build this St kit so you can just either um you can just say if I just click onto this and then I down here you will see that I have a starter kit uh uh I don't know where it is right now it is okay so the video is here for the next year start kit of How I build it and I've been also just like improv so on and so forth uh so the S kit we build it 10 days ago so just go ahead and grab this if you already have uh the code uh like you made this with me it is going to be very easy uh what I'm just going to do is for those ones who are going to uh to get this kit I'm just going to create if you just click to download this kit here it is going to goes for about 20 uh $25 now I'm just going to go ahead and make a coupon specifically for this uh for this course like this those people are going to do this project I'm just going to create a coupon to get this uh next year St kit and I will just make a $10 off this I will just make it $15 so you can just like grab it h give you that offer where you can just get it at only 15 instead of like 25 I give you that um about almost like 40 something uh perc off so that you can just get it if you didn't manage otherwise you could just go go here and then you code it with me from scratch and then you have it for free and you also get to know how I did all that but uh apart from that I'm just going to go ahead and I start with it so that we can build this uh project right so the first thing I will just go I'll just go to GitHub and then I grab that so I'm just going to go to my GitHub here and I think it is this one okay so I'm just going to go ahead and try to uh clone this so I will just go in here and then just go here then YouTube builds I will just now create a new folder first I'm just going to record this one uh revie view uh feedback boook sync so feedback uh just going to the feedback s just like this I will open this maybe inside uh not vs code okay let go with vs code anyways I'm just going to pull up the terminal okay here and I'm just just going to just say get clone and then I can post this link and then I'm just going to specify the folder name here which is going to be feed a feedback uh have I forgotten the name it is feedbox sync so it is going to be feedbox uh sync yeah like this okay so this is going to clone into that okay so just going to create this and then I'm just going to say CD into the feed box sync and then you can just say code so first of all I can just say npm install so these are the steps you have to do when you also download the code so you get the code uh you will uh get this uh this folder and then run npm install fast okay okay so just waiting for it uh to finish so the first thing I will just do if you just look at it here uh I'm just going to first get all these Envy so if you just look at this we have to get all these uh things uh here you need to get these uh keys for you to be able to uh to be able to uh to make this project run properly so you need to get a database URL Mong URL you need to get the upload things secret next o and then GitHub plus the Google these are the keys you need to make this work so I will just also uh rename this I'm just going to rename this and remove I'm just going to remove a m just like this I make it now M and I just make sure that I put it inside the git ignore so you can see I have it inside the git ignore and then another thing I'm just going to do is that I'm just going to delete I will just CD into this project and open it in so after it has finished doing all these packages installation just going to say clear so I'm just going to say code code do minus r that's to reuse this I'm just going to open it in vs code just like so so before I run it I you can just go ahead and just say npm run Dave okay now to's check if everything is running properly in the browser I just going to say Local Host to Res just like that now after doing that I have the Envy I will just have to go ahead uh pause my video and then get all these you know how to get this this is from mongod DB this is from the upoad thing this is uh you can just say next o URL you put C 3, then here you generate a random string and then here you do this and another thing before I do that I need to push to make the fast push to GitHub so I'm just going to go ahead okay so you can see here a away to get Ser session so we need to go ahead and initiate this you can see you need to put your API Keys uh so that we can just like have this Ser session thing working so I'm just going to go ahead and add my API keys so I will just like pause a bit and then I will plug in all my API uh if you don't know how to get the GitHub uh secret and so on just go and watch this video okay um go and watch this video and then you can just get uh to know how to put the API keys or to get the API Keys uh for those different platforms okay this the the GitHub secret the GitHub client and you just know how to get this even including this one so I'm just going to go ahead and populate mine and then I'll be back okay so after putting uh populating my environmental variables I restarted the server you can see here just run stop the server run npm run Dave and if you just go toost you should just have all these showing up here now if you have your images uh not showing up properly like this uh probably we don't have those image I not so sure in the public but we have some of them here but you can just maybe refresh the page or whatever I don't know why they're not showing up okay uh but you can see that we have here these uh we have this here so the first thing I'm just going to do before I make this I'm just going to first make the first commit onto my GitHub now under this new project okay so what I just suggest you do is you can just go to the project like this and just find this do get this one here just simply delete it this which is saying dog you might not see it from VOD site but you might just see it from when you just go to when you just go to the folder here you might just it and just simply delete this one so after deleting it just go to GitHub so I'm just going to go to giab okay one more time and then click on repositories I'm just going to go and create a new repository I'm just going to create this uh feedback uh feed it is feed box use for G uh fbx syn just like this and I'm just going to make it private so that you guys canot get it y so just make it feedback sync just like that and then just click create okay so after doing this they give you the code to run so I will just copy the uh this from here okay and uh we check the git ignore before we push or do anything first check the G ignore if your is there so you don't push your in the Envy or the environmental variables to GitHub so you check this you have it in the G good so I'm just going to open another terminal here and then I'm just going to run g in it and then and get add just like this I will just go ahead and just say get commit so I will just commit my first commit we just say uh initialize it so initialize it uh the project and added uh environmental variables just like this and then I can just also go ahead and enter and then I can paste this get Branch migrate to Main and then get to remote add origin and then get push so this one should just like uh go ahead and add this to G okay so I'm just going to go here just like this okay so we have our project on the gate tab which is really nice so the first thing I'm just going to do I think the images are back yes so I have my images I have everything so we just want to customize a few things like for instance adding a logo and then some of these uh links here so I'm just going to go here uh I'm just going to go here and start just maybe changing only a little logo and the links in the header and you can just go into app and then into home then layout this is where we will find this so just go ahead in the site header okay just like this and then go back down like this so inside here is where you have uh the header so I'm just going to go to this header like this and okay am I still in I don't know why you can't just go to the S okay let me just find this site header just copy this uh contr P site header just like that and the S here I'm just going to change the name only I guess so there is why you have this logo so go to the logo and I'm just going to change the actually the logo from the site here you simply just say maybe you just simply say uh we just call this feedbox sync okay uh feedbook sync as simple as that and then uh that's the only thing I'm just going to change for now so you could also just go ahead and go to this logo and change the logo like the icon okay you can just go ahead and change the the icon I don't know which icon I could change to this feedback maybe like uh if just go to Red uh for the feedback like maybe the hands or something handshake I don't know I don't know what I could just use there okay you can say go ahead and maybe create a beta icon or something but right now I'm just going to put there an icon that we can just use okay just going to use this signature so here I'm just going to say sign okay signature just like that it doesn't matter really okay so after just like that this take with the core functionalities and I'm just going to remove some of these links and leave maybe pricing I don't know like I'm just going to leave only just like uh pricing and then de side log in and I might also just like maybe add another button or something okay so uh we just go go to the again the site header here and let's just go and see we have here navigation so you just click on this navigation and you can just like take off all these links and leave just like pricing really is the most important and then uh after taking all those links this is going to be really clean uh you have only pricing and then uh we have this side login I might just like remove this uh download and then I just like re leave only these words so I will just go to the homepage okay so let's go to the homepage uh homepage which is under home and then page so if you just look at this the first one here on top is announcement so you could just go ahead and basically take this off if you just like minimize like this can just do this off okay okay so just like this so now I need these two words and this uh and then is going to be get started so this one will be taking to the sign up and then this one is to the log in so I need these two words so I need to go chat GPT and just get those words okay so I already have explained what this app is doing and that's why it gave me all these words here I just went and explained to CH GPT I need to do a project and it does ABCD and it gave me this right so I'm just going to ask you that I am building I'm building a landing page a landing uh page for this SAS I want you uh to give me uh uh a a big uh heading maybe not more than 1 2 3 4 5 6 7 8 9 is like I don't know how many characters are these okay uh I just want to give me to give me a a big uh heading I can p as the welcome hero title and also the sentence and maybe another two sentences okay two sentences for description below the heading should it be maybe can say should it be uh brief and precise maybe it should be precise and clear maybe just like that uh let me hope my tokens are not yet done for today uh you know these days after GPT B brought uh that now I just need to switch and I use another account I guess okay so I'm just going to use this so I might just I need to create a new chat and let me just give this the description I have here just going to go to this going see I am building a s for my app and here is the uh description okay oh you it upload an image wait addresses what as if it's just like uploaded an image I don't want to take all okay so I'm just going to tell you that uh I am designing I am designing a hero section here a section of this of this s uh platform I want to I want you to give me uh the copy for the big uh welome uh heading on the hero [Music] section and also the uh description just just going to cre a a one sentence description just say you try that yeah so this situation normally happens when like you surpass the uh the tokens they give you in a day if it is correct manage and integrate customer reviews I think this is so perfect so you can just go ahead and paste this here okay I'm just going to go here Empower your business with simul review platform design to enhance credibility and customer trust um and let see maybe in the description explain explaining uh [Music] explain uh how simple it is at correct quy uh quity reviews and Ade and integrate them and your site for instance forance uh is uh and just see what is going to do now collect quity reviews with is integr them onto your site powerful brand okay I just going to mind about this we can always work on that so down here I'm just going to add this description right just like this okay so just go and see uh so build it okay I'm just going to close this so I can just say say correct manage and integrate customer reviews okay effortlessly can you say you can just say uh if it to say collect and integrate uh collect manage and integrate customer reviews fruitlessly collect uh what should we remove seem to be shorter but seem is much I'm just going to remove effort collect manage and integrate customer reviews just like that yeah collect manage and integrate customer reviews so collect qu reviews with ease and them onto your site simly um all through a powerful and platform then to enhance your brand credibility so here down just going to put get started so we have these uh custom this so we just simply say uh get uh started and then this is going to go sign up so it's SL sign up I don't know what is the name of this is register actually so just say register just like this okay you can see how easy it is just like to really integrate all these things okay I'm just really really happy so for these just going to leave them now we would also just like you know after we have made this platform we can also collect reviews just and we put them here but okay so now um we just want to get this uh this section the comparison section and I think will be the last I just remove oh we need to put the dashboard I think some of them are going to put them later okay I will just like work on two sections this section plus this section the how it works section and then I will moove others to keep it simple okay [Music] so you want have to come up with like one 2 3 4 5 okay okay I'm just going to go this side here okay I want you uh to create uh a section okay and give it a title and give it a title uh this section outlines five uh bullet paying points and five okay and maybe we just like make them maybe three or four three uh I just I make them for maybe 10 points and four [Music] solution that this s uh provides okay so let just see what it can do okay so I'm happy with this scatter the feedback channels okay so I'm just going to do this go to the comparison features here uh so I'm just going to paraphrase this and just say create for just in this I'm just going to say put the pain points in a JavaScript or JS array Cod p and solutions in an array called Solutions okay I'm just going to do I'm just going not to ask this because I'm just going to uh finish uh all my uh I'm just going to finish all my stuff I don't want to take all my they might just like take all my credits so let me just save it and I do it uh this way we just like to make them shorter maybe later on uh time consuming review management okay and then solution streamline tool for organizing fing uh they they are too long um just going to tell that uh okay just going to use this in an record pain record Solutions uh uh make the solutions uh brief and precise okay so we have these two I'm just going to copy this like that and just paste them here okay and then then here I will just also this okay so just like this okay so we have that section also done so can you just just going to it did it give the tit to the section uh let's see sing your view management challenges here just going to go here and paste this just going that the T should be in the form of equation the title should be in equation format uh struggling with these preview management challenges okay so this like much better so I'm just going to put this now the title here is uh viser feedback feedb sync feedbox sync uh this is entire I think on how you how you question this struggling with these review management challenges just going say here struggling uh struggling to collect reviews are you struggling to corrects are you struggling are you struggling to correct uh reviews just like that okay uh great uh so in the future we'll put here the dashboard so after finishing we put the dashboard and also we have our reviews okay so now we go to how it works okay um so basically I just want it to give me these three titles I think we can just like generate uh I'm just going to go here okay uh I'm just creating I am creating how how it to work section and here is how it works so in three steps we just need to uh I think they just steps correct manage and integrate so it is just like collect so put in the brackets [Music] uh yes say maybe customize let's pleas correct reviews okay let see here [Music] customize the review form sharing and correct the reviews in a single uh place just like this I think we can just create these ones by ourselves I'm just going to go to that uh how it works uh just go back to the page okay I'm just going to go to how it works section uh these ones are not necessarily required I guess so the first step is going to be correct correct reviews okay and then you can just go to the step one component so you can just like add here okay let see after saying up you will [Music] create your project customize the review form custom customize the review form sh the form and receive the reviews in one place okay so here maybe the first one I'm just going to put this inant check I'm just going to just come here and just say that okay customize uh here just like say first step is create the project okay create the project just leave the check and I can just uh just do this after creating the project uh customize the review form uh customize the review form and then okay and share the form and the reviews in one central place okay great then step number two I'm just going to go back here on top uh step number two you can manage uh manage reviews so just go step two you can I can manage or you reviews in one place okay you can create a uh for instance delete and approve approve the reviews and we just going to put here only the icon of just going to be one just approve approve the reviews so that they can show okay just say uh going say approve your reviews as simple as that I'm just going to put here this I think the shield check here I'm just going to remove this one okay great now the last one the step number three is integrate so I just go here and I say step number three I just say integrate uh integrate the reviews to your site okay so just go step three component and let's just see for instance okay uh when you have approved your uh reviews then okay then create and API key okay put on AP key and edit your uh project and then then use use the Endo F or your reviews Okay so here just going to put this the first one is going to be create AA D and the second one is you see F the reviews to [Music] your project VI our AP and then finally then finally P the reviews to your project via our API okay just going to say Al copy and customize the review comp in and have app okay so we have all the three stepes we want here okay so you can see we have correct reviews I just want to put these points very well I don't if we just like need them so St one uh two and then I three just Rel this correct revews okay yeah then manage uh all your in one place approve your views and then I can intergrate as this so here we just like indicate we add the images and then later on we put the video yeah so that's it then here we put the video to do it and then like we might not need the Showcase so so I'm just going to go to the page maybe might just use this for the uh our reviews just like to show up like this I don't know how the review component will look like but might just like look like one of these ones okay there is pricing that will work at last but right now just not going to think about it so so I'm just going to go ahead and remove other sections to simplify this go back to the page uh the [Music] testimonials uh these ones the video is okay so case I don't know okay so other sections I don't think we just need them uh F AQ is okay and then this [Music] one I don't know where pricing is where is pricing I don't know where pricing is let me hope it was not in this one let just first it here uh yeah so pricing was here so let just go here here maybe here on the announcement I'm just going to to say here get started get started okay for free maybe and then this one to register okay this whole section I leave only the pricing just like this uh let me also take off the testimonials and I yes leave F AQ just simplify some of these here so you can see here we have uh these yeah so which I think these are very okay right now we customize others like this pricing uh we will just uh also customize this okay yeah so that is the first part of customizing maybe you could also just like give me three FAQs I'm just going to say give me three F q's and let's look at the fa AQ how it is it just gives us okay I so should be should be good when it is an array for now you say give me three FES and answers okay so the first one how does this okay so just come here customize now I think we could just simply create an array now if you want to put like links like this you could just like go ahead and leave it but I might just like uh put this in an ARR just simplify my process and say const f a q's F AQ is equal to another array and it has question and then maybe answer let just forance put the answer for this the second one can I integrate into my website okay just duplicate this yes okay and then finally the third question what being otion is feedback off like this okay great so we have them just going to come here and just go to the acordion item one item two and item three so I will just remove this and let's go ahead and say fa aqs uh do map have access to an item with its index and let's go ahead and return this item so first thing first I just going to say key which is I and then this one is also going to be just going to do it like this item and here I'm just going to say uh dollar I okay and then here I will put item do question and then inside here it will be item do answer okay just like this uh great so we can just like have them just like that I don't know why they have the text on this side like I want want text uh I just want to Tex to left or something I don't want them to be centered like this okay so you can just we have that uh done great so we have just like at least uh uh customize the homepage it took us a few seconds to have it just say customized now we should just like go to the part that is very interesting so the first part we just going to start with is looking at all the necessary um we just need to look at the necessary schemas so the schema we need here so we already have the account and session and the user with the roles working so we just need to Simply add a few things in the user so allow me just walk you through like um what would be the schema look like so first of all we have the users so a user should be able to sign up uh via either Google or um using email and password so that is very okay so a should be able to create a project that's why you see here we need to have a project model okay so user can create a project project will have a name and description and maybe it should just also have a slag I'm not so sure like a project should be unique okay so we be able to create a project and should be unique great okay that is one uh the the model should the user should also be able to create a review and that is a the review form so like the where the review results are going to be saved we have the review form down here like this is going to help us customize the form okay but then like we have the review itself okay we have the review itself like when you send to a person the review will have a rating we have a comment we have a video link and maybe we are also going to collect more things like the person the name of the person and uh their name and the image more especially uh because that is very important uh maybe um yeah those two they are very important and designation their job they're doing okay so and then we have the API key so each project will have its own API Keys okay and let's say that attached to a project that's why you see API uh they attached to a project as you can see and everything here you can see they are all attached to this particular project and then we have the model uh for subscription which has the start date the plan you have chosen and the user ID and then we have this review form this is for customizing the form for instance the welome title the welcome greeting and we have even the prefer intake so I'm just going to get these here accept the user copy them and let's take them down here so I will just put them down here like so there will be a lot of Errors starting with the IDS we're just going to work on that but for starters let me also just go ahead and get some things here in the user model the first one is that we have the projects API subscriptions these three attached to the user so I will just go ahead and add these to the user so the user model is here okay after adding all these down here just going to add this the project uh API ke and the subscriptions okay now I just want to go ahead and add ID since we using mongod DB by the way if you're just using like neon DB this is how you're supposed to create your IDs so if you're using any postrace database like in DB I think in the future I will just like show you how to use neon DB but this is how you can just use neon DB just put ID string and then at default this current user ID so this will be autogenerated so but right now since we using mongodb I'm just going to go ahead and customize this and just add add object ID so here just add at DB doob ID just like this that's why you see here they supposed to have this object ID like this you can copy it and whatever you have ID you're supposed to add it like that just go to all these ones I'm just going to first go whatever I have the project ID I use ID uh project ID okay so now they just copy the ID uh this [Music] one okay so ID of the review here ID here ID here ID here okay there is this review for uh just go s of that okay so we have two errors so far the the one uh for the API Keys eror API key the model user the relation API key on the user is missing the relation so if we just go to the API Keys here so AP key attached to the project [Music] yeah uh I think we can just like attach them to on the project okay because a user can have also s API keys but then I mean uh I don't think like I think it is really necessary to put this on here because these AP ke should be in the projects so if you just come to the projects I don't know where the project is yeah so if you just come to the project you can see we have the API keys right and then we have now one error which is the review form uh review [Music] form this is for customizing the form this attached to the project and you see here eror passing creation One to One Creation must use unique feds on defining sites either at at unique attribute on the project ID or the change relation to one to many so you have to just see one project can have only one review form so this is typically a one to one right so uh if you just over say that uh alation a one to one must have use unique feeds on defining the site either add at unique attribute on the FED project ID so here just add add unique yeah so this should be unique because it is a one to1 okay that's great oh okay so now after creating these ones we can just make sure uh all these if want to add anything we shall add it but the project has a name a description which is not required and then uh if you just go to the review there is also video link so just add here some more details in this review we can also receive the name of the person so this is like uh maybe we just say reviewer and like review name and this is a string and then reviewer image review uh image which is so going to be string and this it can be you can provide it or F to do so and so like going to be optional so then reviewer name reviewer image and may be also the designation so can say review I'm just going to do this review maybe job is three uh maybe job designation whatever title yes say here title okay so after finishing this I'm just going to go ahead and push this to my database I can just come here and I just say npx Prisma DB uh push okay so if you do that you actually need to uh yeah now in syn oh something happened I'm just going to first go ahead and like stop all these operations okay just going to say npx Prisma D be like push and npx Prisma generate and then you can just say also and [Music] npx uh and probably I need to change uh my DB okay I need to change my DB in a second Prisma uh uh this is going to be npm run da so I'm just going to first change a a my database name okay so I've just going ahead and changed my database name so now I'm just going to run this generated okay uh everything seems to be quite right okay so what I just want is after someone has signed up okay uh when someone finishes signing up so what I want them to do is if you look at the flow uh here when someone sign up you should be able to create a project that we are going to use on top here okay and then of course have also to work on the dashboard to look like this okay yeah so we need to go ahead and first look at the dashboard so we cannot look at the dashboard without signing up okay we just need to uh be able to sign up okay uh we need to be able to sign up so so I need to have uh more space to create a project so to do that I'm just going to close everything here so let just go to this actions and just duplicate one of the actions here just like this and I'm just going to rename these two projects so the first thing I need to do is create a project create create project just like that okay and uh okay we didn't just put the project slag so I'm just going to do schema so in the project there's something we need to put in which is going to be the slag so it has a name then also have a slag which should be unique at unique just like this let's go ahead and stop this and run one more time just like that so this should just push this so we can have the slag being unique I'm just going to go back here to projects not categories okay so to create this I need create the uh this okay let me just go to types so control types I'm just going to say okay here so project props and you say project props uh it has a title string slag string there has no image but it has a description I think according to the schema that's what we need name SL description it also has the user ID copy this yeah so there on it has has also the user ID so if you just go here just put user ID also string that means the password must be signed up okay great uh so basically we need to create this project area where we can create the projects great so [Music] um what do I need to do right now so I have this you can just use it in the projects here just do this projects so it has slag existing project so we have to first find existing a project just like this db. project okay they find unique and if there is existing project then want to return so basically want to return an error okay just going to return uh uh just going to be data [Music] now and just going to see return return error and the error is going to [Music] be uh uh project name already taken and then here I'm just going to add status and then the status I'm just going to put is going to be 409 yes like this okay so if that is existing project and then this is going to be the [Music] new uh project is going to be DB do project okay go create and takes in the data now you wonder why okay in the data do we have slug uh yeah we have title SL us ID and description see here proper name is missing okay the the thing is not a name instead it is a tit it is name it's not uh if you just going in the schema it is Project name so just change here to uh project is name so here in the create find unique create after creating we need to revalidate I don't think we need to do any validation here but what we need to return back this might just need to return in this [Music] um we might just need to return this uh format just to stay consistent okay data is going to be new project and then error is going to be Nar and the status is going to be 200 100 maybe 2011 created then for this is going to be we just going to [Music] return the same thing right here if there is anything we cannot know we just going to say is going to be something went to wrong you see here perfect create the project uh status 500 internal server error dat n so we have that one done so get all projects now we not have like get all project it will be getting projects for a specific user okay we'll be getting like gate user Pro uh user project so here just say for instance gate or a user uh projects and we have to pass in a user ID okay which is a string and then we could just come here to say uh projects for instance is AB projects and then find many and then here say where uh project uh where I use uh ID just like that and then here we're just going to go ahead and written uh return projects okay uh update uh we see that uh updating the like the project name I don't know get category so just going to first leave these ones here for now except the one of create bar there will be no creating bar for this uh deleting the project I think it will be there so you say here delete project and then you can say uh project okay deleted project deleted project okay uh just like this okay so other things will be just like updating but for now we just need those ones most the want to create so I'm just going to create also another page uh I don't know we could just like uh [Music] create in this here I may just go ahead and create another group uh give it the same I think the same layout like this one like for projects but I'm just going to create it inside here projects so here project just like so and then inside here there will be page TSX okay so this is going to adopt uh like the register I just use copy everything in the register paste it here okay let me just go to the register form I will duplicate this to project form rename this to project form okay uh project form and just going to remove some of the things I don't want in a project form okay just change this to project form project so the project form has a few things okay it has uh I may say it has um didn't have password just remove okay so others are two to I think I'm just going to leave these ones uh we just want one text input that is not having this okay and I think it's going to be a text area input I'm just going to remove this password so we need a text input and a text area input so I will just first remove all these just do this here okay so just is one text in input just like this and this is going to be the name project name project name and here is going to be name uh this one we just give it some icon I'm just going to say press holder project name just going to give a press order of this like for instance nextjs full stack course next Js uh this it my next J for course course just like this so I just need to route to this okay let me just first go ahead and put the here under projects I just put here project project form so slash projects just like that so I think we just need to pick also the ID so it will be a project ID for now first take this but this will be project ID we don't need those things down there on the project form just need it very clean so uh first remove this then let's remove these uh buttons for Google very clean I remove this whole thing okay so this is looking now clean okay I'm just going just say create project so I will give the icon for instance I don't know if there is a folder like for like let me just go to and I see what you can just give this folder okay just give this folder icon I guess so you say folder okay so we need to give also the text area so I'm just going to go here just like this and just going to say text area input text area from the from inputs uh it doesn't have an icon first of all and or say press holder now I just want actually to add a press holder so just come here and duplicate this and just say press holder uh string and this is not required I'm just going to put it here okay so inside here where we have this text area I'm just going to Simply pass in the Press holder which will be the Press holder so if you just go back the project form we can just let's say here you can just describe this project I don't know if the project description really actually is wanted just going to go to the schema and in the project I'm just going to remove the description yeah we just don't need like any project description for sure like we not going to show it anywhere okay so I'm just going to go to the types remove description and I'm going to stop this server and run it again okay just remove place so I hope there is no any errors now here in the projects create we don't need the description anywhere okay great and the project [Music] form we don't need this exterior thing okay text area go on so you have the submit button here I'm just going to say uh create project okay [Music] so let's go back this I'm just going to there is no there is no need of describing the project actually because like we're not going to show this name uh the description anywhere it will be just like for fan if we corrected it so let's also give this the title here uh give create your first project here create your first project and then you just say [Music] here they project take the project name uh take the project name as uh the service you are trying correct uh reviews for I guess like try to describe like what that one would mean to this person take the project name as the service uh you're trying to create reviews to collect RS for so just put take the project name and now let go ahead and send this data okay to handle submit and then on submit so you can check this on submit gets the data which should be now of the project propes project uh propes that's why you see all these ones are refusing okay even here project props the first thing we need to do is data dot you see like this data do slag so we can first get here slag con slug is equal to generate slug we already have that one and just going to be you taking data dot uh data do name okay and then con so we can say now data do slag is equal slag and then data Dot uh what it is generate uh this we need after this L uh we already have the name I think the two three things we just now need to have the user ID so the easiest way we can just pass it down through the session so I'm just going to do this first REM the things we don't need here all these icons all these inputs so just clean out so that we don't have a lot of C you're not using these links even the icons this when is only the ones we are using save on the bandwidth and so on and so forth okay so we have this which is going to be the uh project error so this I'm just going to call this project eror and this sayate uh project error uh this one is going to be used here okay just in a second so after creating this we have a wait create uh create project create project and if response status isal 49 s uh project error to the error it is if status is to 0 1 so just made it 2011 set loading force and then here say project created successfully so here project created successfully and Route so just going to route to uh it will be projects and then uh pass the ID so here we just want [Music] to oh they this is just going to pass the dashboard so here just going to go to the dashboard uh we have already created the project so uh down [Music] here okay so I think everything now is okay okay uh the only thing I just need to put is this uh the error now down here I'm just going to put if there is a project error so you're just going to put a P tag which actually shows the uh project eror I'm just going to give it a class name of text raid 600 or 500 I'm just going to first put something here so we see it uh but say something here okay okay so you can see it there I think that is uh very okay uh given the maybe I can just say reduce uh text text S M yeah so I'm just going to leave it like that and let me just put back Nar here okay good [Music] okay okay so maybe one thing I would just do is putting enough padding to this I'm just going to put padding of 16 so that I okay not not there I don't mean here I mean uh to the page okay uh to the page here just going to put ping Y6 uh I thought I'm just giving this to the form so just cut this and put it on this container now it seems like this I don't want my phone to look like this okay great so this is good okay you can just create the project like that okay so he this should take us to the uh but before we come to this uh this has to be on for instance uh projects ID there must be like an ID for the user come to this point that means that I'm just going to move to create here ID so here is going to be user ID just like this okay and then inside the user ID I'm just going to put page TSX okay so all this in [Music] fact let move this so this is going to be inside the project I D meaning that I just going to have prams in say these prams I will distruct a US ID just like pars use a ID which is going to be a string okay [Music] so we have to this user ID to the form so I'll just say user ID so and basically uh we might just need to pass it more than one uh okay we actually just need only the user ID so it's okay so here just this user ID and it's going to receive this in the project form so here we uh passing the user ID which is a string so get this and we just need to pass it here so data dot user ID so you can see there only three user ID is equal to user ID so after creating these ones now we can pass this data into the project and now everything should be good now uh that means that after this we might actually need to um this will prompt a person to go to the sign in so after this project form we might not route to the dashboard but rather to the login okay so that you can just say login to the app okay I don't know if that flow is good someone could just create an account and then like login and then they go to I don't know uh which one is the right flow but I think uh we cannot create session behind Okay depending on the authentication system you're [Music] using the bad thing is that all the good thing is that if you create uh if you create a user uh not every time the user signs in has create a project that means that the flow should be like the first time you create now you can see now it is saying project not found the first time uh the first time you go sign up is the actual time you need to create the pro project and then other times you will be creating the project from the dashboard as you can see here so it is only the first time when you're signing up you create your first project from that site then other times you'll be creating it from here okay great uh let's just go and fix this so basically on the sign up uh let just go to the register page so we had the register form so on the register form instead of going to the login uh first of all we need to get now the response because the response has some data because we need to get the user ID if you just go I wonder if someone created an account using uh if uh a person created an account using Google right uh so we have to create something that is going to be really uniform if someone created an account uh would want to know where is going to be redirected okay so and we have to figure that in the register most because if you register with Google it is going to create uh let's first see the uh the route if you just use it I'm just going to go back to homepage and I just going to try to authenticate using Google so if I just go to get started CU you have to get for both routes okay I don't know if this is okay so just here I wonder how why whether we should allow sign up with Google and sign up with Gmail because we would want to get this personalized so in this case I'm think I think I'm just going to take up I'm going to remove sign up with Google because we have an onboarding process cuz if you sign up with Google what is going to happen is going to create for you already they saying so we just going to I'm just going to disable for this uh for this specific typically I'm just going to uh disable the Google sign up and this I'm just going to remove it from the register so that I just only have one streamlined process okay so on the register form is where I am right now so it is very easy to disable these ones just like this and just like this and then just like okay for this one uh the sign in is okay you can also just go to the login form and then we can just like disable some others this has no problem and will affect nothing on the whole entire system okay if you want I might not consider that flow right now I'm just going to consider this uh like so okay so yeah uh this is great let's also add some padding from the register for register page to this one let's add p in y of eight at least just to push a little bit down okay so I just going to use only this route it will make more sense for us so when someone finishes the register it is very easy now to get if you just go to this users register so if you just go to the create user you said after getting this new user we return the data as the new user so from the new user if you just go to register uh P register [Music] form so where we are redirecting is where I'm just uh it here so we need to pass to go to I'm just going to do this I just need to go to projects okay stock ID and this going to be the user ID which is going to be response okay you could just say const ID is equal to response dot data dot you can see I okay so after getting this just go ahead and just say ID so I'm putting this ID here great so everything should now be okay so after pushing to the projects so we reach on the project page here we pass this user ID to the form and then on the form we create everything and then we pass back to uh to the login and automatically after this it will route us to the dashboard uh great that's sounds like a good plan let's try fill in so I'm just going to fill in using my names and my email the same let me just use this one and the password let me just say uh uh log 2027 just going to go ahead and sign up okay so you can see account created successfully and this takes us to our project you can see it C to a project create your first project so I'm just going to just say my next J my next J uh my nextg uh four star course okay next is full stock course just like this create project so this is going to check and see if the project exists and you can see now we are on the login let's go ahead and try to actually log in with the password this one and let's log in okay so just here inside now the dashboard okay so now inside the dashboard here where you see this aimy I just want to use this one as a drop down for the projects like the projects I have and I should be able create new projects here okay and and also on the uh I think on the login I need to do uh something maybe a page I need to use for routing okay uh because uh this one either uh let me see so at this point we might just either use um local storage we will use local storage to keep the project that you last visited because you might have like three projects but then we just going to be having the one that you are you last visited okay we just have that one okay uh so this is yeah this is great so I'm just going to go ahead uh first of all I will also organize the links here in a second but let me first get the project that we have here okay so I need to that is a side bar or so say Side Bar uh side let me first see if that is the side yeah so this one you see here so I need to use to get a drop down sort of here okay so which drop down should I put um I want to put a drop down uh you can just go to TA wind UI okay and the TA wind UI I'm just going to go to components I'm just going to scroll down so there is a component where they have what we call uh if you continue scrolling down there is what they have this select menu so I might just like need to use one of these ones cuz it has like this sort of like changing this like so like here I always like we selected we added like the project we gave it an icon that would be really cool okay anyways just like just leave it like that we have here where you can select the project so I'm just going to use this component uh basically looks huge but let me just copy it and see what I'm going supposed to install so copy this I'm just going to go inside the dashboard components dashboard let me just create another one called project dropdown project select menu selection menu something selction menu menu do TSX and let's add this I'm just going to change the name okay I'm just going to come here let say like project selection menu okay so like enough actually most of all these we already have them installed so I'm not installing anything so instead of people just going to change this to projects I'm just going to remove this label I don't need it okay now I just need to have projects just like this and let's go ahead and customize what's supposed to be in the projects uh we have ID and a name only so just remove like this this second one the name there is no any image or whatsoever just GRE all others just going to leave only two in fact I'm just going to leave like only one or something uh let just leave two and there like the project and I'm just going to come here and say uh projects at zero to be the first one so this one is going to be coming from like from for instance the Bro storage okay it also has use client so the AL here is not required we just have only the name okay any other problem this is going to be project projects person we don't have the Avatar so remove this okay so you could just check this instead of the person is going to be project uh change this to project okay this is project uh just like that so I'm just going to bring this project selection menu so just go to the Navar is it supposed to be enough bar or sidebar I think something like sidebar so we have this ay I'm just going to put something like this just like this let's see how this one looks like I'm not so sure but let just see yeah so we have this you can have your projects here of what is current like uh selected is this one so you can just like switch to another project and then this should just like switch everything okay uh so on this very drop down I just want to add one which says create a new project like a a sort of like a button or we could also just like add it here like add new project and know I think that that icon is really not necessary to put it there we could just like remove this icon okay let just going to see if we just go and just remove this we could just either the add button I don't know so if I just remove like so oh this was a button actually so I'm not sure what is the best model either to remove it or I add the add new project button here I don't know which one is really the best one yeah add call this whole thing just to maintain the design I'm just going to call this A+ okay A+ icon okay just like this I already have the the add I just need to correct something here so I'm just going to search for add new button this one in the form inputs I would use this one okay I'll use this one to create what you want so go in the dashboard and I just create this add new project menu so this one has to bring in menu so add new project menu the TSX like so um just going to just also add this one add new project uh menu now for uh this I just want to change it a little bit to open Al the when someone clicks it add a new project um I think it should just like open like a draw just to create a new project and then route to that project just like this the way you see this so you should just like open something like this while you create a new project don't know why I didn't I just say copy from this one let me just actually do that we have the a a menu I think is this one I'm just going to change uh this one to add new uh project menu just like this add new project menu uh session I I'm not so sure if we need session uh but uh what we need to do is on the sheet uh sheet content is here I'm just going to pass in the side so just want this one to be the side of left okay and then instead of this I'm just going to copy this button from the Side Bar this very one go here and you can just like do this bring the plus icon and this one is going to be like add new project okay so we can just say bring this add a new project uh session I'm not so sure we just need to pass in the ID only yeah we need to pass in the uh the we need to pass in the user ID say user ID then make user ID uh which is like a string okay so everything here uh everything here inside we don't want it just like so uh so inside the seat contain just like this I just remove this I will sort of like putting like the project form I don't know if this is a wise idea so simply pass in the the user the user ID which is actually use ID okay I don't know but just try this so I just come here and I say add new project go to the Side Bar and inste here we just going to add this add new project menu so we need to passing the user ID that means like this side bar is going to receive either this session which is maybe easy so just do this session session uh ISO type session and from there we can just see con us ID con us ID is equal to session do user do ID okay so then we you can just say pass this user ID here uh us ID okay so just go to the Side Bar and we pass in the session so here in the uh dashboard most speci in the layout is where we have this so we already have this session just pass this to just copy this the way we are passing it to the N just pass it to this great so if I just go back okay so if you just go back click on this yeah so you can see actually just like looks great right it looks great you can just say put the create now not your first project okay which should just going to say create maybe create your project okay and then I put the name and then you have all the validation and everything working I think that's really cool now we have to have this uh uh we'll have to have this uh we'll have to have this uh sort of uh if this is a first project or not uh like switching when we create a project we need to save it in the local storage okay uh we just going to work on that functionality later but right now we can just uh f all the projects and we put them here first of all and then we have to put the one in the local storage uh so how do we save it in the local storage let me first fch these ones uh actually let me just go ahead and again create another one uh and then we add it to the local storage before I F this one so the one we are fishing is the one that is in the local storage as the selected [Music] one okay so let me just go and uh let me just go and first sign out just going to go ahead and log out okay let just create an account so just going create an second account uh but before I do that where we have the project form here I just want to save this Pro project details the project name and the project ID in the loal storage Okay so so I just want to just say here after this has been created successfully here before uh routing okay I'm just going to say here save the project in the local store storage so what we just need to say con a project is equal to so we just want the ID which is going to be raise uh data do ID comma uh raise the name so the name is going to be raise do uh data do name let maybe just finally put the slag I don't think the slag is useful but let's put the slag which is going to be raise do data slag okay so this is the project now we just want to add this to local storage I don't know if you just like is going to be as easy as the Y think because to add to local storage would just say uh local storage do Sate item and and then we just set this item to give it a key of the project and then here we would have Json do stringy then of the project okay project just like this we do this okay I'm not sure if there is any a waiting or anything we're supposed to do but here I'm just sing like local storage okay so we're just going to try and see if this works so let me just sign up now with a new account just going to use a fake fer okay I just need to change the password okay sign up now let's create the project I'm just going to just say uh next just start uh eight okay so create project and let log in or I don't remember the email uh let me just run Prisma Studio npx Prisma studio uh just want to see the users I want to see the email [Music] okay so go back here and let's uh log in okay so I don't know if this was said in the local storage we can check if this was set in the local storage okay just go to application uh sorry for that I'm just going to go to the local storage a [Music] second okay Loc storage and I have a lot of stuff here uh okay I have a lot of stuff but I have also the project okay so maybe we just need to give it a unique key but the project is there as you can see ID name and the slag uh great so the only thing we just like need to pick it onto this so on the dashboard okay I'm just going to go to the Side Bar okay uh will first of all say const uh so this is why we are going to get uh do we need to pass this so we have the user ID in this project menu so just going say con uh this is where we have the projects right project form uh not that I just need the project selection menu so I think also we need to uh uh we need first of all get these projects okay we need these uh these projects and these projects are just going to enter or come in here so to do that we just need to get them earlier in the layout I guess cuz we just going to go to the uh just a second okay so we have seen that we have our project in um we have our project here in the console uh sorry in the application local storage we have all these details so what you want is to load all these here or the projects so I'm just going to go ahead and just go in the dashboard layout and here we can actually fet all the projects so first use a project use uh projects is equal to a gate so you can say get user project or user projects and then we have to pass in the user ID which is going to be session user ID okay ID even if we just do we are very sure if someone is not uh in that's why you see we are directing to the login so we just get this user project now we can pass them in the sideb just like this user project so in the Side Bar let's receive them so put comma user project and comma here pH are going to be for projects so you can just get for project from Prisma client just like this so after getting this user projects we can now pass them in this here so user projects to user projects uh just go to this site and let's accept these user projects yes like this sorry so user projects from prma client just like so so after getting these users uh user projects we can actually use them whatever we just have the user projects so here just say user uh project just like that everything should remain now we have here where we have the selected just like this I'm just going to say user projects now we not going to do this because the selected one is we're just going to find it okay so we can just say con like saved a project this is the one in the local storage uh storage project or stored project stored I project is equal to so if you just look at our project it has ID and name so can say store project is going to be local storage uh local storage Lo storage dot gate item and then here just uh just going to pass in project so it can always be only one but then we have to pass it so I'm just going to say Json do pass and then we can just say pass this uh local storage and they're saying that argument type string or isable to parameter of type string okay so here I think here we just need to do a logic can ask GPT uh you have I want to get they stored uh project but I'm just going to take the I'm getting here so I have this uh but I have this error but I have this I take script error just like this okay so I think just are going to check uh if it exists so store project is local storage and then does this okay so just replace with this so first do stor project is lo storage Lo gate item project and then we say project is project or Json do pass so here we just check if the project is there so if the project is there then it is just pass project or n okay so instead of saying n for us just going to say a user a user project and then just going to just say at zero and then whatever we just get here the project we're just going to use it here as initial here just like this so we should just now be good with the fing okay okay so you can just just doing that we have here the next just stter kit and it is the only one we have inside uh selected okay so we have here the uh this issue here which also probably saying that we have to have a way of controlling the width of the project okay we have to have a way of controlling the width of the project I don't know how we can control the width [Music] um uh where we have this project name because this is the selected [Music] one okay uh if I have this okay and I want to limit maybe let's say to have many characters 1 2 3 4 5 6 7 8 9 10 if you want to limit it to 10 characters only just going to go here if I have a span like this how do I limit the wi is to only 10s uh to 10 characters how do IIT the wi is only 10 characters just like that how do I limit the only 10 characters PG next just and then like it was something like this using the wind so just want see if use the how we do that uh tret uh okay like let's see that if this one can work so we can just like reedit this to this this with this character 10 is that even like a known something known or it is something it has made up let me just first see here there is no any CSS right okay just see but it seems like it is not doing it has just like done anything it is just like remaining exactly the way the way it was alternatively alternatively just go to the Side Bar fact Say by here so just going to make sure that this add new new menu cuz they inlex so there's a tendency of wanting to squeeze this one so you could just also give this uh uh we just give this a FX slink zero this button to make sure it is not going to accept to be pushed like this and uh then I also going to do something maybe that us like we put that down we could just like put this button down instead why are we having this here use uh I'm just going to do this uh I'm just going to say that I can just go at the bottom so here we have a list uh list box option just like this if I just copy this and I add it ins here okay uh I'm just going to give a key I don't know if this requires a key you can just say get this one is just like create create project value uh does it need to take a value I'm not so sure why but here just want to add this as uh let me see let me just add it as the project like add new project menu just like this uh what do we need to pass in the user ID uh user ID user ID we can get it from this here does this have session we can also just pass in here the user ID they use use is a string so just go ahead and we pass it in here as user ID so I would want to know so in the Side Bar just passing this user ID here okay so let's just see how this one looks like okay it looks very actually okay okay we might need even to put this hover thing on it okay I'm just going to check on that so on this project menu what I'm just going to do is uh this uh span just leave it and remove this okay just going to remove this class name and on the side of I'm just going to first uh comment this and in the project selection let's go and look for that hover so it is this I think the these classes uh let's see if we don't put the classes what happens okay the classes if you don't put the classes is terrible but we can just look forward is group selection Focus so I think it is this Focus takes to quite and first remove this here okay the new project just first remove I think this one has a variant icon so this size remove the size okay yes also remove these width and height Auto just remove FX ring remove this whole class name thing okay yeah so you can see now it is looking great make it we give it a size of small size uh size uh of small let's first see yeah that's okay so you can add C this from there which so uh weird because it is just like okay okay so when you click [Applause] project selection I'm wondering if you don't put it as a project if you don't put it inside this wris box I wonder how it will look like yeah so we don't need to put it inside the list option at least uh we just need to give it some of this as a div so let first put it back inside here and just going to make this as a div instead they remove the key and the Val thing and then uh group cative C I think this should just should work yeah right now it just say create a new one right now the when you create a new one they set it as this I'm just going to uh see uh how they do that I think also just a second okay so uh right now we are good we can add a new project so just go ahead and add a new project Okay so so I think after adding a new project uh it will push it to the login and when we check on the login just a second if you try to go to the login you will set if there is session it will direct to the dashboard so let's see what happens uh I'm just going to create my new you just create this uh okay what is that weird experience that is going on okay my new I'm just going to just say uh new project okay it seems like if you press enter okay if you press space bar there is that weird experience that you get alternatively [Music] alternatively we could if this is not good experience what I can just do is I can make this a link okay so this one add new project uh you can just like make this so instead of just like making this a sheet um just like this let's just first go to Project selection menu so why we have this okay uh on this here because I think it's because of being in the list box and we cannot uh list box option I don't know if we just move this outside the list box option what happens like are we still inside the div like uh let's see uh okay so you can see basically it gives a very weird user experience right how much this one works but it gives a we user experience uh you can see it pushes the the other ones up and it is already showing so that is not a good us experience let's first put it back just like this CU okay I think selection n let's suppos remove some of these things here c a default uh relative is okay group I'm not sure so just see before I change okay the enter is used to do some stuff so just going to make it a link so you can just like simply go to somewhere uh so basically this instead of the sheet I'm just going to uh uh instead return return the button and inside this button H basically what you can do is you can just add a link uh which is going to be next link uh just get it h so this one just going to be going to projects so you can just do something like uh projects and then do us ID so still we just be having this add new project we just give this a class name or Flex items Center uh okay and then to this one let's give it Mr of two and flexing zero I will also just give this as child okay so after just changing it like this let's see what happens we should just have the same user experience right but now it's a link right so if you just click now we just go here okay uh we just go here and let's create a project and just going to say my new project create and you can see we are redirected back to my new project because in the local storage it sets this as so uh we have this weird uh weird I think just like because of of the icon just remove the word add we just leave only new project cuz we already have the icon yeah so I think that's much better so you can just like switch between the two projects right now just like this okay so even on the selection we supposed to set whichever they have selected we set it in the roost story I think we suggest like do that later but this right now we have created a project we can create a new project and switch to that project uh great so the next thing you're just going to do right now is uh somehow organizing our sidebar okay I'm just going to organize the Side Bar in terms of this format okay we already have at least the project on top there we have this correct manage in the integrate so I'm just going to go to the sideb just like that so this time I might just need to change a little bit of how it should look like okay so I'm just going to drop this down Side bar links so I just feel like I just need to put like a heading uh so if I put for instance H2 here and I just say collect okay repeat this down here so you just do addding maybe of Y of two say to put this I'm just going to reduce these maybe to two links and two or three doesn't matter but the most importantly just want to see how I'm just going to do that so duplicate this okay and then just say here for instance manage so let's try stay this okay uh let's try to stay this uh they don't necess look bad I guess and just going to give like this H2 some Plus name so let give it a quing botom of two or three I don't know if I should put it in the center or not uh or I should just leave it there [Music] okay so I'm just going to do that um use this so just go and remove this here just going to use this so should be just like a title and links so here for sideb links the link should just have a TT I just say uh collect and say the collect and then then down here should just have like the links so this should be an array of links like that okay so just have to re them two the second one is manage and then lastly is integrate so just come here and just do [Music] integrate integrate just like that okay so let just take put the necessary links that are supposed to be there and the icons so if you just go here for instance my review form and share form so in the correct there is uh uh my review form and then you're just going to be dashboard uh form uh the icon just going to look for the icon then the second one is share form uh so here's going to be dashboard for maybe share okay uh just like that I don't know if uh they that way count I'm just going to remove count is not necessary anywhere the third one the manage it has my reviews so here just say my reviews and then dashboard reviews okay then there is nothing else and finally is integrate integrate has three AP key end point and components so this has AP key this is going to be API key then the another one is end point so just going to like end point and then it's going to be dashboard end point okay uh remove this and then finally just it as components so components dashboard components okay now we shall put the icons later so coming back here I'm just going to go ahead and side links do map item is index just go ahead and return so just going to return this so the first thing is going to be key so on this I just say key which is the index uh this one is going to be item do and then for this one is going to be item do links okay so which should just remain everything should remain exactly except that we don't now have this item count okay so there is no need of this so if we just go back here in the dashboard you should just have uh okay so now I'm just going to go ahead and remove this live okay and cuz there is something to do with uh this first of all maybe just like maybe make this imine bottom too first of all and also the in y maybe to 1.5 this way one y okay just make this one also one okay so the upgrade Al I'm just going to go and work on that so to upgrade here just going to leave this button only I'm just going to remove the header so this head here I don't know if just leave it actually was for it just going put a description of what is remaining let me just remove this live uh live website is here okay so we back to normal and somehow we have all our links very much organized you can just see here collect manage and integrate and you have all these uh links when maybe the spaces in the links if that is like much or that is the one we just need to add okay so this we have Gap and ping y let say 1.5 okay and just see yeah just say little bit okay so let just go ahead and we need to work now on these Pages now that we have this uh looking great we can just take now start looking at some of these uh different things the good thing that the project SED we have it in local storage so that is like almost having it anywhere we want okay great um I'm just going to go I'm just going to go to uh start maybe with the review form so just create all these Pages we have about 1 2 3 4 5 six what about like six pages to create let's start with the review form so if you just go here on the dashboard we can just by saying here in folder and just say say if you just look at this we created here we call it form okay so just [Music] form okay so inside the form let's create page do TSX RFC okay so I'm just going just go here review form so you just say uh this is going to be the view review form so if we click on my review form so you can see review form is there I'm just going to go ahead I think in the layout we need to put some sort of like small padding I don't know if you go to categories they one the only thing uh not categories update necessar I just want to go to categories table want see uh the amount of padding we gave it meanwhile let me just be creating uh a folder for here in the dashboard I just create reviews I'm just going to go here and let's say that is the review form the TX RC uh H2 over the review form let's take this to form here okay it is still loading just give it a second uh actually we don't have categories right uh I think we have the we pushed it but we don't have any categories okay so you can see so we can just go to this page we look at the padding we gave the categories is this padding on the page so you just see here there is this padding eight that is on the page you can cut this and I just simply add it to the layout instead uh we need to add it not on this sorry I just want to wrap it on the children okay [Music] p8 just like that so let just [Music] see and is back so you can see like we have this now this will apply on all of them you can see okay so the review form basically is going to have uh two things is going to have uh two sides it should have a preview of how it is going to look like and then it should also have um it should just have a preview so just going to have where we are customizing it I'm just going to have let's first design this form to look uh nice so we can just start from uh let's see the things we need to add on the form review form I can just copy the I think the category form so you can just say contr p category form does it have an image yeah it has an image [Music] uh it might just actually have like two steps I don't know uh because we need in the first place it might just like have uh three slides it might just have like three slides the category form but let's just start for uh in simple in simple terms so basically I'm just going to have two tabs I'm just going to put two tabs on this page uh let's see uh let's first get a tabs here tabs CH I just want to put tabs and the tabs just go to usage and let get these tabs too maybe we f with this ones uh just get this and just paste it inside here okay uh it seems like we don't have the tabs okay they just add the tabs here just want to add the tabs so add the tabs just go here on inst ation and let's copy this npm and let's add it so basically I want to have the form they customize and the form okay we just need to have the form and the customized so just come here customize and the form uh defa yes say here I'm just going to say ciz customize uh width I'm just going to give them WID is full okay customize form then here just going to have uh customize and then here [Music] form okay so here I'm just going to put the review form here yeah so got this let's add it on the form just like this okay let's see so we have this the two things here [Music] okay so we have the customize and the form uh so if we just come to the form we should the form and then here we have to customize the form so just go ahead and the form uh we start by maybe going to the just control p and let's uh category form let me see okay just go to the category form copy this okay uh copy this and just paste them in the uh in the review form somewhere okay we just go and import all the necessary things just going to remove these and then I will import them one by one we have text inputs we have the text area the image input and then the footer okay so we have this I'm just going to rename this to category form uh sorry review form just like so so we just click on the form so we have uh basic this we have to organize this uh sorry we have to organize this so that the form looks uh custom and dedicated to uh to that it's just be the one card like this okay so just look at the things we need in the first step so we might just need to create it uh or so have either the tabs or having just the next button uh so in the review form uh let's go ahead and so if you just look at this it has this LG column uh eight column so I'm just going to minimize this and I'm just going to remove the image input just like this okay so we have now this so now about the head uh we might not need necessarily header so I'm just going to remove the header at the same time actually actually um I'm just going to click on new project form this one this one would be a better fit for our scenario so let me just go back to the review form okay just going to change this to review review form uh just remove and put add components so add components even here just say add components okay so basically just going to have like it is just like this let's go and give it a Max width so instead of this uh let's give it Max is over X XL MX oo okay and let's see okay I just say place it inside a card so this whole thing I'm just going to place it inside a card so you can just say card and then card content now you going to B this okay so this add is this here and now we need the max with this uh so instead the card is supposed to be so this Mar should be outside just cut this and we just have this here me cut the card and let's add it inside here okay let's see okay so this is okay I need to maybe reduce it also a little bit we just go ahead and just say 2 XL yeah uh that's the perfect size okay that's the perfect size so basically it has to to be the uh the sliders we just need to use this has to be a review form just go back to page [Music] here customize phone and then this is going to be like the review for could even just like create a s button of share but I just leave it like that okay so the review form I think it's going to be a mar statee form because it should have a welcome screen it should have a welcome screen [Music] form I'm just thinking so I'm just going to bring and I frame I'm thinking just like if we have like two tabs so here just going to have like a title so inside the review form is going to have I think uh two things is also going to have like two tabs down there yeah H just going to make it to have uh two screen like two tabs uh so inside here I'm just going to create two tabs uh active tab say active tab to equal state so here just going say you stay uh maybe just going to have the welcome so just going to have the welcome screen and then pleas are here so here I'm just going to have two things here I'm just going to say if active tab is equal to welcome okay if that is true then show this is we saw that okay so that we have to put the the tab switch something switch the switch between the [Music] tabs so the one which switches is the dubs so down here let's say we have the two buttons so let just say create button I'm just going to use this one so just going and just create this one which says maybe it just going to say right review uh so to remain consistent I'm just going to go to control B submit button I just want to go and pick this button uh this one typ sub made so yes pick this one go back to the review form so here I'm just going to add a button okay uh then this one you can just like instead put there's no need of this but on icon title is just going to be like create uh WR review right review and then show icon so here you just need to put any icon forance the Peno icon so just can the pencil icon the pencil icon just like this let's see how this one looks like so can you say only click so this one can just say save save active tab to right maybe so if we just go back here okay so to differentiate this uh in the first one we need to put the I frame where there is this form I'll just put the the ey frame for the video and yeah I don't know which video you should put just go sh embed and if you just should you put the [Music] I put the I frame here me see you could just put Here YouTube react npn just to get the the package I think there is this react YouTube or react prayers or something just see the one which can help us look at the downloads this is 311 oh like people use this one this one okay so it seems like this one is more us it just put like and then you put the URL okay so this is just like fair enough and then this one only Lo is the YouTube player so I'm just going to first install this uh scroll down here let's add displayer and then we can justlo only YouTube Since we only playing YouTube you can import this close down here just on up here and then we can just Cy this here so I'm just going to go to where we have this form and let's add this I don't know if this one is just having any video on it uh we have to import the react prayer from YouTube Let me see we just need to import this from react Prayer YouTube If you build systems output input Sy me is okay there is also you can also just get this from here okay uh let's see our form now okay so you can see the form is here and has this uh create right to review so this [Music] one uh we just need to this one has to be a welcome a welcome video so I'm wondering for it to fit in so just fit in inside the card if we just go back here it doesn't takeing it takes in width set the WID of the prayer set the height of the player St to the rout okay so if if we just give it for instance the wi as in 100% and eight we just rate of I don't know if this has any wait can just help us to okay so they fitting in fits in maybe can we just leave fight yeah I think it has Auto resized okay so on this okay I think we can just like leave it like that then we can pass a St this one has like can just say about the radius of 10 pixels I just say this save and see okay it doesn't do anything I guess but anyways we have the YouTube video so you can just like easily put the YouTube video is what you're going to be using okay uh for customizing like if you want to personalize like hey please I do this do that then here just going say write reviews on top here just going to say right review uh so I think we could just put this one outside the the tab cuz I would want this one to uh you want this one to be on both Pages just say right right review and then this one just going to customize okay we will just increase this to maybe three or 4 x air okay then this one to maybe text base okay so this one is going to be your video of talking asking for the review and when someone clicks on this one it should just like switch and have this uh and I think uh I think um we could show two buttons like for one for watching intro okay for instance uh on this I'm just going to do this uh active active tab if it is equal to welcome we could just show one button is we show another button so if it is on the welcome should just show write to review and if it is on this one we could just watch intro so here could just say put for sens the video and they say here watch intro okay and this one should just like be like uh I'm just going to turn this into a button um I'm going to remove this and the this one should be welcome I'm just going to change this one to video you know this if you have video like video yeah so this to be like uh watch inro I just want to give it a variant of either secondary or outline okay so like that just like very Shadow if you want go back and watch the intro like this or wrate the review so wrate here the uh the review now let's create the review form how it should look like the review form is here and I think uh this heading uh should be outside so I'm just going to cut this maybe it's F but we need this outside maybe let me just wait here and they see yeah so it just going to be just going to be there just like this in both cases so here just going to be focusing on the form so what is going to be in the form in the form if we just look in the ke we already have what should be in the form there is a comment rating name title video link okay I think those ones okay uh they include the project ID okay so I'm just going Cy this I will just go to types and I will create the review props review okay so inside here I'm just going to paste this comment which is going to be a string rating is a number the name of the person okay so here just a reviewer name reviewer name is a string and then the reviewer image which is a string if you tell to a string then the video link which is also a string CU going to be YouTube video project ID which is a string okay so others are not necessarily required for instance the the image I don't know where do we put this and the title the video These are not required okay so just going to use these ones in the in the form okay in the form here so basally in the form I'm just going to remove this uh just remove this we remain with the [Music] form you can also remove these other things uh let just go here on this we're just going to have this as review uh review props even this review props okay so just remove this so just go ahead and just go ahead and [Music] um I'm just going to go ahead and and have data here okay so I'm just going to go the types so all this information we need in the form in the review form we need all this information okay so basically we need to have the comment the rating component so the form here we have the text so instead of this so here I'm just going to uh remove this we can also put the grid so I'm just going to first put duplicate this I'm just also going to put this here grid call two and this going to be on log G so we can just like ask him his name and your name okay so this is going to be reviewer name and just say copy it here so you can ask them their name first here you're just going to use the user there's your name okay uh so basically you should just like have now the form changing yeah so you can have here the uh the name uh what is the riew your title we can just also go in we say maybe you so here just going to be review data okay uh this one just give example of maybe full stack engineer uh develop this is okay just put here your T to okay [Music] so here just going to put two links now uh one is going to be this another one is going to be so you could just see here give youie as video okay just put in a bracket YouTube YouTube link so someone can just like add a YouTube video so just going to add an icon of uh video guess okay just let's cut this and bring it down here so I will just like put this uh YouTube video just like that as a placeholder okay and you can just put this Dash sure so this is optional someone should not Fe entitled feed it so going say give your your view as a video YouTube link optional just like this after just use the icon here let's use YouTube just use this [Music] one okay yeah so just like this a a YouTube video uh next is we have to put the rating component okay uh so that if you tap it then so we can just I have so here you can also have like uh let's just go here and [Music] say you know sort of like an array one two 3 4 5 6 uh the rating stops at five meing three so just want to map like do to map it index okay St just like have first I don't know just like St okay uh just have this item Center and GAP maybe two I know how this one looks like okay so you can just give it a t to here and we just say give uh tab this uh to give your rating okay so tap this start to give your rating so someone should just come and give right click on the St you just see that then lastly is going to to be the comment so down here I'm just going to name this one text area text area uh this way doesn't have the icon uh this one is the comment and here is the [Music] reason uh the above rating okay so you're just going to have like this here and we can just like here we going to pass in we can pass in the suggestions okay we have the uh the suggestions somewhere I guess on this on this one we can just Rec the suggestions actually I'm just going to return this inser this one so let me just copy this div this I will take it and put back inside and also I will put it inside here so here just going to have different things for each tab so if you just go this it will have its own and then they review it also has its own okay so let's have the the tapping of the St okay we will have to have the tapping of the start to change the colors so first of all let's say uh here the selected St so con just put these two tabs just here at the beginning up so const rating State rating is equal to use State uh so just say start at zero okay so when we click a start so here we can just see first of all click okay so we can just like say say to rating uh to start uh so here I'm just going to say here start just like this so I mean like if you this here is any of these numbers here so if I just do this I I can show the star for restance down here let me just put a b tag with a St after is writing okay so we see how this one is going to be changing so by default I'm just going to give it like zero I guess so you can see here it is zero could just say by default yeah so you can say by default is zero so if we click like on three so you can see three four five one just like that okay so I saw by default it just give it a rating of one maybe we just like make it one so is someone submits at least we have rating of one okay so we just want to show the ones in red okay so how we going to show the color okay so first of all if if I give this I don't know is Fe forance I give this text uh yellow uh 500 I'm not so sure if you want to to feel feel it I don't know if I just give this a class name or not let just like give the same thing to the class [Music] name should just like the class name text uh yellow 500 let's see I'm not sure why this is not changing the [Music] color just going to use your GPT there just copy this okay I want the selected and if the rating is three then three STS to be of color yellow okay so it has the same thing it has on click so we have this class name I'm not so sure why by the way uh we didn't put the key which is a serious error um see it is using a class name let just see uh yeah so if I tap now three can see the three just we just wanted just to give it simply give it like a alternative color here but this is great okay uh so you say have four like that okay uh we don't need to give to put this two I guess uh here just remove that at Leist like everyone knows what these ratings are all about so okay so give the reason [Music] um for this now we could just like put our suggestions here and I have also these suggestions I been able uh like that okay uh I think we will put these suggestions uh we put the suggestions on top here okay so you can just see here H another person make uh make a decision can just see here you are honest your honest um review okay we can't put this as as a press holder let me see we just going to leave that one okay uh we still have the image okay uh we could just add this image uh here I would really want maybe to add that image as a popup or something but because the size of the of the image really will not allow us we need just like to have it as a popup so that means that I will just put this I we just have to put uh this in a grid also so these two I yes say grid so grid call one L G calls two do gap of maybe four so we have the stars and then we need to have the the ad upload the image so we can just like have this like so your image so here I'm just going to have I'm just going to right click on this copy the image address okay just see grid grid calls one and L grid course to I don't know why is not showing the way supposed to so down here I'm just going to add an image okay I'm just going to add an image with a source this one okay uh actually just put in State uh let's go and put it in state image URL s image your is equal to US state okay so that is going to be by default and then down here we just going to use uh this image URL uh let's put W it I'm just going to say we did of 100 H 100 uh say all and RW image and let's add class name just going to say with this of maybe 16 height of 16 and rounded full okay uh let's see okay uh we just give it object fit just in case we just give it object fit cover avoid cases whereby it is so I want to put it this s I'm not sure why I'm not sure why this grid is not working maybe we use flex okay just going to do like that and maybe we also add we just do item Center Okay so we can instead of this just going to add um just going to add a an icon so basically you can just add a button with a pencil icon let's give it a size of Icon and it could give also outline variant outline and then we just want to use position here so [Music] relative and then this one is going to be having a position of absolute okay so just going to say top of five uh maybe right of right of also five and let's see okay so just going to say wr0 to zero and let's see uh let's give this icon a class [Music] name with this of four height of four now let's give this [Music] one negative of2 top let also give right5 okay maybe just with our own button seems to be okay just wait size icon uh how about putting our own icon if we put our own icon like how does it look like okay so they just say back top zero and let's also say right of two let's see let's increase this one to six and maybe this we give it fing y O2 px02 B okay just going to remove the also the Border okay so this is [Music] okay so I'm just going to put an on click on this whole entire leave okay so basically this could have been a pag or anything really so that this one is a button okay so we just want to add an on click on that to open up if you click on it uh first make sure that this button is of type button okay we just have to make this [Music] optional okay so we have to add a popup for adding the for uploading the image so I will just go ahead and look for the either the dialogue just regrease can just add npm so I'm just going to copy this dialogue uh we already have it we already have it let's just have this so I just go here on the phone okay so we have this I'm just going to put my dialogue there okay and then this one is going to be the trigger so cut this and let's add it here okay and I think we can pass in also as a chart okay if we go back here should have exactly the same thing if you just go WR review click on this so you can see like we have this here so we should just like put the image upload component so inside here I'm just going to add the the image upload component dialog content are you sure so here just going say [Music] upload image probably maybe we just a square just say one to one just say this okay uh then inside here this remove this this and then inside here let's just add the image upload so image image input I think it's called image input component so can just like specify some of these things here uh so we have the title the URL uh image end point then we have set image URL okay so the title I'm just going to leave the title here just going to put image image err and then here is going to be say say image your rare and let's go ahead and create an end point for this so inside the API upload ping core uh we already have this one let just create here just going to say here reviewer image copy this and let's add it as an end point [Music] here uh we should be good so you can see here upload your image it should be a square uh maybe we could just like also customize this image input let me see so if you just look at it here we have height and this okay uh we could just also pass in the class name I mean so I'm just going to say here CN so say [Music] CN we pass in this plus the class name so we can just say pass in optionally uh a string now this one shouldn't be required so we can just like say that this is not required uh you know we put question mark here so this shouldn't be required by default just going to put it empty like that so it shouldn't be required uh going back here we should not have any errors class name is missing it shouldn't be a missing okay is now okay but we can pass in a class name specifying withth so already right now there is a width of 40 I think was a width of 40 by so it is 40 uh we can also specify here width of uh 44 height of 44 okay we can just say object fed now we should just say container guess take for the image to look nice okay and maybe we should also just give it text Center I don't know if it's supposed to be text Center or this is to make sure the the image is in the center so this one has object fit cover okay just also here use cover maybe we leave it oh we have also used cover G okay let's see here what we just like putting it let put here place place content content and items sent guess like to make sure everything is sented yeah okay great um I think that one looks uh looks okay uh someone can upload the image so let me just add a new image okay uh this one is not perfect Center by okay so there is some problem with the image upload we just go to inspect something went wrong please contact upload P you wonder what could be the [Music] problem this what C says the say is very very okay just going to refresh and we have here issues with the local storage okay look for the image let me just put this one okay for status here we have issues with uploading okay I'm just going to first leave the image okay okay so now we have the form looking amazing so we have to get all this data we consult on the console we know that at least we have all these information right so we still have one error wondering why so we have rating being captured comment being captured rating the name image title video link and the project ID so the project ID uh just going to get it from uh the console uh from the so we need to use local storage to get the uh to get the the current so I'm just go here and make sure the form is having the right names the review name The View Title uh this one supposed to have the review video link it is also review image that is okay let me just going to put this as a video link name video link uh so here we have the image that one has no problem and rating and finally we have the comment down here name comment so just go on top here and let's add this data dot uh let's get rating is going to equal to rating for instance uh data do uh review image is going to be is going to be equal to image your rare and then we have I think data. project ID so that project ID uh is equal to let's first go get in the project selection menu and just going to use this copy let's go to review form so on top here I'm just going to do this start project is lo get item project and then project if it is stored is equal to this okay so if there is no any in the local storage let going say now so here for the project ID I just say project it's going to be project ID just like this okay so let just go and conso data so before we put before we put all this okay before just put try I'm just going to say con PL data okay so just need to know that the we have the data so clear everything and they just F in sorry yes f f in yes St three and by the way for this let's give it a type of URL this one we can say type I think you are right so that if you're using a fake fer this will be suggested as a URL so if I fit again you can see this they fit it as a URL okay so if I create post you can see I have the comment but then I don't have the name okay let's see what we give the name okay we have the name I think supposed to be reviewer name so where do we get the name okay is here reviewer name t video link uh rating where where is the name come from so this is review propes and the review prop I see okay we don't have those let's just do one more time fill in the data right review just fake fe uh then before I click I'm just going to set loading off so click here okay so we now good comment project ID so you can see the project ID is the uh rating of one and then review name title and also the image we have the default one okay great so that's good good the two remaining things I just want to do is if I switch this project to this one I should just also switch it in the uh the fact that we are using it uh we are using local storage okay and I think we should also be able to refresh uh the page because a lot of things change most of these all these ones they will be depending on that okay so I'm just going to go to where we switch uh the project uh that is the project selection menu so we have this selected and this takes in this and then we have the on change okay and the only change takes in this now I'm wondering if I had a function if I had a function here I just call this a function handle a project switch handle project switch and then conso log the word switch maybe I'm just going to put in a item here of any uh we could also just like put in this and say item and then like I think it said selected to item this should just still work uh if you just look at it it is still having any so I think if we do this okay uh just put here this function handle project switch and then here we have conso log item and here just ex selected to item uh let's see if we have the same stuff I'm just going s to go to the console here so that I can monitor what is happening okay so switch the project here uh switch to this one so you can see like you have this whole entire project and it has switched so that's great okay so we just going to do the same thing we did in the project so in the project form just going to do exactly the same thing we did here like this and uh this is just going to the project selection menu so down here we switch but we also just say this so This are going to be item dot ID so you see it like this and then we say just on string F to this one okay so what I just want to see is if this things are switching uh so after switch I would want to also reload the page uh for sure so I'm just just going to say I'm just going to say window uh dot location then Dot reload let go this function here so let go ahead this time change the project so I'm just going to refresh this will just put the project that is in the local storage as you can see my project uh let's also open the local storage by just going here to application and we can just go to local storage and then we can scroll down to where we have the project so we have right now my new project they just switch to nextjs so you can see this switches and refreshes the page and then if we check we have here the nextg St key if I switch back to this you can see it switches to the the new project so now we have the switching happening successfully and refreshing the page okay uh so now we know if you switch we will have it for sure so on the form uh the text you are seeing here we should just get them from uh when you come and have the form we you should be able to uh you should be able to um so on the time when you create a new project here in time when you create a new project here uh we should just also create the uh the review most say they customize because these ones uh they should be coming from the DB already if you check in the schema so if you check in the schema here we have the review this is we have been working on okay right now I I guess we can submit a review but then the one that customizes the form uh is the review form so we have the review and then we have the review form so this is for the customizing the form as you can see it has the welcome title welcome what so uh the point at which the form is created uh let's see it has a project ID so this one is supposed to be also created at a point um it should be created at a point when you create a new project so that when you reach there you can be able to customize the form and you can save those changes uh so to do that uh I will just go to now we'll go to the side I'll go to the actions where we have the project actions projects so what we have the create okay so after creating this new project we can also just go ahead and create so you can just say const uh custom Uh custom form is going to be await uh so you say await Prisma it is DB db. project that is do review form do create okay uh do create I'm just going to pass in the data and the only data we just need to pass in here is going to be the project ID so I will pass in the project ID as new project new project do ID and that's the only one we need to pass in because if you check uh if you check in the schema in this customized form it needs only the project ID all other remaining things are already by we have all of them as default so this is you basically be editing them okay [Music] so so this one has to be created we don't need to return it or do anything we can even just say await as simple as that then after this it will return uh this one okay okay great so since we have done that I'm just going to create another project so that we see if that one works so that we just get we have to F those uh the Customs for this so I'm just going to go ahead and [Music] say uh create a new project I'm just going to just call Project X Project X create so you can see it is now Project X and even here Project X okay great so now at this point that means if I go to the Prisma schema we should be having a review form I'm not sure if this is up to date date yeah so you can see I have a review form where is the form title form welcome title for welcome greeting the video link there is not any video link okay so yeah we need to do that so now we should just F this so we can just go back to the project and we can just say gate where we have gate the category we just going to say gate get form settings uh by Pro project ID just like this Tex in the project ID here project ID and let's go inside uh here you can just say get const um for this one is just like review form okay so then get this uh review form find and if should be find unique where a project ID just like this and return the review form just like this okay so we could just get settings get settings okay so we can just go to so the best place place this one would be inside uh would be still inside the layout so we can just say go to dashboard form page so here this is the best place to fet this Con form settings is going to be a wait and then uh let's pass in the ID so the ID you passing here is going to be for the project now this is where things get tricky because um when we get this um that means we have to use either effect because we cannot do it on the client okay and if that is the case then we're going to get it from uh we have to get it I'm just going to cut this I'm just going to go to the review form itself so here we need to F some data uh based on the uh yes first remove this based on the on the project so I will first of all put this one down here let me just put this ones outside up here okay so I need to do a use effect I need to do uh a use effect that is going to f the data when this page loads so I can just say I'm just going to do here con settings set settings is equal to use State and maybe we just say by default there now uh so down here just going to have like a use effect I use Def and inside here we just go ahead and write a function so asnc uh function get settings maybe and then here just going to go ahead and just run this get settings and now this runs with the project ID so we just going to call this here just like this import the use effect I also import this [Music] one so let's pass in the project ID so we can say project do ID just like this and then here we are depending I think on the project I'm not [Music] sure I think just like we are depending on the project so we should just get the settings after getting them and then we can just say Set uh settings and then we set them to say to form settings this one should be we can just say that they have they can be of the type review form owner so type def find is not say action I think we already have review form we can just say as form settings maybe just see here as home settings uh SCS so you can just use this uh here just avoid the conflicts so has abil to be undefined so could also sa this to un Define okay it is still n so it also has theity to be n so here we also have now okay uh so we have this and also sure if this is really optimized in any way so if we just go back I just want to cons log just want to goad and just say console.log settings okay I just want to cons log settings uh for now so let just go to my review form okay and now uh we can just go back to the console okay I'm just going to refresh the page okay uh we have some errors uh local storage is not uh is not defined I think that's like when you load the window the RO storage is not yet there so what I can just do on that case Okay review from line 159 okay so you can see on 59 we have some data actually so 59 we have all this data yeah okay wonder why it was not uh on this customized form that's when we need actually the most the customized tab so in this on the custom we need to create some sort of another form so here where we have this customized we need like another form that is now specifically for customizing everything you see this side here okay the form title and everything so I'm just going to copy uh basically copy just going to basically copy this very form the review form while we have this right form here I'm just going to copy uh some of it and then um paste it that side so that it can be customized so due to a lot of stuff here I'm just going to I'm just going to create it its own just going just call it review form settings review form settings the TSX okay so I'm just going to get this okay I just get this uh review form settings RFC paste this here and let's go and uh first of all add some of these things here you just add some of these things in this Let's Start From Here use client okay then I don't think we need to use effect in this case this then toast okay so text input okay just import these ion okay uh we not have even this here just going to import this uh then they submit button then this okay uh great we still have a few errors here BR the settings just bring this review Pro okay so I don't know what is the problem speci when it comes to here okay so before we customize this uh review settings let's first finish this review so that we can create our first review uh let's go ahead and create uh our first review using this form uh we go all the we got in all the data I'm just going to first take off that console we have on line 59 okay so what I want is I want submit this and go ahead and create a review using this form because this is the exact form that we are going to create and we'll be sharing this very form so I just want to really see how it is create the review okay [Music] let's see let's see okay I just go to the review form here so we want to send this data now to we should send this this data to this side so let's go ahead and duplicate either this one or this one for the reviews just reviews uh we have create reviews so create review and this is going to be review props there is no need of a slag uh there is no need for this so new review is equal DB to review do create uh the data and then we can just hear dashboard reviews now return new review just like this so here on gate so this one is going to be G uh project reviews so here should just Tak in the project ID project ID which is going to be a string so just be reviewed a wait which is going to be review find many and then uh where project ID okay so let's return the reviews yes so okay uh we going to we're going to update actually whereby we passing uh here we passing the status it will be status bu I think it is bullan I'm not so sure update review status just first checking the schema so under reviews review has approved so this isos taken approved so instead of status just going to say approved ban and then here that supposed to be like updated updated review is db. category DB review do update and then the data is going taken the approved okay and then you can of course reviews return here the updated review now we're just going to have somewhere on getting here we should just get here approved approved to I guess okay so if we want to get only the okay we just going to use this one on the stuff this is okay we don't need to put approv we just going to have that on the the API I guess update review so we need to remove some things here create bar stuff here like so there'll be deleting review you don't know as first work with those two updating review and getting project reviews and creating a new review [Music] so you're also going to go here and go to the review form and then here we just need to say try so just going to come here and try and just say con response is equal to I would uh create preview and just Tak in the data okay so we can just go ahead and reset okay go ahead and reset and then reset we can so we'll be routing to the thank you page yeah we'll be routing the thank you page but for now uh there will be a page for customizing the thank you page okay but right now uh right now uh just going to have it as uh after this just re router we can first test can do success okay review submitted successfully okay review submitted successfully uh then we can just route them to we'll be routing them here router push so we'll be routing them to the thank you page but for now let's just go to dashboard dashboard reviews just see they created review okay uh I think that's it okay you can also say say loading to false which is meaning here just going to put say loading to True okay so on the review on the other hand and the reviews page uh we need to duplicate this I will just copy new in fact I will copy a column and page for now those two are go ahead and create a new One dashboard I will create three views okay and then inside here I'll paste page gate so here at the same time we need to get a project ID and the are going to get it from the uh from the local storage so that means that we need to to get the use effect so I'm just going to go to the review form get this use effect and settings just like this uh let's go to the page so just going to look I think in future we have to look for the beta alternative for managing the state of the of the project because we could use URL that is also possible but doesn't look like right okay I'm just going to just come here and use your state uh right now settings so this right now I'm just going say this is Project pris my client uh what are we getting here we are getting the I'm just supp go back the review form also get this so we are trying to get the we are actually getting the they reviews themselves okay reviews say reviews uh use State and then here we can just say revie [Music] R okay and then here we use the ID we just going to say G gate project reviews and then here's going to be S reviews just like this to these are going to be reviews okay then this function is going to be get reviews then here get reviews okay then here um we just going to say reviews now all these other ones we just going to remove them here just going to say reviews so this by defa we just going to say I think think now it doesn't matter so then this one just going to say if they there are no reviews so here just taking reviews at this we just reset this to an empty array me see oh actually the problem is the columns so just go and deal with the columns so the columns just going to say reviews okay so here we just need the image so we have um the image of the person so here we could just say for instance reviewer name reviewer name let just [Music] comeand or the DAT here is like name and then this one is going to be I don't know just do like review image so here is going to be review image let just look at the review form here image URL so review image here here just going to put here image uh the key is review image okay then we also have one more which is going to be the description okay so I'm just going to say here like this now you could just decide not to use the table and just put them like that but I'm just going to put them in the table uh uh another one is the pment okay I'm just going to return just going to return like let return a b tag you can just return something like view is equal to row do original and then from it we can just say review do comment let's play this give it a class name of Frank I think okay if you go back to the page let's look at this um we need to have at least this to this I don't know why if we do that down here we are okay but then here we not okay I'm just going to take them back and maybe here we could just say that if reviews soly if reviews reviews L than zero just have this and then here we just have another one which says no reviews okay so we can just go back to the review why is this [Music] phone uh it is supposed Tak user ID we need anywhere us ID I don't think so so we might just not be need of this okay so I'm just going to try to submit uh a review I need to try and submit a review so that we can see if this is going to create a review so if I just come here and just write a review so just going to write a fake Fe here okay just going to be this I just give it a first this is really amazing so just go ahead instead of create project just go ahead and give it uh R forone settings review pH okay so here is going to be create submit review okay so we just like wait for this to change okay so right now this is good just going to go ahead and create so it seem like review submitted successfully and we're having somewhere on this page uh it must be this page on the review page is supposed to be a use a use client now that we're using use effect use client and then the page cannot be asnc okay uh let just see now reviews we just see wait and see okay so it says uh uh no reviews and after same time uh the review has been uh created so you can see the review is here okay so great so we have a a review we have the name of the person the image the comment and the date uh we just going to add one button for viewing uh the review we need to add the button to add the uh the review of view so I'll just go back The Columns here I will have uh so after the comment maybe just going to just do this uh I just say here view now here just going to return the uh button the UI the normal button let me remove the trate and instead I we just have this it should also be a popup it will be a popup it will not be a page to be popup so we can just go and bring a so just going to say view for now and let me just go and get a dialog it is still here just copy this here okay we can just simp put it here and then add this dialog and going add it uh right here okay add it like this and then here it is open I'm just going add a but this is going to be View uh first go to this one and put it as a CH now this one uh for instance I'm just going to we're just going to design here say review just going say review do review do here you say the revie name okay then here just going to design very well they uh they review the whole thing they should just look like just going to call here review reviews like how a review should look like we have different we have different review cards you could just uh use the way you select this one okay okay so could it also I think like this is very okay okay so I'm just going to drag this nearby here so if you click on view right now you can see review for Chone so instead we're just going to add here okay I'm just going to add a flex and in this Flex I'm just going to add his image okay just going add the image and then the other side we will have the name I think we just need to put in a p or something then down here is going to be the Stars just like add the Stars the way you see here okay so you have this then you have the can have the reviews actually then the name down so we'll have they here the reviews so we can just have and have AR ref room so I'm just going to have create array and then here you put review do rating so from this I can do do map I have an item we have return uh just going to return a faster okay uh this one just going to give it a class name I think we just put the same you say here text text yellow of 500 for the image let's put the source uh review do image we have alt which is going to be review do name then we have wi say 3008 300 and the class name uh he of maybe C4 with I just say here maybe 16 and we of 16 and then rounded four okay there so one thing that is just give it F item Center and space XO2 uh going back here view just go and see just want to refresh okay so so far this is how it looks like uh so the reviews we need to put them in Flex and in front of the reviews so you could just like put uh so if we are put the name below so this one this Flex is going to be do Flex like this okay so in this value one I can put a P tag which also review. rating review do rating uh we could also give this a space X sub2 we could just say do to fixed of one okay so so far this is how it looks like okay so like this is uh 4.0 and then so down we just going to put uh whatever the comment was uh so uh we just ready space x04 here add some space so is the name here we just give like last name of Marin top or maybe one add some small space so here of course we're just going to add the review Dot comment okay so below this I'm just also going to put a line so put just like a border down here and then on this border I will just go ahead and add the time when this was posted so uh after the description the Bing top of three but also b top I we just go and say maybe 3 days ago so we can create another function here in the libs I will create a function so go in the docks the sub docks and then on the is uh let's get uh on the reusable functions there is where they they have reusable functions uh so down here there is one function I'm just going to use this one of G the pass time so below here I will add A P tag like of one day ago then in the libs I will just create one function called I think we have it do we have it time ago do TS put all this so this one can be a date or a string and just make it a date and then and then in the column here you can just say maybe created and then here you put the time and then you say time ago of review created at just okay uh we're still having so you can see here we just need a change here okay so forance created 17 minutes ago okay uh for pointer this is really amazing I want to see if there is any other information that we have left there uh if I just do review dot i really I just want to see if we still have any information comment okay there is a video then project ID review name review name title there is reviewer title okay and then the video so down here just going to add the video so we have these two two two places whereby we can add the video we can also play the video within or I just want to see this review title so here just bring leave the comment so right now what we can just add is the you can add a view a view video button here um just going to add view button their side so I will add another maybe the same a link view video uh we just also add the icon just going to be having here the icon of YouTube and then here just going to have maybe a span which says watch watch video the H is going to be for review do video link video link so this can be since it is optional we can check if it is there so if do video link so if this is true then we can just do this uh we should also have the class name of saying that this is going to be Flex item Center Space X of to let's give this one class name just make this 6 side six just text R so yes going to so give this justy uh the this is going to be Flex just five between item Center just like so okay so that that is okay so we are remaining with only one thing that we want show okay so you can see here watch this uh I also need to put here the uh something where we have this name I'm just going to put review so here is review title maybe this I'm just going to say text extra small okay uh great so yeah this is this is looking great we can also add if you wanted uh we could just add something like border bottom on this I'm not sure if it is necessary like adding on this some border so that the comment is given its own space okay uh I think that's that's fine I could just go here and I place this is the padding y or like maybe six okay so you can see this is looking great okay this looks really really great we have the person we have the review uh the one who made the uh the review I'm just going to make this button just give it a variant of outline okay so at least we know that we can create a form a form can create this okay so what we need also is that uh so at least we know that now on the form we can create the review okay and now uh just going to wait for a second okay so uh let's continue so now that we have this I just want to first uh view this form on another page uh this form alone okay so we can be able to share this so I'm just going to duplicate this page like so I will just go to um I will go to the front uh where we have the projects here so we already have the projects user ID okay uh this one is where we create uh a new project so we can just also have uh like reviews project I'm just going to create a link uh like uh inside the project okay I can just go and say uh projects so you can just have like this is for the projects then use ID I just want to create uh reviews so I'm just going to go here and create a new folder this is going to be reviews okay and then here is going to be for a particular project ID so here just going to have the project ID okay then let's put in a page the TSX okay so yes say RFC so at this point we're just going to receive uh params and then from this we just going to get the project ID uh pars let me just get project ID which is going to be a string so here we're just going to Simply call uh we just going to Simply call the review form the review form let me just say review form review form just like so if you just look at this form we don't want it to have uh this particular this one is going to be getting the uh the review form we need to pass in the project ID so meaning that we might need to go and pass this here okay so whenever we are calling this review for on the other page we need to find a way of getting this of getting that because we cannot Dell on this specifically this one has to come from the URL so dashboard form we have the review form here yeah okay so instead of putting I'm just going to go here I'm just going to pass this project ID project ID let just going to put this project ID uh here so this this I just want to just going to cut this uh here just going to be project ID project ID uh this is type string okay so on this uh let's just go ahead and make this a use client I don't know if we're supposed to first get this by use effect or something okay so pass here the project ID uh just going to pass in here the project do ID I can say by default is that so we should just have the same thing so in here we just need to passing the project ID and then here is the project ID just like so okay okay so we need to generate we need to generate this so I'm just going to create a link where we have here share link um I know just even add one more tab here we just say my review form then for sharing here we could just like add here share share form because um I already have uh forms here and then we have the tabs so you could just come here and we put the share functionality uh just going to put here uh let me just add another trigger for share this is going to be share form okay so we will just have like three now so we can just like here come and say Shar link Shar link design share sharing design okay I'm just going to add here a link to share okay so I just need just need this something like this okay so I'm just going to go here on this just try to design something like that I'll just add a padding y of 6 PX of 8 rounded LG VG like blue 100 okay so this one forms that now we can just simply have another div so pading y O2 PX4 so here just going to put a link which will be generated so con first of all get the base URL here which is going to be equal to process process. in do uh next Fab base URL so you need to get uh so we need to create [Music] one uh some environmental variable we need to create okay so I'm just going to do this so for securing my environmental variables I'll create environment code next fabri okay next fabc uh base URL so just need to create something like this so just create an environmental and you put uh for now look host then when we host we rep the uh the actual URL so I will pause okay so now I have this you can see I've saved in Lo host resent as the base URL so the link we just going to put here is going to be generated for from the base Ur dollar base Ur stroke so if you remember this was going to reviews it was going to reviews in Project ID so you say reviews uh actually supposed to pass in the project slag not project ID we pass in the the project slag uh so yes we take reviews uh let me just change a little bit uh okay I just leave the ID just going to leave the ID since we just say submitting using the ID uh just going to pass the project actually slag okay I will pass this slag so here in this we can get the project you can just say like uh reviews slash do project now there is a slag on this project okay just like this so this is the link you share okay so that mean if we just go here in said of we just going to name this slag okay okay the inside only slag okay so when we just go here we just have this SL okay and then we can just say say con uh project is going to be await uh get so here just going to get uh get project okay we have to get project by slag so let me first go to projects okay so here we need to get the so get single project uh by slag so we pass in the slag okay and then you can just say get single project by slag we can just come here and we say project is Project find neck where slag return project okay so since this is a very unique thing if you try to create a project that already exists they will not create it so uh it is really very okay to have the the project must be unique okay okay so let just go ahead and get this so get single project by slag and we just pass in the slug and just make here a sync okay so after getting this here we can just say it is Project do ID okay there is a possibility of this not being there so we can also just say if there is no project so this one we can check if project on project. ID if it exists then we can do this okay so we can now uh comfortably just go and check to dashboard forms okay so we need to add the button so this I'm just going to add a button here with a copy a copy so I think is a far copy just import this button okay so if we just go back and we see on the share okay so far this is how it looks like look host reviews project pi I think we just going to next one more time reviews then here forms I'm just going to Nest it one more more time inside the reviews uh here uh is going to be reviews uh then inside this form so just going to say form and then this is inside like so you have reviews form then slag so we're just going to put forms here okay form just like this okay so just go ahead and uh just add here 16 [Music] and let's straight add Flex [Music] we just right here okay copy yeah the this make sure the button is inside here let's just add also space XEL 3 okay so this is how it is so let's just go ahead and add this like BG of white [Music] rounded and just like border so this is now with his so I think we don't need to put just five between okay we just need to put the Space X maybe 06 I'm just going to add also on top here okay I will just put this I will just add this onto this one this here and then I'm just going to put H2 says share uh the link okay so you can just say copy this just just going to add a class name here uh [Music] font board and ping bottom of two okay so just try to put the copy functionality I'm just going to give a class name to this margin rate of two w of six and he of six I'm just also going to copy this I GPT to add for me the copy functionality so add the copy functionality so that when uh when I click on copy it copies the link to the cboard and choose copied after 30 seconds so you can just like add that okay so you can just say I'm just going to copy this function copy link okay just bring this function up here okay so you can see it has a state I think that state has to be outside uh just go back it is going to be the handle copy function actually so this is the one who want so we just P like this so we have the base here and then we generate the link and then we have this copy where we use just Navigator uh let's just say go down here so for the button uh we just say on click so here on this uh sorry the text here just like this and only click let say handle copy and I just want to S to change the variant of the button and we're just going to say if it is copied if it is copied the variant will be outline otherwise it's going to be the default default just like this uh for this icon also I just want to change it so you can just do this uh if it is copied we just want to show an icon of check so here just want to say paste this and then here paste this so here I'm just going to just say checked just going to put the check okay I use the check just like this since we have an error of V state okay so I'm just going to go to share so we have this uh let's reduce on the size of the icon to maybe four so let just try four okay here we could even just show here the link CU it is this link we have here we could just show that uh on the here just you could just go and do put the link here so if you copy this you can see here it says I copy it and then it goes back so if we just go on the next here we can copy this and paste it in uh in uh in new tab and let's see if this opens up a form just wait and see if this is going to open up a form yeah so you can see it opens up a form uh just like that they just go ahead and give it maybe some I just go ahead and give this I'm just going to give it a class name I just give a padding y of 16 to make sure that there is enough space uh more especially on top okay so you can see right now it has this uh form that you can can share with a person write a review and let's go ahead and write a review actually okay uh so we should just also have the form Project X and [Music] then uh I think it be reviews uh form then we have to have the welcome uh the thank you page okay reviews thank you there be thank you page or for this uh after submission it has to submit it somewhere uh for now let's just go ahead and submit uh just going to go and do this it I'm just going to say the uh at this is Hub okay I'm just going to put this link for the video and then I'm just going to give it maybe it's rest I'm just going to say uh this course was [Music] awesome and I loved it okay so I'm just going to go ahe and submit the review okay so you can see like right now there are now two reviews if I view this one uh the this the first one the second one is this one 15 seconds as you can see here it just a few seconds ago and the review was this developer at this is sub so these are coming in really nicely okay uh so the I'm just going to remove the share since we have put everything on this form here while you customize the form share the form and review the form okay so let just go remove this sh share I just go on the Side Bar for this one I'm just going to remove this this one is not necessary okay uh so we done with this review share the the share is now working so what you want is if we change ER the project for instance if we change here we just going to do that I think later long okay just going to do that later on we are not going to change right now but we will do that okay uh I don't know did this work this thing of putting the dots I think it worked uh uh let me first go to Project selection project selection menu I don't think we we want that now it has M3 block trate I don't know if we did that even here okay we have this [Music] one just going to leave what is on to this one them three block trades we went ahead and added thisas here we added that to trate the project [Music] know okay let's just leave that one let's move on uh let's move on so we have the review form one thing we just need is now to customize the form okay so this is where we use the form settings okay I'm just going to f all this and I put the form there I'm just going to go back to the form so there is where we have this customized the form and on the customize we just going to call this form settings something like that review form settings so there is something unexpected da identify okay okay so one of these Dives inside here is not supposed to be there maybe I'm not sure where but we can start slowly slowly just like this okay so this I know if it's just like a VI so under customized form you can see we have this so I'm just going to first also give it a a Max with so we can give it a Max with let's give it a Max R of maybe 3 xlx I'm really sorry for some background noise uh let's just see here okay I'm just not going to give it auto I'm just going to leave it to be this side okay just like that so so I just want to to bring the if you remember the in the schema the review form uh the first one I had is this form welcome text so we have welcome text let me just copy them then we have have this we have this from title this and this okay so I'm just going to go ahead and go back to the settings okay so this I will add it here okay so we have form welcome text for welcome text here for text then this is this uh there will be no press holders on this one okay even if I want I can remove the icon so the welcome text uh we just going to pass in into this one we just going to pass in the the initial data so here we just just passing initial data so maybe I'm just going to say initial uh data so cut this initial data is of type review form okay okay so you can just come and then pass this we pass this here review form just you can just come and put we can just like say review form uh review form even here review form now here I'm just going to pass in the default values and I'm just going to pass the initial data just like this okay of course I'm just going to remove these okay so let just go ahead we have the welcome text where welcome greeting form welcome greeting so the greeting is going to be the text in text area so this one let me remove this okay so let me just put here the form grating welcome for greeting okay uh the Press holder I'm just going to remove it or so so I'm just going to cut this I'm just going to put it here so just go ahead and pass in the initial data first of all in the form so we can just say get initial data the fact that we have the this project so we can also get uh just on the review I think we had it on settings somewhere just scroll down settings uh don't if it is just in a projects yeah so we have this gate uh gate form settings uh we already had it somewhere I don't know if it is in the review form review so if you just go to [Music] form review form and if we just had them here the settings and then this use State just like this uh so I'm just going to go to the form page in the dashboard here and let's try to put this use effect uh then form setting props so this y called them [Music] review uh review form from this duplicate uh we have this and somewhere I guess oh okay so we can just like um okay there the props that I think it came with so this on are just going to import those import we could just go ahead and just say review review form I guess we already have review form somewhere from Prisma client so here I'm just going to put uh Prisma client I'm just going to get this as as form setting props okay let's get the project ID uh from the project do ID this one is going to be project so we get the form settings and we set them as settings so we can just go ahead and pass them into this as initial data as settings and we can just easily say that if there is no if settings settings do ID so from here you can just like uh confidently put like so okay so if we just go here and refresh the page settings do so you can see after sometime like this comes in right to the view here there by setting your Hess this so just go and F all of them I'm just going to scroll down here go to just go down here let's go and share this text area uh just see the first is welcome text greeting for welcome [Music] greeting for greeting video so the greeting video if it is there we use what we used for this let me go and copy this uh react prayer so okay so import this we getting react in YouTube okay uh then on below it I think we just have to put uh this uh the link okay maybe we just uh just going to say here someone to watch the preview okay I'm just going to going to see this [Music] one this one was greeting video for greeting video for greeting video so this one okay uh okay let just go and see next is the form title uh so we have the form title from T okay the next we have uh talking point one and talking point two so just going to come here and let's duplicate uh this uh talking point one okay uh so for this one I think we should just like put them to here like this LG [Music] GD grade calls to okay uh I think we should just like put put them they just put them alone okay I'm just going to put them alone just simply duplicate this talking point two okay yeah so here you have here and then I'm just going to say update okay so you can see all these [Music] um are the things you can customize on your phone write a review so I I think we just need to separate them because this is just like the slide one which is on the welcome okay okay so this first two we have this and then this then wel come greeting video so on this there are three I'm just going to say card card content okay just see that okay so you can see here I will add on the first to one is add pading to Pro three okay welcome text and then now these other ones are for the form we could just get a card head if I just come Char card I can just go to the card and let's grab the card header here uh so if you put inside the card and you put a card header we now don't need this padding top so here you can just say something like customize the welcome text customize the will text so just going to say this text goes goes on the welcome screen of the review form okay now after this we just need to put in these remaining ones two three so also this three I'm just going to put them inside a card card and then card so let justy this card head so just put this so you say customize the form the riew for text okay this text goes on the actual uh review form okay uh just say how this one looks like so we have like this I think this would be nice if we had save buttons here like you can save down here then you can also save down here I don't know how we do it but the final one that I'm just going to put is going to be uh the thank you page okay it should just also have just similar like this one they thank you just going say they thank you like T and they thank you uh message I'm just going to finally put the another card I'll copy the first card and copy this one so copy this and then I will just put the third card here so this one is the thank you page so customize the thank you the thank you page okay uh this text goes on the for on the thank you page after submitting the phone okay so here you just want to put thank you TI maybe just thank thank you thank you T okay this one just going to go here okay then we have the thank you message thank you message then here just going to just say thank you message and then uh let just remove this one so we just need to add these two this and this [Music] one we can just go to this schema and we can just go ahead and add these two the t Okay so this one is going to be for instance thank you this one just break thank you for your H review okay we'll just make like a better thank you uh message but for now just leave it like this okay so it just going to look like this maybe we we could also put the tabs I feel like we could just like put the tabs we could just like add the three instead of just like scrolling like this we could just like add the the tabs and we show one at a time so basically I can just go to I think I can just go for by you can search for tabs and for see just could just get something like this I'm just going to go ahead and copy this I just like want the tabs to be to be like this just go ahead I'm just going to go and review settings Okay so on to here just going to put them just like this so go wherever there is a class uh let's replace it with a class name okay uh let's see how this one looks like okay uh let's add maybe a margin bottom of three okay just like so so this one if we show one form at a time so instead of these I'm just going to convert them into buttons so just click this to be button remove H ra okay uh you can also make this to be e button remove H and then even this let's make it a button remove H so we only need three I'm just going to remove the remaining two so the first one is going to be the first one is going to be for World text the second one is the form text and the final one is the thank you page okay so they should just look something like this okay so now I'm just going to put a simple State here to control them we could just even use this of active tab okay and we start with the [Music] welcome okay so this is welcome so I could basically also create them here I could just say con tabs and I could just create create an array instead uh tab like this one just say welcome the we text so just need three of them we have form welcome text form text and the thank you page for text then form text this is form and then this is the than this one is going to be like the thank you page thank to page so here by default is going to be tabs at zero do tab this be the active tab so here let's go ahead and map through this so we have one which is which is active the form text I will use that so just go ahead and say tabs do map [Music] item okay and you see here is return so we just going to return this the text is going to be it do title and then we have the key before I forget key which is index okay uh then when it is active we just going to change the class to this one so we need to get to know what changes I'm just going to copy this and for S is this one so we just say CN and then we we set if tab if item do tab item the tab is equal to to active tab [Music] then we just need to apply these classes these ones they will be not all of them I guess but they just find the unique ones text blue for the [Music] bottom could uh okay round it t LG active then this one okay I think those are the classes we need add when it is active so now you can remove these two so if you you check now we have this uh welcome test uh you can see it is the active one right now so if I just go ahead and say on click so on click I just want to say it active tab to item do tab uh just do this okay then what you want to do is this one is for the welcome so you can just say if active tab is equal to welcome then so this and then this one is is for the form so if the active tab if the active tab is equal to form so we just show this and finally if the active is equal to [Music] thank then we just want to this okay so you just you notice that um after that we should just be having only one as you can see I customize the welcome text you can fit in this and then update the settings then you go to the next one like that like that you just go to this for instance uh from text as you can see then you can update this and then click update then you can just go to thank you and then you have also this okay so let's just make it update uh but first of all we need to get the review thank you title so just going to just say I am making the review for thank you page can you give me the T [Music] to and the message so you can get you this so you can say thank you for your feedback I'm just going to go to the schema uh just add this here thank you for your feedback and then another one the description your view has been successfully submitted we appreciate your time and variable input your Feb improve and continue provide the best experience possible okay just uh just going to add this here the message okay so now I'm just going to go ahead and push this okay you can stop this and run npx I think we already have this so it is now 7 hours and 30 minutes uh we are still moving [Music] on okay so now we have our texts and the three the three for uh the three texts we should now uh be able to use these texts first uh on the for instance on this welcome page we need to use them plus here on this we need to use them first of all let's first make sure that we can update them in the DB uh after finishing that then we just move on to using them so so basically um just uh I'm having this dashboard form running I guess must be because of the uh it must be because of the must be because of this uh we need to look for some uh see okay let just first work on updating this it seems like I'm making like tons of thousands of requests uh let's first Che this form just going to say control P just go ahead and check in the form yes going to take here in the form it must be because of this okay must be because of that so must be because of that let's see okay [Music] uh so let just go ahead and find a way of updating this so I guess we need to pass in I'm just going to minimize this here so we just need to go to the review form settings so we need to submit these uh onto this one here uh let's first get all of them from the schema we have added this and this one so let me just add it onto this okay uh so this is the data we just need to be updating so let's go ahead and create update I don't know if we just have anywhere we have the settings okay go to the projects okay so where we have this update update category I I'm just going to say we need to update okay just taking the project ID project ID and then the data is going to be of type confus uh let's say just go and see this I'm just going to create I'm just going to get this contr C [Music] I'm just going to go to types I'm just going to say export duplicate this one okay and let me just put this here so I just say string okay I think we also have project ID uh project ID which is a string so we just go back here in the actions update review settings we can just import this uh here just going to say review form and then here is where could just say where ID or where project ID Okay so review settings here just going to say R8 and we pass in data so here is that I'm just going to I we just do like this so that is of this type and here we are supposed to passing also the project the project ID and where are we getting the project ID could just actually like we have the initial data which is for that very form I think we can just like update by ID you could just like passing initial data do um ID I could just say go here and I just put ID here and then here ID it will still work okay so if we send all this data uh just like this would have sent even including ID okay so we need to selectively remove this data here so we can just say we just going to either we could just come here and cuz if you see it here it has also this this ID including even this here so we could just come here and we could instead do this I'm just going to cut here and put these ones here okay so this is going to be initial data do form welcome T initial data do for welcome greeting uh inial that for greatting video you can just put commas okay so this is initial data form data ini that do talking points okay thank you okay here I'm just going to pass in review form setting props and seems like they don't have the video okay so we have this I'm just going to actually add this video here as the in isue okay so I'm just going to go ahead and try to update I'm just going try to update this okay I'm just going to say right here I'm just going add updated and also this link I will add it here and then I will try click update let's first finish everything say loading to then update set loading to force and let T good success updated success F just like this okay so I'm just going to go ahead and click on update form settings and see what happens uh that was so fast uh let's refresh there is this a link this one was I think there must be a problem I'm just going to conso log I'm just going to go here uh I will update I we just go ahead and cons log so here we just update dashboard form I'm just going to go ahead and consider through the updated settings so you see here updated settings I'm just going to cons L this let's try and see the conso uh write a review update it okay let try to remove this here so I will also go to the console see if there is any problems okay uh I'm just going to refresh yeah so you can see it was uh updated you can see uh not sure where yeah so you can see here there WT uh we need also to cancel this uh this console Uhl in the O options uh just go ahead and first stop all the consider looks that we have this side here and also here they're not necessary right now okay so at this point we able to I can just go to this uh let me just write here the word updated here so just go here you can see the word is there thank you page and just going to say updated let just take update this okay if I just refresh you can see this is updated so we are able to update uh this so it's time to use them in other places like on the review form and all other places so let's just go on the review form okay uh let's start on the review form so we need to get the settings and I I think we are getting the settings here uh there is settings okay I'm just going to go to where we have right review this is where we just add settings dot so this one is the welcome where we have anything to do is welcome form welcome title and then uh this one is for welcome settings form welcome greetings and then here the video is just going to cut it it's going to be for uh settings do form greatting video link okay this one just going to say if it is not there then just going to add this one okay so come here this one is for the form so settings dot form title and then this is settings the [Music] for uh so here supposed to put the talking point one and two so we're just going to have the talking point one and two talking point two so we'll be remaining with the thank you message which will be on the thank you page okay so you can see now that we have done that the video has gone uh let's go here and add the video so you could just come and put this and let just add the video here update okay update if you just go back to the form uh so you can see the video has updated like so maybe the only your problem is that is not showing properly the height uh let's see the height here we have to have the height uh the you have to have the [Music] idea I don't know how to control this just going to first take it off you should just get the height the proper height for this but you can see everything is now uh customizable on the form if you come here and write the form you can see uh the talking points we are talking about okay R experience maybe I just need to put like the check or put them as the Blitz just going to go here and sege let's go to typography just going to get a list like this and I will just copy this I will put it down here okay uh we cut this one and put it here and also cut this I will just cut this and I put it here okay so let just look at that yeah so and the this uh goes hand in hand if we go and we check out this okay so just going to design the thank you page as you can see there uh here and even this side here okay so you can just go ahead and customize everything the way you want it so the thing maybe you just need to do is now customizing the customizing the customizing the thank you page after submitting here it should take us to the thank you page which should be we could just like make another card I will just go to a thank you page copy this uh let just go to this UI where we have reviews so inside we have uh slag page uh inside here we can add another folder we can just add any you for the inside here which is going to be thank you and then inser this just going to p page to TSX RFC okay I'm just going to say card so card C content so I'm just going to take off this so on this page we need to go ahead and get we can get the slag uh so we can just go and do what we did into this here we can get the project okay from this slag so similarly here we can do this and then here we can just get this slag by just saying params and this is a string so after getting the project we can get the project ID and we can also F now the settings con settings uh is equal to await gate uh project settings uh we need to get the settings settings I don't know if there is anything uh let me just go to the [Music] form I see so it is this one home settings is gate home settings by project and let's pass in Project ID okay so we're just going to first check if settings exist so we can just say if settings exist and settings do ID uh form settings and form settings ID then you can just s this so these ones are going to be like form settings the thank you title and then I'm just going to add a description here p and I'm just going to say form settings do do thank you page uh do thank you message just like this okay so you can see how we have embedded this reviews form slag then thank you so let's just go to the review form uh after the review forone instead of pushing to the dashboard reviews so this would have uh created uh a review so we can just push to I'm just going to do like this so we are waiting and getting this response which is actually data back so I will just do this want to go to reviews so they just go to the you uh homepage so you go to reviews you got form then you got form slag which will be like dollar raise do uh so this one is uh project ID so here we also have we passed in the project ID so we need to pass in this SL so we need in other words we need to we need to send also uh the this SL here I just want to pass in also the slug so slug SL okay so whatever there is review form so now we can now pass in a slag here okay then stroke thank you so here thank you just like this okay so whatever we need we have this we have to pass in whatever we having this we have pass in the slag so here we just have to pass in also the slag which is Project do slag okay so also on the page here we have also the slag so we can pass in the slag uh as slug okay uh I'm just going to go ahead and copy this share the review l think so just refresh go ahead and submit this copy this let's go and see this and let's write a review okay this is a test uh review so just go ahead and see this okay so you can see here thank you for your feedback okay so let just customize this page a little bit okay I'm just going to give this a class name fing y uh of 16 and let's give it Max we okay okay so that is the thank you page we can just go ahead let's give this your name fighting y four we can also just go ahead and add a check e so we just trying to customize this uh this page okay so we can try to make uh this a better sign up or something but I'm just going to leave it like this okay so we you have uh this as the thank you page I'm just going to go ahead and go back to the dashboard okay yeah so we have we have uh that so we are remaining with these three parts at least the reviews right now if you just go to the reviews you can see that there three uh reviews