Build a Full Stack AI Website Builder with MERN Stack | Complete AI SaaS Project Step by Step Transcript, AI Summary & Key Points

00:00 Hello and welcome back to another exciting tutorial of great stack. Today we are going to build a full stack AI website builder from a scratch using MER stack. This is a realworld AI SAS project where users can sign up, login and generate an entire React website using a simple text prompt. Once the website is generated, users can continue improving it by editing the source code manually or simply giving the new AI prompts to update any section of the website.

00:36 So let's see the project demo that we are going to build in this tutorial. So let me log out from here. After sign out first it will display the signin page and if you are new on this website you can create an account using this create account form. So let me login with my existing account. We'll provide the existing email id and password. So we have added the email id and password and click on sign in.

01:01 After sign in it will display the homepage and here we have the input field where we can enter our prompt to generate the website or we can also click on these buttons. So it will create these websites like rum website, personal website, business website, marketing website and here it will display the list of old project. So you can see we have already created another project.

01:26 I'll click here. So this is the old project that we have created using this simple prompt. Let me just create a new project. So I'll come here and here we'll add a new prompt. So let's type create a modern website for a coffee shop and click on this send button. Now you can see the notification AI agent is planning a structure and here you can see the entire progress and in the left side also you can see the chat messages.

02:03 So this is the message that we have added and here we have the response from AI and it will keep on updating when it complete the structure plan and after that it will generate the code file one by one and once the file is generated you can explore it in the file section in the left sidebar. So we have to wait for few minutes to get our project ready.

02:29 Now you can see we have some response in the left side. And here also you can see the update AI agent is building. And now the file structure is ready. It is building total nine files. And currently it is building the hero.js file which is currently active. And one by one it will create all these files like app.js style dot CSS then header.js. You can see the progress 11% is completed.

02:54 It means one file is completed out of nine. So style dot CSS is completed and it is creating the testimonial.js. So we have to wait for few minutes. And in the left side also you can see the updates like created file/styles dot CSS. Now you can see 22% completed and now it is creating the call toaction.js file. So instead of getting the entire code at once, you can see the entire development process a step by step.

03:35 Now 33% is completed. It is building the footer.js and uh you can see these files are created. Appjs styles dot CSS header.js hero.js. Now we have five files left. Now you can see 89% progress completed and uh it is building our last file that is pricing.js. Now you can see our website has been generated using AI. Here we have the navigation bar, hero section and some features.

04:09 And here we have the menu and reviews and then we have this footer. And in the left side you can see we have the updates and in the final message you can see website generation complete. You can view and edit the files. And to edit the website we can click here on the files. And here we have the list of files and the folder structure. Now if you want to update anything here let me go to hero.jsx.

04:40 So we can update our hero section. Here you can see we have the content like this is the background image. If you want to replace it, you can add your own image URL. Then we have the title that is t the moment. You can update the title here. After that here you can see we have the description. Then we have our buttons. So this is the order now button and this is the view menu button.

05:13 Let me change it instead of this order. Now let me change it to order online. So now you can see the update on the website also. Let me just come back to the preview mode again. So we can see the preview like this. And if you want to see the full page preview, you can click on this button open preview. So it will display the full page preview. It looks good.

05:34 Now after that here we have the button to publish it. If I click here our website will be published. So that any user can view this website without authentication. It will be live. Let me open this link. So just click here and it will open this link. In the new tab you can see the path /publish and this project ID. Now this website is public and after that here we have the button to export it.

06:01 If I click here you will get a zip file and here we have all the files and folders. Now let me update this website using the AI prompt also. So I'll just come back here in the sidebar and chat here. Let me add another prompt. So I'll provide the prompt change the navbar primary color from indigo to brown and send it. Now you can see here we have our prompt change the navar primary color from indigo to brown.

06:31 And here you can see the loading. It means the AI is updating our website in the background. You can see the loading animation here also. Now here you can see we have the update updated navar primary color from indigo to brown across header.js and you can see the color has been updated in this navbar. Now after that let me just come back to the homepage and on this homepage you can see we have two projects.

06:58 So this was the overview of our AI website builder. To power our AI website builder, we will use a free AI model from Open Router. So you can build and test this project without paying for expensive AI APIs. Throughout this tutorial, we will use Code Rabbit as our AI code reviewer. It will automatically review our code, suggest improvements, identify potential bugs, and help us write cleaner production ready code throughout the entire development process.

07:31 Before we get started, if you enjoy these in-depth full stack tutorials, make sure to hit the like button, let's try to reach 5,000 likes on this video. And if you would like to see more AI SAS project like this in the future, comment AI website builder below. Your support really motivate me to create more free tutorials like this. Now, without wasting any more time, let's start building our full stack AI website builder.

08:02 To create our project, we will come to desktop screen and here we will create a project folder and write the folder name builder AI. Now let's open this project folder with code editor. So we will use VS code. Now in this one first we have to create a react project. For creating the React project we will use the wheat package. So let's go to terminal and open a new terminal and in this one we will add npm create wheat at latest.

08:47 Press Y to confirm the wheat version. After that it is asking for the project name. We will create a full stack project where we have to create the separate client and server. So first we have to create the client using react. So let's add the project name client. That will be our front end. Now it is asking to choose the variant. So here we will choose react.

09:20 After that we will choose JavaScript. And here we'll press enter to confirm ox lint. After that it is asking install with npm and start now. So simply press yes. So it will install the required dependencies and start the project. So in the left sidebar you can see we have the client folder. If I expand this client, you can see the entire project structure like we have the node modules that includes all the packages.

09:57 Here we have the public folder src and this is the main file index dot html. And in this terminal you can see we have this URL localhost port 5173. Let me open this link in the web browser. So you can see our basic V plus React project is successfully running in the web browser. Next we'll clear this project. Just come back to the VS code and we will hide this terminal.

10:33 In this src you can see we have app dot CSS. We will delete this. And uh after that we have app dot JSX. So we will clear this file and here simply add RAFCE to create the React component structure. We are using this sort code because we have added one extension. If I open this extensions list here we'll search for ES7 react redux react native snippets.

11:07 So we have to install this extension so that you can use the sort code to create this component structure. Now after that we have index dot CSS. Let's clear this one also and after that we have the main and then we have this index html. In this one you can see we have the project title which is client. So let me update this project title that will be webpage title.

11:32 So here we will write builder AI and we'll add the channel name create a stag. Save the changes. After that we can update this favicon also. But before that let me save the changes and open the web page. So now you can see our default app is cleared. Here you can see the title also which is builder AI greatest stack and we have the default icon in the favicon.

12:02 So we will update this icon. For that [gasps] let's just come here in the desktop and here you can see we have a folder called builder AI assets. So you can download this assets folder from the video description and in this one you will find the public folder server folder utils API.js assets.js and index dot CSS. So let's add these files in our project.

12:34 So let me minimize it. I'll resize this one. This is the asset file or folder and this is the project [snorts] directory. Here we have the client and in this client you can see we have the src. So in this client src you can see we have the assets. So in this assets we have some default files right. So just remove all the files from here and after that let's open the assets folder and from this assets you will find the assets.js just copy and paste it here.

13:18 After that let's come back here in the client. So in this client you will find the src. So within this src just paste this utils. So from here copy this utils and paste it here in this src. After that here you can see we have the public folder. So in this public folder we have the bg image favicon and logo. So just copy everything from this public folder and come here in the project.

13:48 In this project also you will find the public and paste the files here. Replace the files in destination and remove this icon. SVG. That's it. So now we have added the files from public then utils. And now let's add this API also. In this API, we have created the dummy API that will be used in the client until we create our own backend server. So just copy this API.js from here and open our client project.

14:27 In this client we have the src and uh in this src let's create a folder and write the folder name API and within this API folder provide this file that is API do js. So we have added the API.js JS assets and now just copy this index dot CSS also. Copy this index dot CSS and replace this one. In this client src you will find the index dot CSS. So replace it.

15:00 So we'll paste it here and replace the file in destination. Now after that we'll open the VS code and here you can see we have the public folder. In this public folder we have these images. Then we have src. In the src we have assets and here we have the assets.js. In this one we have one array that is home tags. After that here you can see we have a utils folder.

15:37 In this utils folder we have two files export project.js and sandpack utils.js. And after that in the API folder we have API.js file where we have created the demi APIs. And here this API will return some data like it will return the dummy user like this. Then initial projects. After updating this, let me save the changes and open the web page again.

16:11 Here we are getting some error. no such file or directory that is Telvin CSS right so we have to add the dependencies also let me just come back and we'll add the dependencies for Telvin CSS to add the Telwind CSS in this wheat project we'll open the web browser and search for wheat plus Telwind let's open it and uh after that you can see the steps to create your project right so we have created our wheat project then you can see the second step install Telvin CSS for installing the Telvin CSS let's just copy this

16:52 command copy this one and come back here in the VS code open the terminal and uh in this terminal let's add control C and you can see we are in the builder AI so we have to navigate into client so just add cdclient. Now we are in the client directory and here we'll paste this command npm install telvin css and add the rate telvin css/weet. So it is installing these packages.

17:30 Till then we can see the next step. So the next step is to configure the wheat config.ts file. In this one, we have to add the Telwind CSS function and import it from this Telvin CSS/V. So, just copy this import statement first and come here and open vconfig.js. In this vconig js, just add this import statement and uh after this react, let's add comma and simply provide telvin css.

18:07 Let's move it in the new line. Save the changes. Let's see the steps here. So you can see inside the plug-in we have to add telvin CSS that we have already added. Now after that we have to add this import telvin CSS in the CSS file. So that is already added here. Let's open src and uh in this src we have index dot css. So in this index dot CSS you can see we have already added import telind CSS let's see the next step.

18:40 So now we can run our project and uh after that we can easily use the Telbint classes in any component in any HTML element. Right? So let's run our project again using npm rundev. Just come back here and add this command. But before starting this project, let me add the other dependencies also that will be used inside this client project. So after adding the telman CSS here we will add the routing right for that we have to add the react router DOM.

19:17 So let's add npm install and the package name react router DOM. After that we'll add the next package that is react hot toast. Using this package we can display the toast notification. Then add a space and add the another package name that is lucid react. Using this lucid react package we can add the icons in our project. After that we'll add the moments package.

19:50 So using this moments package we can format the date and time. Then we'll add the axios package. Using this axio package we will make the network request. Then we have to add the sandbox. Using the sandbox, we can enable the live editing for the code that we will generate using AI. So here we'll add at code sandbox/ sandpack react. Add a space. Then we'll add the file server.

20:30 Using this file server, we will add the codes in the sandbox. Because our codes are saved in the database and from the database, we have to display the codes in the sandbox. For that, we will use the file server and it will be used for exporting the code also, right? But for exporting the code, we have to create a zip. So here we'll add the next package that is js zip.

20:54 Then add a space. And here we'll add one more package that is load debounce. Using this package we will enable autosaving of the code when we will edit the code in sandbox. So you can see we have added npm install and other packages name like react router DOM react hot toast Lucid React moments axios code sandbox/ sandpack- react then file server jsjip and load debounce press enter to install all these dependencies now you can see all dependencies has been inst installed.

21:41 Let me verify it. We will hide this terminal and open the package.json file. So in this one you can see we have the dependencies and here we have code sandbox css exos file server jszip load dash debounce lucid react moment react react dom react hot toast react router and telvin css. So after adding these dependencies we can start the project again.

22:10 So let's open the terminal and in this client directory we can add this command npm run dev. So it will start the project on the same URL. After that we can hide this and open the web page. So now you can see if I reload the web page you can see here we have the updated favicon icon and after this icon we have the text called builder AI greatest stack that is the title.

22:47 Now we will connect our project with GitHub. For that we'll come back to the VS code and let's click on this source control icon initialize repository and here we'll add the message first commit. We'll click on publish branch and let's choose the repository type. So we will choose the GitHub private repository and the repository name is builder.ai. Let's click here.

23:21 So it will upload our code on GitHub. Let me authenticate this. I'll click on this button. Authorize Git Ecosystem. Authentication succeeded. And uh after that let's come here in the VS code. So you can see our project is successfully uploaded on GitHub. Let me open the GitHub profile. So here you can see our project has been uploaded here. So we have uploaded our project on GitHub.

24:06 Now that we have created our basic React project, it's time to start building the UI for our AI website builder application. But before we begin writing more code, let's set up an AI code review tool that will help us throughout this project. We will use Code Rabbit. Code Rabbit is an AI code review tool that analyzes your code, detects bugs, suggests fixes, and recommends improvements to make your code cleaner and more maintainable.

24:36 It can save you a significant amount of development time by catching issues early so you can focus more on building features instead of debugging. Code Rabbit also comes with a powerful new feature called change a stack. It immediately groups related code changes, adds AI generated summaries and make large pool request much easier to understand and review.

25:00 It also includes an agent chat where you can ask questions about the changes, understand the code better, and get instant explanations without leaving the review. I recommend using code rabbit for all your development projects, not just this one. If you are building projects with AI coding assistant or doing a lot of w coding, it's very common for a small bugs and code quality issues to slip into your project.

25:29 Code Rabbit helps you identify those problems quickly and even suggest how to fix them, making your development workflow much more efficient. Code Rabbit offer multiple pricing plan. With the free plan, you can review your code directly from the CLI and within your IDE. If you upgrade to the Pro or Pro Plus plan, you can also get automated AI code review on every pull request, making it perfect for team collaboration and professional development.

26:03 The pro plan also includes a 14 days free trial. And if you use the coupon code provided in the description below, you can get the pro plan completely free for 2 months. So just click on the link given in the description and sign up for code rabbit and let's integrate it into our project before we continue building our application. So I'll click on this get a free trial button and let me sign up using my GitHub account.

26:38 Now I'll click on this button authorize code rabbit. After sign up, it is asking to select an organization. So let's select this one and click on install. After that here you can choose the individual repository or you can select this all repositories and click on install and authorize. After that we'll click on this skip onboarding. After that we will click on this button add repositories.

27:19 So here we already have this builder AI that we want to analyze. Now after that we'll come back here in the GitHub and we'll go to settings and here let's go to GitHub apps. So here you can see the code rabbit is installed on this GitHub repo. So this code rabbit will analyze our code and suggest the improvements and bug fix. After that we have to create a new branch in our VS code.

27:50 So let me just come here and click on this three dot and select branch create branch and write the branch name. So I'll write development. After that click on publish branch. That's it. Now whenever we will add a new code, write a new code, we will commit the changes in the development branch and after that we will create the pull request. So the code rabbit will review the pull request and after review we can merge the changes from development branch to the main branch.

28:29 So after building the basic app and setting the AI code review tool code rabbit, now we will start building our project. And once we create our first feature, we will create one pull request to review our code using code rabbit. So let's start by creating the folder structure for our project. For that, let's come back to the VS code. Open this sidebar and in this one just create the folder structure.

28:56 So in this src we have a folder called API, then assets and utils. Now we'll create the other folders. So in this src create a new folder and write the folder name pages. In this one we'll add all the pages for our project. Now we'll add the next folder for the components. After that we'll create another folder. So let's add the folder name. We'll add the folder name context.

29:35 In this context folder, we'll create the context file to store the global states and function that will be used in entire application. Now after that let's start creating the pages also. So we'll come here in the pages folder. And here just create a new file and write the file name homepage.jsx. And here we'll add r a fce for creating the component structure.

30:13 After that we'll create the next page. So in this pages let's create the new file and write the file name o page.jsx. So this o page will display the login or registration form. Here also we'll create the component structure. After that we'll add the new page. So write the page name builder page dot jsx. Now we'll create the next page that is preview page.

31:03 After that we will create the next page that is publish page. And after that we'll add one more page that will be layout. So create a new file and add the page name or file name layout. Here also we'll add RAFCE layout. After that we will mount these pages on different routes. So whenever we'll change the route it will display different pages. For that let's open the app.jsx file.

31:41 And in this one you can see we have a return. In this return we have a div. So let's remove this div. And here we can use the routes. But before using the routes let me undo this to add the div. And before using the routes, we have to enable the routing in entire project. For that, let's come here in the main.jsx. Here you can see we have a strict mode.

32:15 So remove this a strict mode opening and closing tag. And here we'll add the browser router. We are not getting the suggestion here. So let's import it manually. Here just add import kal braces from and provide the package react router dom and from this react router dom we can get the browser router and provide this browser router here browser router opening tag and closing tag.

32:50 Now in entire application we can use the routing. So let's come here in the app dot jsx and in this app dot jsx let's create one routes. So we will add the routes tag and import this routes tag from react router dom. Close this routes and within this we will add one comment. So let's add comment called login routes. So in this login routes, we'll create another route.

33:29 So let's add route component. So let's click here to import it and close this route tag. So you can see we have added the routes and route both are imported from this react router DOM. Now in this route we have to add the element and in this element we will provide our layout. Let me correct it. We will add element equal to and then provide the opening arrow layout from pages like this.

34:11 And within this let's add another route and it will be self-closing. In this route we have to add the path. So the path will be / login. Then we'll add the element. And in this element simply provide the o page. O page has been imported here. In this o page we have to add the props. So let's add the mode and in this mode provide login. Now duplicate this one and in the second one we'll add the path register.

34:57 Then element and in this one also we'll add the o page and mode will be register. Right now after adding it, if I save the changes and uh come back here and here we'll add / login. So you can see it is displaying this layout at the top left corner because first we have mounted this layout here, right? But it should also display the o page. For that we have to modify our layout file.

35:29 So just open the layout. JSX. In this layout file, let's wrap this div inside a fragment. So it will display the text called layout. And after that here we have to add the outlet. So just add outlet and import this outlet from react router DOM. Save the changes and open the web page. So now you can see first it is displaying the layout and after that it is also displaying the O page correct because it is also mounting this O page from here from the pages.

36:17 Next we need the user data so that we can redirect the users. If the user is logged in then we will redirect the users on homepage and if the user is not logged in in this case we will redirect the users on login or registration page. For that we have to create one context file. So we have already created the context folder. Now in this context folder create a new file and write the file name app context.jsx.

36:46 JSX in this app context. Let's create a new context using create context. So just add con app context equal to create context and import the create context from React. And in this one simply add undefined. Now after that we have to create the context provider function. So just add export function app context provider. And here we'll get the parameter.

37:35 So just add the curly braces children. After that here we'll add the return statement and in this return simply provide app context dot provider. Close this tag and uh within this we will simply provide children and uh after that here we will provide the value. So in this value we can pass all the states and functions that will be used in entire application right.

38:21 So let's simply add value and in this one just add the empty object for now. So we have created one app context provider function. After that we'll add one function using that we can easily access this context. So here just add export function and add the function name use app context. Now in this function just add const context equal to use context and import the use context from react and provide the app context here.

39:11 After that we'll add the if statement. If context is equal to undefined. In this case we will throw the error. So just at throw new error and provide the message that is use app context must be used within an app context provider. And if it is false in this case simply return this context. So just add return context. So using this use app context we can easily access the context data.

39:45 Now let's create some states that will be accessible in other components. So here let me create the state for user. Let's scroll up and here let's add comment that is o states. Just add const and provide the state name that is user and setter function is set user equal to use a state and initialize it using null. After that we'll add const and the state name is loading user and setter function is set loading user equal to user state and initialize it using true.

40:38 So by default loading user will be true. Now we can use this user state in any component or any pages and based on this user we can display the homepage or login page. If the user is null then we will display the authentication page like login or register page and if the user is available in this case we will open the homepage or builder page and if the user is loading in this case we'll display the loading animation for that we have to create one loading component also so just come here in the components folder and

41:19 here create a new file and write the file name loading.jsx. Here we'll add r a fce for creating the component structure. And uh in this one we have a div. So within this div we will add one icon. So just add opening arrow loader to icon from lucid react. It has been imported from Lucid React. And here we'll add the size 26. And with that we'll add some Telvin classes.

41:56 So provide the class name property and animate spin text zinc 950. So we will add the class name property and provide the tailwind classes like height screen. Then flex item center justify center and background white. After that we can remove this import react. Save the changes and you can see we have exported this loading from here. So we can access this loading component in any file.

42:27 Now after that we have to enable the context in entire application. Then only we can use the context data anywhere. So let's come here in the main.jsx. Again in this main jx we have to wrap our application using context provider. So here simply add import curly braces from and provide the path that is dot / context/ app context. Let's simply add the app context.

43:04 It will work. And uh after that we'll add the app context provider tag here. And now we'll wrap our application using this app context provider. So after this browser router just provide this app context provider and this closing tag and within this mount the app. So now the application have the support of context. So we can access the context data in any part of this app.

43:36 After adding this app context provider tag now we will open our layout. So in this layout we'll add the functionality so that it will display different layout for different user states. So let me just remove this function from here and here we will create a new function and export it. So just add export function o layout and in this o layout we need the data from the context.

44:05 So just add const braces equal to use app context. Use app context has been imported here. And from this one we can get the user and with that we can also get the loading user. So we'll get both a state. We are not getting the suggestion here because we have not provided it in the value. So just open the context file again that is app context dot jsx and uh we have to pass our context here in the value object right.

44:44 So in this value object simply add user loading user save the changes. After that open the layout. Now if I type something we will get the suggestion. So we already have this user and loading user from context. Now after that let's add the if statement. If loading user is true. In this case we'll add the return and we'll return the loading component that we have just created.

45:22 So just add the loading component here and close this tag. After that let's add another if statement. If not of user in this case just add the return and provide the navigation or navigate tag. Let's add navigate and import this navigate from react router DOM. Now in this navigate we can use the two and provide the path. So just add the path / login.

46:07 Then we'll add replace. That's it. And after that we will provide return and in this return just add outlet. Now let's duplicate this function. Here we'll add the function name that is guest layout. For the guest layout again we'll get the user and loading user from context and we'll add if statement. If loading user is true, then it will display the loading component.

46:40 And if the user is true, it means when the user is logged in, then we'll add the return. And uh after that, we'll add navigate to homepage. Save the changes. So in this one, we have created the o layout and guest layout. It means this layout will be displayed when the user is authenticated and still if the user does not exist then it will redirect them to the login page.

47:14 This guest layout will open the login or registration page using this outlet. But if the user is already logged in then it will redirect them on the slash or homepage. Right. After creating it, we will open our main file that is app.jsx where we have created the routes. So in this one you can see we have added the layout. So instead of this layout we need the guest and o layout.

47:49 We will update this one. So let me rename it here. We will add guest layout and import this guest layout from here. Just add curly braces guest layout from the pages/ layout. See this import statement and uh similarly we'll create the other routes here. So just copy this one paste it here. We will add the command that is protected routes. In this protected routes, we will use the O layout and uh import this O layout from the layout.

48:38 See this importter statement we are importing the guest layout o layout from the pages/ layout and here we have added o layout and in this one we'll add the first route that will be for homepage. So just add slash and here we'll add the element and in this element let me provide homepage. Import this homepage. After that here we have the next route.

49:07 So just clear it. Copy this one only. Paste it here. We will add the path. It will be /builder slash and provide the project ID using / id. Here we'll add the builder page and import the builder page. Now duplicate it. In the next one we'll add the preview. So just add preview/ colon id. And here we'll mount the preview page. Just import the preview page.

49:39 Save the changes. After adding it, let me open the web page. Let's refresh it. So you can see it is displaying the loading animation because the user loading is true. If I come back to the context, let's open the context file. In this one, you can see we have added loading user true. So when the loading user is true, it will display the loading animation.

50:11 Now here if I change it, if I make it false and the user is null in this case, if I come back to the web page, you can see it is displaying the O page. It means in this O page, we can display either login or registration page. And it is redirecting us on this / login. Let me remove it and go to homepage. You can see it is automatically redirecting us on the login page.

50:41 Right? We cannot open the homepage. Let's try it. And you can see we are redirected to login page. Now just come back and instead of making it false, let's make it true. By default, it will be true. And here we'll make or create a function that will check the user state. So here only we will add o actions and provide const check session equal to asynchronous add function and uh in this function we will add the try catch statement.

51:27 Now in this try block we will make the API call. So simply add con data equal to await and here we will use the API. So let's add the API and uh we have to import it. So simply open the API dojs. Here you can see we have added the axios. AOS is imported and we have created the AIOS instance called API. Right? So we will use this here. Let's come back in the context and now if I type API you can see we are getting the suggestion to import it.

52:08 Let's click on this suggestion and you can see API is imported from dot dot/ API folder/ API file. Right now here we will use the method.get and provide the path. So the path will be / API slash O slash me. Save the changes. Now after that it will return some data. So just use set user and provide the data dot user. After that here we'll add the set user in the catch block that will be null.

52:55 Now after that we'll add the finally and in this finally we will set loading user and let's add false. So it will set the loading user false. Now after that we have to add the use effect to execute this function. So just add use effect. In this use effect create the arrow function and provide the dependency array. In this dependency add a just add check session and uh after that we'll add the check session function here.

53:36 Simply call this function. Now save the changes and open the web page. So you can see it is opening the homepage because it is returning some user data. Let's come here in the API. You can see this will return one user data that's why it is displaying this homepage correct. Now we have to design our login page. For that first we will see the o page.

54:06 So let's come here in the function that is check session function. So in this one you can see we are using this setter function set user. So just comment this one. If I comment it, it will not set the user. We'll come back here. Let's refresh it. You can see if I try to open the homepage, it is opening / login. And this is the O page. So now let's start designing our O page for user login and registration.

54:36 But before we create our login and registration form, let me commit these changes on GitHub and review our code that we have written till now. We have created the folder structure. We have created the pages and set up the routes. Right? So let's come back to the VS code. And here we will commit the changes. Let's click on this source control icon. And here we'll add the message created created pages and routes.

55:08 So it will commit the changes in development branch. That's it. After that we'll come back to the VS code. Let's come here on this repository. Here you can see this button compared and pull request. After that we'll click on this button create pull request. So we have created a new pull request and once we create the pull request. The code rabbit will start analyzing our code.

55:44 You can see the code rabbit is running. So it is analyzing the code and after analyzing our code it will suggest the bug fixes if there is any bug and it will also suggest the improvements and it will also generate the detailed review summary. It is still running. Now you can see all checks have passed. It means the code rabbit has reviewed our code.

56:12 And here we have the complete details of this code review. Here we have the review summary. And after that you can see the details of each files. So in this first file you can see it is suggesting add a fallback route for unmatched URLs. Right. And for this one here we have the prompt also. So we can simply add this prompt if we are using the web coding and it will add this fallback route.

56:45 Correct. Or we can go to the next one. Here you can see here also we have some suggestion that is add ro status in the loading component. And for this one here we have the prompt that we can use to implement this changes. And here we have the proposed fix also. So in this one it is also providing the exact code that we can manually add in our code file to fix this one.

57:14 Right? Similarly we have the suggestion and fix for each file. And we can see these changes and suggestions in the organized way using this review change stack. Just click on this button review change stack and it will open the code rabbit platform where you can see the entire summary and the each suggestions and bug fix. So it will open the code rabbit UI where you can see the files like this.

57:49 And let's come here in the layers and we'll click on this one. So here we have the files where we have added some changes. And if I open the right sidebar, it is also providing the details about this review for each file. Let's open the next one. And in the right side, you can see the details. After that, let me open the first one. If we open this file here, you can see we have the proposed fix that we have to remove this command.

58:21 So we have intentionally added this comment. We will keep it to display our o page and later we will remove this. So just skip this one. I'll come to the second suggestion. So here we have the suggestion stability and availability. So we have to update our check session in this one. So here it is suggesting to move it inside the use effect or wrap it using use call back.

58:51 And for this one we can use this prompt to update this changes or we can manually add it in our code. Now let's see the next suggestion. Let me open the route configuration. And in this route configuration, it is suggesting to add a fallback route. And here we have the option to update it using the AI. Correct? And we can manually add it in our code also.

59:24 To implement this fallback route, we'll come back to the VS code and open our app. JSX. And here let me add one comment that is catch all. And in this catch all just add one route. So let me just copy this one. Paste it here. Here we'll provide path. So in this path simply add star and after that we have the element. In this element we will use the navigate.

59:58 So let me remove it and provide navigate and import the navigate from react router DOM. In this navigate we'll add the path using this two property. In this two property simply add slash and then we'll add the replace. So when we will open any unregistered route it will open the homepage. After that let's come back here. So you can see all the suggestions here one by one and you can go to overview.

01:00:32 In this overview let's click on this see pull request description. After that see the walk through like this and uh after that in the right side you can see we have the agent. So in this agent we can write our prompt to ask any question about this pull request. So in this pull request we have created the context. So let me add one question about the context.

01:01:04 Is the context implemented properly? Send. So here we have the response using the agent and here we have the response in different steps. So first it is suggesting for comment out this code that is set user right and after that it is suggesting for the use call back and uh in the third one it is saying we are not exposing this set user. So we cannot use it in other files.

01:01:38 And here we have one minor issue about the network error that we will fix after building the back end and integrating the back end. Right? So this was the entire overview of the code review by code rabbit. And uh after the code review, we can merge the changes in the main branch. So let me just come back to the GitHub repo. Before we come back to the GitHub repo, let me implement one changes also.

01:02:04 And uh it will be here in the session context. And uh let's scroll down. So you can see we have one suggestion for this loading component. Right? In this one we have to add the role status. So here we have proposed fix. Just open it and copy this code. Let me just come back to the VS code and open the loading jsx. And here we will paste this code. And we will add this one here.

01:02:40 And let's remove this div. That's it. Now after that we will come back here and click on this link to come back to the repository. And here we'll click on this button merge pull request. Confirm merge. That's it. Let's come here in the main repository. So we have added the changes in the main branch. After that we'll come back to the VS code and uh click on this three dot then pull.

01:03:16 So it will pull the latest changes. That's it. Now after that we will start designing our login and registration form. For that here we have the authage.jsx. So just open this O page dot JSX file. In this O page first we'll dstructure the props. We'll add curly braces and here we'll get the mode from the props. After that here we have the return statement.

01:03:50 So in this return statement we will add a div. And in this div we'll add some Telvin classes. So just add the class name property and provided these classes and then we'll add the comment for the left and right side. So here just add the comment that is left panel that is for branding and then we'll add the right panel and in the right panel we'll add a form.

01:04:15 Correct? Now after that here we'll add the mode also whether the mode is login or register. So here let's create one variable. We will add cost is login is login equal to we will use this mode equal to we will add this comparison login. So if the mode is equal to login then it will be true else it will be false. Correct? Now after that in this left panel we have to display the branding.

01:04:48 For that we'll create a separate component. So let me open the sidebar and in this components create a new file login dot jsx. Here we'll add rafce for creating the component structure and uh after that here you can see we have a div. So in this div we'll add some classes just provide these tin classes and in this one you can see we have added the background.

01:05:18 in the background we have added the URL and /bg image.png that is available in our public folder. Now after that within this div we have to add the first div. So here we have to add one brand logo and the text and after that we'll add the second div. So in this second div we have to add some text and uh let's add the brand logo in the first one. In this first div we'll add the img and in this image src we will add / logo.

01:05:54 SVG because it is available in our public folder. Then in this alt tag we'll add the logo. Then we have to add the size. So just add the class name size 9.5. Then we have to add one text in a span tags. So the text is builder AI. After that we'll add the class name. So in this class name let's provide text for Excel font medium and text white. Now after that here we'll come to the second div.

01:06:28 So in this second div we'll add the text in H2 tag. So the text is build your presence on web. Then we have to add the text in P tag. So just add one P tag here. And in this P we'll add one small description like this. After that we'll add the another P tag. And here we have to add the text like copyright. And then we have to add the year. So we'll add curly braces new date dot get full year.

01:07:03 After that we'll add the builder AI. So we have added the copyright message. Now we'll add the classes for this copyright message. So we'll add the class name property and provided these classes. Then we'll add the classes for the another P tag which is here. So provide the class name here. And now we'll add the classes in the text that is written in H2.

01:07:37 Now we have added the logo then website title and other description. After that we have to mount this component. So we'll open the o page and here let's mount this left panel. So let's add the opening arrow left panel or login left and import it from the components. Save the changes. Close this tag. Now let me open the web page and here you can see on this / login path in the left side we are getting the logo icon text and some description at the bottom and copyright message.

01:08:15 Let's align the icon and text side by side. For that let me just come back here. You can see here we have created the div that contains the icon and text. So for this div we have to add the flex layout. So simply add class name flex item center gap 3. Save the changes and you can see it is aligned side by side. So we have created the left side of the authentication page and in the right side we have to create the form.

01:08:47 For that we'll come back to the VS code. Open page.jsx. Come here after this commandment that is right panel and uh here just create a div and in this one we will use the flex one so that it will use the entire space available in the row and flex item center justify center and padding. After that we'll add one more div here. So create a div. Here we'll add the width full and then we'll add the maximum width.

01:09:23 So the maximum width it will be small. Now in this one create a div that will contain our title right. So the title will be sign in or create an account and according to the title we will update the description also. So in this div we will add the classes that is margin bottom and after that we have to add the title in H1 tag. So let's add curly braces and use this is login variable.

01:10:03 If it is true in this case we'll add the title called sign in. And if it is false in this case we will update the title. It should be create an account correct. Now we'll add the classes for this title which is in H1 tag. So provided this classes also. Now after that we have to add the description in P tag. Now in this P tag again use the same turnary operator.

01:10:36 Just copy and paste it here. If is login is true. In this case, we have to add the message like this. And if it is false, we'll add the another message for user registration like this. After that provide the classes for this description also. So in this P we'll add class name and provide text small and text color it will be zinc 400. Right? Now after that here we have to add one message if any error occurs.

01:11:09 For that first we have to create the state. So let's scroll up and uh here we'll add const error and the setter function name is set error equal to use a state and initialize it using empty string. With that we'll add one more state. So let me just duplicate it. And here we'll add loading. And the setter function name is set loading. And by default it will be false.

01:11:48 Just add the false here. Now let's come here. So here simply add curly braces error. If the error is true in this case we will add the div. And within this div we will simply provide this error. And for this one provide some Telvin classes also using the class name property. Let's save the changes. And just after this error we can display our form. So just add the form tag here like this.

01:12:31 Let's save the changes and review the changes. So you can see here we have the title sign in and here we have the small description. Enter your credentials to access your website builder. Now let me change the mode. So if I make it like this not of login save the changes and you can see here we have create an account and get started by entering your registration details.

01:12:59 Right. Let's come back and change it to mode equal to login. Save the changes. Let's come here. And we can also change it by updating the route. If I change the route, it is login. So let's add register. You can see the message create an account. And if I change the route to login, it is displaying sign in. It works. Now after that we have to design our form.

01:13:31 So we will come back here. Let's come here. So you can see here we have to add our form. But before adding this form let's come here. Just after this form here we will add some message. So we'll add the P tag. And in this P tag we'll use the turnary operator. Use is login. If is login is true then we'll add this parenthesis and add the fragment right and if it is false then we'll add colon and another parenthesis and here also we'll add this fragment like this.

01:14:14 Now in the first one we'll add the text called new to builder. Then we'll add kibs and provide the space and after that we have to add a link that will change the route. So just add the link tag from react router DOM. Add the link opening and closing tag. And in this link we'll add the message called create an account. For this link we have to add the two property that is /register.

01:14:46 So it will change the route to register. And after that we have to add the classes. So we have added these classes here. That's it. Now after that let me just copy everything from here. Copy and paste it here in the second one. Here we will change the message. So it is already have an account. Then we'll change the path to login. And we'll change the message also.

01:15:14 So the message is sign in here. Let's save the changes and come here. So you can see here we have a text new to builder create an account. If I click on this create an account, you can see create an account. If I click on sign in here, you can see sign in. It works. It is changing the route. Now let me design our form. So I'll come back to the VS code and uh come here in the form.

01:15:43 Now in this form we have the action. So simply remove this action and uh in this one we will provide the class name property and provide the space y6. Now within this form again use the turnary operator not of is login and in this case we will get the user's name also right we will get the user's name and if the state is login then we don't need the name input field and to store the name email and password we have to create the state also.

01:16:20 So first we'll create those states. So scroll up and here let's add the state called name setter function name is set name and initialize it using empty string. Then we'll add the email set email and initialize it using empty string. Then we'll add the password set password and initialize it using empty string. And after that we'll add the toggle option to display or hide the password.

01:16:53 So here we'll add so password and set so password by default it will be false. Right? Now after that let's come here and uh in this one we will add one div. In this div we'll add the label tag. In the label tag we'll add the text called full name. After that for this label we have to provide some classes. So we have added these classes also. Then we have to add the input after this label.

01:17:23 So we'll add the input. Type is text. After this type, we'll add the value. So let's add the value and the value will be name state. Then we have to add on change. So in this onchange create the add a function and get the event in the parameter and after that it will call the setter function set name and provide e.target. target dot value. So when we will make the changes in this input field, the data will get saved in the name state.

01:18:00 After that we'll add the required property. So this input field will be required to submit the form. Then we'll add the class name. And here we have to add these classes. And at the end we'll add the placeholder also. So let's add the placeholder. And in this placeholder, let me add any dummy user's name. So we'll add this dummy name. Save the changes.

01:18:26 And after that, let's come here. So now you can see here we have the text full name. And here we have the input field. If I click on sign in here, it will be removed. And if I go to create an account and here it is asking for the full name. It looks good. Now let's come back and uh after that we'll add the next input field. For that let's simply copy this div and paste it here.

01:18:55 Now in this div we will update the text. So the text will be email address right and uh after that we have the same label tag here and after that we have the input. So in this input we'll add the type. Type will be email. Then we have to add the value. So the value should be email. Then we have the onchange. In this onchange we'll use the set email.

01:19:27 It will be e.target dot value. Required will be true. And then classes. So here again we are using the same classes. And after that we have to add the placeholder. So in the placeholder we will add the dummy email. So we have added this dummy email here. In the placeholder similarly we will add the next input field. So just copy this div paste it here.

01:19:55 In this one we will add the text called password. Label text is password. Then we will add the type. So in this type we will use the curly braces and use the so password. If the so password is true in this case we'll add the text and if it is false we will add the type password. Now we'll add the value. So the value will be password and uh here we will use the setter function set password.

01:20:32 It will be e.target dot value required true. Then we will update the telvin classes here. And at the end we have the placeholder. So in this placeholder we will add the dots like this. And uh after that within this div only here we will add one button so that we can toggle the password visibility. But before that let's wrap this input field inside a div.

01:21:04 So after this label create a div. In this div just add the class name and provide relative. And within this we will move this input and just after this input we will create a button. Now the button type will be button. After that we'll add the on click. In this on click add the add a function and let's add set so password and simply add not of so password.

01:21:44 So it will toggle it and uh after that we have to add some classes for this button. So we have provided these classes and uh in this one we have to add the icon. So just add curly braces and use the so password state. If it is true in this case we will add I of icon and import it from the lucid react and provide the size 14 and if it is false in this case we'll add the colon and provide I icon and it is also imported from lucid react and here also we'll add the size 14.

01:22:27 Save the changes and open the web page. So now you can see we have the name, email and password. And let's type something in this password. So you can see it is displaying the dots. If I click on this I icon, it will display the exact text. Let's click on this I icon again, it will hide it. So we can toggle the password visibility. Now after that, we have to add a submit button.

01:22:51 So just come back and uh after this div. So this div is for this one and here we have another div for this entire input field. So here just before this closing form tag we will add a button. Now in this button we have to add the type. So button type will be submit. Then we have to add the disabled property. So when the loading is true, it will be disabled.

01:23:22 After that we have to add the classes. So just add the class name property and here we will add these tin classes. Next we have to add the button text. For that just add curly braces. Use the loading. If the loading is true in this case we'll add the loader to icon from Lucid React. And for this icon we'll add the animation using the class name that is animate as pin height width and margin right.

01:23:57 And after that we'll add another curly braces where we have to add the text. So just add is login state. If it is true in this case we'll add the button text sign in and if it is false we'll add colon and provide the button text sign up. Save the changes and uh after that we will open the web page. So now you can see here we have the sign up button.

01:24:20 If I click on sign in, it will change it to signin form using the email and password and if I click on this create an account, it will open the sign up form with the name, email and password. So we have to add some space before this message. So I'll come back here. Here you can see we have this P. So in this P let me add the class name property and provided these classes.

01:24:49 Now we'll come back here. So you can see it looks good. Let's click here. It is changing the form from sign in to sign up. And you can see the button is also changing. It is sign up button. If I click here, it is opening the new form with button text sign in. Now we will add the functions also. Using that we can submit this form. It will either call the sign in or sign up function.

01:25:16 So just come back to the VS code and we'll create these functions in the context. So let's open the app context. In the app context, we have this use effect. So after this use effect, let's create a function and write the name login. So just at con login equal to ascaro function in this parameter we'll get the email and we'll get the password for login we need the email and password and uh after that we'll add the try catcher statement.

01:25:53 Now in this try block we'll make the API call or network request. So just add con data equal to await and use the API dot post method and uh in this one provide the path that is / API/ login and after that we'll add comma and here we have to provide the data that will be email and password for login correct and after this network request we'll get the response.

01:26:26 So use the set user and in this set user just add the data dot user. After that we will display the toast notification. So just add the toast. We are not getting the suggestion here. So let's import the toast first. Let's see the our package.json and see React hot toast is added or not. So it is already added react hot toast. So simply add this import statement import toast from react hot toast.

01:27:01 And after that let's type the toast dot success. In this toast dots success just add the message that is welcome back. And after that we have to navigate the users on homepage. So just add the navigate and get this navigate from react router DOM and simply provide slash that is for the home. Let me update this one. It is capital N. So let's update it.

01:27:42 We will use the navigate function from use navigate. Let's scroll up and uh here let's add con equal to use navigate from react router DOM and after that let's call it here navigate and in this navigate simply provide the path slash. Now after that come here in the catch block here we'll get the error and uh let's simply add console dot error. It will be login failed with the error.

01:28:18 Then we'll add con error message equal to error dot response dot error or we will add invalid email or password. Then we have to add the toast notification. So simply provide toast dot error. It will be error message. Then we have to add throw new error and simply add the error object with error message. Save the changes. So we have created the login function.

01:28:52 Similarly we have to create the registration function. So just copy this one and paste it here. Update the function name. So the function name will be register. In this one we'll get the three parameter that will be name, email and password. So just add name, email and password. After that we have the try catch. In this try block we'll make the API call using API.post and provide / API/register.

01:29:23 This is the endpoint. And here we'll add the data that will be name, email and password. After that we will use set user. It will be data do user and then we'll add the toast notification using the toast dot success and the notification message is account created successfully and navigate to homepage and if error occurs then we'll add console error registration failed then we'll add the error message here it is also registration failed then toast dot error error message and throw new error that's it so we have added

01:30:01 the login and registration function. After that we have to add these functions in the value so that we can access it in any other file. So let's come here in this value we'll add comma and provide login and register. Save the changes and now come here in the O page. In this o page, let's get the login and registration from the context. So here only we'll add con curly braces equal to use context or use app context.

01:30:42 Use app context has been imported. And from here we'll get the login and register. After that here we will create a function that is handle subummit that will submit the form. So just add con handle submit equal to async add function. In this function parameter we'll get the event and uh after that let's add e dot prevent default. After that we'll add set error and provide the empty string.

01:31:24 After that we'll use set loading and uh provide true. After that just add the try catch. In this try block we will check the mode. If the mode is equal to login. If the mode is equal to login in this case simply add await and call the login function. In this login function simply provide the email and password. After that we'll add the else statement.

01:32:01 In this else statement we will add await and call the register function. In this register function we'll add the name, email and password. And then we'll add navigate. So let's get the navigate here. In this one just add const navigate equal to use navigate and uh use navigate has been imported. Correct? And simply provide this navigate and in this one provide the path slash that is homepage.

01:32:41 Now after that come here in the catch block. Here we'll add error. And then we'll add set error like this. Then we'll add the finally block and in this finally block we will use set loading and we will make it false. That's it. Save the changes and uh after that we will come back here. But before opening the application or web page, let me connect this form with the submit function.

01:33:12 So here you can see we have the form tag. So in this form tag, let's add on submit. In this onsubmit, simply add handle submit function. Save the changes. Come back here. So now you can see here we have the sign-in form and sign up form. And uh if I add any details here, click on sign up. You can see it is opening the homepage. Right? Right now we have the dummy API.

01:33:54 That's why it will not create an account in the database. But it will redirect us to the homepage after successful sign up or login. So you can see now we are redirected to the homepage. It works fine. So we have completed our login and registration form. After that let me just come back here and in the context you can see we have added the comment in the check session.

01:34:18 So just remove this comment. We will uncomment this set user. So once the application gets loaded it will check the session and call the API and if the user data is available it will set the user so that instead of displaying the login page it will directly open the homepage. Now let's commit these changes and review our code. So here we'll click on this source control icon and we'll add the message created user authentication form commit changes and sync changes.

01:35:03 So it will commit the changes in the development branch. After that we'll come to GitHub repo. Let's go to development branch. and click on this open pull request then create pull request. So we have created a new pull request and now the code rabbit will start analyzing our pull request. Now the code rabbit has reviewed our code and here we have the review summary.

01:35:36 You can see somebody by code rabbit and after that if I scroll down you can see here we have review change stack where we can see the details about this review and let's scroll down and see the reviews here. So you can see it is providing the suggestion for this file that is appc context.jsx. In this one we have one minor issue and for this one we have this prompt using that we can fix our issue using the AI agents or we can manually fix it right.

01:36:13 So after that let's see the next one. So we have another minor issue in this o page jsx and here we have two options. We can use this AI prompt to fix the issue or we can manually fix it using this code. So it is basically adding this role in this element here. It is adding the HTML 4 and ID for this input and label. So this is the best practice to add the label and role and you can manually add it and the code rabbit is suggesting this best practice.

01:36:51 Now let's click on this one review change tag. So this is the core rabbit UI where you can see the details review and you can interact with the chat agent also. And in the right side you will find all the details of each line. You can see here we have the details of this line 32 to 66. Let's click here. You can see the details for this 21 and 21. So it is providing the feedback on each line where we have to update the code and uh after that here we have the agent.

01:37:30 We can ask anything from this agent also. So you can go through all these suggestions and bug fix just implement these changes in the code and after that you can make a new commit right and uh after that let me just come back here in the pull request and I'll click on this button merge pull request and confirm merge that's it now we will come back to the VS code and click on this three dot and then let's click on this pull.

01:38:09 So it will pull the latest changes. After that we have to add the UI on our homepage. So you can see right now we are on the homepage. So here we have to add the graphics on the entire screen and then we'll add the welcome message and one input field and uh below that we'll display the list of projects that is already generated. So let's just come back to the VS code.

01:38:34 Here we will open the pages folder. In this pages you will find the homepage.jsx. Now in this one let's remove this text and we'll add some classes for the first div. So provide the class name property and here we have to provide the screen height then overflow then we'll add the text color and uh after that we have added the font then background. In the background we will add the URL and the image path.

01:39:17 Right. So let me add double quote here [snorts] because we have already added the single quote here for this image that is bg image dotpng and uh after that we have provided the background cover background center and background no repeat. Now in this one we have to create the navigation bar. So let me provide the comment here that is nav and here we will use the nav tag.

01:39:48 Now in this nav tag we have to provide some classes. So simply add the class name property and these telin classes. Next we'll add one div where we have to add the logo. So we have added a div here and in this div we will add the flex layout. Then we'll insert the logo and text. For the logo, we will use the img tag. In this src, simply provide the path of the logo file or image.

01:40:18 So let's add the logo. SVG because it is available in the public folder. And in the alt tag, we can simply add the text called logo. And now in this image, we have to provide the size. So just add the class name size six. Next we have to add the blank text. So we'll add the text in a span tag and the text will be builder AI. For this text we have to change the text size and font.

01:40:49 So we have added the text excel font semi bold and tracking type. Now after that we have to add the user's name. Right? So first we need the user data from the context. So before this return we will provide const curly braces equal to use app context. Use app context is imported here. Right? And from this use app context we can access the user. Let me come back to the context file.

01:41:32 In this context file, you can see we have the value. In this value object, we have the user, right? So, we can access it in any other file or pages. So, now we have the user data here. After that, let's come here and uh just after this div that contains the brand logo and text, we will create another div. So this div will display the user's name and with that we'll add one log out button.

01:42:03 So let's add some classes to align the button and text. So we will add the flex layout. So we have added the flex layout, text size, font and text color. Then we'll insert the text in a span tag. So it will be our user dot name. Next we have to add one button that will be the logout button. So here we have added the button tag and just add the button text called sign out.

01:42:40 Now for this button provide some classes also. So I'll provide these TIN classes. Let me save the changes and we'll open the web page. So you can see here we have the color in the entire screen entire web page and here we have a logo in the top left side and in the top right side we have the user's name that is the dummy name and we have the sign out button.

01:43:12 Right now after that we have to add the hero section where we will add the welcome message some promo text we'll add some description and then we'll add the input field. So let's just come back here and after closing of this nav here let's add one comment called hero for the hero section here simply provide the div and uh in this div we have to provide some relevant classes.

01:43:39 So we have added these classes here and within this div we'll add another one. So we have another div here and here we have to provide the width and provide the layout. It will be flex flex column and item center. Now in this one first we have to add one small message that will be a small badge. So just add the comment here that is promotional badge or promo badge.

01:44:13 So let's add one div for this promo badge. In this div we'll add the span tag. In this aspan we'll add the text called promo. After that we'll add the another aspan. And here we'll add the text called create your first project for free. Now let's align everything. So in the parent div we have to provide the classes. So we have added these classes. Let's save the changes and come back here.

01:44:45 So you can see here we have the text promo and create your first project for free. Let's add the classes for this span tag also which is the first one. So in this first one provide the class name property and these delin classes. Let's save the changes and come back here. So now you can see this promo badge is looking good. After that we have to add one title.

01:45:08 So just come back here and uh let me add the comment also. So after this one we'll add the comment called title and for the title we will use H1 tag and in this H1 tag simply add the text called let's build your app together. Then we will add the class name and in this class name we are going to provide these TIN classes. Now after this title we have to add the description also.

01:45:36 So we will insert the description in P tag and in this P tag we will add this small text. Now for this description also we have to provide some classes. So we have added these TIN classes for the description. Let me see the changes on web page. So you can see here we have a title and a small description. Now after that we have to add one input field.

01:46:05 So we will come back here and uh we will wrap this input field inside a div. So first we will add a div here and inside this div we will create the input field. So let's add the class name and uh in this class name provide width it will be full and margin top six and here we'll add some comment also. So let me provide the comment that is prompt input with glasmorphic variant and uh here instead of simply adding the input field let me create a separate component because in this one we'll add different icons also.

01:46:48 So let's just come back here in the sidebar and uh in this one you can see we have the component folder. So in this component folder we'll create a new component. So create a new file and write the file name prompt input dot jsx. Now in this prompt input dot jsx we will get some data as props. So first we'll add rafce for creating the component structure.

01:47:24 And uh in this one let's destructure the props. So just add curly braces. And here we will get onsubmit. After that we'll get the loading. So let's add the loading false. Then we will get placeholder. So I'll provide the placeholder here. And uh after this placeholder we will add large false. Then we'll get autofocus it will be false. And then variant it will be default.

01:48:05 Right now in this one just create some state. So we'll create the state called value and search function name is set value equal to user state and let's initialize it using empty string. So this will be the input field value and after that we'll add the reference of the element. So just add con text area ref equal to use user ref and import the user ref from react and initialize it using null.

01:48:41 Now after that let's come here before this return. Here let's provide if variant is equal to glass. So if the variant is equal to glass here we'll add another return statement. So just add return and provide this parenthesis. And here we'll add a form. So let's add the form tag. So we have added a form tag here and in this form tag we'll add some classes.

01:49:18 So just add the class name property and provide these TIN classes. Now first we have to add one text area. So let's add text area tag and provide the self-closing tag here. Now in this text area we will provide the reference. So provide ref and it will be text area ref. Now after that we'll add the value and provide the value state. Then we'll add the onchange.

01:50:02 So we will provide the onchange property. In this onchange property, add one add function with the event in the parameter and then use the setter function set value and just add the e.target dot value. Now after that here we'll add on key down. In this on key down we'll add one function that we'll create here before this return. So let's add a function here const handle key down equal to arrow function and get the event in the parameter.

01:50:56 Right? And after that we'll add the if statement. If E dot key is equal to enter and not of event dot shift key in this case simply add e dot prevent default and after that we have to submit the data right for that we'll create one another function handle subummit right so just scroll up here we'll add con handle submit equal to add a function and in this one also we'll get the event as parameter and provide if statement if e in this case we'll add e dot prevent default after that we'll add con trimmed equal to our

01:51:57 value dot trim So it will remove the extra space from the beginning and end of the value that is written in the input field. And after that we'll add another if statement. And let's add if not of trimmed or loading. Then simply add return. Then we'll add onsubmit. And in this onsubmit provide the trimmed data. And after that we will use the setter function set value.

01:52:33 And we'll clear the value like this using the empty string. And let's call this function here in the handle key down. After e.pre default we can call this function handle submit. Correct. Now after that let's add this function in the form also. So here we have the form. So here let's provide the onsubmit and in this onsubmit we can provide the handle submit function.

01:53:03 Save the changes. Now after that let's come here in the on key down. In this on key down we can add handle key down. Next we'll add the placeholder. So we can simply provide the placeholder that we are getting from props. So just add placeholder. After that we'll add disabled property. So this field will be disabled when the loading is true. So just add the loading and after that let's add rows.

01:53:44 So provide the rows three and then provide some classes for this text area. So in this text area we have to add the width. It will be full. And we will add other tailwind classes like this. Save the changes. And uh after that let's add another div after this text area. So after closing off this text area we will add a div. Now in this div we'll add the flex layout to align the content.

01:54:18 So provided these classes here and uh then we'll add the label tag. So just add this label tag. In this label we have the HTML for. So in this HTML for we'll add the file and after that we have to add some classes. So we have added these classes and within this label let's add the input. So we have added input type. So let me add the type file so that we can upload a file here.

01:54:51 So input type is file and provide the id and in the id provide this file that is available in the HTML 4. After that we'll add the property hidden. So it will be hidden. Next we have to add the icon here. So just add opening arrow cloud upload icon and import this icon from Lucid React. We are not getting this suggestion here. So let me import it manually.

01:55:23 We'll add import and uh just add curly braces from Lucid React package. And from this lucid react let's get the cloud upload icon and uh just insert this icon here cloud upload icon and close it. Now in this icon we have to provide the size also. So let me set the size 18. So below the input field we have added one upload icon. Using that we can upload the files.

01:56:04 Now after that we have to add the another icon. Using that we can add the voice. So we'll add the mic icon and uh with that we will also add one icon like arrow right icon to submit this form. So just after this label we will create one div. So this div will be in the right side. So in the right side we'll add one mic icon and one submit icon that is the arrow icon.

01:56:42 And let's add the classes for this div that contains both icons. So provide the flex item center and justify end and the gap will be two. Now in this one just add the button tag. In the button we'll add the mic icon and import the mic icon from Lucid React and set the size. So again size will be 18 and uh after that provide the classes for this button.

01:57:18 So we have added these classes and provide the type also. So the button type will be button only. That's it. So we have added the type button. Now let me add another button tag. So just copy this one only. Paste it here. In the second one we will add type. So the type will be submit. Then we will add the classes here. So we have updated the classes as you can see here.

01:57:47 And after that we will add the disabled property also. So here we'll add the space. And you can see we will add the disabled. So it will be disabled when not of value dot trim. We cannot submit it when the value is not available or when the loading is true. In this case this button will be disabled. And after that in this button we have to add the icon based on the loading status.

01:58:20 So remove this icon and provide curly braces. And here let's add the loading. So we will check if the loading is true. In this case we have to add the loaded icon. So provide loader two icon from the lucid react and uh else we will add the arrow write icon. So add this arrowite icon. Import it. Now for these icons we have to add this size. So we will set the size 18 for both icon.

01:58:59 Here also we'll add 18. And in this one also now in the first one we have to add the animation also. So let's add the class name and provide animate a spin. That's it. Save the changes. So this layout will be displayed when we will provide the variant glass. Now if the variant is not equal to class it means the variant is default then we'll display another UI for that let's come here in the default return in this default return statement remove the text and for this div we will add the class name now we'll add the

01:59:40 dynamic class here so just add the curly braces and back text in this back X we will add these fixed classes and after that we'll use the dollar sign curly braces and insert this state large if it is true in this case we will add the padding four else we will add padding three that's it and after that here also we have to add the text area so I'll just copy this text area from here.

02:00:19 Here we have the text area. Let's copy and paste it here. So in this text area again we'll add the reference that is text area reference then value then on change and uh after this on change we have on key down then placeholder and after that disabled and uh then we have the rows and after that we have classes. So let me update the rows here. Here we'll check large.

02:00:54 If it is true then we'll add rows five else one. So we have added rows. If large is true then five else one. Correct? Now after that we have to update these classes. So in this one also we'll use the dynamic classes. So just remove it. We'll add the curly braces and back tick. And uh in this back tick first we'll add some fixed classes like this and then we'll add dollar sign curly braces and provide the turnary operator.

02:01:30 If large is true then text base else text small. After that we have to add a button. So just add the button tag and in this button tag we'll add curly braces loading. If the loading is true then we have to add the loaded icon. So just add loaded to icon and for this icon we will add the size. So for this size also we'll check the large state. If it is true then 20 else 15.

02:02:07 Then we have to add the animation. So just add the animate a spin and uh if the loading is false then we'll add the right arrow icon so that we can submit this data using the input field. So just add else statement provide arrow write icon. In this arrow write icon we'll add the size. So it could be 20 or 15 like this. Now we'll add the on click property on this button.

02:02:43 So in this button we'll add on click and uh simply add the add function provide handle submit. After that we'll add disabled. In this disabled we will add not of value dot trim then or loading. Now in this button provide some classes also. So provide the class name property and here we have added these classes and after that we'll add some custom styles.

02:03:23 So just add the style property object and provide the width. So the width will be either 36 or 24. And similarly we'll add the height also. So let's add the height. If large is true then height 36 is 24. Save the changes. Now in this component we have to add the functionality so that when we load the component then the input field will be autofocused.

02:03:54 For that here let's add one use effect. So it will execute this add function every time when you load the component. So we have added the use effect arrow function and provide the dependency array here. In this dependency array we'll add the autofocus. Now in this function simply add if statement if autofocus is true and text area reference dot current.

02:04:31 In this case, let's add the text area reference dot current dot focus. So it will automatically focus this input field when we load this component or our homepage. After creating this component, let me mount it on our homepage. So just come back here in the homepage.jsx JSX and within this div let's let's add our component that is prompt input. This component has been imported here.

02:05:04 In this prompt input we will add onsubmit and in this onsubmit we have to add one function. After that we'll add the loading. In this loading we have to add the state that is generating prompt. Then it will be loading. After that we have to add the placeholder. So let's add the placeholder text called create a portfolio website. Then we have to add the variant.

02:05:34 Let's add the variant here. And in the variant we'll add class. Next we'll add autofocus. Let's save the changes. And uh after that now you can see here we have some message like we have to provide the onsubmit here it could not be empty object right so I'll just come back here let's provide the empty arrow function here in this onsubmit and in this loading let's provide false we will save the changes and open our application so you can see here we have one text area And we have one upload icon.

02:06:18 Using that we can upload the files. And here we have the mic icon. And this is the submit icon. That is the arrow right icon. Now we'll come back here. And if I change it to true. Let's add loading true. Save the changes and come back here. So you can see here we have the loading animation instead of the arrow right icon. So this field will be disabled.

02:06:44 We cannot type here. And if I come back make it false. So this field is already focused. And here we can type anything in this text area. Next we have to display the list of projects. For that we'll create our project data in the context that we can share in different component. And we'll also create our functions that will be this onsubmit function in our context.

02:07:14 So let's come back to app context.jsx. In this app context dot jsx, we'll create some states first. So scroll up here you can see we have added author states. So after that let's add the other states also. So simply add the comment states and provide this state and we'll change the name. So state name is projects then setter function set projects equal to use state and initialize it using empty array.

02:07:49 Now duplicate it. In this one we'll add the loading projects and the setter function set loading projects. By default it will be true. Duplicate it. In the next one we'll add active project and set active project. Default value will be null. Now duplicate it. Here we'll add loading active project and set function set loading active project and initialize it using true.

02:08:30 After that we'll add chat loading and set a function set chat loading. Initialize it using false. Next we'll add generating project and the setter function name is set generating project. By default it should be false. Now duplicate it. Here we'll add active file and set function name is set active file equal to user state and provide slash app.js. Now after that just duplicate it.

02:09:11 Here we'll add so code and uh setter function set so code. Here we'll add use a state and by default it will be false. We will use it to display our code using sandbox and by default the active file will be app.js. Now in this context you can see we have already created the login and registration function. After this registration function we'll create the next function that will be for logout.

02:09:46 So let's add const log out equal to async arrow function. Now in this one we'll add the try catcher statement and in the try block we'll make the network request using await API dot post method and uh here we'll add the path. It will be / ai/ o/ logout. After that we'll add the setter function set user and uh we'll set the user null. After that set projects in this set projects provide the empty array.

02:10:31 Then we'll add set active project. In this active project we'll add null. After that we'll add toast notification. So we'll add toast dot success and provide the message that is logged out successfully. And after log out we have to navigate the users on login page. Right? So for that here we have the navigate function. So let's use it here. After this notification, simply add navigate and provide the path / login.

02:11:19 So it will open the login page after log out. Now come to the catch block. Here we'll add error. Then we'll add console. And then we'll add the toast notification that is toast. Login failed. To display the toast notification, we have to open our app dot jsx. And in this one, we have to add the toaster tag. So let's add one fragment in this return. Within this fragment, we'll insert this routes like this.

02:11:51 And uh before this routes, we'll add the toaster tag. Import the toaster from react hot toast. Just close it. You can see toaster tag has been imported. Now we'll come back here in the app context and we have created the logout function. After that we'll create the function to load the projects from API. Right? So let's add the comment here that is projects actions.

02:12:20 So just add the function that is con load projects and create a sync arrow function. So here we'll add the if statement if not of user. If user is not available in this case simply add return and if the user is available we will continue it. So just add the try catch and in this try block we'll add con data equal to await and provide the API dot get method and provide the endpoint that is / API/ projects.

02:13:00 Now after that simply use the set projects in this set projects provide the data. Now come here in the catch we'll add the error and provide console dot error. Then provide the toast dot error that is failed to load project list. Then we'll add the finally block and in the finally block we'll provide the set loading projects and make it false. So by default the set loading projects will be true.

02:13:34 It means the loading projects will be true and after that we'll make it false. And after that let's add another function to load the individual project. Right? So here we'll add the another function. So simply add const load project equal to async arrow function. To load the individual project we have to provide the project id. So just add the parameter here that will be ID and we'll add the next parameter that is silent equal to false.

02:14:10 So default value is false. Now again we will use the same statement. If not of user then return then we'll add if not of silent. In this case just add set loading active project and make it true. After that provide the try catch. So in this try block let's add this statement that is data equal to await API.get and provide the endpoint. So we will add the back tix here instead of quote just add the backix and provide / ai/ projects and slash dollar sign curly braces id.

02:14:59 So we'll insert the id in the parameter. Now after that just use the set active project and provide the data. Then let's add the command default file selection. So here we'll add con file equal to object dot keys data do files. Then we'll add if statement. If files.length length is greater than zero. In this case, we'll add set active file and uh in this one insert one add a function.

02:15:43 Here we'll get the previous data and then we'll add if statement if file dot includes and previous. If it is true then simply add return previous. Then we'll add another if statement files doinccludes app.js. Then we'll add return app.js. After that we'll add the return and provide the file using this files index zero. Then we'll add the statement in the catch block.

02:16:24 So just come here in the catch block we'll add the error. Then add console dot error. Then we'll add if statement if not of silent. In this case just add the toast notification using toast dot error. And then we'll add the navigate. So we'll navigate the users on homepage. Then we have to add the finally block. So here we'll add finally. And uh let's add if not of silent then provide set loading active project and make it false.

02:17:08 After that we'll automatically call the active project a status. So let's add the command here. automatically Paul active project a status and uh let's add if generating or pending right so if the status is generating or pending it will automatically try to fetch the latest update so here we'll add the use effect in this use effect we have added one add function and then comma dependency array in the dependency array we'll add the active project if it is available then dot underscore id then add comma active project

02:18:00 dot status then comma provide the load project then provide user. So if any of these data changes then it will execute this add a function. Now in this one just add if not of active project dot id or not of user then simply add return. Next we'll add const is ongoing equal to active project dot status is equal to generating it means the it is generating the project.

02:18:43 Then we'll add or active project a status is pending. If the status is pending or active project dot a status is equal to revising. So in these cases this is ongoing will be true and when ongoing is true just add the if statement. If it is true in this case we will use set chat loading make it true then we'll add con interval equal to set interval in the set interval add the arrow function and provide the time 2,000 mconds and in this add function let's add load project in this load project provide the active project

02:19:45 dot id and comma true after this here we will add the return and provide the arrow function like this and simply add clear interval in this clear interval provide our interval now we'll add the else statement also In this else statement, we'll add set chat loading and make it false. Save the changes. Next, we have to add another function using that generate the project.

02:20:19 So, just add con handle generate equal to use call back. In this use call back, let's add asynchronous add function. And after that we'll add comma and dependency array it will be navigate and user. Now in this function we have to add the prompt as parameter because using the prompt we have to generate the project. So let's add if not of user then simply add return.

02:21:02 Then we'll add set generating project and make it true. Then to generate the project we have to make the network request. So we'll make it inside the try block. So we have added try catch and here we'll add con data equal to await API.post and provide the endpoint/ API/ projects and provide our prompt that will be used to generate the project. Then we have to add the notification.

02:21:26 So just add to dot success and uh let's add the message AI agent is planning a structure. Then we have to add the navigate here. So just add navigate and we will navigate the users on builder page. So just add the back tick path will be /builder/ then data dot id that will be the project id and come here in the catch. In this catch we'll add the error.

02:21:57 Then add console dot error. Then we'll add the toast notification. So just add toast dot error. And then we'll add the finally block. In this finally block we will add set generating and provide set generating project. Make it false. That's it. So we have created this handle generate function. After that we'll add another function that is handle delete.

02:22:25 So let me just copy this one only. Paste it here. And this one just change the name. It will be handle delete. And uh let's add the parameter. It will be ID. And here we'll add if not of user then return. Then we'll add the try catch. In this try block we'll add await API dot delete. Then we'll add the end point. So simply add back text / API/ projects and provide the project ID using dollars and curly braces.

02:23:08 Then we'll add the setter function. So let me clear this. And here we'll add set projects. Provide the arrow function with the previous data in the parameter. And provide the previous dot filter. And uh here let's get the individual project and provide p dot id not equal to id. Then we'll add toast dot success and uh let's add project deleted successfully.

02:23:53 Now we'll update the code in the catch block. So here we'll update this console dot error and then toast dot error and from here we can remove this finally block. Let's update this dependency. So here we'll add only user. That's it. Save the changes. So we have added the handle delete function also. After creating these states and function let me pass it through this value.

02:24:20 So in this value let's add comma and provide the projects. Then we will add loading projects. Then we will add active project. After that loading active project then chat loading. Next we will add generating project then active file. After that so code then user is already there and uh next we'll add set active file. After this set add tip file we'll add set so code.

02:25:05 Then we'll add load projects. This is the function. After that load project function that will load individual project. Then handle generate function. After this handle generate we'll add handle delete. Now we can access these state and function in any component. So let me open the homepage dot jsx file and here we'll get the required data. So from this use app context we'll get the user.

02:25:39 After this user let's get projects then we will get the loading projects. After that generating project then load projects function. After that handle generate function. Next we'll add handle delete and uh then we'll add the log out. After that let me connect this log out with our nav bar. So in the navbar you can see we have this button right? So in this button we'll add on click and in this on click simply add log out.

02:26:27 After that scroll down you can see here we have the prompt input. So in this prompt input we have onsubmit. So in this onsummit we can provide our handle generate. So it will generate a new project and in this loading just add generating project. So when the generating project is true then the loading will be true. That's it. Now save the changes and uh we'll come back here.

02:26:58 So you can see it is displaying our input field here and when we enter the prompt and submit this form it will execute this handle generate function. Now just below this we have to display the list of projects. But before that we have to add some tags also. So let me just come back and uh after closing off this div that is for the input area or text area here we will add the comment scrolling marku tags.

02:27:32 So let's add one div here. In this div provide these classes. Then we'll add another div. Here we'll add the animate mark and we will write the gap three. Now we have to display our list of tags. So just add the curly braces and get home tags. We are not getting the suggestions. So it is available in the assets. If I open assets.js, you can see it is available here.

02:28:08 So after opening it, if I start typing home tags, we are getting the suggestion to import it from the assets. It has been imported. Now we'll add home tags dot map. It is an array. So we can use the map method. And then we'll add the add a function. Here we'll get individual tag and index. Then we'll add parenthesis and return a button. So just add the button tag.

02:28:37 So we have added a button tag here. And button text will be our tag. Now in this button provide the key property first. So let's add the key. It will be our index. Next we will add the on click. So in this onclick property simply add add a function and provide handle generate. And in this handle generate we have to provide the prompt. So the prompt will be our tag.

02:29:08 Next we'll add the disabled. So in this disabled again add the same thing that is generating project then it will be disabled then we'll add the class name and uh here we have to add the TIN classes like this save the changes after that let's come here so you can see here we have the list of tags which is scrolling horizontally after that let me just come back here.

02:29:43 Here we will provide this space and provide the comment that is all projects. So we have to display all the projects here. Just below this comment let's add the curly braces and we will add not of loading projects and when the projects do.length length is greater than zero. It means we have the projects available then only we will display the project here.

02:30:15 So we'll add and operator and this parenthesis. Now within this parenthesis simply add a div to display our projects. Now in this one we'll add the class name and provide margin top and then provide the width full. Here we have to add one title and uh in the right side we'll display the number of projects. So let's create one div. Here we'll provide the classes that will be flex layout to align the title and number of projects side by side.

02:30:54 So just add the P tag for the title. So the title is all projects. Then we'll add the number of projects in the span tag. So just add the span and in this span just add the projects dot length. After that we have to add the text like project or projects. So here again use this same thing projects.length is equal to 1. In this case, we will add the string that is project.

02:31:37 Else we will add the string that is projects. Now provide the classes here. So start with the P tag. In this P tag provide the class name and these classes. Then we'll add the classes for the span tag. So we have added these classes here in the span tag. Save the changes and come back here. So now it should display the all projects and number of projects here.

02:32:05 So let me refresh this web page after reloading the web page. It is not displaying the projects here because we have to load the project first. We have to call that function load project. So here in the homepage just add the use effect. In this use effect add the arrow function and a dependency array. In the dependency array we will provide the load projects.

02:32:32 And in the function simply call the load projects. Save the changes. And now it will call this function and then you can see here we have all projects at the bottom and two projects it is visible. After that we have to display the list of projects. So just come back to the VS code. Scroll down and uh just after this div which is here let's add a space and here we'll add a div provide the classes here.

02:33:14 So we'll provide the space Y2 then maximum height and overflow and padding right. Now use the curly braces and projects dot map get the individual project in this parameter of the arrow function and add the parenthesis. So it will directly return this div. Now for this div we have to add the key property and in the key let's add p dot id. Then we will add the classes.

02:33:48 So just add the class name and uh here we will add these delvin classes. And next we'll add the onclick property here. So let's add on click. In this on click we will add the add function and provide the navigate. So let's add the navigate also from use navigate. We'll add con equal to use navigate from the react router DOM. After that let's come here and provide the navigate function and in this navigate function we can provide our path that will open the project page.

02:34:38 So just add the back ticks/ builder/ dollar sign and curly braces and provide the project dot id. So it will open this path. Now within this we have to add a div again. So in this first div we'll add the project name and then we'll add the updated date time and we'll add the version and then we'll create the another div. So this is the second div and in this one we'll add some action buttons.

02:35:24 So start with the first one. In the first one, just add flex one and minimum width zero. Now create a P tag here. In this P tag, we'll add the name. So just add P dot name. Now for this name, provide some classes. So we have added these TIN classes. Next, we'll create a div just after this P tag. Here we have to add the date, time and clock icon. So just add these classes and then provide the span tag.

02:36:05 In the span we'll add clock icon and import this clock icon from Lucid React. And for this icon set the size 10 and after that we have to display the time. So just add P dot updated at or P dot created at and after this span we'll create another span tag in this we'll add the V for version and just add the P dot version. Now for this version we'll add the classes like this and then we'll add the classes for the span that contains our icon and date time.

02:36:56 Let's save the changes and open the web page. So you can see here we have all projects and now you can see the project name and below that we have the version v1 and here we have the time. So now let's update the date time format. For that we'll use the moment package that is already installed. Right? So just import the moment here. Let's scroll up and provide import moment from the moment package and uh let's come here and instead of simply adding this p.tupdated and p.treated got created.

02:37:37 Here we can use moment and uh in this moment function let's provide this one and at the end we will add dot from now. Save the changes and let's see the updated data here. You can see now it is displaying the time like 3 hours ago, 1 day ago. It looks good. Now we have to display the actions and buttons. So just come back and uh we'll come here in the another div.

02:38:13 So in this div again we have to add the flex layout. So we have added these classes and then we'll add a button. So we'll add the button tag and uh after this button we have to add the arrow icon. So let's add opening arrow arrow right icon. Now in this icon we will set the size 14. Then we will add the classes. So just add the class name property and these classes.

02:38:44 After that we have to provide the button text here. So instead of adding the text here also we'll add the icon that is trash icon. So just add the trash icon imported from the Lucid React and then add the size 14. Next, we will add the onclick property on this button. And before adding that, we'll add the classes. Let's add the class name and provide these classes.

02:39:13 Next, just add the on click. In this on click, add the arrow function and uh provide the event in the parameter here. Just add E dot a stop propagation semicolon and provide the handle delete function. In this handle delete, we have to provide the project ID. So just add P dot ID. Let's save the changes. After adding it, let's come here. So you can see in the right side, we have the arrow icon.

02:39:47 When we click here, it will change the route. It will open the builder page where we can update this project. And if I hover it, you can see here we have the trash icon or delete icon so that we can delete this project. After that, let me click on this project. So you can see it is opening the another route that is builder/ project 1. That is the project ID and you can see it is opening the builder page.

02:40:20 So we can click on any project to open the project builder page where we can update this project or we can publish this project. We can preview the project. So we have to design this project builder page. But before that let me commit these changes and review our code. So just come back here. Here we'll open the sidebar. Let's click on this source control icon.

02:40:45 We'll add the message. So just add the message created homepage commit changes and sync changes. So it will commit the changes in the development branch. After that we'll come back to the GitHub. Let's open the repository. So here you can see this button. Let's click on this button compare and pull request. So click on this button create pull request.

02:41:24 So once we create a new pull request then the code rabbit will start analyzing our code. Now you can see the code rabbit is running and it is analyzing our code and after analysis it will display the suggestions, feedback and review summary. Now our review has been completed by code rabbit and here you can see we have the review summary. So these are new feature added in this update and here we have some UI improvements.

02:41:56 After that if I scroll down you can see we have some suggestions. Here we have some minor issue for this handle submit and uh it is also suggesting this fix right after that let us scroll and see the next issue or suggestions. So here we have the major issue. It says [snorts] the unmemorized load project and uh load projects. So it is suggesting to wrap this inside the use call back.

02:42:33 So we can add inside the use call back. And after that let's see the next one. Here it says it is also critical issue. Here we have used the logout function in the homepage right and uh it is not exported using this value object in the context. So we have to insert this log out inside the value object in app context. So you can see the suggestions and bug fixes using this code rabbit.

02:43:06 So let me implement this one. I'll just come back to the VS code and open our app context. And uh in this app context we have this value object. Here we have the login register but we didn't add the logout. So just add the comma and provide log out. Save the changes. After that let me just come here and uh you can click on this button merge pull request and confirm merge.

02:43:41 After that let's come here in the VS code. We'll click on this three dot and pull. So it will pull the latest changes in the VS code. So after completing our homepage, next we have to create our builder page. Let me just come back to the application. So you can see this is our builder page. So we have to design this page. To create our builder page, let's open the sidebar and here you will find builder page.

02:44:13 JSX. Now in this one, we need some data from context. So here we will add con and extract the data from use app context. Use app context has been imported. Now from here we'll get the active project. After that let's get the loading active project. After that let's get the active file then we'll get so code then set active file after that set so code then we'll get the load project to load the individual project data then we'll get the log out and we are getting all these data from context.

02:45:16 Now after that here we need the ID also. So if I open the web page you can see we have the ID in the URL right? So we have to find the ID from URL. For that just add const curly braces id is equal to use padams. So here we are getting the id and after that let's get the navigate function also. So just add con equal to use navigate and uh let's import this use navigate from react router DOM.

02:45:57 After that here we have to create some state. So I'll provide const left tab and set a function set left tab is equal to use a state and let's initialize it using chat. So we have the initial value chat in the left tab. After that we'll add the another state. So just duplicate this one only. And here we'll add a state name called publishing and setter function name is set publishing and by default it will be false.

02:46:33 So just change it to false. Again duplicate it. Here we'll add the next state. So the next state is publish URL and the setter function name is set publish URL. So let's initialize it using null. So the publish URL will be null by default. Save the changes. Now after that we have to load the project data. For that here we will add one use effect. In the use effect create the arrow function and provide a dependency array.

02:47:13 Now within this function first we'll check the ID is available or not. So if I add not of id in this case simply add return and stop the execution of this function. Now suppose the id is available in this case we will use the load project and provide the parameter that is ID. Now after that here let's add the dependency. So in the dependency we will add the id and load project.

02:47:39 So if any of this changes it will again reload the project data. Now after that we'll add another use effect. So I'm going to copy this one only. Paste it here. Here in this one we'll add if not of id or not of active project. In this case we'll add the return and after that we'll add next if statement. Again we'll add the if and here we'll use the active project dot status.

02:48:17 So we'll check the status of our active project. So if the status is equal to pending or active project dot a status is equal to generating. So in this case we have to wait for few more seconds. So let's add const interval equal to set interval. In the set interval create the arrow function and provide the time 1500 milliseconds. And here let's add the load project again.

02:48:58 In the load project provide the ID and comma true. Now after that here we can add the return and in the return simply add the arrow function that will call our clear interval. In the clear interval provide the interval that is available here and now update the dependency here. So in the dependency we have added the id then load project and then we'll add comma active project.

02:49:32 So now it will fetch the individual project data and we'll get the project ID from the padams. After that we can display these data on our web page. So let's scroll down and here we have the return statement. But before this return, let's add one if statement. And here we'll add if loading active project or not of active project. So if the active project is still loading or project is not available, it means active project is not available.

02:50:12 So in this case, simply add the return and we'll return the loading component. So let's add the loading and import it from the components folder. It has been mounted. Save the changes. So if the project is loading then it will display the loading component. Else it will come to this another return statement and here we will clear this text and let's add some classes for the parent div.

02:50:37 So here we'll set the height using height screen and flex layout with the background white and uh we'll add the text color and relative. Now within this we have to add the header section of our builder page. So to display the header we will create a separate component. For that let me just add one comment here that is top bar or header. Right. And after that we'll add the next command that is main layout.

02:51:09 So we have to add the header and then main layout. And to create this header let's create a new component. So let me open the sidebar components folder. And in the components folder create a file called builder header.jsx. Let's add rafce for creating the component structure. And here we will dstructure some data from props. So let's add curly braces and here we will restructure the project name after that version then so code after that publishing then on toggle so code then on open preview then on publish then on

02:52:03 download then on back and on log out. So we'll destructure these data from props and let's come here in the return. In the return we will remove this div and we will use the header tag. So we have added the header opening and closing tag. In this header tag just add some TIN classes like this. Now after that we'll create a div where we will add the back arrow icon.

02:52:36 Then we'll add the logo then project name and version. So to group all these we'll create a div and provide the flex layout for this div. Now in this div first we have to add a button tag where we will insert the back arrow icon. So let's add the arrow left icon from the Lucid React and in this icon set the size 16. Next we'll add the classes in this button.

02:53:11 So in this button tag provide these Telvin classes. Next we'll add the on click. So let's add on click and in this on click we have to provide on back. After this button we have to add our logo. To insert the logo we will use the image tag. And in this image src let's add / logo. SVG. So this SVG file is available in the public folder. After that provide the classes for this logo.

02:53:48 So we have added the invert and size five. Next we have to add the project name. So insert one span tag. In this span tag just add curly braces and provide the project name. Then we'll add the classes. In this project name. So we have added these classes. And then again one span tag. In this one we have to add the version. So just add the version. And before that we'll add V.

02:54:15 So we'll add some classes for this version also. So just add these classes. Save the changes. So we have added this row with the back arrow icon, logo, project name and version. Now we'll add another div. So create another div here. In this one provide the flex layout again. So we have added flex item center gap 1.5. After that here we have to add a button.

02:54:51 In this button we will add the toggle option to display the code or hide the code. So let me provide button tag. In this button tag we will use the turnary operator. So just add the so code state. If it is true then we'll add the parenthesis and fragment. Within this fragment just add the I icon imported from Lucid React and in this I icon we'll add the size.

02:55:23 So just add the size 13 and just after this icon we have to add the text also that is preview. Now after that we'll add the else statement. So here we'll add colon and another parenthesis and just copy this one. Paste it here. Here we'll add the code to icon and import this icon from Lucid React. Here we'll add the text called code. Now we have to add the classes in this button and one function.

02:55:55 So just add the onclick property and uh in this on click provide our function that is on toggle. flow code then provide the classes. So we have to add the dynamic classes. So let's add the curly braces and back tick in this one. Let me provide the fixed classes first. So we have added these fixed classes and after that insert the dynamic classes using dollar sign curly braces and just use the so code state.

02:56:29 If it is true then provide background and text color. Else we will add the empty string. So just add colon empty string. Save the changes. So we have added one button for the toggle code view. Next we'll add the another button. Using that we can display the preview. So after closing up this button create another button. We have added another button tag.

02:56:59 In this second button we'll add on click property. In this on click just add on open preview. Then add the classes. So we have added the class name property and these classes. Now here we have to add the icon. So let's add the opening arrow and provide external link icon from Lucid React. Then add the size 13 and just after this icon we'll add the text also that is open preview.

02:57:35 So we have added the button for open preview. Now we'll add the next button. So here we'll add a space and provide the button tag again. And this button we'll add on click and simply add on publish. After that we'll add disabled. So this button will be disabled when the publishing is true. So just add publishing. Then we'll add the classes. So let's add the class name property.

02:58:08 And we have added these classes. Now here we'll add the curly braces and use the publishing state. If the publishing is true in this case we have to add the loading animation. So just add the loader to icon from Lucid React and uh provide the size and animation using class name animate a spin and if it is false then add the colon and provide the globe icon.

02:58:45 Import this icon from Lucid React and with this icon provide the size 13. That's it. And after that we'll add the space here and provide publish. Save the changes. So we have added the button for publish. And if the publishing is true, it will display the loading animation inside the button. After that we have to add the button for download. Using that we can download the code.

02:59:12 So after this button add another one. In this one add on click. In this on click add on download. Then add the class name. And uh here we have added the same classes. And after that let's add the icon. So I'll just copy this icon and text paste it here. Let's update our icon. So we'll add download icon and import it from lucid react. Size will be 13 and the text will be export.

02:59:53 Correct. Now after that we'll add the last button. So let me just duplicate this button only. Here we'll add on click. It will be on log out. Then the classes will be same. And just update the button text. It will be sign out. So remove this icon and simply add sign out. Save the changes. So we have created this complete component and now we'll mount this component on our builder page.

03:00:23 So we will open the builder.jsx and here only we will add builder header from the components. After that here we have to provide the props. So first we'll add the project name. So in this project name just add the active project dot name. Then we'll add the version. In the version just add active project dot version. After that we'll add the so code.

03:01:05 In the so code provide the same so code. Then we'll add the publishing. Here also we'll add the publishing. After that we'll add the on toggle so code. It will be one adder function and provide set so code provide not of so code. Next we'll add on open preview. In this on open preview we'll add a function. So let me create that function first. That is handle open preview.

03:01:47 Let's add it here con handle open preview. It will be one add function. In this handle open preview let's add if statement. If not of id then simply add return else we'll add the window dot open and uh provide the path. So just add back text / preview/ dollar sign curly braces and provide our id. So it will open this path. Then we'll add comma blank.

03:02:35 So we have added handle open preview and let's provide this function here in on open preview. After that we'll add on publish. So just add on publish. In this one we will add the next function that is handle publish. So let's add this handle publish here using the con handle publish equal to async arrow function. Let's keep this function empty for now.

03:03:12 And uh after that let's add the function here that is handle publish. Now we'll add our next props. So it will be on download equal to and in this on download we'll add the handle download and let's create this handle download also. So just duplicate this one write the name handle download. Let me remove this. So we have added handle download function here.

03:03:46 And uh let's add our next props. So the next props is on back. In this on back we'll add the arrow function. Simply call our navigate function and provide the path. It will be slash that is the homepage. Now we'll add on logout. In this on logout we will call our logout function. Save the changes. After mounting this component and providing all the props, let me just open our web page.

03:04:24 After opening this web page, you can see the top bar is continuously reloading. So, let me just come back here in the VS code and uh here you can see we have added this use effect where we are loading the project using load project. So from here we will just remove this dependency called load project. Save the changes and come back here. Now you can see here we have the top bar where you can see the back arrow icon.

03:04:52 Then our logo and then we have the project name and then we have the version v1. In the right side we have this button for code that will toggle the state. Then we have the open preview. Then publish, export and sign out. After that we have to display our main content. So we'll divide this main content area in two part in the left and right side. So just come back to the VS code.

03:05:28 Scroll down. Here you can see we have this main layout. So under this main layout create a div and create the flex layout here. So we have added flex then overflow hidden and here we have added flex once. So it will use the entire space available in the row. Then we have to add the layout in two column in the left and right side. So just add the comment for left sidebar.

03:06:00 After that we'll add the comment here that is preview or code area. So here we have to add the sidebar and in the right side we'll display the preview of the generated project or we can display the code also. So let's start adding the content in the left sidebar. So in this left sidebar create a div and uh for this div we'll set the width. It will be 320 pixel.

03:06:26 Then we'll add the shrink zero flex flex column border right and uh border color and background. Now in this one we have to add the tabs. So just add the comment that is sidebar tabs and here create a div. Now in this div just use the flex layout provide the border bottom and border color. Here we have to add the button for each tabs. So just add the button here and uh in this button we will add the icon.

03:07:05 So let's add message squared icon and import this icon from Lucid React. Next provide the size for this icon. And after adding the size we have to add the text. So the text is chat. After that here we will add the on click property. Let's add the on click. And in this on click we will add the add function. And in this add a function we will use one setter function that is already created above.

03:07:45 So just add set left tab and let's add the value here. So the value will be chat. After that we have to add some classes in this first button. So provide the class name property and insert the dynamic classes using this template lit. So just add the fixed classes first. So we have added these fixed classes. Then insert the template lit like this. Here we'll add the left tab equal to chat if it is true.

03:08:19 In this case just provide these text color border color and uh border. Then we'll add the colon for else. Here we'll update the color for left tab. Save the changes. Now after adding it if I come back here you can see here we have the left sidebar where you can see the first tab that is chat right now after that let me just come here and just duplicate this button.

03:08:53 So we have added another button in this second button we'll add the left tab or set left tab it will be files. So in the left side we can display the chat or we can display the files right now after that here we will use the classes again. So here also we have to add some dynamic classes. So let's update it like this. Now we'll update the icon. So it will be folder tree icon.

03:09:30 Import this icon from Lucid React. And then we'll add the text. So the text will be files. Now let me just come here. You can see here we have chat and files. Let's click here. So the files is enabled. If I click here, the chat is enabled. Now after that, let's come back here and here we'll add the next comment just after this div. So provide the comment that is sidebar content.

03:10:07 So just below this sidebar content create a div. In this one we'll add the flex one overflow hidden. Then we'll use the turnary operator. Let's add curly braces. Left tab is equal to chat. So if the left tab is equal to chat in this case we'll add question mark parenthesis and uh here we have to display the chat panel. So let's add a div and add the text chat panel.

03:10:53 After that we'll add the colon parenthesis. And here we'll add another div. Here we have to display the file explorer. So let's add the text called file explorer like this. Save the changes and we'll come back here. So now you can see it is displaying the chat panel here. If I click on files, it is displaying file explorer. So we have to create the separate component for chat panel.

03:11:20 and uh file exploder that will be displayed here. To create these components, let me just come back to the VS code and uh here let's create a new component called chat panel. So just open the sidebar components and in this folder create a new file chat panel dot jsx right rafce for creating the component structure. Now in this one we'll destructure some props.

03:11:54 So we'll get the messages that will be displayed in the chat area. Then we'll add the function on send and uh then we'll add the loading. After that we have to scroll the chat section when a new message comes. Right? So we have to add one reference. So just add const bottom ref equal to use ref and get this use ref from react and initialize it using null.

03:12:28 Now after that here we'll add one use effect also. So just add use effect. In this use effect add the add function and provide the dependency array. In the dependency array just add the messages. So when the messages are changing it will scroll the chat box then we'll add the loading also. Now in this function just use the bottom reference dot current dot scroll into view and here we will add the behavior it will be auto.

03:13:10 So it will scroll the chat box at the bottom. Now come here in the return. In this return we'll create a div. So we already have this div and in this div we have to add the flex layout with the white background. Then we'll display the messages. So just add the messages comment here and uh after displaying the messages we have to add one input field also.

03:13:35 So let's add the comment here for input. Using this input field we can add our new chat message. So first we'll display the messages. So here under this messages command create a div. Let's add some classes in this div. So we have added these telin classes. And after that let's use the messages array. So just add the messages dot length is equal to zero and parenthesis and here provide a div.

03:14:07 So if the messages length is zero in this case we have to display one message. So let's wrap this message inside a div and add these classes and within this div create the message in p tag. Now in this p tag we'll add the message ask AI to modify your website. Then provide the classes here. So we have added these classes for the text which is in P tag.

03:14:44 Now after that let's come here. Here we will again add the curly braces and messages dot map. In this map add the arrow function and simply add this parenthesis. Now in this parameter we'll get the individual message and index number that is I and simply return a div. Now in this div we have to add the key property. So the key will be our index. Then we'll add the another div here.

03:15:21 Here we'll add the flex then gap and item start. Now let's create two other div here like this. Now in the first one we have to add these classes. And here we will check the role. So just add curly braces. This message dot role property is equal to user. So if the role is equal to user in this case just add this parenthesis and here we will add the user icon.

03:16:02 So just add the user icon from Lucid React and provide the size here it will be 14 and then provide some classes. So just add the text zinc 500 and if it is not equal to user then we'll add the another parenthesis and provide the another icon. So just add bot message square icon and import this icon from Lucid React and provide the same size and uh color.

03:16:32 So we have added the size and color for this one. Now after closing up this div here we have another div. In this one we have to display the name like U or AI. So just add the flex layout and provide the text in P. We have added the P tag. So in this P tag just add the message dot ro. So if the role is equal to user in this case we will display U. else we will display AI and for this P we will add some classes.

03:17:24 So we have added these classes and uh after that let's add another P tag in this another P provide the classes like this and within this P provide the curly braces message dot content dot split It provide the dash back slash in the double quote. Here we have to add the space also. After this dash then we'll add dot map. In this map provide the text and index here.

03:18:21 Let's add a span tag. So we have added the span and provide the key. Key will be index. And after that we'll add the class name and provide the block and margin top. Then we'll add the another aspan in this aspan provide the dash space back slash and then we'll add the class name here. So in this class name we'll add curly braces I equal to zero then hidden else empty string and after this aspan let's add curly braces text.

03:19:05 Save the changes. Now let's come here and here we'll add curly braces loading. If the loading is true in this case just add a div. For this divide the flex gap 2.5 and item start. After that we will display the bot icon and then we'll display some loader icons. So let's create one div and inside this div we'll add the bot icon from lucid react for this icon.

03:19:46 Just set the size 13 and provide the class name and add the text zinc 900 and provide the classes in the div also that contains this icon. So in this div we have added these classes. Now here we'll add another div. In this one simply add flex one. Then we'll add the text inp tag. So the text is AI and provide the classes in this text. So we have added these classes and then we'll create one div.

03:20:29 Inside this div create multiple spans. So just copy and paste it. Now here we'll add the class name called dot loader. Let's add the class name here dot loader. Save the changes. After that here just before this closing div and it will be self-closing div and provide the reference and the reference will be bottom ref that will help us to scroll the chat area right and uh after that let's come here and here we'll display our input field.

03:21:14 So simply add a div and in this div provide some classes like this and then we have to add our component. So we have already created this prompt input component. It has been imported. And here we'll add the props that is on submit. It will be on send. Then loading. It will be loading. Then we'll add the placeholder. So just add the text ask AI to modify.

03:21:54 Then we'll add autofocus. That's it. Save the changes. So we have created one component here. Now let's mount this component on our builder page. So just open the builder page. JSX. And here you can see we have the text called chat panel. So just remove this text and simply mount our chat panel component. It has been mounted here. And provide the messages.

03:22:25 It will be active project dot messages. Then add on send. In this on send we'll add one function that will handle chat. So let's create this function first. So let's come here. We'll add con handle chat. For now we are creating this function here. But later we'll create this function in context and get it from the app context. So let's provide this handle chat here.

03:23:08 And uh after that let me add one more props that is loading. So it will be chat loading. So we don't have the chat loading. So let's create this variable also. Let's add con chat loading. set chat loading equal to user state and uh by default it will be false. So let's add chat loading here. Now let me just come here and you can see here we have the chatter screen where you can see two messages by you and by AI.

03:24:00 Correct? And here we have the input field where we can submit our query. Now let me provide our function or we will complete this function which is here that is handle chat and this chat loading. So let me just remove it from here and open our app context. In this app context here we have the chat loading right. So we can simply get this chat loading from this context.

03:24:31 So just add comma and provide chat loading. And after that in this context we'll create our function to load the chat or handle the chat. So scroll down after this load project we have the use effect then handle generate then handle delete. So after this handle delete let's add con handle chat equal to use call back. In this use call back just add the asynchronous add function and after this function we'll add comma and provide the array where we'll add active project user.

03:25:28 Now in this function just add the prompt as parameter and then let's add if statement. If not of active project or not of user then simply add return then we'll use the setup function set chat loading and make it true. After that we'll add the try catch. So we have added the try catch statement. In this try block we'll make the API call. So just add con data equal to await and use the API dot post.

03:26:10 In this one just add the back ticks and provide the / API/ projects and provide the project id using this dollar sign curly braces active project dot ID and then / chat. So this is the endpoint. Then provide our prompt. So just add curly braces prompt. Now after that here we will add set active project and in this setter function just provide this data.

03:26:46 After that we'll add if statement if data dot errors and data dot errors.length is greater than zero. In this case we'll display the toast notification. So just add toast dot error and this error message. After that we'll add the else statement also. In this else statement we'll add toast dots success and the message is updated to version. Then we'll come here in the catch block.

03:27:18 We'll get the error and then we'll add console dot error. Then we'll add to dot error and this message. Then we'll add the finally block and in this finally block we will use set chat loading and make it false. Save the changes. So we have added handle chat function. After that let's get it here. We will add comma and provide handle chat. Save the changes.

03:27:55 Now you can see it should run the page right. It works fine. Here you can see in both chat it is displaying the same bot icon. So let me update it. We'll come back here and uh in this chat panel you will find this message roll equal to user. So just correct this one user save the changes and uh after that if I come back you can see here we have the user icon in the first one and in the second one we have the bot icon.

03:28:25 Now it is correct. After that we have to create the component for our files. If I click here it is opening this file explorer. So we have to create this file explorer component. To create our file explorer component let's come back to the VS code and uh we will open the sidebar. In this one we have the components folder. So here let's create a new file and write the file name file explorer jsx.

03:29:01 Let's add rafce for creating the component structure. Now in this one we'll add a div and for this div we will provide some telin classes and in this one we have to add a text inp tag. So the text will be files. Now provide some CSS properties in this P. So we have added these TIN classes for this P tag. And after that we have to display the tree item.

03:29:34 For that we'll create the component. And uh let me add the props here. In this props first we'll get the files. After that we'll get the active file and then we will get the on file select function. So we'll get the all files active file and on file select function. Now after that in this function we will add con tree equal to use memo import it from react and uh in this one let's add the arrow function and let's use build tree function and we have to create this function.

03:30:33 So before this file explorer here we will add function and uh the function name is build tree. In this one we'll add the paths and here just provide the object dot keys dot or we'll use this keys function. In this case function add the files. After that add the comma and in this array provide the files. Now let's complete our function that is build tree.

03:31:13 So in this one just create a variable with the name root. It will be empty array. Then we'll add the for of. So we have added for off loop. In this one, we'll add the con file path of the paths dot sort. Then we'll add con parts equal to file path dot split. In this split, simply add forward slash. Then we'll add dot filter and in this one provide the boolean.

03:32:00 Then we'll add the variable with let current is equal to root. Now we'll add the for loop here. Just add let I equal to zero and uh I less than the parts do.length length then I ++ here we'll add const name name equal to parts index I then we'll add con is last equal to i and is equal to parts dotlength minus one then we'll add con full path it will be forward slash plus this parts dot slice then zero comma I + 1 then we'll add dot join and provide forward slash now we'll add let existing equal to current dotfind end

03:33:23 and create the function with the parameter n. Here we'll add n dot name is equal to name. After that we'll add if not of existing. In this case just add existing. It will be object where we'll add the name. Then we'll add the path and in the path just add full path. After that we'll add is directory. It will be not of is last. Then we'll add children.

03:34:14 Now here we'll add current dot push existing. After that here we'll add current is equal to existing dot children. And finally we will add the return and we'll return the root. So we have created this build tree and we are using this build tree here. Here we'll get the tree. After that come here within this div and simply use curly braces and provide the tree dot map.

03:34:48 In this map add the arrow function and return this parenthesis. Here we'll get the individual node right and after that using this node we have to display the tree item. So let's add the text here. tree item. So instead of adding this text like this, we'll create the tree item function. So let's scroll up and here before this file explorer just add function tree item.

03:35:27 Now here we'll add some parameter. So just destructure these parameters. So just add calibrs and provide the node. Then we will get the active file. After that let's get on file select and then depth. So default value will be zero for this depth. After that just add const is active equal to the node dot path equal to active file. After that we will add if statement node dot is directory.

03:36:17 If it is true then we will add return and return a div. In this one let's create the another div and inside this div we have to provide some classes. So we have added these telin classes and after that here we have to add the folder icon. So let's add folder icon from Lucid React. Then we'll add the size. Size will be 34. Then we have to add some class name for the icon.

03:36:50 So we have to add the color and opacity. Then we'll add the span tag. In this span tag, we'll add the node dot name. After that just come here in this div we'll add the style property. In this style property add the padding left. In this padding left, let's add the back text dollar sign curly braces and add the depth multiplied by 12 + 8 then pixel.

03:37:40 Now after that let's come here and uh here we'll add curly braces. Then add node dot children dot map. In this map add the arrow function and provide the parenthesis. Here we'll get the child. Then we will provide this tree item. It's here tree item. In this tree item provide the key. It will be child dot path. Then we will add the node. So in this node, let's add the child.

03:38:28 After that, we'll add the active file. So it will be active file. After that we'll add on file. Select. It will be on file select. Then we'll add depth. So it will be the depth + one. Save the changes. Now after that we can come here and instead of this P let's provide the component that is tree item. In this tree item, we'll add the key. It will be the node dot path.

03:39:18 Then we'll add the node. It will be node. After that we'll add the active file equal to active file. Then on file select it will be on file select. After that we have to update our function that is tree item. You can see here we have the tree item where we have added if node is directory true. So let's add the another statement here. So after this if simply add return.

03:39:59 So if the node is a file not a directory. So in this case we'll add a button we have added a button tag. Now in this button we'll add on click. In this on click add the add a function and simply call on file select and provide the node dot path. Then we'll add the class name here in this button. So we'll provide the dynamic classes just add the curly braces back.

03:40:30 So these are the fixed classes and then we'll add dollar sign curly braces and write is active. If it is active in this case just add the background color, text color and font medium. And then we'll add else here we'll add other colors. So let's add different color here for the text hover and background hover. Right now after that in this one we will add the style also.

03:41:09 So just add the style property then curly braces and just add the padding left. So here we have added padding left depth multiplied by 12 + 8 pixel. After that just come here within this button. In this button we have to display the file icon. So let's add the text file icon and after this file icon we have to display one text that is the file name.

03:41:45 So just add the span tag. In this span tag just add node dot name. Then provide the class name here. And uh in this class name we'll add truncate. Save the changes. Instead of displaying this file icon text, we have to display the actual icon. For that we'll create a function. So let's scroll up. Before this item tree just add a function called get file icon.

03:42:27 Now in this one provide the name and uh after that let's add the if statement. If the name dot ends with if the file name ends with and provide the details like dot CSS. So if the file name is ending with dot CSS in this case we'll add the return and provide one file icon. So just add the file text icon. Now for this one just add the size and text color using these size property and class name.

03:43:07 So we have added file text icon. Now after that let's add another if statement. So just copy this one. Here we'll add ends with dot jsx. In this case we'll return the another icon. So just add the file code icon. import it from the Lucid React. And this icon also and in this one we'll add one more statement. We'll add or ends with JS. So just add name ends with JS.

03:43:44 Let's remove this one. Now it is fine. So if it is ending with JSX or JS then we'll add the file code icon. Right now let's copy this one paste it here. Here we'll add dot JSON. So if the file name is ending with dot JSON in this case we will add the file text icon again. So here we are using the same file text icon. size will be 14 and then we will update this color and we'll update the color in this one also.

03:44:28 Here we will update this color and the size is 14 for each. After that we'll add the icon for other file type. So just add the return statement. In this return simply add one icon. So let's add file text icon size 14 and class name where we have added this color. Save the changes. After that let's call this function here. So instead of adding the file icon let's provide this function.

03:45:05 Just add curly braces get file icon and provide the node dot name. Save the changes. After that we have to mount our file explorer component in our builder page. So just open the builder.jsx and this one here we have the sidebar tabs then sidebar content. So here we have the turnary operator. If the left tab is chat then we'll display the chat panel.

03:45:40 Else we'll display the file explorer. To display this file explorer here let me remove this div and simply add opening arrow file explorer from components. Now provide some props here. So just add the files. It will be active project dot files. After that provide the active file. In the active file simply provide the active file. After that provide the on file select.

03:46:14 In this on file select let's add the function. And in this function parameter we'll get the path. Now in this one just use the setter function set active file and provide the path. Then we'll add setter function set so code and make it true. Let's save the changes and open our web page. So now you can see here we have the file structures. So here you can see we have the folder also.

03:46:52 We have a large icon for folder and then we have the files. You can see different color for different files and uh you can see the file name extension also like JS dot CSS app do.js and this is the folder name. And if I click on chat it will display the chat. If I click on files it will display the files. And when we click on any file it will display that file in the right side that we have to create.

03:47:23 Correct? So this file will become active file and it will be displayed in the right side. So in the right side either we can display the file preview or we can display the website preview. To display our preview panel here in the right side we will come back to the VS code and uh let's scroll down. Here you can see we have the preview/code area. So here let's add a div.

03:47:54 In this div we'll add flex one and overflow hidden and then just add the curly braces. We'll add active project dot a status is equal to pending. So we have added active project dot status is equal to pending or active project dot status is equal to generating or active project dot status is equal to failed. So in these cases we have to display the loader or progress.

03:48:28 So just add the turnary operator and here we'll add the loading component for now. Later we'll replace this loading component. Let me open this sidebar loading. And now if I type this loading we are getting the suggestion it is already imported I think. Let me scroll up. Here we have the loading component right. So it is already imported and uh we have mounted this loading component here.

03:49:00 Then we'll add else statement. So just add colon and another parenthesis and in this one we'll display our preview panel. So just add the tag and let's add the text preview panel. So it will be displayed in the right side. If I just come back you can see here we have the preview panel. Correct? Now if I come back here and uh let's add exclamation here and come back here.

03:49:31 So you can see we are getting the loading. So instead of loading we'll display some other component but for now let me keep the loading only and we'll continue this preview panel. So we'll create a separate component for our preview panel. Just open the sidebar in this component folder. Create a file preview panel dot jsx. Now in this one we'll add RAFC for creating the component structure and after that we will destructure some props.

03:50:03 So here we'll get the project then active file and so code. So let's come here and provide project active file and so code. After that before this return let's add const so error overlay set so error overlay equal to use a state and uh let's initialize it using true. After that let me add some comment. So we have added the comment here keep local state of files that updates as user types.

03:50:49 So when the user types it updates the local state. So here we'll add con live files set function is set live files equal to use a state and provide the project dot files. After that we'll add another state. So just add con previous project key and set a function name is set previous project key is equal to use state and uh in this one just add the back tick and provide dollar sign curly braces and insert the project id then this let's add dollar sign curly braces project dot version after that we'll add another

03:51:42 variable. Just add current key equal to back ticks and provide this one. Just copy and paste it here. So we have added project id dash project dot version. After that we'll add if statement previous project key not equal to current key. In this case just use set previous project key and insert the current key. Then we'll add set live files and provide the project dot files.

03:52:34 After that let's come here in this return. In this return we have a div, right? So in this div we will set the width and height. So we have added width full height full. Next we have to add the sandpack provider. So we already have the package installed in this project. If I open the package dojson you can see we have added this package code sandbox sandpack react.

03:52:57 So we can use it in this project. So here let's add import kales from at code sandbox/ sandpack react and from here we'll get the sandpack provider. After that just come here in this div. In this div let's add the sandpack provider tag. We have added the opening and closing tag. Right? And uh in this one we will add the key first. So the key will be our project dot id.

03:53:45 Then we have to add the template. So just add template. In the template we'll add react. Then we have to add the files. So just add the files. So we have added the files property. And after this files we'll add the custom setup. So we have added custom setups. Then we will provide the options. So just add space and provide the options. After this options we'll provide the theme.

03:54:20 Let me move it in the new line. So here we will add the files custom setup options and theme. Now let me add these details one by one. So for this files let's create a variable that is send files. Before this return just add constack files equal to use memo. In this use memo, add the add function. And then we'll add the array with live files and active files.

03:55:04 So we have live files and active file. After that in this add a function just add con send files equal to array. Then we'll add for of in this for off we'll add const path and content. We'll add the array with path and content of object dot entries then live files. After that just add const file code equal to type of content equal to string. So if it is equal to a string in this case we'll add the content.

03:56:04 Else we'll add content dot content or we'll add empty string. After that we'll add sendpect files path equal to and provide the code. It will be file code. Then provide comma and add the active in this active provide the path is equal to active file. So it will be true or false. Now after that here let's add the return. In this return we will simply add the sandpack files.

03:56:50 Now we can add this sandpack files here like this. So we have added the sandpack files. After that we have to add the custom setup. For this custom setup we'll add the dependencies. So let's scroll up here. we will add the comment. Let me add the comment for this one also. Just add convert live files to sandpack format. And after that here we'll add detect dependencies from import a statement using live files.

03:57:26 Let's add it as a comment. So here just add con dependencies equal to use memo and in this use memo let's add the arrow function and then array and in this array we'll add the live files and in this function simply add the return and provide a function that is detect dependencies. page. So you can see here we have the utils folder. In this utils folder we have sandpack utils.

03:58:09 So in this sandpack utils you can see we have a function called detect dependencies. So we are going to use this one. Let's come here and simply provide detect dependencies. So it has been imported. Now in this detect dependencies we'll simply add the live files. You can see it has been imported from utils folder. Save the changes. Now after that you can see we have to provide the value here in this custom setup.

03:58:42 So in this custom setup let's add curly braces and dependencies. That's it. After that here we have the options. So in this options we'll add the curly braces and add the first property that is external resources. So in this external resources just add the array and here we will add the first value that will be Telvin CDN. After that comma and provide the CDN for font awesome.

03:59:22 That's it. Then we'll add comma here and provide the next property that is classes. In this classes, let's add sandpack wrapper. It will be sandpack wrapper. After that sandpack layout, sandpack layout and then sandpack preview. Sanpe preview. Then we'll add comma. And next property is log label. That will be zero. Now we have the theme here. So in this theme we'll add the curly braces and for this theme we have to provide the color and font.

04:00:01 So just add the color and object then comma and provide the font and object. Now here we can add multiple colors and the name. So we have added these names and colors here. Surface 1 2 3 clickable base disabled hover ascent error error surface. And then we'll add the font here. So in this font let me provide body mono size and line height. Now after adding it let's come here inside the sandpack provider.

04:00:45 So in this sandpack provider we have to add the sandpack file watcher. So we have to create that. Let's scroll up and uh here let's add the comment watches for files edits inside sandpack editor and save changes to DB and live state. So here we'll add a function and write the function name sandpack file watcher. Here we'll get the parameter. So just add on live files change.

04:01:24 Now in this one just add con send equal to use send. It has been imported here. use send pack and uh after that let's add const files it will be sendpack. Now we'll add con active project and uh update project files and let's get it from the use app context. We have the update project files here from the context. Let's open the context file. We'll open context folder and app context file in this one.

04:02:14 Let's find it. So we don't have this update project file. We have to create it, right? So let me create this one. Let's scroll down and before this return here we will add const update project files equal to use call back. In this use call back just add the asynchronous add function and then we will add comma here and add array. In this array we'll add active project.

04:03:01 Then we will add the user and after that we'll add a function. Using that we can autosave the file. So let's create that function also. So just before this here just add const debounce save equal to react dot use memo. In this one add the arrow function where we will add debounce. We are not getting the suggestion. Here you can see we have the package installed.

04:03:42 Let's open it. In this one, we have the load dash debounce. Right? So, we will import this package. Let's scroll up and provide import debounce from load dash debounce. Now, after that just come here. Here we can use this one debounce and provide the async add function. Here we'll get the file and id. So just add the files and id. Then we'll add try catch a statement.

04:04:17 In this try block we'll add await api.put. So it will update the changes in files. We'll add the back tick here and provide the path that will be / ai/ projects and insert the id then files. Then we'll add comma and provide our updated files here. After that come here in the catch we'll add the error and let's provide console dot error and toast dot error.

04:04:52 Then we'll add comma here and provide 1,000 milliseconds. After that here also we'll add the comma and provide one array. So we have added empty array. Save the changes. Now we have to call this debounce save. For that we'll use the use effect. So just add the use effect. And for this use effect provide the dependency array with debounce save. And uh within this let's add the return.

04:05:28 In this return, it will call a function that executes this debounce save dot cancel. After that, just come here in this update project files function. So in this one, we'll add the if statement. If let's add not of active project or not of user then simply add return here instead of this params we'll get the files and after this return let's add debounce save and provide the files comma active project dot id and after that in this dependency we'll add the debounce save the changes.

04:06:29 Now we have to pass it through the value object. So let's come here and after this log out just add the comma and provide update project files. Save the changes. After exporting this update project files, let's just come back here in the preview panel. Now in this preview panel, we are creating this sandpack file watcher. So here you can see we have added the update project files from the use app context.

04:07:03 Now after that here we'll add con active project reference equal to use ref. User ref has been imported and in this one just add active project. After that let's add the use effect. In the use effect create the function and uh add the dependency array. So the dependency add will be active project and within this function just add active project reference dot current equal to active project.

04:07:49 After that we'll add another use effect. So here we have the first use effect. Now let's add the another use effect here. or let me just duplicate this one only and clear this function and clear this dependency array. So in this dependency array we will add files and uh in this one just add con project equal to active project reference dot current. Then we'll add if not of project then simply add return.

04:08:29 Then we'll add con updated files equal to object. Then we'll add let has changes equal to false. In this case let's add the foroff loop. So in this for off we'll add path and object for the file object of the object dot entries files here just at const [snorts] file code equal to file object dot code. Then we'll add updated files and add the path equal to file code.

04:09:36 Then we'll add con original content equal to type of project dot files path is equal to a string. Let's add the comparison equal to a string. If it is true, then we'll add project dot files path. Else we'll add project dotfiles path dot content. Let's add the dot here. Now we'll add if statement. If original content not equal to undefined and original content not equal to file code.

04:10:20 In this case, let's simply add has changes equal to true. Here we will add the comment sync live files to parent. So just add on live files change provide the updated files. After that just add if has changes. In this case just add update project files and add the updated files. After that let's come here and here simply add return null. After that, let's scroll down and come here in the preview panel function.

04:11:08 And uh in this one, we have the sandpack files and dependencies. Here we'll create the handle live file change function. So just add a space. Here we will add const handle life files change equal to add a function. In this one we'll add new files. Then we'll add set live files. In this setter function add the add a function with the previous data. So let's add the previous as parameter and then provide let changed equal to false.

04:12:03 Then we'll add for of P and code of of object dot entries new files. Now in this for we'll again add if statement. If previous P not equal to code in this case let's add changed equal to true and break. Now after that here we'll add return and in the return we'll add changed. If the changed is true then we'll add new files. else we'll add the previous save the changes.

04:13:00 Now after that we can come here. [snorts] Here you can see we have added this sandpack provider. So in this sandpack provider let's mount the sandpack file watcher. Just add sandpack file watcher and close it. Now in this one we'll add on live files change. Just add handle live files change. Now after that mount the sandpack error monitor. So we have to create the sandpack error monitor component first.

04:13:45 So let's add the text sandpack error monitor and we'll create this component. Just open the sidebar and in this components create a file sandpack error monitor dot jsx. Let's add rafce for creating the component structure. And uh after that in this one let's dstructure the props. So here we'll get on error change. After that here [snorts] let's add const sandpack equal to use sandpack use sandpack has been imported and uh let's add con error equal to sand.

04:14:41 Now after that here we'll add the use effect. So we have added the use effect and add the array. Now in this array let's provide our error then comma on error change. Let's come here. In this function we'll get the if statement if we have the error. In this case, we'll add cones message equal to error dot message or empty string. Then we'll add const is network error equal to the message dot includes provide failed to fetch or let's provide message dotinccludes call dot csb.io.

04:15:41 Then we'll add or and provide message.inccludes error connection time out or we'll add message dotinccludes net error then we'll add if statement. If is network error in this case we'll add on error change it will be false then we'll add the return after that let's come here simply add on error change make it true and in this return simply add null so just remove this parenthesis just add the null.

04:16:34 Right now after that we can come back to our preview panel. In this preview panel instead of this text let's mount our component that is sandpack error monitor. mount this component and provide on error change equal to object and provide set so error overlay. Now we have to add the another component that we will import from the sandpack. So just add sandpack layout and let's import it from the sandpack react.

04:17:15 Let's add the opening and closing tag. Now in this sandpack layout within this opening tag provide the style. So we have added the style property and here we'll add the height, border, border radius and background. Now after that within this just add curly braces and just add so code. If this so code is true in this case we will mount the sandpack code editor.

04:17:47 So let's add the parenthesis and provide sandpack code editor and import it from the sandpack package. It will be self-closing. In this one we'll add so tabs. Then we'll add so line numbers. Then we'll add so line errors. Then we'll add wrap content. After that we'll add the style. So in the style just add the height. Then we'll add the flex and provide min width.

04:18:26 That's it. Now after this here we'll add sandpack preview. So let's add the component sandpack preview and import it from the package. Now in this one we'll add so navigator. Let's make it false. Then we'll add so refresh button. Then we'll add show open in code sandbox. It will be false. Then we'll add the so sandpack error overlay. It will be so error overlay.

04:19:03 After that we'll add the a style here. So just add the style. In this style we have to add the height flex and min width. So in this flex we have added so code if it is true then one else two then min width zero. Save the changes and uh after adding it let's come back to the builder page. Now in this builder page instead of this text let's mount our component.

04:19:36 So let's remove this text from here. And here we'll add the preview panel. We will mount the preview panel here. In this one, we have to provide the project. So let's add the project. So instead of this project, let me provide active project. So we have added the active project here. Then we'll add active file. In this active file, provide the active file only.

04:20:10 Then provide the so code. It will be so code. That's it. Save the changes and open the web page. So now you can see right now it is displaying the preview. Correct? And here you can see we have this button. So code. If I click here, it is displaying the code. You can see we can change the pages from these tabs. But it is instantly reloading the web page and displaying the same page when we change the tabs.

04:20:42 To fix it, let me just come back to the VS code. Let's open the app context. In this app context, we have added check sessions. So we are calling this check session in this use effect. And here we have added the check session function. And in the dependency array also we have added check session. So just remove this. Just add the empty array in dependency.

04:21:04 Save the changes and come back here. Now you can see if I click on code, it will display the code here and uh we can change the pages like this and we can change the pages from the left sidebar also. If I go to files here you can see we have entire files. We have the app features footer. Let's click on the footer.js. So you can see it is displaying the footer code.

04:21:28 If I click on header js here we have the header code. We will change this code and it will reflect in preview. So let me change the text here. You can see the button text get started. So let's add get started now. So you can see the button text has been updated here. Let's change it to get started and it will autosave the code. Now we will come here in the hero.jsx or hero.js.

04:21:56 In this one, you can see we have the message that is build AI workflows which is here. So we will change it to create AI workflows. You can see the text has been updated in live preview and it will autosave our code. Now we can switch back to the preview mode only. We can click on this button. So it will only display the preview. And if I click here, it will display the code also.

04:22:27 Right now, after that, let me update the CSS properties to fix the size of this folder icon. Right. So, I'll just come back to the VS Code. Let's open the builder page. In this builder page, we have the chat panel and file explorer. So, let me open the file explorer.jsx. JSX in this file explorer we will find our icon. So in this one you can see we have the folder open icon size is 34.

04:23:06 Let me update it. It will be 14. Save the changes and come back here. So you can see perfect size for this folder. Now after that I'll come back here in the builder page. Just open builder.jsx. Here you can see we have added the loading component. So instead of adding the loading component, we will add one component that I have provided in the asset.

04:23:30 So just come back to the downloaded folder. So just open the downloaded assets folder. In this one you will find the components and inside this components we have the agent progress dashboard. So just copy this one and add it in the project. Just open the project client src assets. Let's come back. We will not come to assets. We will come to components and paste it here.

04:23:57 So we have added this agent progress dashboard component. After that we'll open the VS code. And if I open components here you can see we have the agent progress dashboard.jsx. Now let's mount it here instead of this loading. So remove this loading and provide agent progress dashboard. Now in this component we have to provide uh props. So let's add the project.

04:24:34 In this project just add the active project. Save the changes and come back here. So until it load or generate the page it will display the status. Let me change it. Here we have the active project status equal to pending or active project status is generating or active project status equal to failed. So let's add exclamation here not of pending. Save the changes and come back here.

04:25:13 So you can see it will display the progress like this. AI agent is building. It will also display the files name when the AI is building our project. Now let me remove it. We'll remove this exclamation and it will be removed from here and we'll display the complete preview or we can display the code. After that we have to display the publish model. So just come back and we'll create a new component.

04:25:43 So let's open the sidebar. In this components, we'll create a new file with the name publish model dot jsx. Here we'll add rafce for creating the component structure. And uh in this one we'll get some data as props. So just dstructure it. We'll add publish url and on close. After that in this one we'll add handle copy link. So just add handle copy link function and uh it will be one add function.

04:26:22 Now in this function we'll add if not of publish URL. It is not available then simply add return. After that we'll add navigator dot clipboard dot write text and provide the publish URL. Then we'll add the toast notification. So just add the toast. Import the toast here. Then dot success. And in this one add the message public link copied to clipboard.

04:27:04 After that come here in the return. In this return first we'll add a div. And in this div we will add some classes to add the absolute position. And after that let's add another div here. Now in this one we will add the white background and we'll add the border color. then shadow and we'll add the position relative. After that here we'll add one button.

04:27:38 Using that we can close this model. So just add a button tag. Now in this button we'll add the cross icon. So just add X icon from Lucid React. Now in this icon set the size it will be 16. And in this button provide the on click. Let's add the onclick property. In this on click simply add on close. Then provide the classes also. So just add the class name property and provide the absolute.

04:28:10 Then we'll add the top right. Then we'll add the text color hover effect and cursor pointer. Save the changes. Now after that we'll add the title and small description. So after this button create a div. In this one we'll add the title in H3 and then we'll add the description in P tag. So the title is your website is live. After that we'll add the small description.

04:28:46 So here we have added this description. Now add the classes in this div and then we'll add the classes in the title which is in the S3 tag and after that we'll add some classes in the description text. So here we have added some classes that will reduce the text size and change the text color. After that we have to add the input field and in the input field we'll provide the publish URL and we'll add the button also.

04:29:24 So after closing of this div here create a div and provide the a space y 4 and within this create two divs. The first one will contain the input and the second one will contain the buttons. So in the first one let's add the label tag. So we have added the label. In this label provide some classes. So we have added these classes and within this label tag add the label text that is published link.

04:30:05 Then we'll add the input field. So just add the input type will be text. Then we'll add read only. Then we have to add value. So the value will be publish URL. And then provide some classes here. So we have added these classes. So in this input field we cannot type anything. We can just read the content. Now after that here we have a button. So in this button we'll add the functionality to copy the link.

04:30:34 Right? So in the first button we will add the functionality to copy the link and in the second button we will add the functionality to open the live link or published link. So we'll add two buttons here. So just group it using this div. And in this div we have added flex to align both buttons. Now create the first button. In this first button we'll add the button text called copy link.

04:30:59 After that provide the classes here. So just add the class name property. And here we have these classes. Now in this button we'll add the on click. So in this on click simply add our handle copy link. That's it. Now we'll create the second button. So we have added another button tag. Here we'll add the text called open site. Then add the class name.

04:31:23 So let me provide these classes. After that here also we have to add the on click. So just add the on click property. Add one add function and then simply add window dot open and provide our publish URL. Then add comma and provide underscore blank. So it will open the link in new tab. Save the changes. Now we have to mount our component that is publish model in our builder page.

04:31:59 So just open the builder page and just scroll down just above this last closing div here. Let's add curly braces. just add publish URL and if it is available then we will mount our publish URL model or publish model. Now in this publish model provide the props. So just provide publish URL like this. Then we'll add the second props that is on close. In this on close just add the function and here use the setter function set publish URL and simply provide null.

04:32:45 So when we don't have the URL it will close it. Let's save the changes and come back here. To preview our model we have to click on this button publish. But it is not functional yet because we have added the empty function. So just come back here and we'll complete our function. Just scroll up. You can see here we have handle publish and handle download.

04:33:05 We will complete these functions. So in this handle publish let's add if statement if not of id. In this case simply add return. After that let's add set publishing. In this set publishing we will add true. Then we'll add try catcher statement. In this try block, we'll make the network request using await API. Let's add the API here and import it from the API file.

04:33:44 You can see it has been imported from API/ API. Now after that just add dot post in this one add the back tick and insert the path. It will be / API/ projects. then insert the id using the dollar sign curly braces id and then slash publish. So this is the endpoint to publish our project. Now after that here we'll get the URL. So just add con URL equal to back.

04:34:26 Then we'll add dollar signal braces window.loation dot origin. then slash publish and provide the ID using the dollar sign and curly braces. Next, we'll add the set publish URL and in this one provide our URL. Then we'll display the toast notification. So just add the toast, import the toast and add the success. In this success just add website published successfully.

04:35:02 Then we have the catch block. In this one we'll add the error and provide console dot error and provide the toast error. So just add toast dot error. Then we'll add the finally block also. So in this finally simply set the publishing false. So just copy this set publishing and we will make it false. save the changes. So after adding it, it will handle our publish button.

04:35:28 Now we have the download button also. For that we have the handle download function. So in this one let's add if statement. If not of active project. So when the active project is not available then simply add return. Now suppose the active project is available then we have to call a function that we have provided in the utilities. So just open the utils folder.

04:35:56 Here we have export project dot js file. So in this one you can see export project zip function. So just use this function here in this builder. Let's add export project zip and import it from the utils folder. You can see it has been imported. And uh after that here we have to provide a project. So just add active project. That's it. Now after that save the changes and we will come back here.

04:36:35 So you can see here we have the publish button. If I click here it will display the notification website published successfully. And here we have the model within message your website is live. And here we have the live URL. And here we have the button to copy the link or we can open this site in new tab. Just click here. So you can see it is opening the new tab.

04:37:00 Now let's click on this button. So you can see the notification public link copied to clipboard. When we open this site, it is opening the home route because we have added the routes that will redirect us to homepage when the route is not registered. So, we have to register our public route also. For that, let me just come back to the app dot jsx. In this app dot jsx you can see here we have a route that will catch unregistered route.

04:37:38 So just before that we'll add one comment that is public routes. In this public routes we'll add the route. It will be self-closing. Here we'll add the path. So in this path we'll add /publish/ colon id that is the project id and then we'll add the element. So in this element we'll provide our page. So just add publish page. We are not getting the suggestions.

04:38:14 So just open this publish page. And after that if I start typing it should display this page. Let me clear this. In this publish page, we have not added the component structure. Let me add it. And after that, let's start typing it. Here we are getting the suggestion publish page. It has been mounted here. Save the changes and come back here. And uh let's close it and click on this open site.

04:38:50 So now you can see it is opening this publish page. We will design this page later. So you can see the route only that is /publish and / project ID. So we have completed our builder page. Let me show you one more functionality here. Here we can click on this open preview. So it will open the preview page. You can see the URL preview/ project ID. And if I click on this export, we can download the entire code in zip file.

04:39:20 You can see the code is downloaded here in zip file. So we have the export, sign out, publish, open, preview and code. We can display the code. So now we have completed our project builder page. After creating this page, let me review our code using code rabbit. For that we will commit the changes on GitHub. So just come back here, click on this source control icon and we'll add the commit message created project builder page.

04:39:59 So it will commit the changes on GitHub and uh after that let me just come back to the GitHub account or GitHub repo. If I open it, you can see here we have this button compare and pull request. We'll click on this button and click on create pull request. So we have created a new pull request. After creating the pull request, the code rabbit will start analyzing our code.

04:40:32 Now you can see the code rabbit is running and analyzing our code. Now you can see the review has been completed by code rabbit. Here we have this button review change stack. We will review the change stack. But before that let me see the suggestions here also. So here we have the suggestion in this app context. In this app context, we have to update the code.

04:41:06 Here we have the proposed fix also. You can see it is suggesting to remove this debounce save dot cancel and add dot plus. Instead of cancel, we have to use plus. It is recommended. And uh let's see the suggestion for builder page. In this builder page, we have to remove this code because we are already adding it in the context. After that, let's see the change stack also.

04:41:37 We'll click here, review change stack. Now in this change stack, you can see the changes made in this files. Here we have the app context file. So you can see the previous files here and the latest changes in this right side and uh you can see we have the explanation also like in this 42 we have made some changes in line 42 and for this line 42 here we have the description.

04:42:09 Now if I come here we have the changes in line 182 to 227. So here we have the explanation for these code. Right? Now after that let's come here in the second file. So we have the agent progress dashboard. Here also we have the updates and we have the description in the right side. And uh if you want to understand anything or want to ask any question you can ask from the agent also.

04:42:46 So here we have the agent and you can enter your prompt here and you will get the response from the code rabbit agent. Now after that let's come here in the next file. So here we have the updates and this is the next file that is builder page.jsx. In this builder page you can see we have one suggestion. It says we have one major issue. Right? Let me expand it.

04:43:19 And here we have proposed fix. So it is suggesting to remove this use effect from this builder page dot jsx. Let me just come back open the builder page and uh let's find that use effect. So here we have this use effect. So we have to remove this use effect from here. just clear it, save the changes and uh after that let's see the next isue. So currently we don't have any other issue in this file.

04:44:00 Let's see the another file here also we don't have any suggestion. We will open the next one. Now we'll open the first file. And here we have the app context. So let's see. We have some suggestion in this app context also. It is major issue. Let's expand it. You can see it is suggesting to remove this one. Remove cancel and add plus. So just come back here in the app context.

04:44:38 Here we have debounced save dot cancel. So we will change it to dot plus. Let's come back and uh see the next suggestion. Now we'll click on this comments. So here you can see we have the suggestion for this app context. In this app context we have created the handle chat but it is not exported. So here we have the proposed fix. We have to provide this handle chat inside this value.

04:45:07 Just come back to the VS code, open app context and uh inside this value object just add handle chat. Save the changes. So we have implemented all the suggestions and bug fix. And you can click on this overview also to see the entire overview. You can see here we have the code rabbit major issues right and here we have the premerge checks. Now after that you can see the PI description here you can see the code rabbit walk through here we have sequence diagrams.

04:45:50 Now after that let me just come back to the GitHub repo. In this pull request simply click on this merge pull request confirm merge. So it will merge the changes in main branch and uh after that we'll come back to the VS code and click here then select pull. Now after creating the builder page we have to create our next page. So just come back to the application and you can see if I click on this publish we'll get the link.

04:46:32 Let's open this link in new tab that is /publish/ project id and uh if I click on this open preview so we have the / preview/ project id. So we have to create these two pages that is publish page and preview page. In both pages we will use the same design. Actually we will use the same layout that is available here. So here we have the small preview.

04:46:58 So instead of this small preview we will create a full screen preview. For that let's come back to the VS code and we'll create a component here. So let's open the sidebar. In this one, we have the components folder where we'll create a new file with the name full page preview. JSX. Now add R Ace for creating the component structure. Now here we need the file then only we can display the preview.

04:47:37 So just get the files as props. So now we have the files here and after that let me just copy the code here from the previous file. So let me just open the preview panel component. In this preview panel component we have a div, right? So let's just copy this entire div from here from this preview panel and add it here in the full screen preview and uh again come back to the preview panel and from here just copy these code.

04:48:28 We will copy this function sendpack files and after that copy this dependencies also. Let's copy it and come here in the full screen preview and paste it here before the return. Now again come back to the preview panel. In this preview panel, we have one state also. Just copy this state and paste it here. So we have con so error overlay and set so error overlay equal to use state.

04:49:11 So just import this use state from react. It will be true. And after that we have the sandpack files that is used to convert the live files to sandpack format. So here we have the SP files and we have the return that is SP files and here we have to provide the dependency. So in the dependency we'll add the files that we are getting as props. Let me update it.

04:49:52 We have added this files here. And in this one just update the code also. We'll add if statement if not of files. So when we don't have this files then simply add the return and return the empty object. After that we'll add the SP files. It will be path content of object entries and let's add the files here. Just copy this files and replace this one.

04:50:26 Then we'll get the file code. So I don't need this one. Let me simply remove it. We'll add sp files path. It will be in this object. We have the code. So the code will be our content. Just copy this content here and then remove this active. So we have updated this code here and uh after that it is returning the SP files and the files as dependency. Then we have the dependencies equal to use memo.

04:51:06 In this one let's add the same if statement. If not of files in this case simply add return empty object else we'll add the return detect dependencies and provide our files. Now we have to import this function. So just import it from the utils. You can see it is imported from the utils folder sandpack utils. Now after that let's come here in this return.

04:51:41 In this return we have a div where we have to add the screen and we'll add the background and uh overflow. So we have updated this class name height a screen width a screen background white overflow hidden. Then we will provide the sandpack provider and in this sandpap provider we will add the template. It will be react. From here we can remove this key.

04:52:09 So we have the template. Then we have to add the files. So the files will be sandpack files which is here. And after that we'll add the custom setup. So in the custom setups we have added dependencies. Then options. So in the options we have external resources that is Telwind CDN and font awesome CDN. And uh after that here we'll add log label zero.

04:52:38 And from here we can remove the classes. So we have removed these classes. After that we have to display our preview in full screen. So here we will add the class name. Let's add the class name. Here it will be height full and width full. And from here we can remove this theme. Let's remove this one. So we have removed this theme. Here we have one extra quote sign.

04:53:21 Let me correct it. Now it is correct. Save the changes. Now within this we have the sandpack file watcher. So we can remove it. After that we have the sandpack error monitor. So let's import this one also. So this component has been imported and uh in this one we have provided this state. Now after that we have the sandpack layout. In this sandpack layout we can remove this style.

04:53:55 And after removing this style, let's add class name and provide width height. And then we'll add the border none. Then we'll add background transparent like this. And in this one we have to add our preview. So just remove this and simply add the sandpack preview component. Let's close this tag here. And here we have sandpack preview component. And uh let's import this one also.

04:54:37 It has been imported. Then let's import the sandpack layout. It is already imported. and sandpack error monitor is there. So in this preview we have the so navigator false. Then we have so refresh button. So let's add false. After that we have so open in code sandbox. So here also we'll add false. Next we have so sandpack error overlay. So here we have so error overlay state.

04:55:21 Then we have some styles. So just remove this styles and instead of this style we will add the class name. And let's provide the height full and width full. Save the changes. So we have created our component called full page preview. Now let's mount this component in our pages. So first we'll come to the publish page. Just open the pages and publish page dot jsx.

04:55:50 In this one we need the project id. So just add const id equal to use padams. Now after that we need some state. So just add const project and set project equal to user state and initialize it using null. Now after that we'll add con loading and set loading equal to use a state and initialize it using true. Then we'll add con error and setter function set error equal to use a state and by default it will be empty string.

04:56:39 So we have these state and one id from the use params. Now after that here we will create the use effect where we will fetch the public project. So just add use effect and provide the comma dependency add a. So it will be our id that is the project id. Now let's add if not of id then we'll add the return. Next we'll add con fetch public project equal to await then API import this API then dot get method and provide the endpoint it will be back/ API/ projects/public and then provide the project id like this.

04:57:40 Now after that we'll get the data. So just use set project. In this set project provide the data that we are getting from the network request. Let me update it. Here we'll create the asynchronous add function. And in this function paste this code that is await. And uh here we'll get the data as a response. So just add const data equal to await API and we'll set the data using the setter function set project.

04:58:21 Now let's wrap this code inside the try catch. So just remove it. We'll add the try catch statement and paste this code inside the try block. Now come here in the catch block we'll add the error and then use the console dot error. After that we'll add the set error. So in the set error we have added this response or this message. Now we'll add the finally block here.

04:58:48 And in this finally block we will use set loading and we will make it false. So you can see the loading is true by default. So we'll make the loading false. Now after that we have to call this fetch public project. So just before this closing curly braces we'll add fetch public project and call it. After that just come here before this return let's add if statement if loading.

04:59:29 If the loading is true in this case simply mount the loading component. So just add the return and provide the loading component. Just import this component and close this tag. Now if the loading is false, let's come here and create another if statement. Here we'll add error or not of project. You can see here we have the error state. So if we have the error or the project is not available in this case let's add the return and uh provide the div.

05:00:22 Now in this div we'll add the classes. So just add these element classes and in this one we have to add one icon. So let's wrap this icon inside a div. In this div provide one icon that is alert circle icon. Import this icon from lucid react. For this icon we will set the size. So size will be 24. And we'll provide the classes for the div that contains this icon.

05:00:50 So add the class name and these classes. Now after that we have to add the title. So after this just add the title in H1 tag. So the title is website unavailable. Then we will add the description in P tag. So here we'll add the description that will be our error message. Then we will add a div. And in this div let's add the message that is builder AI.

05:01:22 Now let's add the classes for each. Here just add the class name for H1 tag. Then we'll add the classes for header message. So we have added these classes. And now we'll add the classes for this text called builder AI. Save the changes. And after that let's come here. We have the return. in this final return. We'll return our component. So just add full page preview component.

05:02:03 Now in this component we have to provide the files. So let's add the files and it will be our project dot files. Save the changes. Now after that let me just come back to the web page and uh let's refresh this one that is publish/ project id. Let me open it from here. We'll click on this publish open site. Let's come back to the VS code. You can see we are updating the code in publish page.

05:02:43 Let me inspect it. use memo. So, we have to import this use memo. Let's scroll up and uh open our full page preview component. Here we have the full page preview and uh let's import this one. Import from React. Save the changes. After that let's clear it and refresh it. Live files is there. So we have to replace this live files from here. Let's find it.

05:03:24 Here we have live files. So just replace this one instead of this live files. Simply add files as dependencies. Save the changes. Let's come back. Sandpack provider is not defined. So we have to import the sandpack provider. Sandpack preview is there. We are not getting the suggestion here for sandpack provider. So let me import it manually in this statement.

05:03:53 Let's add comma and provide sandpack provider from the code sandbox/ sandpack react. Let me just come back here refresh it. It says sandpack layout is not defined. So just import the sendpack layout also. Let's add the comma here and provide sandpack layout. Save the changes. After adding it, come back here. Now you can see it is loading our website preview.

05:04:27 So here we can see the website preview in full screen. So this is the publish page. After publishing the project, any user can see the website on this URL that is /publish and project ID. Similarly, we'll create the preview on our preview page which is here preview/ project id. If I refresh it, you can see we have the text called preview page. So, let me update this page also.

05:04:52 I'll come back to the VS code and uh come to our publish page. Just copy the entire code from the publish page and uh open our preview page and update the code here. Let's replace everything and uh update the name. Here we have publish page. So let's change it to preview page. Let's add the preview page here. And we will export the preview page here.

05:05:38 Update this line. Export default preview page. And here we'll add con preview page. Now in this one we need the ID. It is fine. Then we need the data from context. So just remove it. Here let's add con curly braces. We'll add the active project. We can preview the active project only. So just add active project as project. Then we'll add comma loading active project as loading.

05:06:16 Then we'll add load project function and let's get it from the use app context. Use app context has been imported. Now after that here we have the use effect. Now in this use effect we have this code. So we will update this one. Let's clear this use effect. and simply add if statement if id when the id is available then we'll add load project and provide the id after that here we'll add the load project as dependency then we have if statement if loading or not of project.

05:07:07 In this case, we'll return the loading component. Now, remove this if statement from here and simply provide the return statement with full page preview and provide the files and files will be project files. Let's save the changes. After updating this, let's open the web page. And you can see this is the URL/review/ project id. And if I refresh it, it is continuously reloading the page.

05:07:34 Let me just come back. Now you can see it is displaying our preview here. So after removing the load project from the dependency, it is working fine. And here we have the preview. So we can see the preview of our project that we are building. Let's come here in the project builder. We'll come back to the homepage and open the next project. So this is the another project, right?

05:07:59 And if I click on the code, it will display the code here. If I click on preview, so it will open the path / preview/ project ID. So this is the preview. Let's close all these and uh come here, open this, then go to preview. So you can see the URL preview and project ID. And if I go to publish, we'll get the URL publish/ project ID. So we have completed the front end of our AI website builder.

05:08:36 Now we will review our code using code rabbit. So just come here and add the commit message. front end completed. Commit and sync changes. After committing the changes, let me just come back to the GitHub repo. Let's go to development branch and uh click on this contribute open pull request. So click on this button create pull request and uh once we create the pull request the code rabbit will start analyzing our code.

05:09:29 Now you can see the code rabbit is running. Now you can see the review has been completed and here we have the review summary. You can also go to review change stack and uh after that you can see the suggestions here for any issue or any improvement. So you can implement these fix or suggestions and then merge the changes. So just click on this button merge pull request confirm merge and then come to the VS code click here and pull.

05:10:03 So it will pull the latest changes. So now we have completed the front end of our AI website builder. Next we have to create the back end. So just close all files. So right click here and select close saved. Now after that let's fold this one. And here we have to create our folder for creating the backend server. So let's create a folder here and write the folder name server.

05:10:31 In this server folder, we will create the backend server where we'll create the APIs and then we'll integrate the APIs with our client. To create our backend server, just right click on this server folder and select open in integrated terminal. So now we have two terminals. This is the server terminal and this one is the client terminal where the client project is running.

05:10:57 Now come here in the server. In this one, let's add npm in it dash y. But before adding this, let me open this sidebar. In this server, we'll create a new file and write the file name server.js. So this will be the main file. After creating this server.js file, come here in the terminal and type npm init-y. Now after that here you can see we have package.json in this one we have the name version description and main file is server.js and here we have the start a script that is node server.js and here you can see we

05:11:41 have the type common js and if the type is not available you can add it manually. So let me update it. Instead of this common js we will use module. Now after that here we have to add the dependencies. Using that we'll create our backend server. So we'll create the server using express. So in this terminal let's add npm install and add the dependencies or packages name.

05:12:13 So first we'll add the express package. After that we'll add course that will support the crossplatform integration. And after that we'll add the env. Using that we can add the environment variables. Then we'll add the cookie parser. Using this we can send the cookies in the request. After that we'll add the brypt package. Using that we can encrypt the user's password and store in the database.

05:12:43 Then we'll add the JSON web token. Using that we can generate a unique token for authentication. Now we'll add the mongus package so that we can communicate with the MongoDB database. After adding all these packages name, let's press enter. So it will install all these packages. And after installation, you can find all these packages in the package.json file inside the dependencies.

05:13:11 Let's open it. You can see here we have the brypt cookies parser course. Ennv Express JSON web token and mongus. After that we'll add one more package. Here we'll add npm install. Then we'll add dash d to install the package in dev dependencies or development dependencies. And here we'll add the package name that will be nodemon. Using the nodemon we can restart our backend server when we will make any changes in the code file.

05:13:41 It will automatically restart the server. So just add this npm installed as the nodemon. So it will get installed after that. You can see here we have the dev dependencies and in this one we have nodemon. Now let's add the nodemon script. So just remove this test and here we'll add the comma and copy this one only. Just copy and paste it here. So just add the script name.

05:14:11 So the script name will be dev. And here we'll add the nodemon server.js. js. So when we'll type npm rundev in the terminal, it will execute this nodemon server.js and when we'll start the server using this dev script, it will automatically restart the backend server when we will make any changes in the code file. Now after that in the left side in this source control icon we have the 2,000 plus files.

05:14:39 So let's come here in this root directory that is builder- AI. In this one we will add the g ignore file. So let's add a new file here and write the file name dot get ignore. So you can see it is outside of these folder that is client and server. And in this one just add the folder name that is node_modules. Then we'll add the another folder. Let's add the d and then we'll add env also.

05:15:16 So it will ignore all these files and folder. After that you can see we have only four files here. Now just come back here and let's start creating our basic express server. For that let's import the express from the express package. And uh after that let's add importv from env/config. Then we'll add the import course from course package. After that let's create one app using express.

05:15:52 So we have added cost app equal to express. Next we will add the middleware. So just add app dot use. In this app dot use just add express dot JSON. So all the request will be passed using JSON. Here we'll add another line. Just copy and paste it here. Let's add app dot use and provide the course. In this course we have to add the object. And in this object we'll add the origin.

05:16:34 So the origin will be our front end and back end URL. And uh we can add it in this code. Then we'll add the comma and provide the credentials. So just add the credentials true. Then only we can pass the cookies using the network request. So instead of adding the origins here, we will add it in the environment variable. So just open the sidebar and in this server create env file.

05:17:08 Just add env. And here let's store our URL. So let's add the name called origins equal to and provide the quote. In this one, we'll add http localhost col 5173. That is our front end URL. If I come back to the web page, you can see this is the URL. Now, let's add comma and provide the URL that is localhost colon 3000 where we will run our backend server.

05:17:48 So, we have added this URL here in the origins. Now let's add it here in the course. So in this course we'll add process envisions and then we'll add dot a split and we will split using the comma. Let's come here. You can see we have added the comma here to provide the multiple origins. Now after this course we can add the cookie parser also. So first we have to import the cookie parser.

05:18:32 Let's add import cookie parser from cookie parser package and just add app dot use and just add cookie parser here. So it will be added in all the request. After that we'll create the first route or home route. So just add app dot get method. In this get method we'll add the home path. Then we'll add comma and provide a function. In this function parameter we'll get the request and response.

05:19:09 Then we will add the response here. simply at response dot send and add a message. So just add the message server is live. So when we will open the home route using the get method, it will display this message server is live. Now after that let's define the port number to run our app. So just add con equal to let's use process env. If it is available in the environment variable, it will be used.

05:19:40 else we will add 3,00 if it is not available then we will start our server. So just add app dot listen. Now for this app.list we will provide the port number first. So just add the port comma and provide a function that will get executed. So in this function simply add console.log and provide a message that will be displayed in the terminal. So just add server is running at and provide the local host and insert our port number.

05:20:24 So just add dollar signals port. So we have created the basic express server. Now let's start our express server. So just open the terminal and uh in this one just add npm run dev. Now you can see the message starting node server.js and you can see the message server is running at localhost 3000. Now just hide it and open the web browser here. If I type localhost 3000 here also you can see the message server is live that is coming from our home route which is here server is live and this message server is running at

05:21:13 this URL it is coming in the terminal after creating the basic express server let's create one global error handler so here let's add one message centralized error handler and provide app dot use. Just create a function. In this function parameter, we'll get the error comma. Then we'll add underscore request. Then response and then we'll add underscore next.

05:21:58 Let's add error. After that, simply add console dot error and provide the black tick error and it will be dollar sign curly braces this error dot message. Now in the next line, let me provide response. So just add response dot a status. So a status is 500. Then dot JSON in this JSON we'll add the error property. It will be error dot message. So we have added the global error handler function.

05:22:38 So after creating it now we have to connect our backend server with a database. So here we are going to use the MongoDB database. So just open the web browser and search for MongoDB atlas. Open this website and click on get started and create your account. If you don't have an account and uh if you already have an account, you can go to sign in. So let me login with my existing account.

05:23:09 I'll continue with my Google account. Let's click here. After sign up, it will ask some onboarding question and then you need to create your project. So let me add the project name builder. Then next then create project and after creating the project we have to create a new cluster. So here you will find this button create a cluster and after that you need to choose the plan.

05:23:41 So let me choose the free plan. We'll go for this free plan. And from here you can choose the service provider. So let me choose Google cloud and from this drop-down you can choose the nearest region and click on create deployment. After that you can see it says database user created. So it will create one database user also and password also. You can click on this button to download the file where you can save the username and password for database.

05:24:19 So I'll click on this download. It will get downloaded. And after that click on choose a connection method. Now in this connection method we can go for this drivers. And in this drop-down you can choose mongos because we have already added the package. So you can see we have the same step npm install So we have added the package. We can skip this and come to the next step.

05:24:44 So next we have to add the connection a string. So we need to add this connection string in our file. So this connection a string includes our database user and this database password. So let me just open the VS code and then go to env file. In this env file let's add the environment variable name. So let's add the name MongoDB URI. After adding it, let's come back here and copy this string from here and it will end here at mongodv.net.

05:25:24 Just copy this and uh paste it here. So you can see we have added this string from beginning to this part that is cluster zero and some id mongodv.net ate and at the end we'll add slash and add any project name. So we'll add our project name build.ai. That's it. Now after adding it save the changes and now we'll create the configuration for our connection.

05:25:50 So let's open the sidebar. In this server folder create a folder called config. In this config folder create a file called dv.js. Now in this dv.js JS just import the mongus package. After that let's create one function. So just add export async function and add the function name connect to database. After that let's add mongus dot connection dot on.

05:26:32 Now in this one just add the event name connected. So we are getting one event or we are registering one event. So when this connected event occurred in this case it will execute this function and here we will display a message. So just add console.log and provide the message that is successfully connected to MongoDB. Now after that let's come here and simply add await and use the mongus package dot connect method.

05:27:05 Here you can see we have added connection method and here we are using connect method. In this connect method simply provide the connection string from the environment variable. So just add process envong URI from here. Let's just copy this add it here. That's it. So we have created this function that will help us to connect with the MongoDB database.

05:27:34 Now just come here in the main file that is server.js file and here we have to call that function. So after this app instance we'll add the connect to database function and call it. You can see this function has been imported from config / db. Let's add the file name extension db.js. save the changes. Now it will connect our project with database and uh let's come back here in the MongoDB dashboard again.

05:28:07 Click on done and after that we have to update our IP address. Just come here in the left sidebar. Open database and network access. Then go to IP access list and click on this edit icon and uh just clear it. Here we'll add 0.0.0.0. So it will allow us to connect with the database from any IP address. So you can see it is displaying the status pending once it is accepted or active.

05:28:39 Then we can connect with our database from any IP address. Now you can see the status is active. Let me just come back to the VS code and let's open the terminal. In this terminal the backend server is running and you can see the message here that is server is running at this URL. And after that we have the message successfully connected to MongoDB.

05:29:08 It means we have created our express server and connected this express server with MongoDB database. Next we have to store the data in database. For that we have to create the models. In this project first we'll create the APIs for user authentication. It means user can create an account or login into existing account and the user data will get saved in the database.

05:29:33 For that we'll create the model and using the model we will store the data in MongoDB database. So in this server folder create a new folder and write the folder name models. In this models folder create a file that will be user.js. In this user dot js file let's create the model. And for creating the model first we have to create the schema. So let's add import and provide curly braces from mongus and from this mongus let's get the schema.

05:30:19 After getting the schema here just add con user schema equal to new schema. In this schema we have to define all the properties that we will store for this user data. So just add the name and in this name we'll add the type. Type will be a string and then we'll add the required. Required will be true to store the user data. This name field will be required.

05:30:44 Then we'll add the email. So just add email and then we'll add the password. So here we have added the email. Type is a string required true and in this one we have added unique true. So the email should be unique for creating a new account. Then we have added the lowerase true. So it will store the data in lower case and trim true. So it will remove the extra space from the beginning and end of this email id.

05:31:09 Then we have added the password type will be string and required true for adding the user data. Then we'll add the comma and provide one object. In this one provide the timestamps true. So it will automatically add the time and date when this data was created or modified. Now after that here we'll add a function. So just add the comment here that is has password before saving.

05:31:30 It means we'll encrypt the user's password before we save the password in database. So just add the user schema here then dot pre and provide the event save then add comma and create the async arrow function. Now in this function let's add if statement and provide not of this dot is modified and provide the password. Then simply add return. After that we'll add const salt.

05:32:13 We'll generate the salt for encrypting the password. So just add cons salt equal to await and here we will use the brypt package. So just import it. Here we'll add import brypt from brypt package. And uh after that let's add await brypt dot hash. Let's add await decrypt dot gen and provide the digit 10. Then we'll add this dot password equal to await.

05:32:58 Then add brypt dot hash that will hash the password. So just add this dot password and provide the salt here. So now we'll get the encrypted password. Now after that let's add one method here that is for compare password. So just add compare password method. Let's add user schema dot methods dot compare password equal to asynchronous function and in this parameter we'll get the password and uh after that just add return and in the return we will use the brypt dot compare here and provide the password.

05:33:53 Then provide this dot password. Now after that we can create the user models. Just add export con user equal to mongus dot model and provide the model name user. then add the schema that is user schema. So we have created the user model here and this one we have added one compare password method and we have added the password encryption also. Now after that we'll create the controller using that we can create the user account or user can login with the existing account.

05:34:36 So let's come here in the sidebar. Here you can see we have the server. In this server create a new folder and write the folder name controllers. In this controllers folder create the file that will be ocontroller. So just add a new file ocontroller dot js. In this o controller we have to create the controller function. So just add export async function and the function name is register and in this function parameter we will get the request and response right and uh next we'll create the another function that is login.

05:35:27 So just copy this one, paste it here and write the function name that is login. After that we'll add one more function. So just add a new function here and write the function name log out. And uh after that let's add one more function that will return the same user data. So just add the function name me that will return the own data for the user. Now let's start with the first one that is registration or user register.

05:36:05 So in this one we need some data from the request right. So just add const equal to the request dot body. So in the request body we will send some data for user registration. So we need the email name and password for user registration. So just add name, email and password from request body. After getting it, we'll add the if statement and verify all data is available or not.

05:36:36 So just add not of name or not of email or not of password. If any of this data is missing then we'll add the response. So just add response dot a status and set the status 400. Then we'll add dot JSON and uh in this JSON just provide object where we'll add the error. So the error message will be name, email and password are required. Then we'll add the return.

05:37:15 Now suppose all data is available. Then we'll add con trim or trimmed email equal to use the email dot to lower case and then dot trim. After that we'll add con existing equal to await. We will find the existing data. So just add the user model here. Import the user model. You can see it has been imported from model/ user and provide the file name extension.js.

05:37:56 Now after that here we'll add user dot find one. In this find one we will add the email because the email id is unique. So we have added email and provide this trimmed email and we will find the existing user. Now we'll add if statement if existing is true. It means we have the user existing with this email id. In this case we cannot create an account.

05:38:26 So just copy this statement paste it here. We will add response status 400 then JSON error and the error message is an account with this email already exist and then return. Now suppose the existing is false. In this case we can create the user data. So just add con user equal to await and use the user model. Let's add capital U for the user model dot create method.

05:38:57 It will create a new user and provide the name. Then add the email. In the email, we will store the trimmed email. Then we'll add the password. Right? So it will create a new user in the database. After creating the user, we have to set the sessions. It means we will set the cookies in the session. Using that we will authenticate the user for every request.

05:39:28 So for that we'll create a new function. So here let's add comment called helper to set cookies. Let's add con set session cookie equal to add a function and provide the request and then provide payload. Now in this one we'll add con we'll generate a token. For generating the token we'll add con token and equal to we will use JSON web token package.

05:40:05 So just import the JSON web token here. So just add import JWT from JSON web token and just add JWT dot sign then provide the payload here. Then add comma and here we have to add one secret key that we will store in the env. So just open env file and uh in this one let me add one environment variable like JWT secret and here you can add any secret key.

05:40:43 So just add any key here you can add anything in this secret key and after that let's come back here in the user controller or o controller. So in this o controller we are creating this set session cookie and provided this JWT sign payload and then provide the secret key. So let's add const JWT secret equal to our process env dot JWT secret. Then we'll add our fallback secret.

05:41:27 Now after that here let me provide this JWT secret and then provide comma here we'll provide the expiry time for this token. So just add expires in 30day. After generating the token, let me provide response dot cookie in this one. Just add the token, comma, and provide the token. Then add comma and provide one object. In this one, provide HTTP only true.

05:42:10 Then we'll add secure. So let's add secure it will be process env equal to production if it is production then we'll add secure true then we'll add same site it will be lax then we will add max age so just add this max age it means it will expire in 30 days then we'll add the path slash so we have to provide these configuration for the cookie Now after that let's come here in the controller function and uh after generating the user data let's add this function set session cookie in this one just add the response then

05:42:55 add object with user id that is the payload right so just add the user id it will be the user dot ID Then we'll add dot to string. Then we'll add the comma email. In this email just add user dot email. Now after that we can send the response to user. So just add response dot a status to not one then dot JSON and in this response simply add the user property.

05:43:48 In this user property provide the underscore id. It will be user dot id. Then we'll add the name. So the name will be user dot name. Then provide email. Email will be the user dot email. So we have created our user registration function. After registration, we'll complete the user login function. So let me just copy the entire code from here and paste it here in this login function.

05:44:32 In this one you can see we are getting the name, email, password. So for login we only need the email and password. Remove this name. So we have the email and password. Then we'll add if not of email and not of password. So we have added either email or password is not available. In this case, we'll set the status 400 and the message is email and password are required.

05:44:59 So this is the error message. Then we'll add the statement to find the user using this email id. So let's add con user equal to await user.find one and provide the email. So the email will be our email that we are getting from the request. then dot to lower case then dot trim. Now after that we'll add if user not available. So just add not of user. Suppose we could not find any user with this ML ID.

05:45:40 Then we will add the response with a status 400 or let's add 4.1 then JSON error and provide the error message that is invalid email or password. Now after that let's add the password check. Suppose the user is available with the simil ID. Then we'll add const is valid equal to await and provide the user dot compare password method. So just add the compare password and simply add the password here.

05:46:20 So it will compare the given password with the saved password. And let's add if not of is valid in this case just add the response with a status 4.1 and message is invalid email or password and return. Now suppose the password is valid in this case we will set the session. So here we'll use set session cookie where we'll add the response then add the object with user id and in this user id we'll add user dot id dot to string and then we'll add the email it will be user do email then we'll add response do a status so

05:47:00 let's add the status 2.1 then JSON in the JSON we'll add the user property where we'll add the underscore id name and email. That's it. So, we have completed the user login function. Now, after that just complete this log out. In this logout function, we don't need anything from the request. So, here we'll add underscore request. Now, after that, just add the response dot cookie and uh in this one just add the cookie name that is token and provide the empty string here.

05:47:39 So just add comma empty string and then we'll add the configuration in this object. So in this object let's provide the http only true secure it will be process environment equal to production. Then same site lags max zero and path/ now after that simply add response dot json. In this JSON provide the success property and provide true. So we have created the log out function also.

05:48:13 And after that we have the last function that is me that will return the user's own data. So here let's add the if statement if not of request do user. It means we don't have the user data in the request. And this user property will be added using a middleware that we will create after creating this controller. So here we'll add the response dot a status and provide the status 4.1.

05:48:39 Then we'll add dot JSON. In this JSON provide the error message that is not authorized. So if the user property is not available in the request, we'll display this message in the return that is not authorized. And then we'll add the return. Correct? Now suppose the user is available. So let's add con user equal to await. Then we'll add user model dot find by ID.

05:49:19 And let's add the request dot user dot user ID. Then we'll add dot select and in this select provide minus password. So it will exclude the password and after that we'll add if statement if not of user then add response dot a status 44 and provide the message user not found and then return and finally here we'll add the response dot JSON and in this JSON add the user data just add the user now we have to add this request test dot user using a middleware.

05:50:16 So let me just create that middleware also that will get executed before executing our controller function. Let me open this sidebar and in this server we'll create a new folder called middleware. In this middleware folder create a new file and write the file name o middleware.js. JS [snorts] in this O middleware we will import the JWT from JSON web token and then we'll create a function.

05:51:00 So just add export function and the function name is O middleware and in this function parameter we'll get the request response and the next function. Now let's add if statement and before that let me find the token from the request. So just add const token equal to the request dot cookies dot token. Now we'll check the token availability. So just add if not of token.

05:51:41 If token is not available then simply add the response with a status 4.1 and provide the JSON with the error message that is access denied no session token provided and suppose the token is available then we'll add the try catch statement here and in this try block we'll decode the token. So just add const decoded equal to JWT dot verify and provide the token and then provide the process env dot JWT secret or fallback secret.

05:52:32 Now after that let's add the request dot user equal to decoded. So we have added the request dot user property and in this one we'll store the decoded value and then we'll execute the controller using the next function. Now let's come here in the catch block we'll add the error and provide response do status 4.1 and then provide the JSON with the error session expired or invalid.

05:52:59 Please sign in again. So we have created the middleware that will get executed before executing our controller. Now after creating the controller and middleware, we will create the route. So let's open the sidebar and in this server create a new folder called routes. In this routes folder, create a file and write the file name routes.js JS where you will add all the routes for the authentication feature.

05:53:29 So in this one we have to create the router. So let's add import router from the express package and uh after that just add con router equal to this router. Now in this router we'll add different endpoint. So just add oouter dot post method and provide the endpoint path. It will be / register and at this end point we will execute the user registration function.

05:54:02 So just add register function from the controllers / controller and then js. Now duplicate it. In the second one we'll add the path. It will be / login and provide the function that is login and import this function from the same file. You can see here we have the register from the controller. Let's update it. We will add ocontroller dot js and then we'll add login from the same file controllers o controller and here we have the login and register.

05:54:48 Now just duplicate it here we'll add / logout and here also we'll add the controller function that is logout. It has been imported. Now after that let's duplicate it. Here we will change the method. It will be get method. Just add oouter.get and then provide the path. It will be me. And then provide the middleware that is o middleware. This o middleware has been imported from the middleware folder.

05:55:23 O middleware.js. Then provide the comma and function that is me and import this function. You can see this function has been imported here from the controller. Now let's export this router from here. So just add export default and o router. Now we can add this o router in our main file that is server.js file. So just open the server.js and uh here let's add our authentication route.

05:55:51 So just add app dot use provide the path. It will be / ai / o then add comma o router. You can see o router has been imported from routes o routes.js. So we have created the APIs for user authentication where we have created the user registration login logout and user data API. After that we'll review our code using code rabbit. So just click here and commit the changes.

05:56:30 So let me add backend server created with authentication feature commit changes and sync changes. So it will commit the changes on GitHub in the development branch. Now we'll come back here in the GitHub repo and uh open the repository and click on this button compare and pull request. Then create pull request. After creating the pull request, the code rabbit will start analyzing the code.

05:57:25 You can see the code rabbit is running and it is analyzing the code. Now you can see the review has been completed. Here we have the review summary. And after that if I scroll down you can see here we have some critical issue in this ocontroller.js and it says remove the fallback secret. So we will keep it. Now let's come to the second one. Here we have ocontroller.js.

05:57:50 JS. In this one, we have to update our code. Let me open this postfix. You can see we have added the request but it will be response because in the code we are sending the response only response docy right. So just come back to the VS code and open the O controller and in this O controller you can see we have session cookie set session cookie and here we are using the request but it is not used in the function we are using the response so just copy and paste it here we are using response and payload save the changes

05:58:34 now just see the next suggestion I'll scroll down and see we have the in this middleware in this one we have some suggestion. So what we have to do we have to add the return right. So let's just come back here in the O middleware and you can see we have if not of token then we'll add the return and this response. Save the changes. Now just come back and uh see the next user.js in this user.js use a normal function instead of the add function.

05:59:12 So just come back here and open the user.js. In this user dot dot dot dot dot dot dot dot dot dot dojs you can see we have added the add function right. So let me update it here. We'll add a sync function like this. Save the changes. So we have added a sync function and in this one we have this this dot modified. Now let's see the next suggestion from the code rabbit.

05:59:44 So we have the suggestion for this server.js. In this server do js it is suggesting to provide the await. Let's come back and uh open server.js and we are calling this connect to db function or connect to database function. So before that we'll add the await and then connect to database and after that let's see the next one. Here we have the isue for origin because we have not updated the env file on the GitHub.

06:00:20 Then we have server.js and do not return internal exception messages. Just skip it. And now we have updated all the code according to the code rabbit review. Now we'll click on this merge pull request and confirm merge. That's it and come back to the repository. Now let me just come here and click on this pull. So it will pull the latest changes. So after creating the APIs for authentication, next we have to create the APIs for the project.

06:00:58 So that we can create the project using AI. We can create the website using AI. To create the API for project feature, we will store the project data in database. And to store any data in database, we need to create the model. So let's create the project model. So let's open the sidebar. And here you can see we have a models folder. In this folder, create a file called project.js.

06:01:37 Here also we have to create the model. So I'll copy the entire code from the user model. Just copy everything and paste it here. And let's update this code. So in this one we have the brypt. Let's remove it. Here we have user schema. And after that we have the user schema pre remove this one and remove this compare password method also. So now it is simple here we have the schema from mongos and we are creating the user schema.

06:02:08 So instead of this user schema here we are going to create the project schema. So let's add project a schema equal to new schema. Now in this project a schema we have to define all the properties. So first we'll add the name. So it will be the name of project. The type will be string required true. Then we will add the default value. So let's add comma and provide the default it will be untitled project.

06:02:38 So if we are not providing the name the project name will be untitled project. Then we have to add the description. So let's copy this one. paste it here. We will add the property name. So the property name will be description. The type will be a string and remove this required property. And the default value will be empty string. Now after that we'll add the next property.

06:03:12 So the next property will be files. Let's add files. I'll clear this one. So here we have files and the type will be [snorts] our schema dot types dot mixed. So this is the type for this files property and then we'll add the default value here. So let's clear it and simply add default. In this default we will add the empty object. Now after that we have to add the messages.

06:03:59 So let's copy this paste it here. We will add the property name. So it will be messages. Then we'll add the type. So in this type we have to create another schema. So let's add the empty array here. And here we will provide the another schema. and then we'll add the default. So in this default we'll add the empty array. Now let's add the schema for this message type.

06:04:28 So here let's provide con schema or let me just copy this entire code. Copy and paste it here. We will change the name. It will be message schema. Now after that just provide this message schema here in this type correct. Now after that let's complete this message schema only. So here we'll add the object. It's already there. So in this object we'll add the first property.

06:05:02 So the first property will be role for the message. In this role first we'll add the type and the type will be a string. Then we'll add the enum. In this enum we'll add the accepted values. So it could be user or assistant. Then we'll add the required it will be true. So this is the type for the role. After that we have to add the message content. So the content type will be a string and required true.

06:05:34 After this content we'll add the time stamp. So the time stamp will be type date and default value will be date do.now. Now here we don't have to generate the id. So just add one object here and in this object provide underscore id and provide false. So it will not generate the id for this message. Now after that let's come here and complete our project schema.

06:06:07 In this project schema we have added the name, description, files and then messages. After that we have to add the version. So it will be project version. So the type will be number. Default value will be zero. After that we have to add the owner. Right? So it will be the project owner. So just add owner in this owner property. Let's provide the type and the type will be our user data.

06:06:42 Right? So just add type property. In this one just add schema dot types dot object ID and then we'll add the reference. So let's add ref. And in this reference we'll add the user model. Then we'll add the required. So the required property will be true. Next we will add the another property that is published. So just add comma and provide published.

06:07:22 The type will be boolean and default value will be false. So by default the published will be false and user can make the project published. So it will be accessible by any user without authentication. Then we'll add the project a status. So let's add a status. In this a status we'll add the type a string and then we'll add the enum. In this enum we have to add all the accepted values in array.

06:07:50 So the project status could be pending, generating, revising, completed or failed. Correct? Now just add comma and here we will add the default value for the status. So the default value will be pending. Next we will add the files planned. So let's add the property name files planned. It will be type and in this type we have to add the a schema only.

06:08:32 So let's add the type and provide the array like this and then add comma default and the default value will be empty array. And uh let's add the next property that will be files generated. In this files generated just add the object with the type. In this type we will add the array with string. Then we will add the default. And in this default we'll add the empty array.

06:09:16 Next we will add current file. So in this current file add the type a string and default value will be null. Now we will add error. In this error property we will add the type a string and default is null. Correct? Now after that let me complete this files plant type is empty array but here we have to add the schema of the files plant. So let's scroll up here we'll add con plant files schema equal to new schema.

06:10:01 In this new schema add one object. In this object we'll add the path. We'll add the path property and in this path property provide the type string required true. So for the files there will be a path and after that we will add the description. In the description just add the type string and required true. So there will be a path and description for the files.

06:10:26 Now we'll add the comma here and provide another object where we'll add underscore id and make it false. So it will not generate the ID for this plant files schema. Now just add it here inside this array under this files plant like this. Save the changes and after that just come here. You can see here we have export con user. So instead of user we will add project export con project equal to mongus domodel and provide the model name.

06:11:01 So the model name will be project and here we have to add the schema that is project schema. So we have created the project model and using this project model we can store the data in database. Now we can create our controllers. So let me open the sidebar. Here we have the controllers folder. In this one, create a file and write the file name project controller.js.

06:11:37 Now in this controller file, we have to create multiple controller function for different APIs for different functionality. So here let's add one comment. we will add the comment that will be the method type or API type and then API endpoint. So the type will be post and the path will be / API/ projects right and uh let's add the description in the comment.

06:12:09 So here we'll add the description that is create a new project from an AI prompt. So the first controller function will be used for creating a new project using AI prompt. So let's create a function and export it. We'll add export async function and write the function name create project. Now in this function parameter we'll get the request and response like this.

06:12:47 So right now we have created one empty function. After that we have to create our next function. So the next function will work in the background when the project is generating. So it will update the generated project file in the database. Right? So let me add the description here. that is background worker to progressive generate files and update database in real time.

06:13:21 So let's create another function here like this and add the function name. So I'll provide the function name that is run background generation. In this one we will get the project ID and after that we'll add the prompt as parameter. Now after that we'll create the controller function here. For that we'll add the method. It will be get and the path will be / API/ projects.

06:13:52 You can see the API endpoint is same here and here but the type is different. It is post. It is get here. Let's add the description also. So we will use this function to display the list of all project owned by single user. So let's add the comment that is list all projects owned by the user summary only no files contents. Right? So let's add the function from here.

06:14:25 Just copy this and paste it here. Now in this previous function you can see we have added export. So let me remove this export because this function will be used here only. We'll add async function. That's it. Now in this one we have added export async function and let's update the function name. So the function name will be list projects. We have added the function name here list projects.

06:15:02 Now after that we'll create the another function. So first we'll add the comment. So let me just duplicate the entire thing. We will update the comment. So the first comment is the method type. It will be get and the path will be / API/ projects and id. And then we'll add the description that is get full project details. It means we will get the complete details of the individual project.

06:15:30 For that we'll add the function name that is get project and add the request and response in the parameter. After that we have to add the next function. So copy and paste it here. We will update the details. So first we'll add the method. it will be delete and the path will be / API/ projects/ colon id and then we'll add the description that is delete a project.

06:16:00 So we will use this function to delete a project. So just add the function name called delete project and here also we'll get the request and response in the parameter. Now duplicate this one here we will add the method. it will be put and the endpoint API projects id and files. Then we'll add the description that is update project files. So it will update the project file when we will edit the code manually.

06:16:33 So we have added manual edits. So just add the function name that is update project files. Now let's duplicate it. Here we will add the comment that will be type post and the path will be / API projects id and publish. So using this we can publish any project. We can mark it as public. So it will be visible to anyone. Right? So let's add export as sync function and provide the function name publish project.

06:17:17 Right now after that we have to add one more function here. So let's add the details that will be the method type. Then we'll add the endpoint/ API/ project/ public and id. And then we'll add the description that is get publicly published project details without o. It means using this function we can display the details of individual project and it can be visible to anyone who is not authenticated.

06:17:51 So here we'll add the function name that is get public project. So we have added all empty functions for this project controller. Now we will add the functionality in each function one by one. So let's start with the first one that is create project. For this create project, we need a prompt and we'll get the prompt from the request body. So let's add const braces prompt equal to our request dot body.

06:18:23 Now after getting the prompt, let's add if statement if let's add not of prompt. So if the prompt is not available or type of prompt not equal to a string in this case just add response dot a status it will be 400. Then we will add dot JSON with the error and the error message will be prompt is required and then we'll add return correct. Now suppose the prompt is available and the type of prompt is a string.

06:19:13 In this case we will check the user is available or not. So just add if not of request dot user this user property will be added using the middleware and we are checking the user property is available or not. If it is not available then let's add it here. Add this statement. We will provide response do a status 4.1 then JSON and provide the error and the error message is unauthorized and then return.

06:19:52 Now suppose the user is authenticated. In this case we can create a project in the database with the pending status. So let's add the command first that is create project in DB immediately with pending status. For creating the project we will add con project equal to await and then use the project model. You can see we are getting the suggestion just import it.

06:20:23 Let's scroll up. You can see the project is imported from model/ project and write the file name extension.js. Let's move it here at the first line. So here you can see we have added a weight project model then dot create method. So it will help us to create a new project in the database. Now let's add the details in this object. So first we'll add the name.

06:20:51 So in this name let's add planning project. Then we will add description. So in the description let's add the prompt that we have received from the request body. Then we'll add the files. So initially the files will be empty object. Then we'll add the messages. Now in this messages let's add the array. And in this array let's add the first object where we will add the role.

06:21:27 it will be user. And then we'll add the content. And in the content we will add the prompt. Then we'll add the second message. So just duplicate it. Here we will add the role assistant. In this one we'll add the content and the content will be planning project structure. Now after that add the comma here. Here we will add the next property that is version.

06:22:00 So the version will be zero. Next we will add the owner and in this owner we will add the request dot user dot user id. Then we will add the a status. So a status will be pending. Then we'll add files planned it will be empty array. Then files generated it will be empty array. And then we'll add current files. So the current file will be null. And then we'll add the error null.

06:22:34 So using this information, we will create a new project in the database. After adding this data in database, we can start generating our project. For that, you can see we have added this function run background generation. So it will start generating the project in the background and it will store the data in the database. So let's add the commit first that is a start background generation and call this function.

06:23:04 So let's call it here. Now in this function we have to provide two arguments that will be project ID and prompt. To provide it here you can see we have the project right. So simply add this project then dot id and after that we have to add the prompt also. So let's add the prompt. Now after that you can see we have the project ID. So let's convert it into a string.

06:23:33 So just add dot to a string. That's it. Now at the end here we'll add dot catch. So it will catch all errors and in this one we'll add the function. Now let's catch the error here in this parameter and after that let's provide console dot error in this console dot error provide back tick and insert the background AI file generation error for project and then insert the details using dollar sign curly braces and provide project dot id then colon and then add comma error save the changes.

06:24:35 Now it will keep generating the project in the background and after that we can send the response here. Let's just add response dot status and in this status we'll add 2.1 then we will add dot JSON in this JSON add the object where we'll add underscore id. So it will be our project dot id. Then we will add the name. In this name we will add the project dot name.

06:25:19 After that we'll add description. It will be project dot description. Then we'll add files. It will be empty object. Then we'll add the messages. It will be project dot messages. Then provide version. It will be project dot version. So we are sending these data in the response. Then we'll add the status. It will be project dot status. Then files planned it will be project dotfilesplanned.

06:25:48 Then files generated it will be project dot files generated. Then current file it will be project dotcurren file. Then error it will be project dot error. And then created at property it will be project do.created at. So we are sending these data in the response and it will execute our function that is run background generation and in this one we will use the AI to generate our project.

06:26:16 So for now let me skip this function we will create it later after creating all these functions right. So here let's come to the next one that is list projects. So in this list projects we'll add if statement. In this if we'll add not of request dot user. So if the user is not available in the request it means the user is not authenticated. So just add response status 4.1 JSON error will be unauthorized and then we'll add the return.

06:26:57 Now suppose the user is authenticated in this case just add con projects equal to await and then add the project model dot find method. In this find method add the object where we'll add the owner property. So this owner property will be the request dot user dot user id. Then we will add name one description one version one created at one and updated at one.

06:27:47 After that we will add dot sort. In this sort provide the object where we will add updated at minus one. Now we can send the response here. So let's add the response do.json JSON and uh in this one provide the project I mean projects. So here we'll get list of projects owned by a single user. After that let's come to the next function that is get project.

06:28:28 So here we'll get the details of a single project. Right? For creating it here we will add the same if statement. Just copy this, paste it here. We will add if not of request do user. Then we'll add the response unauthorized and return. And after that we have to find the project details. So just add con project equal to await. And here we will use the project model.

06:29:02 And in this project model we'll add find one method. Now in this find one add the object where we'll add underscore id and in this underscore id just add the request dot padams because in this request padams we are getting the id right so we will add the request dot padams dot id and after that we'll add the comma and provide the owner so the owner property will be request dot user dot user id.

06:29:36 Now after that let's add if statement if not of project. If we could not find the project data in this case just add the response dot a status for not four then json with the error message project not found and return. Now suppose the project data is available then we'll add con files object it will be empty object then we'll add for off loop in this for off we'll add con path and entry then of object dot entries then add the project dot files Then we'll add files object.

06:30:34 Then add the path equal to entry dot content. Now after that we can send the response. So let's add response dojson. And uh in this JSON let's provide the details. So I'll just come here and copy this one. Copy it and paste it here. So you can see in this response dojson we are adding underscore id that is project dot id then name then description and files.

06:31:14 In the files simply add this files object. Correct? Then we'll add the messages. Then version then we'll add the a status. Then files planned files generated and current file and error and then created at it will be project do.created at. So after this error we have the created at property. It is project do.created created at and with that we'll add the updated at also.

06:31:51 So just add the next one updated at and it will be project dot updated at save the changes. So we have completed our function to get the details of individual project right now after that let's scroll down and see our next function. So the next function is delete project. In this delete project again we will check the user is authenticated or not. So just copy this paste it here in this delete function.

06:32:23 If request dot user is not available then we'll add unauthorized and return. Now user is authenticated. In this case we'll add con result equal to await and use the project model dot find one and delete. In this find one and delete we will add the object where we will add underscore id. It will be request.padams do id. Then we'll add owner it will be request dot user dot user id.

06:32:57 Now after that we'll add the if statement if not of result. So in this case let's add response dot a status. it will be 4.4 and provide the error that is project not found and after that if the result is available in this case let's add response dot JSON and simply add the message that will be success message it will be true that's it so the project will get deleted now after that let's come here in the next function that is update project files.

06:33:45 So when we will make changes in the code file, it should update the project files in the database. So here let's add con files and get this files from the request dot body. After that we'll add if statement if not of files or type of files not equal to object. In this case just add response status 400 and error will be files object is required. Then we'll add the return.

06:34:29 Now after that come here and provide the if statement if not of request do user. In this case we'll add the same message that is request dot a status 4.1 JSON error will be unauthorized and returned. Now user is authenticated. Then come here and provide the con project equal to await and use the project model. Then dot find one. In this find one add the underscore id it will be request.params do id then add comma owner and provide request dot user dot user ID.

06:35:13 So here we'll find the project. Right. Now let's add if statement if not of project. So if the project is not available in this case just add the message that is request dot status 4.4 and the message is project not found and return and suppose the project is available in this case let me add the comment that is reveal project files map with content and hes.

06:35:43 So let's add const new files will be empty object then we'll add for of const path and content of object dot entries and provide the files. Now in this for we'll add the if statement if type of content is equal to a string. In this case, let's add new files and path equal to object and provide the content then comma and provide the has property. In this one, we'll add has content and content.

06:36:39 And we have to h our content using crypto. So let me just scroll up and here we will create a function just add has content function and provide the return in this one we'll get the content as parameter and provide the crypto and let's import it. We'll add import crypto from crypto and then we'll add crypto dot Create hash and provide MD5. Then dot update and provide content.

06:37:29 Then dot digest. Then [snorts] let's add hex. Then dot slice and provide 0 comma 12 and we are using this as content here in this for of. Now after that let's come here and provide the project dotfiles equal to new files. Then we'll add await project dots save and uh after that let's add con files object. It will be empty object. And then we'll add the same thing.

06:38:28 Just copy this. Paste it here. In this one, we'll add con path entry of object dot entries and provide project dot files. Then we'll add files object and path it will be entry dot content. And uh after that we can simply add the response. So just add response dot JSON and provide one object. In this object we have to provide the project details. So I'll copy from here.

06:39:15 Let's copy it and come back here. In this one we are providing underscore id. It is project dot id then name project.name then description then files. So the files will be files object then messages then version and uh after that we can remove these details. Simply add created at and updated at. Save the changes. So we have created this function that is update project files when we edit the code manually.

06:39:55 Right? Now after that you can see we have the next function that is publish project. Right? So in this one again add the same statement for user authentication check. We will add if request do user is not available then we'll add response do status 4.1 and the message is unauthorized and return. Now suppose the user is authenticated then we'll add con project equal to await and use the project model.

06:40:27 So just add project dot find one and update. Now in this one add our first object. In this one just add underscore id. It will be request dot padams do id. Then we will add owner it will be request dot user dot user id. We have to update the status right. We have to update the published property. Right? So you can see we are providing the method find one and update and it will help us to find the record.

06:41:07 Then we'll add comma and provide the next object where we'll add published property and make it true. So it will be publicly available. And after that let's add the next object where we'll add return document and provide after. So it will return the updated document. Right now after that here we will add the if statement if not of project it means we didn't get the project after update right so in this case we'll add response do a status 44 and then we'll add the error message that is project not found let me add it

06:41:53 inside the curly braces and if the project is available after update then we'll add response dojson with this success true and we'll add the published property it will be project dotpublished that's it save the changes so we have created this function using that we can publish a project right now after that we have to create this function that is get the details of the publicly published project so here we'll get the entire details of the project and it will be visible to all user without authentication.

06:42:35 Right? So in this one we'll add con project equal to await project dot find by id and we'll get the id from request patterns and id right here we are not checking the authentication then we'll add the if statement if not of project suppose we could not find the project using this ID provided in the padams then we'll add response status 44 and the error message is project not found and return then we'll Add another if statement.

06:43:06 Copy and paste it here. We'll add not of project do.publish. Suppose the project is available but published property is false. Right? Then we'll add response status 4.3. And in the error message we'll add project is not published yet. It means the project is available but it is not public. Right? Now suppose it is public in this case we'll add con files object will be empty object and then we have to add the for off.

06:43:40 So just copy the for off loop from here. Let's copy this one. Paste it here. Let's add con path entry of object dot entries. Then project dotfiles if let me remove this if simply add this files object path equal to entry dot content and uh after that we can send the response right for sending the response let's just copy the statement from here copy this response dojson and paste it here Now in this one we'll add underscore id.

06:44:32 It will be project id. Then name description and files. Then we'll add the version. That's it. ID name description files and version. Save the changes. So we have created this function. Using that we can return the details of published project. so that any user without authentication can view the published project. After creating these controllers, we will create the API routes.

06:45:03 For that, we have to create the route file. So, in this routes folder, create a new file and write the file name project routes.js. In this project routes, we have to create the router using express. So just add import router from express and after that let's add con project router equal to router. Now in this project router we will add different endpoint.

06:45:37 So let's add project router dot get and in [snorts] this one we'll add the endpoint. You can see we have added the type get and provide the endpoint. So just add the endpoint for this last one. You can see here we have the last controller that is get public project. So the endpoint will be this public/ id right and the type is get. So let's add it here.

06:46:12 Just add public/ id and then we'll add the comma and provide the function. So just add get public project and it is imported from the controllers project controller file. So just add the file name extension js. So first we have added this one because this will be public route right. So let me add the comment that is public route. Here we don't need any authentication and after that we have to add the other routes where we have to add some authentication right let me show you that we'll add project router and uh then

06:46:57 we'll add the method dot post. So we'll add the method post and then we'll add the end point. So let's add the endpoint it will be slash and then we'll add the controller that is create project. So just add the create project. It has been imported here. You can see this is the endpoint and the method is post. Then we will use the create project. And in this one we have to add the middleware so that only authenticated user can access this route.

06:47:28 So instead of adding the middleware here we can add the middleware just before this route creation. So here just add this project router dot use and in this use method we'll add the O middleware. So you can see O middleware is imported from middleware o middleware.js. Now after this o middleware use we'll create other routes and these routes will be protected.

06:48:02 Let me add the comment here that is protect all following routes. So now whenever we'll create the new route below this one all the routes will be protected. It means first it will execute this o middleware then only it will execute the controller. Right? So here we have added the first one. Let's add the next one. So just copy this is project router and then add dot.

06:48:36 We'll add project router.getate and the path will be slash. Then we'll add list projects. So list projects has been imported. When we'll hit this route using get method, we'll get the list of projects by individual owner. Now just copy this, paste it here. We will add project router.get and then colon id that is the project id. Then it will give the details of individual project.

06:49:03 So just add the get project controller. It has been imported here. Now duplicate it and uh here we'll add the method delete. And for this delete, we'll add the endpoint / id and provide the function that is delete project. Now just duplicate it. Here we'll add the type put and then we'll add the path. It will be colon id / files. And then we'll add the function that is update project files.

06:49:45 Let me just come back here in the controller. You can see we have this function called uh update projects files and the method type is put. Correct? Now come here in the routes and duplicate this one. So in the next one we will add the type post and in this post we'll add the path. it will be colon id and publish. So we will use this route to publish a project.

06:50:14 So let's add the function publish project. So we have added all the routes here and after that let's export this router from here that is project router. So just add export default project router. That's it. Next, we have to add this router in our main file that is server.js file. So, let's open server.js. And uh here let's add app dot use. And in this app dot use just add the path.

06:50:58 So, the path will be / ai/ projects. Let's add this slash also. / API/ projects and then we'll provide our router. So let's add project router. So you can see the project router has been imported from routes folder project routes.js file. So we have created the endpoint for our projects where we can create a project. We can display the list of projects.

06:51:28 We can get the individual project data. We can delete the project. We can update the files. We can publish the project and we can get the data of published project. Now we have to complete the functionality of this run background generation. It means we will generate the project or generate the website using AI. So we have to implement our AI feature.

06:51:53 To add the AI functionality first we need the keys for AI APIs. So let me just open the web browser and search for open router. We will use the open router keys. After that, let's sign up here. And after sign up, you will come to workspaces. And in the left side, you will find the API keys. And you will find this button new key. So just click here and create a new key.

06:52:22 Let me add the name for this key that is builder AI and click on create. So here we have a new key. Let me add this key in our environment variable. So let me open ENV file here. In this env file, we'll add one environment variable name. So just add open router API key and paste this key from open router. Copy and paste it here. After that we have to provide the model.

06:53:01 So let's add the another environment variable that is open router model and to get the model let's come here and let's go to homepage and after that click on this models from this navigation bar and here we will search for free. So it will display the free models and here we have the list of free models. So we are going to use this co here. Let's click on this one.

06:53:34 So this is cohair north mini code free and uh let's add the model name in our environment variable. I'll copy this one. Come to env file and paste this one that is coher/n north mini code free. So this model has some limitation. You can use 50 API request per day or up to 500 token per day. And if you go for any paid API then you will get the more limit and even that will generate a better response that will generate a better code for your website.

06:54:19 So we are using the free model here and after that we have to add the packages to add the AI functionality. So let's open the terminal. We will open the terminal. You can see this is the server terminal where backend server is running. So just add Ctrl C to stop the project. And after that here let's add npm install and write the package name AI. We will use this package for open router API call.

06:55:01 Then we will add a space at AI dash SDK / open AI. So we will use this package for creating AI schema and after that add a space and provide p-map. We will use this p map for mapping the files in database. Then we'll add the next package that is zod. So we will use this zord package to extract the structured data from the AI response. So you can see we have added these packages npm install AI then AI SDK then /open AI then pmap and zord.

06:55:57 Press enter. So it will install these packages and after installation we can verify it from the package.json file. Let me open package.json. Here you can see we have these packages pmap zord AI and AI SDK open AI. After adding it let's start our project again. So in this terminal we'll add npm rundev. So it will start our backend server again. You can see the message in the terminal successfully connected to MongoDB and server is running.

06:56:38 Now let's hide this terminal and in this one we'll add some assets. So let's come here in the downloaded file that is the downloaded asset. In this one you will find the server. In this server we have services folder. In this services we have four files that is code validator then content normalizer diff and prompts. So just copy this services folder from here and open our project folder.

06:57:06 Then go to server and in this server simply paste this services. So we have added the services here in the server project. Now close it and come back to the VS code. So if I open this sidebar here you can see we have the services folder and in this services folder we have four different file. Now we'll create a new file in this services that will be AI.js.

06:57:38 So just create a new file that is AI.js JS and in this AI dot js let's add import and provide curly braces from at AI SDK/open AI and from here we will get create open AI correct now let's add the comment here that is open router model client setup for this client line setup. Let's provide the con model equal to and use the model from the environment variable using process.env dot open router model which is here open router model.

06:58:29 After that let's add or and provide open router/free. Then we will add max concurrency equal to parse int. In this parse int we will add process dot env and uh let's provide a max concurrency and if it is not available then we will add or six then comma 10. After adding it, let's provide con open router equal to create open AI. In this create open AI, just add the base URL.

06:59:26 So the base URL will be https open router. AI/ API/v1 that is version one. Then we will add the API key. So let's provide the process envi key from the environment variable. Now after that we have to create the model here. So just add con model equal to open router and in this open router provide our model. That's it. Now we will create our function.

07:00:08 Using that we can generate the project. So let's add command first. We'll add the command. Generate project files. Then we have added plan first. Then build the files in order with fallback retries. It means first it will generate the plan then it will build the files one by one right. So let's add the function and export the function. So just add export as sync function and write the function name generate project.

07:00:50 So it will generate a project and in this project it will plan the files and then generate the files one by one. So let's create that function also that will handle the single file generate. So let's add the comment here that is generate a single files code. So just add a sync function and write the function name generate single file. Now for generating the single file code here we provide the file then all files.

07:01:26 After that we will provide the prompt then provide already generated files right and let's come here in this function that is generate project in this generate project we have to provide the prompt and then we'll add the callbacks in this file we have to create one more function that is revise project function right so let's add export async function function and write the function name that is revise project.

07:01:58 In this revise project we will get the prompt. After that we'll get the manifest then relevant files and then recent messages. So we have created three functions here and to complete these functions we need some schemas right. So let's create the schema in different file. In this services we will create a new file and write the file name AI schemas.js.

07:02:35 In this AI schemas we will use zod. So just add import zed from zod. We will use this zord for creating the schema. And uh let's add export const generation result schema equal to Z dot object. Here we'll add the files and in this files just add Z dot record and then Z dot string then comma again add Z dot string. Next we'll add the description and in this description we'll add Z dot string dot default and in this default provide generated project.

07:03:25 So we have added generation result schema. So this generation results will contain files. Now after that we'll create the next schema. So just duplicate this one. In this one we'll add the name that is file operations a schema or file op schema equal to Z dot object and here we'll add the details. So let's add operation optinum. In this one add array that contains create, update and delete.

07:04:10 So these are the file operations and after that we'll add the path. So we have added the path here and in this path let's add Z dot a string. Then we'll add content. So in this content provide Z dot a string dot null label dot optional then we will add search and replace. So we have added search and replace. For this one also we have added the same details.

07:04:46 Now after that we'll create our next schema. So I'll just copy this paste it here. Here we'll add the name that is revision result schema. In this revision result schema, I'll copy the details from here. Paste it here. Here we will add the operations. It will be Z dot array. And provide the file operations schema which is here. Then let's add the description.

07:05:20 It will be Z dot string dotdefault. And here we'll add applied revisions. Now we'll create our next schema. So let's copy this and paste it here. Here we'll add the schema name file plan schemas or schema. So we have added file plan schema z.object and provide the files. So let's add the files property. It will be Z dot array and uh after that we'll add the project name.

07:05:58 In the project name we'll add Z dot string dot default and then we'll add the value that will be generated project. After that just duplicate it. It will be project description. It will be Z dot string dot default and the data will be a react project. Correct? Now let's update this one that is files. It will be Z dot array. In this array let's add Z dot object.

07:06:34 Now in this one we'll add the path. It will be Z dot string. Then we will add the description. It will be Z dot string. Then exports. In this exports, we'll add Z dot string dot optional dot default empty string. Then we'll add imports. In this imports, just provide Z dot array. It will be Z do.ring dot optional dot default empty array. So we have created the file plan schema.

07:07:07 And after that we have to create our last schema that is file code schema. So I'll just copy the simple one. Just copy this and paste it here. Add the schema name file code schema. Then add code. It will be Z dot string. That's it. So we have created all these schemas. Let me show you one by one. Let's fold it. So here we have generation result schema, file operation schema, division result schema, file plan schema and file code schema.

07:07:48 After that we can come back to our AI file that is AI.js. Now we'll come to this AI.js file and in this one we'll start creating this generate project function. So in this generate project function let's add the comment that is phase one that is plan. So in the phase one we'll plan the project. So let's add the message in console also we will add console.log log and provide a message in back tick that is AI phase 1 planning file structure for and provide the prompt and in this prompt add the slice.

07:08:33 So it will display only 80 character when we add 0 and 80 and uh at the end we'll add this dot. So this message will be added in the console. Now after that let's add const object as plan equal to await and here we will use the generate object and we will get this generate object from AI. Let's scroll up. You can see generate object has been imported from the AI package.

07:09:09 Now in this generate object add one object where we will add the model then add schema. In this schema just add file plan schema from the schema file. You can see it is imported from the AI schemas file. So let's add the file name extension also that is js. Now let's come here add the comma after this a schema let's add system in this system property provide the file plan system and let's import it from the file that we have provided in the services that is this prompt let's open it and after that if I start typing

07:10:02 this we are getting the suggestions so you can It is imported from the prompts.js. After that, let's add prompt. So, we will add back plan a react website for and provide our given prompt. So, just add prompt. Then we will add the next properties that is max retries. It will be two. Now, we'll add if statement if not of plan. and find. In this find method, add the add a function.

07:10:43 We'll get the first file or individual file and then we'll add file dot path equal to / app.js. So in this case, we'll add plan.files files dot unshift and simply add the path. It will be app js using the slash. Then we'll add the description. So the description is main application entry point. Then we'll add exports default app. then imports and in the imports let's provide dot /styles dot CSS.

07:11:32 Now we will duplicate this if statement. Just copy and paste it here. So in this second if statement we'll add not of plan dot files dotfind. It will be path equal to /st style dot css. So we have added a styles dot css. Then plan dotfiles dot push and provide path that is styles dot css. Then we'll add the description. So we have added the description that is global CSS Google font import key frame animations utility classes then we'll add exports it will be none and import it will be empty array.

07:12:29 Now after that here we'll add if in this if we'll add the callbacks dot on plan then just add await and here use the callback dot on plan and provide the plan. After that we'll add console log here. So just add console do.log log and in this console log just add the back text and provide AI phase 2 generating then add the plan dot files.length length that will be total number of files and then we'll add files in parallel concurrency and then we'll add max concurrency.

07:13:32 After that just add this parenthesis and colon and provide dollar sign curly braces here. Just add the plan dot files dot map. Get the individual file and uh after that it will return file dot path. Then add dot join and in this join we will add comma and a space. That's it. So we have added this console log and uh after this we will add con files. It will be empty object.

07:14:16 Then provide let pending files equal to plan dot files dot map. In this map we will add the individual file and after that add the parenthesis curly braces a spread operator and this file. Now we'll add max retry rounds it will be two. Then we'll add for loop. We'll add let round it will be zero. then round less than equal to max retry rounds. Just copy and paste it here.

07:15:01 Then round ++ that is round increment and then we'll add if pending files.length is equal to zero then simply add break. After that we'll add if statement. If round is greater than zero in this case we'll add console.log and in this console log we have added AI retry round and provide the round number max retry round for pending files.length then failed files and insert the pending files dom then it will return file.path path dot join using this comma and space.

07:15:52 Now after that just come here let's add con results equal to await and here we will use the P map let's import it we are not getting the suggestion so we will import it manually let's scroll up here just add import pmap from p-map we have already added this package now after that scroll Now in this result we'll add await pmap and then let's provide pending files comma asynchronous add a function.

07:16:36 Here we'll get the file as parameter and uh after that here we'll add the try catch a statement. Now in this try we'll add if callback dot on file start then just add await callbacks dot on file start then add file dotpath. Now come here after this if statement just add con single result equal to await and now we will use the previous function that we have already declared that is generate single file.

07:17:17 In this generate single file we will provide the file then provide the plan dot files then provide prompt and files. Now just add if. In this if we'll add callbacks dot onfile complete. In this case we'll add await callbacks dot onfile complete. Then add the file.path and single file or single result doc code. So here we have a single result then dot code and after that simply add the return in this return we'll add the object with success true and provide the file and then we'll add the result property result property

07:18:11 will be single result and come here in the catch block in this catch we'll add the return and provide the object with success false and provide the file and error it will be this error. Now after that here we'll add comma and provide concurrency. It will be max concurrency. Now [snorts] after that here let's add con failed files. It is empty array. Then we'll add for of just add con entry of results.

07:18:55 Then provide if entry dot success. In this case, we'll add con path and code equal to the entry dot result. then files path dot starts with slash if it is true then path else forward slash plus path equal to code. Now we'll add the else statement. So just add the else. In this else just add the console dot warn that is the warning. So we have added this warning and after that we'll add the failed files dot push and just add the entry dot file.

07:19:49 Now after that here we'll add the pending files equal to failed files. Now after that just add the if statement here. if pending files.length is greater than zero. So in this case let me provide const failed paths equal to pending files dot map and provide the arrow function with a single file. Then it will return the file dot path. After that we'll add dot join.

07:20:30 Then add comma and a space. Then we'll add one message in console that is console dot error like this. And after this console just add if statement if pending files dot sum and provide the arrow function with individual file file.path is equal to app dot js. In this case here we'll add con extension ext equal to file dotpath dotsplit and we'll split using dot.

07:21:05 Then just add dot pop then dot two lower case. Now after that let's add if extension equal to CSS. In this case just add files file.path equal to backix and insert / start. Then insert the file description and generation failed. Please retry. After that we'll add the else statement. In this else statement just add the files file.path is equal to and provide the string.

07:22:07 So we have added this string and here we'll add the text called import react from react like this. Then we'll add plus. In the next line, we'll add back tick and provide this comment. This file could not be generated. Please retry. Then plus in the next line just add back text and provide purpose. It will be file dot description. Then plus then we will add export default function and it is placeholder.

07:22:57 Then we have added this plus. After that we'll add return. Let me add the entire code here. So we have added export default function placeholder return. It will return a div with these classes. Here we have the message component failed to generate please try again. Now after that just come here and we'll add the if statement and provide not of files app dot js.

07:23:29 So in this case just add throw new error and the error message is AI did not generate appjs entry point and after that just add the return here. In this return let's provide files and description. In this description we'll add the plan dot project description. Save the changes. Now in this function you can see we are using the generating or generate single file.

07:24:04 Let's scroll up. You can see we are using this generate single file. So just complete that function also. So scroll up and we will fold this function and let's complete this generate single file. So in this function just add const system equal to build build file code system and import it from prompts. Then we'll add all files comma and provide already generated files.

07:24:41 Then we will add con user message equal to back tick and provide project colon and provide the prompt and uh after this prompt provide write the complete code for and then we'll add the file.path path then add the purpose and it will be file do.escription then we'll add console.log it will be AI creating file and the file.path path. After that just add con object equal to await and here we will use generate object.

07:25:31 Just add the generate object and it is already imported from AI package right and in this one provide the model and after the model we'll add the schema. So in this schema just add file code schema then we'll add system then we will add prompt that is the user message and then we'll add the max retries it will be two. After that here we'll add let code equal to normalize content and get this normalize content imported.

07:26:16 Let me open this normalize content or content normalizer.js file. Here it is. After that if I start typing you can see we are getting this sgestion to import it. And uh if I scroll up you can see it is imported from the content normalizer.js. Let's come back here. So we have added let code equal to normalize content and simply provide the object dot code.

07:26:52 Here we have the object and in this one we have the code. Now after that we'll add if code.trim dotlength is equal to zero. In this case, just add throw new error and provide the message generated code is empty after normalization. Now let's add the comment here that is apply postgeneration validation and autofix. Right? So here we will use the validator code.

07:27:26 If I open the services here we have the code validator.js. open this one and then let's add it here. So here just add con validation equal to validate and fix code. Just import it from the file and uh in this one provide the code then we'll add the file dot path. Then provide object with all planned files. It will be all files. Then we'll add code equal to validation dot code.

07:28:08 Now we'll add if validation dot warnings do.length is greater than zero. In this case we'll add console log and provide validator code adjustments for and file.path. And then we'll add the warning and join using dash. Now after that let's add another console log here. So just add console.log. And here we have AI created file and file.path and code.length characters.

07:28:46 Then we'll add the return statement here. So just add the return and simply provide the object with path. It will be file.path and then we will add the code also. Save the changes. So we have created the functionality to generate our project using AI. Now you can see we have the third function that is revise project. So let's complete this function also.

07:29:12 So in this one just add const context parts equal to empty array. Then we'll add context parts dot push and provide the string here. So we have added current project files manifest. Then we'll add context parts dot push. And here we'll add this string. After that we'll add for of in this for of we'll add con file of manifest. It will be context parts dot push and provide back text with dollar sign curly braces file.path path space and let's add parenthesis that contains file has comma file dot size b.

07:30:16 Now after that we'll add context parts dot push and provide this a string. Now we'll add the if statement here. In this if just add object dot keys and provide relevant files that we are getting as parameter and then we'll add dot length is greater than zero. So if we have the relevant files in this case we'll add context parts dotpush and provide the file contains for reference.

07:30:55 Then we'll add the for. So let's just copy this and add it here. We'll add for of and con path and content of object dot entries and provide relevant files. Then we'll add context parts dot push and provide the back text. In this back we add this n and path. Then we'll add the content. Now after that here we'll add another if statement. In this if statement we'll add recent messages dotlength is greater than zero.

07:31:36 We are getting the recent messages here as parameter. So in this case just add these statements copy and paste it here that is context parts dotpush and provide this string and after that we'll add for con msg that is message of recent messages dot slice and provide minus 3. Then we'll add context parts dot push and provide back text with dollar sign curly braces and uh insert the message dot roll and message dot content.

07:32:26 Now after that let me close this curly braces here. Now it is correct. Here we'll add context parts dotpush provide back text and provide the message revision requested and add the prompt. Then we'll add console.log and provide the message from AI revising project. Then we'll add const object as row pared equal to await and here again use generate object.

07:33:09 Now in this generate object we will add the model. Then we'll add the schema. In this schema just add revision result schema and import it from the schema.js or AI schema.js. Then we'll add the system. In this system we'll add revise system from the prompts dot js. Then we'll add the prompt. In the prompt, we'll add context parts dot join and provide back slash n.

07:33:59 Then we'll add max retries it will be two. Now let's add the if statement here. In this if we'll add row passed and array dot is array row passed dot operations. In this case we'll add raw path dot operations equal to raw dot operations dot map. And uh let's add the add function and provide the individual operation. And here we'll add if statement if not of op or type of op not equal to object.

07:34:46 Then return and provide the op. After that we'll add let operation a string equal to a string and then we'll add op dot op or empty string then dot trim then dot to lower case. Now we'll add if statement here. If array contains create add new includes operation a string then simply add opt equal to create then we'll add else if and provide this array that update edit modify patch dot includes operation string Then provide op dot op equal to update.

07:36:00 Let's move this parenthesis here. Now it is correct. After that let's add another else if. Just copy and paste it here. In this one we have added else if delete remove d or rm dot includes operation string then opt equal to delete. After that just add the if statement. If op.path and type of op.path path is equal to a string and not of op dot path start with forward slash in this case just add the operation dotpath it will be forward slash plus optath now let's come here here we will add if optent then we'll add optent

07:37:00 equal to normalize content and provide op.content. Now let's duplicate it. Here we'll add opt. Then add optarch equal to normalize content opt. Let's duplicate it. We'll add op.replace and provide op.replace replace equal to normalize content op dot replace. Now just add the another if statement if opt equal to create and operation dot content. Now in this if statement we'll add con validation equal to validate revision content and import it from the code validator.

07:38:01 And after that we'll add operation dot content in the first argument and then provide operation dotpath and then we'll add comma create. Then we'll add operation dot content equal to validation dot content. Again we'll add the if. Let's add validation dot wararning.length is greater than zero. In this case just add console log. So we have added this console log and uh after that we'll add else if and this else if we'll add operation dot operation equal to update.

07:38:54 Let me remove it from here and we will add it here. For this if we'll add the else if here we have equal to create and here we have equal to update and operation dot replace. So in this case just add con validation. So just copy this one paste it here. validation equal to validation revision content operation dotreplace dot operation dot path and here we'll add update.

07:39:35 Now after that just add operation dotreplace equal to validation dotcontent. Then we'll add if validation dot warning.length is greater than zero in this case simply add one console log. So we have added this console log here. That's it. And after that here simply add the return and return this operation. And at the end here we'll add return and provide raw pasted.

07:40:14 Save the changes. So we have completed the function that is device project. Now let's use this generate project function in our project controller. So let's open the controllers. Then we have the project controller. Now in this project controller we have the run background generation. So in this run background generation just add the try catch. Now in this try block first we'll add the console log.

07:40:50 So we have added this console log that is background AI a starting generation for project and the project ID. Then we will add the con result equal to await and use that function that is generate project and get this project from the services folder and AI.js file. Let's scroll up. You can see it is imported from the services/ AI.js. Now after that here we'll add the argument that will be prompt.

07:41:24 Then we'll add the object. In this object we'll add on plan. It will be asynchronous add function with the plan in the parameter. Now here we'll add the console log again. So we have added this console log and provide the con file list equal to plan dot files dot map. In this map add the arrow function get the individual file. Here we will add the back tick.

07:42:08 In this back tix we'll add dash back slash file.path then colon file dot description and after that we'll add dot join and in this join add back slash n. Now we'll add await project model dot find by id and update and provide the project id to find the project and then we'll add the object that will update the data. So just add the name property. In this name property add plan dot project name or generated project.

07:42:51 Then we'll add the status. It will be generating. Then we'll add files planned. It will be plan dotfiles. Then we'll add dollar push object. And uh in this object just add the messages. So just add the messages. It will be ro assistant. Then add the content. So in the content let's provide planned website structure and then file list. Then we'll add the time stamp.

07:43:27 It will be new date. Now after that let's come here. Here we'll add on file start. It will be asynchronous add function with the path in the parameter. Here also we'll add the console log. Let's add it here. And after this console log, we'll add await and simply use the project model dot find by ID and update. In this one, we'll add the project ID, comma, and provide one object where just add the current file.

07:44:09 It will be path. Now after that let's add the comma here and provide on file complete. It is also asynchronous add function. Here we'll get the path and code. Here we have on plan. After this on plan we have on file start and then on file complete. Now in this on file complete again we'll add one message in console. So just add console.log log and then we'll add con project equal to await and use the project model dot find by id and provide the project id.

07:44:51 Now after that let's add if project if the project is available in this case just add project dotfiles equal to the project dotfiles or empty object then we'll add project dot files path equal to object that contains content it will be code then hash has content Then we'll add the project dot files generated equal to array with a spread operator and provide project dot files generated or empty array then comma path.

07:45:41 After that we'll add project dot messages dotpush. So just add the role assistant content and timestamp. So in the content we have added created file and the path. Now after that here we'll add the project dot current file it will be null and then project dot mark modified and provide files. Then we'll add await and project dot save. So it will save the changes in the database.

07:46:18 Now after that here we'll add console.log that is background AI successfully generated project and the project id. Now let's add con project equal to await and provide the project model dotfind by id and provide the project ID. Then we'll add the if statement if project is available. Then provide project dot a status it will be completed. Then add the project dot version.

07:46:49 It will be one. Then we'll add the if result dot description. In this case just add the project name and equal to result dot description. Then we'll add project dot messages dotpush. Here we'll add ro assistant and content and time stamp. So in the content we have added website generation complete. You can view and edit the files. After that let's add a weight and provide the project dot save to save the data in database.

07:47:35 Now let's come here in the catch block. In this catch block we'll add the error and then we'll add the console. Now we'll add await and provide the project dot find by id and update. Here we'll provide the project id then comma and provide one object. Here in this object we'll add the status failed and the error will be error dot message. And then we'll add the dollar push and provide one object.

07:48:09 And here just add the messages. In this messages, let's add the role assistant. And then we'll add the content and time stamp. And the content is generation failed and the error dot message. That's it. So we have completed our function that is run background generation. Now we can generate the content in the background when we enter the prompt. Now after that we have to add the functionality for the chat.

07:48:41 It means we can enter the prompt in the chat to revise the website or again edit the website. For that we'll create a separate file. Now let's create the chat controller for creating the chat APIs. Using that we will update our generated project. So just open the controllers folder. In this one create a new file and write the file name chatcontroller.js.

07:49:13 In this one we have to create a controller function. So first let me add the method type. it will be post and the path will be / API/ project/ colon id and chat. Then we'll add one another command that is send a revision prompt and return updated project. So let's create and export the function here. So just add export a sync function called chat. Here we'll get the request and response.

07:49:56 Then we'll add const and we'll get the prompt from the request body. So just add the request dot body and here we will get the prompt. Now we'll check the prompt is available or not. So just add if not of prompt or type of prompt is not equal to string. In this case simply add response dot a status 400 and we'll add the error message that is prompt is required and returned.

07:50:31 Now we will check the user is authenticated or not. So let's copy this paste it here. I'll provide if not of request dot user property in this case we'll add a status 4.1 then JSON with the error message that is unauthorized and add return now suppose the prompt is available then the user is authenticated after that we have to find the project so just add con project equal to await it and then add the project model.

07:51:11 Just click here to import it. You can see project model is imported from the models folder. Project file just add the file name extension.js. Now here just add dot find one. In this one let's add the underscore id. It will be request.params do ID. Then we'll add the owner property. In the owner property, just add the request dot user dot user ID. So it will find the project.

07:51:50 Now just add if statement if not of project. Suppose we could not find any project. In this case, just add response. status 4.4 and the error message is project not found and return. Now let's add one comment here. Suppose the project is available then we'll add comment set a status to revising and save user prompt immediately. So just add the project dot status equal to revising.

07:52:24 Then we will add project dot messages dot push. And here we'll add the object with ro user. And then we'll add the content. And the content will be our prompt. Then we'll add the time stamp. It will be new date. After that save the changes in database. So just add await project dots save. Next we'll add the try catch a statement here. So let's add the try catch.

07:52:54 In this try block just add one comment that is build compact manifest that contains path hash size instead of sending all code. So we have to create a function for building the manifest. So just scroll up and here we will create that function. So just add export function and function name is build manifest and here we provide all files. So just add the files.

07:53:31 Now in this one let's add con manifest equal to empty array. Then for of in this for off we'll add the array with path and entry. Then we'll add object dot entries and files. Then just use the manifest dot push and provide the object with path. Then we will add hash. It will be entry.ash. After that provide size. It will be entry dot content.length and then return this manifest.

07:54:21 So just add return manifest and let's use this function here in this try block. So in this try block let's provide con manifest equal to build manifest and provide the project dot files. After that let's add another comment that is include all files contents so that AI can do accurate search and replace. So just add con relevant files it will be object.

07:55:13 Then we'll add for of and let's add path and entry of of object dot entries and provide the project dot files. In this one provide relevant files path equal to entry dot content. Now after that again add the comment that is recent messages for content that is last for maximum. So here we'll add const recent messages equal to project dot messages dot slice and provide minus4.

07:56:00 Then we will add dot map. Add the arrow function here in this map and get the individual message. And after that just add the parenthesis and object that contains the role. Ro will be message roll or m dot roll. Then we'll add content. It will be m dot content. Now after that we have to add one console log. So I have simply added this console log here and then we'll add one comment that is call AI with manifest plus relevant files.

07:56:42 So just add const result equal to await and here we will add a function that we have added in the AI.js file that is revise project. Import it. You can see here the device project is imported from the services/ AI then js. Now let's come here and uh in this one we will provide our prompt then provide manifest. After that provide the relevant files and uh recent messages and here we'll get the result.

07:57:20 Let's add the console log here. So we will add console.log that is AI got result operations.length and operations result dot description and after that just add one comment apply operations to file map. So just add const files updated files applied error equal to apply operations. Let's import it. So just open the sidebar. Here we have services and div.

07:58:03 So let's open it. And now we'll get the suggestion. So now if I type apply operations, we are getting the suggestion to import it. So let's import it and scroll up. You can see it is imported from the services/diff.js. Now let's complete this. So in this one provide some arguments that will be project dotfiles, result dot operations. Next we'll add the if statement if errors do.length greater than zero.

07:58:37 In this case, just add the console. That is the warning. And uh if there's no error in this case, we'll add update project in database. For that, just add the project dot files. It will be updated files. Then add project dot mark modified. Let's add files. Then add project dot version. It will be plus equal to 1. Then project dot a status it will be completed.

07:59:11 Then project dot messages dot push and add one object. Where we'll add the role. It will be assistant. Then we will add the content. In the content we will add result.escription plus error.length length is greater than zero. Then we'll add some operations field. Else we'll add the empty string and after that we'll add a weight and provide the project dot save.

07:59:50 Now let's come here in the catch block. But before that here in this try block only we will add one comment that is return updated project. For that just add const files object will be empty object and provide the for of. So in this for off we have added the const path entry of object dot entries project dotfiles and files object path it will be entry dot content and then we'll add response here.

08:00:23 So just add response dot JSON and add the object. So in this object we'll add underscore id. It will be project dot id. Then name it will be project dotname. Description will be project dot description. Then let's add the files. It will be files object. After that we have to add the messages. It will be project dot messages. Then add the version a status applied and uh errors.

08:00:55 Then we'll add the AI description. And here just add result dot description. Now come here in the catch block here we'll get the error and then add the console dot error. After that we'll add project dot a status and we'll mark the status completed. Then let's add await project dots save. Then add response dot a status it will be 500 and provide the error message that is error dot message or failed to process revision request.

08:01:31 That's it. So we have completed this chat controller and after that we have to create the route for this chat feature. For that let's open the sidebar and in the routes we have the project routes. So just open it and here before this export project router let's add the command that is chat and for this chat we'll use the project router and uh dot post method in this one add the endpoint that will be / id then / chat and then we'll add the function that is chat.

08:02:11 Let's import it. So you can see the chat function is imported from the controllers chatcontroller.js. Save the changes. So now we have completed all our APIs. So we have completed the backend server. Let me commit these changes on GitHub and we will review our code using code rabbit. So just click here and add one commit message. Backend server completed.

08:02:42 Commit changes and sync. After that, let me open the web browser and we will open the GitHub repo. Here we have this button compare and pull request. Then click here create pull request. And once we create the pull request, the code rabbit will start analyzing our code. Now you can see the code rabbit is running and it is analyzing our code. Now you can see the code rabbit has reviewed our code and here we have the review summary and after that you can see the code rabbit is suggesting some changes for different code

08:03:25 files. So you can see so we have to update the project controller js file. In this one we have one critical issue and here it is suggesting to remove this statement. It means we have to remove this if statement and directly provide this files object path entry content. So let me update it in our code file. And you can see the file name project controller.js and line number 245 to 250.

08:03:55 So just come back here and open controller project controller and then come to the 245. So here you can see we have the if statement. So we have to remove this if statement and directly provide this files object path entry content. Save the changes and let's see the next suggestion. So scroll down and see the suggestion for the next file. So here we have the suggestion in package.json.

08:04:29 So we can skip this one. It is minor. And after that you can see here we have the major issue in project router or project routes.js. So in this one we have missed this forward slash. So just come back to the VS code then open the routes project routes.js JS and you can see here we have the project router.get and here we have to add the slash just update this one and save the changes.

08:04:57 Now we'll come back here and see the next suggestion or work fix. So here we have the AI.js file. In this one we have the critical issue. So it is suggesting this fix. So we have to correct this spelling for validation. Let's come to AI.js js file and open the line number 235. So just open services AI.js and 235. Let's update it. It will be validation dotwnings.length.

08:05:36 It is correct. And uh after updating it, let's scroll down. You can see we have some major issue in the AI schema. So in this one we have the unused file import. So just come back to the VS code and open the AI schema and in this one you can see we have this file. So let's remove it. Save the changes and after that let's see the next iso. So here we have the content normalizer.js and uh here it is suggesting some fix.

08:06:11 So we have to remove these three lines and add this one. So I'll just copy it and open our content normalizer js file and come to line 27. Here you can see we have these commands and code. Right? Let's verify it again. So we have to replace all these three lines and add the new code. So we have updated it. Let me just come back here. We are getting some warning in this content.

08:06:43 Let me revert the code. So we have to remove this code and add the code from here. So let me just update this last statement. We will leave the comment as it is. So in this one you can see here we have this expression. Just copy it and update it here inside this replace. Now save the changes. Let's remove this extra parenthesis. save the changes. So we have updated this code also.

08:07:15 Now scroll down and see the next critical issue in this div.js. So here we have to update the code. We have to add the import statement import crypto. So just copy this one and open the div.js. And here at line one we will add import crypto from crypto package. Save the changes. And after that you can see we have some suggestion in this diff only. Here it is suggesting to replace this code in this line.

08:08:02 So just copy this one. and come to diff. Scroll down and here we have this code. Let me verify it. It is in 75 78. Right? So here we have the line number 78. Let me replace this one. Save the changes. Now after that you can see we don't have any other suggestions. So we have updated our code based on the code rabbit suggestion for bug fix. After that let me merge these changes in the main branch.

08:08:46 So just add merge pull request. Confirm merge and uh let me just come back here then click here and click pull. So it will pull the latest changes. So we have completed the front end and backend server. Now we will integrate these backend APIs with our front end. So let me close all these files. So right click here and select close saved and we will fold this one also.

08:09:18 So here you can see we have the client and server. To connect our backend APIs with client just open the sidebar and then come to client repository. In this one you can see we have the API folder and here we have API.js and in this one we have added the dummy data that is dummy user. Just remove this dummy user. After that you can see we have the initial projects.

08:09:41 Let's remove this initial projects. Then we have this API dodefaults dot adapter. So we will remove this one also. So now the API file is cleared. Here we only have the axios and we have created the instance of axios called API and provided the base URL and this is the vat base URL. So we have to update the base URL in our environment variable. So just openv file from the client.

08:10:11 So currently we don't have the env file in this client. So let me create that. In this client, we'll add new file with the name env. And here we will add in the environment variable with the name vase URL. And in this one we will add our backend server URL. So you can see the backend server is running at localhost 3000. So just add it here. Remove this forward slash from the end.

08:10:47 So it is http localhost 3000. save the changes and after that let me open our web page. So now you can see if I open the web page it is asking to sign in or sign up because we are not authenticated. So whenever we try to open our homepage it will redirect us to the login page and if we don't have any account we can go to create an account. So here we have to create an account.

08:11:18 So let me add the name greatest tag. Then we'll add one email id. So let's add the greatest stack@ample.com. And here we'll add the password then sign up. After sign up we can see our homepage. And on this homepage you can see we don't have any previous project. So we can create a new project. Here for that here we have to add a prompt. So here we will add a prompt.

08:11:52 Using that we can create a new website. Let's add the prompt. Create a portfolio website for a web developer. And after that we'll click on this send icon. So after adding the prompt it will open the project builder page. At the top you can see we have this path builder/ project id and in the left side you can see we have the chat. So in this chat we have our prompt and after that you can see the AI response that is planning project structure and in the main content area you can see planning architecture and betting

08:12:35 production ready react code base and we have the loading animation. So we have to wait for few minutes to generate our website. After few minutes you can see here we have the another response in the left sidebar which is the chat area and here we have the message AI agent is building and here you can see the progress. Here we have the list of files that is total number of files is nine and it is creating the first one that is app.js and the first one has been created now.

08:13:10 And here we have the list of files that is the file and folder structure. And in the left side if I click on this files here you can see we only have the app do.js because only app do.js is created for now and it is creating the other files one by one. So we have to wait for few minutes. Now you can see our project has been generated. Here we have the beautiful portfolio created using AI.

08:13:38 Let me scroll it. You can see it is a single page website where we have the features then testimonial. Here we have the contact section and we have the footer also right and after that let's go to code. So it will display the code also. We can manually edit this code and it will be autosaved in our database. If I go to left side in the files here you can see the entire file structure and folders.

08:14:09 So here we have the app and then components. In the components we have these files like contact features footer header hero and projects and testimonials. Let me open the hero.js. In this hero.js you can see we have the text. So let me update this text. Here we have the name. Hi, I am Alex. So, let me change it. Hi, I am Avin. And uh after that you can see it is updating the content on our website and we can see the live preview also.

08:14:51 Let's click on this open preview. So, it will open a new tab and you can see the full screen preview. So, right now it is a private project only. You can see this right and if I make it public let's click on this publish and now it is a public project and anyone can see this project using this link. Let me open this link in new tab. So this is the live link and it is publish project.

08:15:14 So anyone can see this project without authentication. Now after that let's see the next button that is export. So we can click here to export this entire code. So you can see we will get a zip file that contains all the code files. So we have created our portfolio website using the AI prompt and let's come here in the chat and if you want to modify anything using the AI then you can enter the prompt in this text area.

08:15:45 Enter the prompt like I want to update the contact I want to update the footer right and it will update the particular section only. So we have completed our project that is AI website builder. I hope this video will be helpful for you. If you have any question you can ask me in the comment section. Please like and share this video and also subscribe my channel great tag to watch more videos like this one. Thank you so much for watching this video.