YT YouTube2Text

YouTube2Text → Transcripts → Build a Full Stack AI Website Builder with MERN Stack | Complete AI SaaS Project Step by Step

Build a Full Stack AI Website Builder with MERN Stack | Complete AI SaaS Project Step by Step — Transcript

by GreatStack · 60,068 words · 9,689 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

0:00Hello and welcome back to another
0:02exciting tutorial of great stack. Today
0:05we are going to build a full stack AI
0:08website builder from a scratch using MER
0:11stack. This is a realworld AI SAS
0:14project where users can sign up, login
0:18and generate an entire React website
0:21using a simple text prompt. Once the
0:24website is generated, users can continue
0:27improving it by editing the source code
0:30manually or simply giving the new AI
0:33prompts to update any section of the
0:36website. So let's see the project demo
0:38that we are going to build in this
0:40tutorial. So let me log out from here.
0:43After sign out first it will display the
0:46signin page and if you are new on this
0:49website you can create an account using
0:51this create account form. So let me
0:53login with my existing account. We'll
0:55provide the existing email id and
0:58password. So we have added the email id
1:01and password and click on sign in. After
1:04sign in it will display the homepage and
1:06here we have the input field where we
1:09can enter our prompt to generate the
1:11website or we can also click on these
1:14buttons. So it will create these
1:15websites like rum website, personal
1:18website, business website, marketing
1:20website and here it will display the
1:22list of old project. So you can see we
1:25have already created another project.
1:26I'll click here. So this is the old
1:29project that we have created using this
1:32simple prompt. Let me just create a new
1:35project. So I'll come here and here
1:37we'll add a new prompt. So let's type
1:40create a modern
1:43website
1:45for a coffee shop
1:49and click on this send button.
1:53Now you can see the notification AI
1:55agent is planning a structure and here
1:58you can see the entire progress and in
2:01the left side also you can see the chat
2:03messages. So this is the message that we
2:05have added and here we have the response
2:07from AI and it will keep on updating
2:11when it complete the structure plan and
2:15after that it will generate the code
2:16file one by one and once the file is
2:19generated you can explore it in the file
2:22section in the left sidebar. So we have
2:24to wait for few minutes to get our
2:26project ready.
2:29Now you can see we have some response in
2:31the left side. And here also you can see
2:32the update AI agent is building. And now
2:35the file structure is ready. It is
2:38building total nine files. And currently
2:41it is building the hero.js file which is
2:44currently active. And one by one it will
2:47create all these files like app.js style
2:51dot CSS then header.js. You can see the
2:54progress 11% is completed. It means one
2:58file is completed out of nine. So style
3:01dot CSS is completed and it is creating
3:04the testimonial.js.
3:07So we have to wait for few minutes. And
3:10in the left side also you can see the
3:12updates like created file/styles
3:16dot CSS.
3:18Now you can see 22% completed and now it
3:22is creating the call toaction.js file.
3:26So instead of getting the entire code at
3:29once, you can see the entire development
3:32process a step by step.
3:35Now 33% is completed. It is building the
3:39footer.js and uh you can see these files
3:42are created. Appjs styles dot CSS
3:45header.js hero.js.
3:48Now we have five files left. Now you can
3:51see 89% progress completed and uh it is
3:56building our last file that is
3:58pricing.js.
4:01Now you can see our website has been
4:03generated using AI. Here we have the
4:05navigation bar, hero section and some
4:09features. And here we have the menu and
4:12reviews and then we have this footer.
4:16And in the left side you can see we have
4:18the updates and in the final message you
4:21can see website generation complete. You
4:24can view and edit the files. And to edit
4:27the website we can click here on the
4:29files. And here we have the list of
4:32files and the folder structure. Now if
4:35you want to update anything here let me
4:38go to
4:40hero.jsx. So we can update our hero
4:44section. Here you can see we have the
4:47content like this is the
4:50background image. If you want to replace
4:52it, you can add your own image URL. Then
4:56we have the title
4:59that is t the moment. You can update the
5:01title here. After that here you can see
5:03we have the description. Then we have
5:06our buttons. So this is the order now
5:09button and this is the view menu button.
5:13Let me change it instead of this order.
5:15Now let me change it to order online.
5:19So now you can see the update on the
5:21website also. Let me just come back to
5:24the preview mode again. So we can see
5:26the preview like this. And if you want
5:27to see the full page preview, you can
5:29click on this button open preview. So it
5:32will display the full page preview. It
5:34looks good. Now after that here we have
5:37the button to publish it. If I click
5:40here our website will be published. So
5:42that any user can view this website
5:45without authentication. It will be live.
5:48Let me open this link. So just click
5:50here and it will open this link. In the
5:52new tab you can see the path /publish
5:54and this project ID. Now this website is
5:58public and after that here we have the
6:01button to export it. If I click here you
6:04will get a zip file and here we have all
6:07the files and folders. Now let me update
6:10this website using the AI prompt also.
6:13So I'll just come back here in the
6:14sidebar and chat here. Let me add
6:17another prompt. So I'll provide the
6:18prompt change the navbar primary color
6:22from indigo to brown and send it. Now
6:26you can see here we have our prompt
6:29change the navar primary color from
6:31indigo to brown. And here you can see
6:33the loading. It means the AI is updating
6:37our website in the background. You can
6:39see the loading animation here also. Now
6:42here you can see we have the update
6:44updated navar primary color from indigo
6:47to brown across header.js and you can
6:50see the color has been updated in this
6:53navbar. Now after that let me just come
6:55back to the homepage and on this
6:57homepage you can see we have two
6:58projects. So this was the overview of
7:01our AI website builder.
7:04To power our AI website builder, we will
7:07use a free AI model from Open Router. So
7:10you can build and test this project
7:12without paying for expensive AI APIs.
7:16Throughout this tutorial, we will use
7:18Code Rabbit as our AI code reviewer. It
7:21will automatically review our code,
7:24suggest improvements, identify potential
7:26bugs, and help us write cleaner
7:29production ready code throughout the
7:31entire development process. Before we
7:34get started, if you enjoy these in-depth
7:37full stack tutorials, make sure to hit
7:40the like button, let's try to reach
7:425,000 likes on this video. And if you
7:45would like to see more AI SAS project
7:48like this in the future, comment AI
7:50website builder below. Your support
7:53really motivate me to create more free
7:55tutorials like this. Now, without
7:57wasting any more time, let's start
7:59building our full stack AI website
8:02builder. To create our project, we will
8:05come to desktop screen and here we will
8:07create a project folder and write the
8:09folder name builder AI.
8:15Now let's open this project folder with
8:19code editor. So we will use VS code.
8:22Now in this one first we have to create
8:24a react project. For creating the React
8:27project we will use the wheat package.
8:30So let's go to
8:34terminal and open a new terminal
8:38and in this one we will add npm
8:43create wheat at latest.
8:47Press Y to confirm the wheat version.
8:51After that it is asking for the project
8:53name. We will create a full stack
8:56project where we have to create the
8:58separate client and server. So first we
9:01have to create the client using react.
9:04So let's add the project name client.
9:08That will be our front end.
9:12Now it is asking to choose the variant.
9:15So here we will choose
9:19react.
9:20After that we will choose JavaScript.
9:26And here we'll press enter to confirm ox
9:30lint.
9:33After that it is asking install with npm
9:36and start now. So simply press yes.
9:42So it will install the required
9:44dependencies and start the project. So
9:47in the left sidebar you can see we have
9:50the client folder. If I expand this
9:52client, you can see the entire project
9:55structure like we have the node modules
9:57that includes all the packages. Here we
10:00have the public folder src and this is
10:03the main file index dot html. And in
10:07this terminal you can see we have this
10:09URL localhost
10:12port 5173. Let me open this link in the
10:15web browser.
10:18So you can see our basic V plus React
10:21project is successfully running in the
10:24web browser. Next we'll clear this
10:26project.
10:28Just come back to the VS code and we
10:31will hide this terminal.
10:33In this src you can see we have
10:37app dot CSS. We will delete this.
10:42And uh after that we have
10:45app dot JSX. So we will clear this file
10:48and here simply add RAFCE to create the
10:51React component structure. We are using
10:54this sort code because we have added one
10:56extension. If I open this extensions
10:59list
11:01here we'll search for
11:04ES7 react redux react native snippets.
11:07So we have to install this extension so
11:10that you can use the sort code to create
11:12this component structure.
11:15Now after that we have index dot CSS.
11:17Let's clear this one also and after that
11:21we have the main and then we have this
11:24index html. In this one you can see we
11:27have the project title which is client.
11:29So let me update this project title that
11:32will be webpage title. So here we will
11:35write builder AI
11:39and we'll add the channel name create a
11:42stag. Save the changes. After that we
11:46can update this favicon also. But before
11:48that let me save the changes and open
11:50the web page. So now you can see our
11:54default app is cleared. Here you can see
11:56the title also which is builder AI
12:00greatest stack and we have the default
12:02icon in the favicon. So we will update
12:04this icon. For that [gasps]
12:06let's just come here in the desktop and
12:09here you can see we have a folder called
12:11builder AI assets. So you can download
12:14this assets folder from the video
12:16description and in this one you will
12:18find the public folder server folder
12:23utils API.js
12:26assets.js and index dot CSS. So let's
12:30add these files in our project.
12:34So let me minimize it.
12:37I'll resize this one. This is the asset
12:39file or folder and this is the
12:43project [snorts] directory. Here we have
12:45the client and in this client you can
12:47see we have the src. So in this client
12:52src you can see we have the assets. So
12:55in this assets we have some default
12:58files right. So just remove all the
13:00files from here
13:02and after that let's open the assets
13:05folder and from this assets you will
13:08find the
13:10assets.js
13:13just copy and paste it here.
13:18After that let's come back here in the
13:21client. So in this client
13:25you will find the src. So within this
13:28src just paste this utils. So from here
13:32copy this utils and paste it here in
13:35this src.
13:37After that here you can see we have the
13:39public folder. So in this public folder
13:42we have the bg image favicon and logo.
13:45So just copy everything from this public
13:48folder and come here in the project. In
13:52this project also you will find the
13:54public and paste the files here.
13:58Replace the files in destination and
14:00remove this icon. SVG.
14:04That's it. So now we have added the
14:08files from public then utils. And now
14:12let's add this API also. In this API, we
14:15have created the dummy API that will be
14:17used in the client until we create our
14:20own backend server. So just copy this
14:23API.js from here and open our client
14:27project. In this client we have the src
14:31and uh in this src
14:34let's create a folder and write the
14:37folder name API and within this API
14:40folder provide this file that is API do
14:44js.
14:46So we have added the API.js JS assets
14:49and now just copy this index dot CSS
14:52also. Copy this index dot CSS and
14:55replace this one. In this client src you
14:58will find the index dot CSS. So replace
15:00it. So we'll paste it here and replace
15:02the file in destination.
15:05Now after that we'll open the VS code
15:08and here you can see
15:10we have the
15:12public folder. In this public folder we
15:15have these images. Then we have src. In
15:18the src we have assets and here we have
15:22the assets.js.
15:24In this one we have one
15:28array that is home tags. After that
15:33here you can see we have a utils folder.
15:37In this utils folder we have two files
15:40export project.js and sandpack utils.js.
15:46And after that in the API folder we have
15:48API.js
15:50file where we have created the
15:53demi APIs. And here this API will return
15:56some data like it will return the dummy
15:59user like this. Then initial projects.
16:04After updating this, let me save the
16:06changes and open the web page again.
16:11Here we are getting some error. no such
16:14file or directory
16:16that is Telvin CSS right so we have to
16:19add the dependencies also let me just
16:21come back and we'll add the dependencies
16:24for Telvin CSS to add the Telwind CSS in
16:28this wheat project we'll open the web
16:30browser and search for
16:34wheat plus Telwind
16:37let's open it and uh after that you can
16:41see the steps to create your project
16:44right so we have created our wheat
16:46project then you can see the second step
16:49install Telvin CSS for installing the
16:52Telvin CSS let's just copy this command
16:56copy this one and come back here in the
16:58VS code open the terminal and uh in this
17:02terminal
17:04let's add control C and you can see we
17:08are in the builder AI so we have to
17:10navigate into client so just add
17:12cdclient.
17:15Now we are in the client directory and
17:18here we'll paste this command npm
17:20install telvin css and add the rate
17:23telvin css/weet.
17:26So it is installing these packages.
17:30Till then we can see the next step. So
17:32the next step is to configure the wheat
17:36config.ts file. In this one, we have to
17:39add the Telwind CSS function and import
17:42it from this Telvin CSS/V. So, just copy
17:46this import statement first
17:50and come here and open vconfig.js.
17:54In this vconig js, just add this import
17:58statement and uh after this react, let's
18:02add comma and simply provide telvin css.
18:07Let's move it in the new line.
18:10Save the changes. Let's see the steps
18:12here. So you can see inside the plug-in
18:14we have to add telvin CSS that we have
18:16already added. Now after that we have to
18:19add this import telvin CSS in the CSS
18:23file. So that is already added here.
18:26Let's open
18:28src and uh in this src
18:32we have index dot css. So in this index
18:35dot CSS you can see we have already
18:37added import telind CSS
18:40let's see the next step. So now we can
18:43run our project and uh after that we can
18:46easily use the Telbint classes in any
18:49component in any HTML element. Right? So
18:55let's run our project again using npm
18:57rundev. Just come back here
19:01and add this command. But before
19:04starting this project, let me add the
19:06other dependencies also that will be
19:07used inside this client project. So
19:10after adding the telman CSS here we will
19:13add the routing right for that we have
19:17to add the react router DOM. So let's
19:20add
19:22npm install and the package name
19:26react router DOM.
19:30After that we'll add the next package
19:32that is react hot toast. Using this
19:35package we can display the toast
19:37notification. Then add a space and add
19:40the another package name that is lucid
19:43react. Using this lucid react package we
19:47can add the icons in our project. After
19:50that we'll add the moments package. So
19:53using this moments package we can format
19:57the date and time. Then we'll add the
20:00axios package. Using this axio package
20:03we will make the network request.
20:07Then we have to add the sandbox. Using
20:09the sandbox, we can enable the live
20:14editing for the code that we will
20:17generate using AI. So here we'll add at
20:21code sandbox/
20:24sandpack react.
20:27Add a space. Then we'll add the file
20:30server. Using this file server, we will
20:32add the codes in the sandbox. Because
20:36our codes are saved in the database and
20:39from the database, we have to display
20:41the codes in the sandbox. For that, we
20:43will use the file server and it will be
20:46used for exporting the code also, right?
20:49But for exporting the code, we have to
20:51create a zip. So here we'll add the next
20:54package that is js zip. Then add a
20:57space. And here we'll add one more
21:00package that is
21:02load
21:04debounce. Using this package we will
21:07enable autosaving of the code when we
21:09will edit the code in sandbox. So you
21:12can see we have added npm install and
21:14other packages name like react router
21:17DOM react hot toast Lucid React moments
21:21axios code sandbox/ sandpack-
21:25react then file server jsjip and load
21:30debounce press enter to install all
21:33these dependencies
21:38now you can see all dependencies has
21:41been inst installed. Let me verify it.
21:43We will hide this terminal and open the
21:46package.json file. So in this one you
21:49can see we have the dependencies and
21:51here we have code sandbox css exos file
21:56server jszip load dash debounce lucid
22:00react moment react react dom react hot
22:04toast react router and telvin css. So
22:08after adding these dependencies we can
22:10start the project again. So let's open
22:12the terminal and in this client
22:16directory we can add this command
22:20npm
22:22run dev.
22:26So it will start the project on the same
22:28URL. After that we can hide this and
22:31open the web page.
22:36So now you can see if I reload the web
22:38page you can see here we have the
22:40updated favicon icon and after this icon
22:44we have the text called builder AI
22:47greatest stack that is the title. Now we
22:50will connect our project with GitHub.
22:53For that we'll come back to the VS code
22:58and let's click on this source control
23:00icon
23:02initialize repository
23:04and here we'll add the message first
23:06commit.
23:10We'll click on publish branch
23:13and let's choose the repository type. So
23:16we will choose the GitHub private
23:18repository and the repository name is
23:21builder.ai. Let's click here. So it will
23:24upload our code on GitHub.
23:31Let me authenticate this.
23:35I'll click on this button. Authorize Git
23:37Ecosystem.
23:40Authentication succeeded.
23:43And uh after that let's come here in the
23:46VS code.
23:50So you can see our project is
23:52successfully uploaded on GitHub. Let me
23:54open the GitHub profile.
23:58So here you can see our project has been
24:00uploaded here. So we have uploaded our
24:03project on GitHub.
24:06Now that we have created our basic React
24:09project, it's time to start building the
24:11UI for our AI website builder
24:14application. But before we begin writing
24:16more code, let's set up an AI code
24:20review tool that will help us throughout
24:22this project. We will use Code Rabbit.
24:25Code Rabbit is an AI code review tool
24:27that analyzes your code, detects bugs,
24:32suggests fixes, and recommends
24:34improvements to make your code cleaner
24:36and more maintainable. It can save you a
24:40significant amount of development time
24:42by catching issues early so you can
24:45focus more on building features instead
24:47of debugging. Code Rabbit also comes
24:50with a powerful new feature called
24:53change a stack. It immediately groups
24:55related code changes, adds AI generated
24:58summaries and make large pool request
25:00much easier to understand and review. It
25:03also includes an agent chat where you
25:07can ask questions about the changes,
25:09understand the code better, and get
25:11instant explanations without leaving the
25:14review. I recommend using code rabbit
25:17for all your development projects, not
25:19just this one. If you are building
25:22projects with AI coding assistant or
25:24doing a lot of w coding, it's very
25:27common for a small bugs and code quality
25:29issues to slip into your project. Code
25:32Rabbit helps you identify those problems
25:35quickly and even suggest how to fix
25:38them, making your development workflow
25:40much more efficient. Code Rabbit offer
25:43multiple pricing plan. With the free
25:45plan, you can review your code directly
25:48from the CLI and within your IDE. If you
25:52upgrade to the Pro or Pro Plus plan, you
25:55can also get automated AI code review on
25:58every pull request, making it perfect
26:01for team collaboration and professional
26:03development. The pro plan also includes
26:07a 14 days free trial. And if you use the
26:10coupon code provided in the description
26:12below, you can get the pro plan
26:15completely free for 2 months. So just
26:17click on the link given in the
26:19description and sign up for code rabbit
26:21and let's integrate it into our project
26:24before we continue building our
26:26application. So I'll click on this get a
26:29free trial button
26:31and let me sign up using my GitHub
26:34account.
26:38Now I'll click on this button
26:41authorize code rabbit.
26:46After sign up, it is asking to select an
26:49organization. So let's select this one
26:51and click on install.
26:55After that here you can choose the
26:57individual repository or you can select
26:59this all repositories and click on
27:01install and authorize.
27:09After that we'll click on this skip
27:11onboarding.
27:13After that we will click on this button
27:15add repositories.
27:19So here we already have this builder AI
27:22that we want to analyze. Now after that
27:25we'll come back here in the
27:29GitHub and we'll go to settings
27:34and here let's go to
27:37GitHub apps. So here you can see the
27:40code rabbit is installed on this GitHub
27:43repo. So this code rabbit will analyze
27:45our code and suggest the improvements
27:47and bug fix. After that we have to
27:50create a new branch in our VS code. So
27:54let me just come here and click on this
27:56three dot and select branch create
28:00branch and write the branch name. So
28:02I'll write development.
28:06After that click on publish branch.
28:10That's it. Now whenever we will add a
28:12new code, write a new code, we will
28:14commit the changes in the development
28:16branch and after that we will create the
28:18pull request. So the code rabbit will
28:21review the pull request and after review
28:24we can merge the changes from
28:25development branch to the main branch.
28:29So after building the basic app and
28:31setting the AI code review tool code
28:34rabbit, now we will start building our
28:36project. And once we create our first
28:39feature, we will create one pull request
28:42to review our code using code rabbit. So
28:45let's start by creating the folder
28:47structure for our project. For that,
28:50let's come back to the VS code.
28:53Open this sidebar and in this one just
28:56create the folder structure. So in this
28:59src we have a folder called API, then
29:03assets and utils. Now we'll create the
29:07other folders. So in this src create a
29:10new folder and write the folder name
29:12pages.
29:14In this one we'll add all the pages for
29:16our project. Now we'll add the next
29:19folder for the components.
29:25After that we'll create another folder.
29:27So let's add the folder name. We'll add
29:30the folder name context.
29:35In this context folder, we'll create the
29:38context file to store the global states
29:41and function that will be used in entire
29:45application.
29:47Now after that let's start creating the
29:50pages also. So
29:54we'll come here in the pages folder. And
29:57here just create a new file and write
29:59the file name homepage.jsx.
30:06And here we'll add r a fce for creating
30:10the component structure.
30:13After that we'll create the
30:16next page. So in this pages
30:21let's create the new file and write the
30:24file name o page.jsx.
30:30So this o page will display the login or
30:34registration form.
30:37Here also we'll create the component
30:39structure. After that we'll add the new
30:42page. So write the page name builder
30:45page dot jsx.
30:52Now we'll create the
30:55next page that is preview page.
31:03After that we will create the next page
31:06that is publish page.
31:12And after that we'll add one more page
31:16that will be layout. So create a new
31:18file and add the page name or file name
31:22layout.
31:23Here also we'll add RAFCE
31:26layout. After that we will mount these
31:29pages on different routes. So whenever
31:32we'll change the route it will display
31:34different pages. For that
31:38let's open the
31:41app.jsx file. And in this one you can
31:45see we have a return. In this return we
31:48have a div. So let's remove this div.
31:52And here we can use the routes. But
31:56before using the routes let me undo this
32:00to add the div. And before using the
32:02routes, we have to enable the routing in
32:05entire project. For that, let's come
32:08here
32:10in the main.jsx.
32:13Here you can see we have a strict mode.
32:15So remove this a strict mode opening and
32:17closing tag. And here we'll add the
32:19browser router.
32:23We are not getting the suggestion here.
32:25So let's import it manually. Here just
32:29add
32:31import
32:33kal braces from and provide the package
32:38react router dom and from this react
32:41router dom we can get the browser router
32:45and provide this browser router here
32:48browser router opening tag and closing
32:50tag. Now in entire application we can
32:54use the routing. So let's come here in
32:57the app dot jsx and in this app dot jsx
33:01let's create one
33:04routes. So we will add the
33:08routes tag
33:11and import this routes tag from react
33:13router dom. Close this routes and within
33:16this we will add one comment. So let's
33:19add
33:21comment called login routes.
33:25So in this login routes, we'll create
33:29another route. So let's add
33:32route component.
33:35So let's click here to import it
33:38and close this route tag. So you can see
33:41we have added the routes and route both
33:45are imported from this react router DOM.
33:48Now in this route we have to add the
33:52element
33:55and in this element we will provide our
33:59layout.
34:01Let me correct it. We will add element
34:04equal to and then provide the opening
34:06arrow
34:08layout from pages
34:11like this. And within this let's add
34:15another route and it will be
34:17self-closing.
34:20In this route we have to add the path.
34:22So the path will be / login.
34:27Then we'll add the element. And in this
34:30element
34:32simply provide the o page.
34:36O page has been imported here. In this o
34:39page we have to add the props. So let's
34:42add the mode and in this mode provide
34:46login.
34:49Now duplicate this one and in the second
34:53one we'll add the path register.
34:57Then element and in this one also we'll
34:59add the o page and mode will be
35:01register.
35:03Right now after adding it, if I save the
35:06changes and uh come back here
35:13and here we'll add /
35:16login. So you can see it is displaying
35:18this layout at the top left corner
35:21because first we have mounted this
35:23layout here, right? But it should also
35:26display the o page. For that we have to
35:29modify our layout file. So just open the
35:33layout. JSX.
35:35In this layout file, let's wrap this div
35:38inside a fragment.
35:42So it will display the text called
35:44layout. And after that here we have to
35:46add the outlet. So just add
35:52outlet and import this outlet from react
35:55router DOM. Save the changes and open
35:58the web page. So now you can see first
36:00it is displaying the layout and after
36:02that it is also displaying the O page
36:06correct
36:08because it is also mounting this O page
36:13from here from the pages.
36:17Next we need the user data so that we
36:20can redirect the users. If the user is
36:22logged in then we will redirect the
36:25users on homepage and if the user is not
36:30logged in in this case we will redirect
36:32the users on login or registration page.
36:36For that we have to create one context
36:39file. So we have already created the
36:41context folder. Now in this context
36:44folder create a new file and write the
36:46file name app context.jsx. JSX
36:58in this app context. Let's create a new
37:02context using create context. So just
37:06add con
37:09app context
37:11equal to create context and import the
37:15create context from React. And in this
37:18one simply add undefined.
37:23Now after that we have to create the
37:26context provider function. So just add
37:29export function app context provider.
37:35And here we'll get the parameter. So
37:38just add the
37:41curly braces children.
37:45After that
37:47here we'll add the return statement
37:52and in this return
37:55simply provide
37:57app context dot provider. Close this tag
38:03and uh within this we will simply
38:06provide children
38:09and uh after that here we will provide
38:12the value. So in this value we can pass
38:15all the states and functions that will
38:18be used in entire application
38:21right. So let's simply add
38:26value and in this one just add the empty
38:30object for now.
38:32So we have created one
38:35app context provider function. After
38:38that we'll add one function using that
38:40we can easily access this context. So
38:42here just add export
38:47function and add the function name use
38:50app context.
38:54Now in this function just add const
38:58context
39:01equal to
39:03use context and import the use context
39:06from react and provide the app context
39:09here.
39:11After that we'll add the if statement.
39:13If
39:14context
39:16is equal to
39:18undefined.
39:20In this case we will throw the error. So
39:23just at throw new error and provide the
39:26message that is use app context must be
39:30used within an app context provider. And
39:34if it is false in this case simply
39:36return this context. So just add return
39:40context.
39:42So using this use app context we can
39:45easily access the context data. Now
39:48let's create some states that will be
39:51accessible in other components. So here
39:55let me create the state for user.
40:00Let's scroll up and here let's add
40:04comment that is o states. Just add const
40:10and provide the state name that is user
40:14and setter function is set user equal to
40:17use a state and initialize it using
40:20null.
40:23After that we'll add const
40:28and the state name is loading user
40:32and setter function is set loading user
40:36equal to user state and initialize it
40:38using true. So by default loading user
40:41will be true.
40:44Now we can use this user state in any
40:46component or any pages and based on this
40:49user we can display the homepage or
40:52login page. If the user is null then we
40:55will display the authentication page
40:57like login or register page and if the
41:00user is available in this case we will
41:02open the homepage or
41:05builder page and if the user is loading
41:09in this case we'll display the loading
41:11animation for that we have to create one
41:14loading component also so just come here
41:17in the components folder
41:19and here create a new file and write the
41:22file name loading.jsx.
41:29Here we'll add r a fce for creating the
41:33component structure. And uh in this one
41:38we have a div. So within this div
41:43we will add one
41:45icon. So just add opening arrow
41:48loader to icon from lucid react. It has
41:52been imported from Lucid React. And here
41:54we'll add the size 26. And with that
41:56we'll add some Telvin classes. So
41:58provide the class name property and
42:00animate spin text zinc 950.
42:05So we will add the class name property
42:07and provide the tailwind classes like
42:09height screen. Then flex item center
42:12justify center and background white.
42:16After that we can remove this import
42:19react. Save the changes and you can see
42:22we have exported this loading from here.
42:24So we can access this loading component
42:27in any file. Now after that we have to
42:30enable the context in entire
42:33application. Then only we can use the
42:35context data anywhere. So let's come
42:38here in the main.jsx. Again in this main
42:43jx we have to wrap our application using
42:46context provider. So here simply add
42:49import
42:51curly braces from and provide the path
42:55that is dot /
42:58context/
43:00app context.
43:04Let's simply add the app context. It
43:06will work. And uh after that we'll add
43:09the app context provider tag here. And
43:13now we'll wrap our application using
43:15this app context provider. So after this
43:18browser router just provide this app
43:21context provider and this closing tag
43:24and within this mount the app. So now
43:28the application have the support of
43:30context. So we can access the context
43:33data in any part of this app.
43:36After adding this app context provider
43:39tag now we will open our layout. So in
43:43this layout we'll add the functionality
43:44so that it will display different layout
43:48for different user states. So let me
43:52just remove this function from here and
43:54here we will create a new function and
43:57export it. So just add export function o
44:00layout
44:02and in this o layout we need the data
44:05from the context. So just add const
44:10braces equal to
44:13use app context. Use app context has
44:16been imported here. And from this one we
44:19can get the user and with that we can
44:23also get the loading user.
44:27So we'll get both a state. We are not
44:29getting the suggestion here because we
44:31have not provided it in the
44:34value. So just open the context file
44:36again that is app context dot jsx and uh
44:40we have to pass our context here in the
44:44value object right. So in this value
44:46object simply add
44:50user
44:53loading user save the changes. After
44:56that open the layout. Now if I type
45:00something we will get the suggestion.
45:04So we already have this user and loading
45:08user from context. Now after that
45:12let's add the if statement. If
45:16loading user is
45:18true. In this case we'll add the return
45:20and we'll return the loading component
45:22that we have just created. So just add
45:24the loading component here and close
45:26this tag.
45:28After that
45:31let's add another if statement. If not
45:34of user
45:38in this case just add the return and
45:42provide the
45:45navigation or navigate tag. Let's add
45:48navigate
45:53and import this navigate from react
45:56router DOM. Now in this navigate we can
45:59use the two and provide the path.
46:03So just add the path / login.
46:07Then we'll add replace.
46:11That's it. And after that we will
46:14provide return
46:16and in this return just add outlet.
46:22Now let's duplicate this function.
46:25Here we'll add the function name that is
46:27guest layout. For the guest layout again
46:31we'll get the user and loading user from
46:34context and we'll add if statement. If
46:37loading user is true, then it will
46:40display the loading component. And if
46:42the user is true, it means when the user
46:44is logged in, then we'll add the return.
46:48And uh after that, we'll add navigate to
46:52homepage.
46:55Save the changes.
47:01So in this one, we have created the o
47:03layout and guest layout. It means this
47:06layout will be displayed when the user
47:08is authenticated and still if the user
47:11does not exist then it will redirect
47:14them to the login page. This guest
47:16layout will open the
47:20login or registration page using this
47:22outlet. But if the user is already
47:26logged in then it will redirect them on
47:28the slash or homepage. Right. After
47:31creating it, we will open our main file
47:33that is app.jsx where we have created
47:36the
47:38routes. So in this one
47:43you can see we have added the layout. So
47:45instead of this layout we need the guest
47:49and o layout. We will update this one.
47:54So
47:56let me rename it
47:59here. We will add
48:01guest layout and import this guest
48:04layout from here. Just add curly braces
48:07guest layout from the pages/ layout.
48:11See this import statement
48:15and uh similarly we'll create the other
48:17routes here. So just copy this one paste
48:23it here. We will add the command that is
48:25protected routes. In this protected
48:28routes, we will use the
48:31O layout and uh import this O layout
48:35from the layout.
48:38See this importter statement we are
48:40importing the guest layout o layout from
48:42the pages/ layout and here we have added
48:45o layout and in this one we'll add the
48:48first route that will be for homepage.
48:51So just add slash and here we'll add the
48:54element and in this element
48:57let me provide
49:02homepage. Import this homepage.
49:05After that here we have the next route.
49:07So just clear it. Copy this one only.
49:11Paste it here. We will add the path. It
49:13will be /builder
49:15slash and provide the project ID using /
49:20id.
49:22Here we'll add the builder page and
49:27import the builder page. Now duplicate
49:30it. In the next one we'll add the
49:32preview. So just add preview/ colon id.
49:36And here we'll mount the preview page.
49:39Just import the preview page. Save the
49:41changes.
49:42After adding it,
49:45let me open the web page.
49:48Let's refresh it.
49:51So you can see it is displaying the
49:53loading animation because the user
49:55loading is true. If I come back to the
49:59context,
50:01let's open the context file. In this
50:05one, you can see we have added loading
50:07user true. So when the loading user is
50:09true, it will display the loading
50:11animation. Now here if I change it, if I
50:15make it false
50:18and the user is null in this case, if I
50:21come back to the web page, you can see
50:23it is displaying the O page. It means in
50:26this O page, we can display either login
50:29or registration page. And it is
50:33redirecting us on this / login. Let me
50:36remove it and go to homepage. You can
50:39see it is automatically redirecting us
50:41on the login page. Right? We cannot open
50:44the homepage. Let's try it. And you can
50:47see we are redirected to login page. Now
50:50just come back and instead of making it
50:52false, let's make it true. By default,
50:55it will be true. And here we'll make or
50:58create a function
51:01that will check the user state.
51:04So
51:06here only we will add
51:09o actions
51:11and provide const check session
51:16equal to asynchronous add function
51:22and uh in this function we will add the
51:24try catch statement.
51:27Now in this try block we will make the
51:30API call. So simply add con data equal
51:34to await and here we will use the API.
51:40So let's add the API and uh we have to
51:43import it. So simply open the API
51:47dojs. Here you can see we have added the
51:49axios. AOS is imported and we have
51:52created the AIOS instance called API.
51:56Right? So we will use this here.
52:02Let's come back in the context and now
52:06if I type API you can see we are getting
52:08the suggestion to import it. Let's click
52:10on this suggestion and you can see API
52:13is imported from dot dot/ API folder/
52:16API file. Right now here we will use the
52:21method.get
52:23and provide the path. So the path will
52:26be / API slash O
52:31slash me. Save the changes. Now after
52:35that it will return some data. So just
52:38use set user and provide the data dot
52:44user.
52:47After that here we'll add the
52:50set user in the catch block that will be
52:53null.
52:55Now after that we'll add the finally and
52:57in this finally we will set loading user
53:03and let's add false. So it will set the
53:07loading user false. Now after that we
53:10have to add the use effect to execute
53:12this function. So just add
53:16use effect. In this use effect create
53:18the arrow function and provide the
53:21dependency array. In this dependency add
53:24a just add
53:27check session
53:30and uh after that we'll add the check
53:33session function here.
53:36Simply call this function.
53:39Now save the changes and open the web
53:42page.
53:43So you can see it is opening the
53:45homepage because it is returning some
53:47user data. Let's come here in the API.
53:51You can see this will return one user
53:54data that's why it is displaying this
53:57homepage
53:59correct.
54:01Now we have to design our login page.
54:03For that first we will see the o page.
54:06So let's come here in the function that
54:09is check session function. So in this
54:13one you can see we are using this setter
54:15function set user. So just comment this
54:17one. If I comment it, it will not set
54:20the user. We'll come back here. Let's
54:23refresh it. You can see if I try to open
54:25the homepage, it is opening / login. And
54:28this is the O page. So now let's start
54:30designing our O page for user login and
54:34registration.
54:36But before we create our login and
54:39registration form, let me commit these
54:42changes on GitHub and review our code
54:45that we have written till now. We have
54:47created the folder structure. We have
54:49created the pages and set up the routes.
54:52Right? So let's come back to the VS
54:54code. And here we will commit the
54:55changes. Let's click on this source
54:58control icon. And here we'll add the
54:59message
55:02created
55:04created pages and routes.
55:08So it will commit the changes in
55:11development branch.
55:14That's it. After that we'll come back to
55:15the VS code.
55:18Let's come here on this repository.
55:22Here you can see this button compared
55:24and pull request.
55:30After that we'll click on this button
55:32create pull request.
55:36So we have created a new pull request
55:38and once we create the pull request. The
55:41code rabbit will start analyzing our
55:44code. You can see the code rabbit is
55:46running.
55:50So it is analyzing the code and after
55:52analyzing our code it will suggest the
55:55bug fixes if there is any bug and it
55:57will also suggest the improvements and
55:59it will also generate the detailed
56:01review summary.
56:05It is still running.
56:07Now you can see all checks have passed.
56:10It means the code rabbit has reviewed
56:12our code. And here we have the complete
56:14details of this code review. Here we
56:17have the review summary. And after that
56:21you can see the details of each files.
56:24So in this first file you can see it is
56:27suggesting
56:28add a fallback route for unmatched URLs.
56:33Right. And for this one here we have the
56:36prompt also. So we can simply add this
56:39prompt if we are using the web coding
56:41and it will add this fallback route.
56:45Correct. Or we can go to the next one.
56:49Here you can see here also we have some
56:51suggestion that is
56:54add ro status in the loading component.
56:58And for this one here we have the prompt
57:01that we can use to implement this
57:03changes. And here we have the proposed
57:06fix also. So in this one it is also
57:09providing the exact code that we can
57:11manually add in our code file to fix
57:14this one. Right? Similarly we have the
57:18suggestion and fix for each file. And we
57:22can see these changes and suggestions in
57:25the organized way using this review
57:28change stack. Just click on this button
57:30review change stack
57:32and it will open the code rabbit
57:34platform where you can see the entire
57:38summary and the each suggestions and bug
57:41fix. So it will open the code rabbit UI
57:45where you can see the files like this.
57:49And let's come here in the layers and
57:51we'll click on this one. So here we have
57:54the files where we have added some
57:57changes. And if I open the right
57:59sidebar, it is also providing the
58:01details about this review for each file.
58:06Let's open the next one. And in the
58:09right side, you can see the details.
58:11After that, let me open the first one.
58:15If we open this file here, you can see
58:18we have the proposed fix that we have to
58:21remove this command. So we have
58:23intentionally added this comment. We
58:25will keep it to display our o page and
58:29later we will remove this. So just skip
58:32this one. I'll come to the second
58:35suggestion.
58:36So here we have the suggestion
58:40stability and availability.
58:43So we have to update our check session
58:45in this one. So here it is suggesting to
58:49move it inside the use effect or wrap it
58:51using use call back. And for this one we
58:55can use this prompt to update this
58:57changes or we can manually add it in our
59:00code. Now let's see the next suggestion.
59:07Let me open the route configuration. And
59:10in this route configuration, it is
59:12suggesting to add a fallback route. And
59:14here we have the
59:17option to update it using the AI.
59:21Correct? And we can manually add it in
59:24our code also. To implement this
59:27fallback route, we'll come back to the
59:28VS code and open our app. JSX.
59:33And here let me add one comment that is
59:37catch all.
59:40And in this catch all just add one
59:43route. So let me just copy this one.
59:45Paste it here. Here we'll provide path.
59:49So in this path simply add star
59:52and after that we have the element. In
59:54this element we will use the navigate.
59:58So let me remove it and provide navigate
1:00:03and import the navigate from react
1:00:05router DOM. In this navigate we'll add
1:00:08the path using this two property. In
1:00:11this two property simply add slash and
1:00:13then we'll add the replace.
1:00:16So when we will open any unregistered
1:00:19route it will open the homepage.
1:00:22After that let's come back here.
1:00:26So you can see all the suggestions here
1:00:29one by one and you can go to overview.
1:00:32In this overview let's click on this see
1:00:36pull request description.
1:00:40After that see the walk through like
1:00:43this
1:00:44and uh after that in the right side you
1:00:47can see we have the agent. So in this
1:00:50agent we can write our prompt to ask any
1:00:54question about this pull request. So in
1:00:57this pull request we have created the
1:00:59context. So let me add one question
1:01:01about the context.
1:01:04Is the context implemented properly?
1:01:07Send.
1:01:10So here we have the response using the
1:01:12agent and here we have the response in
1:01:16different steps. So first it is
1:01:18suggesting for comment out this code
1:01:22that is set user right and after that it
1:01:25is suggesting for the use call back and
1:01:28uh in the third one it is saying we are
1:01:32not exposing this set user. So we cannot
1:01:35use it in other files.
1:01:38And here we have one minor issue about
1:01:40the network error that we will fix after
1:01:43building the back end and integrating
1:01:45the back end. Right? So this was the
1:01:47entire overview of the code review by
1:01:50code rabbit. And uh after the code
1:01:52review, we can merge the changes in the
1:01:55main branch. So let me just come back to
1:01:58the GitHub repo. Before we come back to
1:02:02the GitHub repo, let me implement one
1:02:04changes also. And uh it will be here in
1:02:07the session context. And uh let's scroll
1:02:11down. So you can see we have one
1:02:13suggestion for this loading component.
1:02:15Right? In this one we have to add the
1:02:18role status. So here we have proposed
1:02:21fix. Just open it and copy this code.
1:02:23Let me just come back to the VS code and
1:02:26open the loading jsx. And here we will
1:02:31paste this code.
1:02:33And we will add this one here.
1:02:40And let's remove this div.
1:02:44That's it. Now after that we will come
1:02:47back here and click on this link to come
1:02:49back to the repository.
1:02:53And here we'll click on this button
1:02:56merge pull request.
1:02:58Confirm merge.
1:03:00That's it. Let's come here in the main
1:03:04repository.
1:03:06So we have added the changes in the main
1:03:08branch. After that we'll come back to
1:03:09the VS code and uh click on this
1:03:14three dot then
1:03:16pull. So it will pull the latest
1:03:18changes.
1:03:21That's it. Now after that we will start
1:03:25designing our login and registration
1:03:29form. For that here we have the
1:03:32authage.jsx.
1:03:34So just open this O page dot JSX file.
1:03:39In this O page first we'll dstructure
1:03:43the props. We'll add curly braces and
1:03:45here we'll get the mode from the props.
1:03:48After that here we have the return
1:03:50statement. So in this return statement
1:03:53we will add a div.
1:03:55And in this div we'll add some Telvin
1:03:58classes. So just add the class name
1:04:00property and provided these classes and
1:04:03then we'll add the comment for the left
1:04:05and right side. So here just add the
1:04:07comment that is left panel that is for
1:04:10branding and then we'll add the right
1:04:12panel and in the right panel we'll add a
1:04:15form. Correct? Now after that here we'll
1:04:18add the mode also whether the mode is
1:04:22login or register. So here let's create
1:04:25one variable. We will add cost is login
1:04:30is login equal to we will use this mode
1:04:34equal to we will add this comparison
1:04:37login. So if the mode is equal to login
1:04:40then it will be true else it will be
1:04:42false. Correct? Now after that in this
1:04:46left panel we have to display the
1:04:48branding. For that we'll create a
1:04:50separate component. So
1:04:53let me open the sidebar and in this
1:04:56components create a new file login dot
1:05:00jsx.
1:05:02Here we'll add rafce for creating the
1:05:05component structure and uh after that
1:05:08here you can see we have a div. So in
1:05:11this div we'll add some classes just
1:05:13provide these tin classes and in this
1:05:16one you can see we have added the
1:05:18background. in the background we have
1:05:20added the URL and /bg image.png that is
1:05:25available in our public folder. Now
1:05:28after that within this div we have to
1:05:31add the first div.
1:05:34So here we have to add one brand logo
1:05:37and the text and after that we'll add
1:05:40the second div. So in this second div we
1:05:44have to add some text and uh let's add
1:05:49the brand logo in the first one. In this
1:05:52first div we'll add the img and in this
1:05:54image src we will add / logo. SVG
1:05:58because it is available in our public
1:06:00folder. Then in this alt tag we'll add
1:06:03the logo. Then we have to add the size.
1:06:07So just add the class name size 9.5.
1:06:10Then we have to add one text in a span
1:06:12tags. So the text is builder AI. After
1:06:16that we'll add the class name. So in
1:06:18this class name let's provide text for
1:06:21Excel font medium and text white.
1:06:26Now after that here we'll come to the
1:06:28second div. So in this second div we'll
1:06:30add the text in H2 tag. So the text is
1:06:34build your presence on web.
1:06:39Then we have to add the text in P tag.
1:06:41So just add one P tag here. And in this
1:06:44P we'll add one small description like
1:06:48this. After that we'll add the another P
1:06:52tag.
1:06:53And here we have to add the text like
1:06:55copyright. And then we have to add
1:06:59the year. So we'll add curly braces new
1:07:03date dot get full year. After that we'll
1:07:09add the builder AI. So we have added the
1:07:12copyright message. Now we'll add the
1:07:14classes for this copyright message. So
1:07:17we'll add the class name property and
1:07:19provided these classes. Then we'll add
1:07:21the classes for the another P tag which
1:07:24is here. So provide the class name here.
1:07:29And now we'll add the classes in the
1:07:31text that is written in H2.
1:07:37Now we have added the logo
1:07:41then website title and other
1:07:43description. After that we have to mount
1:07:45this component. So we'll open the o page
1:07:49and here let's mount this left panel. So
1:07:53let's add the opening arrow left panel
1:07:57or login left and import it from the
1:08:00components. Save the changes. Close this
1:08:02tag. Now let me open the web page and
1:08:06here you can see on this / login path in
1:08:10the left side we are getting the logo
1:08:13icon text and some description at the
1:08:15bottom and copyright message. Let's
1:08:18align the icon and text side by side.
1:08:21For that let me just come back here.
1:08:25You can see here we have created the div
1:08:29that contains the icon and text. So for
1:08:31this div we have to add the flex layout.
1:08:34So simply add class name flex item
1:08:37center gap 3. Save the changes and you
1:08:39can see it is aligned side by side. So
1:08:42we have created the left side of the
1:08:45authentication page and in the right
1:08:47side we have to create the form. For
1:08:50that we'll come back to the VS code.
1:08:52Open
1:08:54page.jsx.
1:08:56Come here after this commandment that is
1:08:58right panel
1:09:00and uh here just create a div and in
1:09:04this one we will use the flex one so
1:09:07that it will use the entire space
1:09:09available in the row and flex item
1:09:11center justify center and padding. After
1:09:15that we'll add one more div here.
1:09:19So create a div.
1:09:21Here we'll add the width full and then
1:09:23we'll add the maximum width. So the
1:09:26maximum width it will be small.
1:09:30Now in this one create a div that will
1:09:34contain our title right. So the title
1:09:38will be sign in or create an account and
1:09:42according to the title we will update
1:09:43the description also. So in this div we
1:09:47will add the classes
1:09:50that is margin bottom and after that we
1:09:54have to add the title in H1 tag. So
1:09:58let's add curly braces
1:10:00and use this is login
1:10:03variable. If it is true in this case
1:10:06we'll add the title called sign in. And
1:10:10if it is false in this case we will
1:10:13update the title. It should be create an
1:10:16account
1:10:19correct. Now we'll add the classes for
1:10:23this title which is in H1 tag. So
1:10:26provided this classes also. Now after
1:10:30that we have to add the description in P
1:10:32tag. Now in this P tag again use the
1:10:36same turnary operator. Just copy and
1:10:38paste it here. If is login is true. In
1:10:41this case, we have to add the message
1:10:44like this. And if it is false, we'll add
1:10:47the another message for user
1:10:50registration
1:10:51like this.
1:10:54After that provide the classes for this
1:10:56description also. So in this P we'll add
1:11:00class name and provide text small and
1:11:02text color it will be zinc 400.
1:11:06Right? Now after that here we have to
1:11:09add one message if any error occurs. For
1:11:13that first we have to create the state.
1:11:16So let's scroll up and uh here we'll add
1:11:20const
1:11:24error and the setter function name is
1:11:26set error equal to
1:11:32use a state and initialize it using
1:11:35empty string.
1:11:37With that we'll add one more state. So
1:11:40let me just duplicate it. And here we'll
1:11:43add loading. And the setter function
1:11:45name is set loading. And by default it
1:11:48will be false. Just add the false here.
1:11:52Now let's come here.
1:11:54So here simply add curly braces
1:12:00error. If the error is true in this case
1:12:05we will add the div.
1:12:09And within this div
1:12:12we will simply provide this
1:12:15error. And for this one provide some
1:12:19Telvin classes also using the class name
1:12:21property. Let's save the changes. And
1:12:24just after this error we can display our
1:12:27form. So just add the form tag here
1:12:31like this. Let's save the changes and
1:12:33review the changes. So you can see here
1:12:35we have the title sign in and here we
1:12:37have the small description. Enter your
1:12:40credentials to access your website
1:12:42builder. Now let me change the mode.
1:12:47So if I make it like this not of login
1:12:52save the changes and you can see here we
1:12:54have create an account and get started
1:12:56by entering your registration details.
1:12:59Right. Let's come back and change it to
1:13:03mode equal to login.
1:13:06Save the changes.
1:13:08Let's come here. And we can also change
1:13:11it by updating the route. If I change
1:13:14the route, it is login. So let's add
1:13:16register.
1:13:19You can see the message create an
1:13:21account. And if I change the route to
1:13:24login,
1:13:25it is displaying sign in. It works. Now
1:13:28after that we have to design our form.
1:13:31So we will come back here. Let's come
1:13:34here. So you can see here we have to add
1:13:36our form. But before adding this form
1:13:39let's come here.
1:13:42Just after this form here we will add
1:13:44some message. So we'll add the P tag.
1:13:48And in this P tag we'll use the turnary
1:13:50operator. Use is login. If is login is
1:13:54true then we'll add this parenthesis and
1:13:59add the
1:14:01fragment
1:14:02right and if it is false then we'll add
1:14:06colon and another parenthesis and here
1:14:10also we'll add this fragment
1:14:14like this. Now in the first one we'll
1:14:16add the text called new to builder.
1:14:22Then we'll add kibs and provide the
1:14:24space and after that we have to add a
1:14:27link that will change the route. So just
1:14:30add the
1:14:33link tag from react router DOM.
1:14:37Add the link opening and closing tag.
1:14:39And in this link we'll add the message
1:14:42called create an account. For this link
1:14:44we have to add the two property that is
1:14:46/register. So it will change the route
1:14:48to register. And after that we have to
1:14:50add the classes. So we have added these
1:14:53classes here.
1:14:56That's it. Now after that let me just
1:14:58copy everything from here. Copy and
1:15:01paste it here in the second one.
1:15:04Here we will change the message. So it
1:15:06is already have an account.
1:15:11Then we'll change the path to login. And
1:15:14we'll change the message also. So the
1:15:16message is sign in here. Let's save the
1:15:20changes and come here. So you can see
1:15:22here we have a text new to builder
1:15:24create an account. If I click on this
1:15:26create an account, you can see create an
1:15:28account. If I click on sign in here, you
1:15:30can see sign in. It works. It is
1:15:33changing the route. Now let me design
1:15:35our form. So
1:15:39I'll come back to the VS code
1:15:43and uh come here in the form. Now in
1:15:46this form we have the action. So simply
1:15:48remove this action and uh in this one we
1:15:52will provide the class name property and
1:15:55provide the space y6.
1:15:59Now within this form again use the
1:16:01turnary operator not of is login
1:16:06and in this case we will get the user's
1:16:10name also right we will get the user's
1:16:12name and if the state is login then we
1:16:15don't need the name input field and to
1:16:18store the name email and password we
1:16:20have to create the state also. So first
1:16:23we'll create those states. So scroll up
1:16:26and here let's add the state called name
1:16:31setter function name is set name and
1:16:33initialize it using empty string. Then
1:16:36we'll add the
1:16:38email set email and initialize it using
1:16:41empty string. Then we'll add the
1:16:44password set password and initialize it
1:16:47using empty string. And after that we'll
1:16:50add the toggle option to display or hide
1:16:53the password. So here we'll add so
1:16:54password and set so password by default
1:16:56it will be false. Right? Now after that
1:17:00let's come here
1:17:03and uh in this one we will add one div.
1:17:11In this div we'll add the label tag. In
1:17:14the label tag we'll add the text called
1:17:16full name. After that for this label we
1:17:19have to provide some classes. So we have
1:17:21added these classes also. Then we have
1:17:23to add the input after this label. So
1:17:26we'll add the input. Type is text. After
1:17:29this type, we'll add the value. So let's
1:17:33add the value and the value will be name
1:17:36state. Then we have to add on change. So
1:17:40in this onchange create the add a
1:17:42function and get the event in the
1:17:44parameter and after that it will call
1:17:47the setter function set name and provide
1:17:51e.target. target dot value. So when we
1:17:55will make the changes in this input
1:17:57field, the data will get saved in the
1:18:00name state. After that we'll add the
1:18:03required property. So this input field
1:18:06will be required to submit the form.
1:18:08Then we'll add the class name. And here
1:18:11we have to add these classes. And at the
1:18:16end we'll add the placeholder also. So
1:18:18let's add the placeholder. And in this
1:18:20placeholder, let me add any dummy user's
1:18:23name. So we'll add this dummy name. Save
1:18:26the changes. And after that, let's come
1:18:28here. So now you can see here we have
1:18:30the text full name. And here we have the
1:18:33input field. If I click on sign in here,
1:18:36it will be removed. And if I go to
1:18:38create an account and here it is asking
1:18:40for the full name. It looks good. Now
1:18:44let's come back and uh after that we'll
1:18:47add the next input field. For that let's
1:18:50simply copy this div
1:18:53and paste it here.
1:18:55Now in this div we will update the text.
1:19:00So the text will be email address
1:19:03right and uh after that we have the same
1:19:07label tag here
1:19:10and after that we have the input. So in
1:19:12this input we'll add the type. Type will
1:19:14be email.
1:19:18Then we have to add the value. So the
1:19:20value should be email.
1:19:24Then we have the onchange. In this
1:19:27onchange we'll use the set email. It
1:19:30will be e.target dot value. Required
1:19:33will be true. And then classes. So here
1:19:36again we are using the same classes.
1:19:41And after that we have to add the
1:19:42placeholder. So in the placeholder we
1:19:45will add the dummy email. So we have
1:19:47added this dummy email here. In the
1:19:50placeholder similarly we will add the
1:19:53next input field. So just copy this div
1:19:55paste it here. In this one we will add
1:19:58the text called password. Label text is
1:20:00password. Then we will add the type. So
1:20:04in this type we will use the curly
1:20:06braces
1:20:08and use the
1:20:10so password. If the so password is true
1:20:14in this case we'll add the text
1:20:17and if it is false we will add the type
1:20:21password.
1:20:24Now we'll add the value. So the value
1:20:26will be password and uh here we will use
1:20:28the setter function set password.
1:20:32It will be e.target dot value required
1:20:35true. Then we will update the telvin
1:20:38classes here. And at the end we have the
1:20:41placeholder. So in this placeholder we
1:20:43will add the dots like this.
1:20:48And uh after that
1:20:52within this div only here we will add
1:20:56one button so that we can toggle the
1:20:58password visibility. But before that
1:21:02let's wrap this input field inside a
1:21:04div. So after this label create a div.
1:21:08In this div just add the class name and
1:21:11provide relative.
1:21:14And within this we will move this input
1:21:17and just after this input we will create
1:21:20a button.
1:21:24Now the button type will be button.
1:21:28After that we'll add the on click.
1:21:31In this on click add the add a function
1:21:34and let's add set so password and simply
1:21:40add not of
1:21:42so password.
1:21:44So it will toggle it and uh after that
1:21:48we have to add some classes for this
1:21:50button. So we have provided these
1:21:52classes and uh in this one we have to
1:21:55add the icon. So just add curly braces
1:21:58and use the so password state. If it is
1:22:01true in this case we will add
1:22:05I
1:22:07of icon and import it from the lucid
1:22:10react and provide the size 14
1:22:14and if it is false in this case we'll
1:22:16add the colon and provide
1:22:20I icon and it is also imported from
1:22:22lucid react and here also we'll add the
1:22:25size 14.
1:22:27Save the changes and open the web page.
1:22:30So now you can see we have the name,
1:22:32email and password. And let's type
1:22:35something in this password.
1:22:37So you can see it is displaying the
1:22:39dots. If I click on this I icon, it will
1:22:42display the exact text. Let's click on
1:22:44this I icon again, it will hide it. So
1:22:46we can toggle the password visibility.
1:22:49Now after that, we have to add a submit
1:22:51button. So just come back and uh
1:22:55after this div.
1:22:59So this div is for this one and here we
1:23:02have another div for this entire
1:23:05input field. So here just before this
1:23:08closing form tag we will add a button.
1:23:12Now in this button we have to add the
1:23:14type. So button type will be submit.
1:23:18Then we have to add the disabled
1:23:20property. So when the loading is true,
1:23:22it will be disabled. After that we have
1:23:24to add the classes. So just add the
1:23:27class name property and here we will add
1:23:31these tin classes. Next we have to add
1:23:34the button text. For that just add curly
1:23:37braces.
1:23:39Use the loading. If the loading is true
1:23:42in this case we'll add the loader to
1:23:46icon from Lucid React.
1:23:50And for this icon we'll add the
1:23:52animation using the class name that is
1:23:54animate as pin height width and margin
1:23:57right. And after that we'll add another
1:23:59curly braces where we have to add the
1:24:02text. So just add is login state. If it
1:24:04is true in this case we'll add the
1:24:07button text sign in and if it is false
1:24:10we'll add colon and provide the button
1:24:12text sign up. Save the changes and uh
1:24:16after that we will open the web page. So
1:24:18now you can see here we have the sign up
1:24:20button. If I click on sign in, it will
1:24:23change it to signin form using the email
1:24:27and password and if I click on this
1:24:29create an account, it will open the sign
1:24:31up form with the name, email and
1:24:33password.
1:24:35So we have to add some space before this
1:24:38message. So I'll come back here.
1:24:41Here you can see we have this P. So in
1:24:43this P
1:24:45let me add the class name property and
1:24:49provided these classes. Now we'll come
1:24:52back here. So you can see it looks good.
1:24:55Let's click here. It is changing the
1:24:58form from sign in to sign up. And you
1:25:00can see the button is also changing. It
1:25:02is sign up button. If I click here, it
1:25:04is opening the new form with button text
1:25:07sign in.
1:25:09Now we will add the functions also.
1:25:11Using that we can submit this form. It
1:25:13will either call the sign in or sign up
1:25:16function. So just come back to the VS
1:25:17code and we'll create these functions in
1:25:20the context. So let's open the app
1:25:23context. In the app context, we have
1:25:27this use effect. So after this use
1:25:29effect, let's create a function
1:25:33and write the name login. So just at con
1:25:37login equal to
1:25:41ascaro function in this parameter we'll
1:25:44get the email and we'll get the password
1:25:47for login we need the email and password
1:25:50and uh after that we'll add the try
1:25:53catcher statement. Now in this try block
1:25:55we'll make the API call or network
1:25:58request. So just add con data equal to
1:26:01await and use the API
1:26:05dot post method and uh in this one
1:26:09provide the path that is / API/
1:26:12login
1:26:16and after that we'll add comma and here
1:26:18we have to provide the data that will be
1:26:20email and password for login correct and
1:26:24after this network request we'll get the
1:26:26response. So use the set
1:26:29user and in this set user just add the
1:26:33data dot user.
1:26:38After that we will display the toast
1:26:39notification. So just add the toast. We
1:26:42are not getting the suggestion here. So
1:26:45let's import the toast first. Let's see
1:26:48the our
1:26:50package.json
1:26:51and see React hot toast is added or not.
1:26:55So it is already added react hot toast.
1:26:58So simply add this import statement
1:27:01import toast from react hot toast. And
1:27:04after that let's type the
1:27:08toast dot
1:27:12success. In this toast dots success just
1:27:16add the message that is welcome back.
1:27:20And after that we have to navigate the
1:27:22users on homepage. So just add the
1:27:25navigate
1:27:27and get this navigate from react router
1:27:29DOM and simply provide slash that is for
1:27:32the home.
1:27:34Let me update this one. It is capital N.
1:27:38So let's update it.
1:27:42We will use the navigate function from
1:27:45use navigate. Let's scroll up
1:27:48and uh here let's add con
1:27:53equal to
1:27:55use navigate from react router DOM and
1:27:59after that let's call it here
1:28:02navigate and in this navigate simply
1:28:05provide the path slash. Now after that
1:28:08come here in the catch block here we'll
1:28:10get the
1:28:12error and uh let's simply add console
1:28:15dot error. It will be login failed with
1:28:18the error. Then we'll add con error
1:28:22message equal to error dot response dot
1:28:26error
1:28:28or
1:28:29we will add invalid email or password.
1:28:33Then we have to add the toast
1:28:35notification. So simply provide
1:28:39toast dot error. It will be error
1:28:41message. Then we have to add throw new
1:28:44error and simply add the error object
1:28:46with error message. Save the changes. So
1:28:50we have created the login function.
1:28:52Similarly we have to create the
1:28:53registration function. So just copy this
1:28:55one
1:28:58and paste it here.
1:29:00Update the function name. So the
1:29:02function name will be register.
1:29:05In this one we'll get the three
1:29:07parameter that will be name, email and
1:29:09password. So just add name, email and
1:29:12password.
1:29:14After that we have the try catch. In
1:29:16this try block we'll make the API call
1:29:18using API.post and provide /
1:29:21API/register.
1:29:23This is the endpoint. And here we'll add
1:29:26the data that will be name, email and
1:29:29password. After that we will use set
1:29:32user. It will be data do user and then
1:29:35we'll add the toast notification using
1:29:37the toast dot success and the
1:29:41notification message is account created
1:29:43successfully and navigate to homepage
1:29:46and if error occurs then we'll add
1:29:48console error registration failed then
1:29:52we'll add the error message here it is
1:29:54also
1:29:56registration failed then toast dot error
1:29:59error message and throw new error that's
1:30:01it so we have added the login and
1:30:03registration function. After that we
1:30:05have to
1:30:07add these functions in the value so that
1:30:10we can access it in any other file. So
1:30:14let's come here in this
1:30:17value we'll add comma and provide
1:30:21login and
1:30:24register. Save the changes and now come
1:30:27here in the O page. In this o page,
1:30:30let's get the login and registration
1:30:32from the context. So here only we'll add
1:30:37con curly braces equal to use context or
1:30:42use app context. Use app context has
1:30:44been imported. And from here we'll get
1:30:46the login
1:30:50and register.
1:30:53After that here we will create a
1:30:55function that is handle subummit that
1:30:56will submit the
1:30:59form. So just add con
1:31:03handle submit equal to
1:31:07async add function. In this function
1:31:10parameter we'll get the event and uh
1:31:13after that let's add e dot
1:31:17prevent default.
1:31:20After that we'll add set error and
1:31:24provide the empty string. After that
1:31:27we'll use set loading and uh provide
1:31:31true.
1:31:34After that just add the try catch. In
1:31:37this try block we will check the mode.
1:31:40If
1:31:42the mode is equal to login.
1:31:47If the mode is equal to login in this
1:31:49case simply add await and call the login
1:31:51function. In this login function simply
1:31:54provide the email and password. After
1:31:58that we'll add the else statement.
1:32:01In this else statement we will add await
1:32:05and call the register function. In this
1:32:08register function we'll add the name,
1:32:11email and password.
1:32:16And then we'll add navigate. So let's
1:32:20get the navigate here. In this one just
1:32:24add const
1:32:27navigate equal to
1:32:30use navigate
1:32:33and uh use navigate has been imported.
1:32:36Correct? And simply provide this
1:32:38navigate and in this one provide the
1:32:41path slash that is homepage. Now after
1:32:44that come here in the catch block. Here
1:32:46we'll add error. And then we'll add set
1:32:49error like this. Then we'll add the
1:32:52finally block and in this finally block
1:32:55we will use set loading and we will make
1:32:58it false.
1:33:00That's it. Save the changes and uh after
1:33:04that we will come back here. But before
1:33:06opening the application or web page, let
1:33:09me connect this form
1:33:12with the submit function. So here you
1:33:14can see we have the form tag. So in this
1:33:16form tag, let's add on submit. In this
1:33:20onsubmit, simply add
1:33:23handle submit function. Save the
1:33:25changes. Come back here.
1:33:27So now you can see here we have the
1:33:30sign-in form and sign up form. And uh if
1:33:34I add any details here,
1:33:46click on sign up. You can see it is
1:33:49opening the homepage.
1:33:51Right? Right now we have the dummy API.
1:33:54That's why it will not create an account
1:33:56in the database. But it will redirect us
1:33:59to the homepage after successful sign up
1:34:02or login. So you can see now we are
1:34:04redirected to the homepage. It works
1:34:07fine. So we have completed our login and
1:34:10registration form. After that let me
1:34:12just come back here and in the context
1:34:15you can see we have added the comment
1:34:18in the check session. So just remove
1:34:21this comment. We will uncomment this set
1:34:23user.
1:34:25So once the application gets loaded it
1:34:28will check the session and call the API
1:34:31and if the user data is available it
1:34:33will set the user so that instead of
1:34:36displaying the login page it will
1:34:37directly open the homepage. Now let's
1:34:40commit these changes and review our
1:34:42code. So here we'll click on this source
1:34:44control icon and we'll add the message
1:34:54created user authentication form
1:34:58commit changes
1:35:00and sync changes.
1:35:03So it will commit the changes in the
1:35:05development branch. After that we'll
1:35:07come to GitHub repo.
1:35:10Let's go to development branch.
1:35:13and click on this
1:35:16open pull request
1:35:20then create pull request.
1:35:23So we have created a new pull request
1:35:25and now the code rabbit will start
1:35:28analyzing our pull request.
1:35:32Now the code rabbit has reviewed our
1:35:34code and here we have the review
1:35:36summary. You can see somebody by code
1:35:38rabbit and after that if I scroll down
1:35:42you can see here we have review change
1:35:45stack where we can see the details about
1:35:48this review and let's scroll down and
1:35:51see the
1:35:53reviews here. So you can see it is
1:35:55providing the suggestion for this file
1:35:58that is appc context.jsx.
1:36:00In this one we have one minor issue and
1:36:03for this one we have this prompt using
1:36:07that we can fix our issue using the AI
1:36:09agents or we can manually fix it right.
1:36:13So after that let's see the next one. So
1:36:16we have another minor issue in this o
1:36:19page jsx
1:36:22and here we have two options. We can use
1:36:25this AI prompt to fix the issue or we
1:36:28can manually fix it using this code. So
1:36:32it is basically adding this role in this
1:36:36element here. It is adding the HTML 4
1:36:39and ID for this input and label. So this
1:36:43is the best practice to add the label
1:36:45and role and you can manually add it and
1:36:49the code rabbit is suggesting this best
1:36:51practice. Now let's click on this one
1:36:54review change tag. So this is the core
1:36:57rabbit UI where you can see the details
1:36:59review and you can interact with the
1:37:02chat agent also. And in the right side
1:37:05you will find all the details of each
1:37:08line.
1:37:10You can see here we have the details of
1:37:11this line 32 to 66. Let's click here.
1:37:17You can see the details for this 21 and
1:37:2021.
1:37:22So it is providing the feedback on each
1:37:24line where we have to update the code
1:37:27and uh after that here we have the
1:37:30agent. We can ask anything from this
1:37:32agent also.
1:37:34So you can go through all these
1:37:36suggestions and bug fix just implement
1:37:39these changes in the code and after that
1:37:42you can make a new commit right and uh
1:37:47after that let me just come back here in
1:37:50the pull request and I'll click on this
1:37:53button merge pull request and confirm
1:37:56merge that's it now we will come back to
1:38:00the VS code and click on this three dot
1:38:05and then let's click on this
1:38:09pull. So it will pull the latest
1:38:10changes. After that we have to add the
1:38:14UI on our homepage. So you can see right
1:38:17now we are on the homepage. So here we
1:38:19have to add the graphics on the entire
1:38:23screen and then we'll add the welcome
1:38:26message and one input field and uh below
1:38:29that we'll display the list of projects
1:38:31that is already generated. So let's just
1:38:34come back to the VS code. Here we will
1:38:37open the pages folder. In this pages you
1:38:41will find the
1:38:44homepage.jsx.
1:38:48Now in this one let's remove this text
1:38:52and we'll add some classes for the first
1:38:55div. So provide the class name property
1:38:57and here we have to provide the screen
1:39:01height then overflow
1:39:04then we'll add the text color
1:39:07and uh after that we have added the font
1:39:11then background. In the background we
1:39:14will add the URL and the image path.
1:39:17Right. So let me add double quote here
1:39:21[snorts]
1:39:23because we have already added the single
1:39:24quote here for this image that is bg
1:39:27image dotpng
1:39:30and uh after that we have provided the
1:39:32background cover background center and
1:39:35background no repeat. Now in this one we
1:39:38have to create the navigation bar. So
1:39:42let me provide the comment here that is
1:39:44nav and here we will use the nav tag.
1:39:48Now in this nav tag we have to provide
1:39:50some classes. So simply add the class
1:39:53name property and these telin classes.
1:39:56Next we'll add one div where we have to
1:39:58add the logo. So we have added a div
1:40:02here and in this div
1:40:05we will add the flex layout. Then we'll
1:40:08insert the logo and text. For the logo,
1:40:12we will use the img tag. In this src,
1:40:15simply provide the
1:40:18path of the logo file or image. So let's
1:40:21add the logo. SVG because it is
1:40:24available in the public folder. And in
1:40:27the alt tag, we can simply add the text
1:40:30called logo. And now in this image, we
1:40:34have to provide the size. So just add
1:40:37the class name size six. Next we have to
1:40:40add the blank text. So we'll add the
1:40:42text in a span tag and the text will be
1:40:46builder AI. For this text we have to
1:40:49change the text size and font. So we
1:40:53have added the text excel font semi bold
1:40:57and tracking type. Now after that we
1:41:01have to add the user's name. Right? So
1:41:04first we need the user data from the
1:41:06context. So before this return
1:41:11we will provide const
1:41:15curly braces equal to
1:41:18use app context. Use app context is
1:41:23imported here. Right? And from this use
1:41:26app context we can access the
1:41:30user.
1:41:32Let me come back to the context file. In
1:41:34this context file, you can see we have
1:41:36the value. In this value object, we have
1:41:39the user, right? So, we can access it in
1:41:42any other file or pages. So, now we have
1:41:45the user data here. After that, let's
1:41:48come here and uh
1:41:52just after this div that contains the
1:41:54brand logo and text, we will create
1:41:57another div. So this div will display
1:42:01the user's name and with that we'll add
1:42:03one log out button. So
1:42:07let's add some classes to align the
1:42:09button and text. So we will add the flex
1:42:13layout. So we have added the flex
1:42:15layout, text size, font and text color.
1:42:19Then we'll insert the text in a span
1:42:21tag. So it will be our
1:42:25user
1:42:29dot name.
1:42:32Next we have to add one button that will
1:42:35be the logout button. So here we have
1:42:37added the button tag and just add the
1:42:40button text called sign out. Now for
1:42:43this button provide some classes also.
1:42:46So I'll provide these TIN classes. Let
1:42:51me save the changes and we'll open the
1:42:54web page. So you can see here we have
1:42:56the
1:42:57color in the entire screen entire web
1:43:00page and here we have a logo in the top
1:43:04left side and in the top right side we
1:43:06have the user's name that is the dummy
1:43:08name and we have the sign out button.
1:43:12Right now after that we have to add the
1:43:15hero section where we will add the
1:43:17welcome message some promo text we'll
1:43:20add some description and then we'll add
1:43:22the input field. So let's just come back
1:43:26here and after closing of this nav here
1:43:29let's add one comment called hero for
1:43:33the hero section here simply provide the
1:43:36div and uh in this div we have to
1:43:39provide some relevant classes. So we
1:43:42have added these classes here and within
1:43:45this div we'll add another one. So we
1:43:48have another div here and here we have
1:43:50to provide the width and provide the
1:43:53layout. It will be
1:43:56flex flex column and item center.
1:44:00Now in this one first we have to add one
1:44:03small message that will be a small
1:44:06badge. So just add the comment here that
1:44:09is promotional badge or promo badge.
1:44:13So let's add one div for this promo
1:44:16badge. In this div we'll add the span
1:44:19tag. In this aspan we'll add the text
1:44:22called promo.
1:44:24After that we'll add the another aspan.
1:44:27And here we'll add the
1:44:29text called create your first project
1:44:32for free.
1:44:34Now let's align everything. So in the
1:44:38parent div we have to provide the
1:44:40classes. So we have added these classes.
1:44:43Let's save the changes and come back
1:44:45here. So you can see here we have the
1:44:47text promo and create your first project
1:44:50for free. Let's add the classes for this
1:44:53span tag also which is the first one. So
1:44:55in this first one provide the class name
1:44:58property and these delin classes. Let's
1:45:00save the changes and come back here. So
1:45:02now you can see this promo badge is
1:45:05looking good. After that we have to add
1:45:08one title. So just come back here and uh
1:45:12let me add the comment also. So after
1:45:14this one we'll add the comment called
1:45:16title and for the title we will use H1
1:45:19tag and in this H1 tag simply add the
1:45:23text called let's build your app
1:45:26together. Then we will add the class
1:45:28name and in this class name
1:45:31we are going to provide these TIN
1:45:34classes. Now after this title we have to
1:45:36add the description also. So we will
1:45:38insert the description in P tag and in
1:45:41this P tag we will add this small text.
1:45:47Now for this description also we have to
1:45:49provide some classes. So we have added
1:45:52these TIN classes for the description.
1:45:54Let me see the changes on web page. So
1:45:57you can see here we have a title and a
1:45:59small description.
1:46:02Now after that we have to add one input
1:46:05field. So we will come back here and uh
1:46:09we will wrap this input field inside a
1:46:12div. So first we will add a div here and
1:46:15inside this div we will create the input
1:46:19field. So let's add the class name and
1:46:23uh in this class name provide width it
1:46:27will be full and margin top six
1:46:30and here we'll add some comment also. So
1:46:33let me provide the comment that is
1:46:36prompt input with glasmorphic variant
1:46:40and uh here instead of simply adding the
1:46:43input field let me create a separate
1:46:45component because in this one we'll add
1:46:48different icons also. So let's just come
1:46:52back here in the sidebar and uh in this
1:46:56one you can see we have the component
1:46:58folder. So in this component folder
1:47:01we'll create a new component. So create
1:47:03a new file and write the file name
1:47:06prompt input dot jsx.
1:47:11Now in this prompt input dot jsx we will
1:47:14get some data as props. So first we'll
1:47:17add rafce
1:47:22for creating the component structure.
1:47:24And uh in this one let's destructure the
1:47:29props. So just add curly braces. And
1:47:32here we will get
1:47:35onsubmit.
1:47:37After that we'll get the loading. So
1:47:39let's add the loading false. Then we
1:47:42will get placeholder. So I'll provide
1:47:45the placeholder here.
1:47:48And uh after this placeholder we will
1:47:51add large false.
1:47:56Then we'll get autofocus it will be
1:47:58false.
1:48:00And then variant it will be default.
1:48:05Right now in this one just create some
1:48:08state. So we'll create the state called
1:48:10value and search function name is set
1:48:13value equal to user state and let's
1:48:18initialize it using empty string. So
1:48:21this will be the input field value and
1:48:24after that we'll add the reference of
1:48:27the element. So just add con
1:48:30text area ref equal to
1:48:33use user ref and import the user ref
1:48:36from react and initialize it using null.
1:48:41Now after that let's come here before
1:48:45this return. Here
1:48:49let's provide
1:48:51if
1:48:54variant is equal to
1:48:59glass.
1:49:00So if the variant is equal to glass here
1:49:04we'll add another return statement. So
1:49:06just add return and provide this
1:49:08parenthesis. And here we'll add a form.
1:49:12So let's add the form tag.
1:49:15So we have added a form tag here and in
1:49:18this form tag we'll add some classes. So
1:49:21just add the class name property and
1:49:24provide these TIN classes.
1:49:27Now first we have to add one text area.
1:49:30So let's add
1:49:34text area tag and provide the
1:49:38self-closing tag here.
1:49:42Now in this text area we will provide
1:49:45the reference. So provide ref and it
1:49:48will be
1:49:52text area ref.
1:49:55Now after that we'll add the value and
1:49:58provide the value state. Then we'll add
1:50:02the onchange. So we will provide the
1:50:04onchange property. In this onchange
1:50:07property, add one add function with the
1:50:09event in the parameter and then use the
1:50:12setter function set value and just add
1:50:15the e.target
1:50:18dot value.
1:50:20Now after that
1:50:23here we'll add on key down.
1:50:26In this on key down we'll add one
1:50:30function that we'll create here before
1:50:33this return. So let's add
1:50:40a function here
1:50:44const
1:50:46handle key down
1:50:49equal to
1:50:52arrow function and get the event in the
1:50:54parameter.
1:50:56Right? And after that we'll add the if
1:50:59statement.
1:51:02If E dot key is equal to enter and
1:51:08not of
1:51:12event dot shift key in this case simply
1:51:16add e dot prevent default
1:51:19and after that we have to submit the
1:51:22data right for that we'll create one
1:51:24another function handle subummit right
1:51:26so just scroll up here we'll add con
1:51:31handle submit equal to
1:51:35add a function and in this one also
1:51:37we'll get the event as parameter and
1:51:41provide if statement
1:51:44if e in this case we'll add e dot
1:51:51prevent default
1:51:53after that we'll add con trimmed equal
1:51:56to
1:51:57our value
1:51:59dot trim So it will remove the extra
1:52:03space from the beginning and end of the
1:52:06value that is written in the input
1:52:08field. And after that we'll add another
1:52:10if statement.
1:52:14And let's add if
1:52:16not of trimmed or loading.
1:52:21Then simply add return.
1:52:24Then we'll add onsubmit.
1:52:27And in this onsubmit provide the trimmed
1:52:31data. And after that we will use the
1:52:33setter function set value. And we'll
1:52:36clear the value like this using the
1:52:39empty string. And let's call this
1:52:42function here in the handle key down.
1:52:45After e.pre default we can call this
1:52:47function handle submit. Correct. Now
1:52:51after that let's add this function in
1:52:54the form also. So here we have the form.
1:52:57So here let's provide the
1:53:01onsubmit and in this onsubmit we can
1:53:03provide the handle submit function. Save
1:53:06the changes. Now after that let's come
1:53:08here in the on key down. In this on key
1:53:12down we can add handle key down.
1:53:16Next we'll add the placeholder. So we
1:53:19can simply provide the placeholder that
1:53:22we are getting from
1:53:24props. So just add
1:53:27placeholder.
1:53:29After that we'll add disabled property.
1:53:31So this
1:53:34field will be disabled when the loading
1:53:36is true. So just add the loading and
1:53:40after that let's add
1:53:44rows. So provide the rows three
1:53:47and then provide some classes for this
1:53:50text area. So in this text area we have
1:53:53to add the width. It will be full. And
1:53:56we will add other tailwind classes like
1:53:58this.
1:54:00Save the changes. And uh after that
1:54:03let's
1:54:05add another div after this text area. So
1:54:07after closing off this text area we will
1:54:10add a div.
1:54:15Now in this div we'll add the flex
1:54:18layout to align the content. So provided
1:54:21these classes here and uh then we'll add
1:54:24the label tag. So just add this label
1:54:26tag. In this label we have the HTML for.
1:54:30So in this HTML for we'll add the file
1:54:34and after that we have to add some
1:54:37classes. So we have added these classes
1:54:39and within this label let's add the
1:54:45input. So we have added input type. So
1:54:49let me add the type file so that we can
1:54:51upload a file here. So input type is
1:54:54file and provide the id
1:54:57and in the id provide this file that is
1:55:00available in the HTML 4. After that
1:55:04we'll add the property hidden. So it
1:55:06will be hidden. Next we have to add the
1:55:10icon here. So just add opening arrow
1:55:15cloud upload icon and import this icon
1:55:18from Lucid React.
1:55:21We are not getting this suggestion here.
1:55:23So let me import it manually. We'll add
1:55:26import
1:55:29and uh just add curly braces
1:55:33from Lucid React package. And from this
1:55:36lucid react
1:55:38let's get the
1:55:41cloud upload icon
1:55:45and uh just insert this icon here cloud
1:55:49upload icon and close it. Now in this
1:55:52icon we have to provide the size also.
1:55:54So let me set the size 18.
1:55:58So below the input field we have added
1:56:01one upload icon. Using that we can
1:56:04upload the files. Now after that we have
1:56:08to add the another icon. Using that we
1:56:11can add the voice. So we'll add the mic
1:56:16icon and uh with that we will also add
1:56:20one
1:56:22icon like arrow right icon
1:56:26to submit this form. So just after this
1:56:32label we will create one div.
1:56:36So this div will be in the right side.
1:56:38So in the right side we'll add one mic
1:56:40icon and one submit icon that is the
1:56:42arrow icon. And let's add the classes
1:56:47for this div that contains both icons.
1:56:51So provide the flex item center and
1:56:54justify end and the gap will be two. Now
1:56:59in this one just add the button tag. In
1:57:02the button we'll add the mic icon
1:57:06and import the mic icon from Lucid React
1:57:08and set the size. So again size will be
1:57:1218
1:57:15and uh after that provide the classes
1:57:18for this button. So we have added these
1:57:21classes and provide the type also. So
1:57:24the button type will be button only.
1:57:27That's it. So we have added the type
1:57:29button.
1:57:31Now let me add another button tag. So
1:57:33just copy this one only. Paste it here.
1:57:35In the second one we will add type. So
1:57:39the type will be submit.
1:57:42Then we will add the classes here. So we
1:57:45have updated the classes as you can see
1:57:47here. And after that we will add the
1:57:50disabled property also. So here we'll
1:57:54add the space. And you can see we will
1:57:57add the disabled.
1:58:01So it will be disabled when not of value
1:58:05dot trim. We cannot submit it when the
1:58:09value is not available or when the
1:58:13loading is true. In this case this
1:58:15button will be disabled. And after that
1:58:18in this button we have to add the icon
1:58:20based on the loading status. So remove
1:58:23this icon and provide curly braces. And
1:58:27here let's add the loading. So we will
1:58:31check if the loading is true. In this
1:58:33case we have to add the loaded icon. So
1:58:35provide loader two icon from the lucid
1:58:38react and uh
1:58:42else we will add the arrow write icon.
1:58:45So add this arrowite icon. Import it.
1:58:49Now for these icons we have to add this
1:58:53size. So we will set the size 18 for
1:58:56both icon.
1:58:59Here also we'll add 18. And in this one
1:59:02also now in the first one we have to add
1:59:04the animation also. So let's add the
1:59:07class name and provide animate a spin.
1:59:10That's it. Save the changes. So this
1:59:14layout will be displayed when we will
1:59:16provide the variant glass.
1:59:19Now if the variant is not equal to class
1:59:22it means the variant is default then
1:59:24we'll display another UI for that let's
1:59:28come here in the default return in this
1:59:32default return statement remove the text
1:59:36and for this div we will add the class
1:59:40name now we'll add the dynamic class
1:59:44here so just add the curly braces and
1:59:46back text in this back X we will add
1:59:49these fixed classes and after that we'll
1:59:52use the dollar sign curly braces and
1:59:54insert this
1:59:57state large
1:59:59if it is true in this case we will add
2:00:02the padding four
2:00:06else we will add
2:00:08padding three that's it and after that
2:00:12here also we have to add the text area
2:00:14so I'll just copy this text area from
2:00:17here.
2:00:19Here we have the text area. Let's copy
2:00:21and paste it here. So in this text area
2:00:25again we'll add the reference that is
2:00:27text area reference then value then on
2:00:30change and uh after this on change
2:00:34we have on key down then
2:00:39placeholder
2:00:41and after that disabled
2:00:44and uh then we have the
2:00:48rows and after that we have classes. So
2:00:52let me update the rows here. Here we'll
2:00:54check large. If it is true then we'll
2:00:58add rows five else
2:01:01one.
2:01:03So we have added rows. If large is true
2:01:06then five else one. Correct? Now after
2:01:10that we have to update these classes. So
2:01:13in this one also we'll use the dynamic
2:01:15classes. So just remove it. We'll add
2:01:18the curly braces and back tick.
2:01:22And uh in this back tick first we'll add
2:01:24some fixed classes like this and then
2:01:27we'll add dollar sign curly braces and
2:01:30provide the turnary operator. If large
2:01:34is true then text base else text small.
2:01:39After that we have to add a button.
2:01:43So just add the button tag and in this
2:01:46button tag we'll add curly braces
2:01:49loading. If the loading is true then we
2:01:52have to add the loaded icon. So just add
2:01:54loaded to icon
2:01:57and for this icon we will add the size.
2:02:01So for this size also we'll check the
2:02:03large state. If it is true then 20 else
2:02:0715. Then we have to add the animation.
2:02:10So just add the
2:02:12animate a spin and uh if the loading is
2:02:16false then we'll add the right arrow
2:02:19icon so that we can submit this
2:02:22data using the input field. So just add
2:02:25else statement provide
2:02:28arrow write icon.
2:02:33In this arrow write icon we'll add the
2:02:35size. So it could be 20 or 15 like this.
2:02:41Now we'll add the on click property on
2:02:43this button. So in this button we'll add
2:02:47on click and uh simply add the add
2:02:50function
2:02:52provide handle submit. After that we'll
2:02:56add
2:02:58disabled. In this disabled we will add
2:03:02not of
2:03:04value dot trim then or loading.
2:03:11Now in this button provide some classes
2:03:14also. So provide the class name property
2:03:16and here we have added these classes and
2:03:20after that we'll add some custom styles.
2:03:23So just add the
2:03:26style property object and provide the
2:03:30width. So the width will be either 36 or
2:03:3424. And similarly we'll add the height
2:03:37also. So let's add the height. If large
2:03:40is true then height 36 is 24. Save the
2:03:44changes. Now in this component we have
2:03:48to add the functionality so that when we
2:03:51load the component then the input field
2:03:54will be autofocused. For that here let's
2:03:58add one use effect.
2:04:02So it will execute this
2:04:05add function every time when you load
2:04:07the component. So we have added the use
2:04:10effect arrow function and provide the
2:04:12dependency array here. In this
2:04:14dependency array we'll add the
2:04:16autofocus. Now in this function simply
2:04:20add if statement if
2:04:22autofocus is true and
2:04:27text area reference dot current.
2:04:31In this case, let's add the text area
2:04:35reference dot current dot focus.
2:04:41So it will automatically focus this
2:04:44input field when we load this component
2:04:46or our homepage. After creating this
2:04:50component, let me mount it on our
2:04:53homepage. So just come back here in the
2:04:55homepage.jsx JSX and within this div
2:04:58let's let's add our component that is
2:05:02prompt input. This component has been
2:05:04imported here. In this prompt input we
2:05:07will add onsubmit and in this onsubmit
2:05:11we have to add one function. After that
2:05:14we'll add the loading. In this loading
2:05:17we have to add the
2:05:21state that is generating prompt. Then it
2:05:24will be loading. After that we have to
2:05:26add the placeholder. So let's add the
2:05:29placeholder text called create a
2:05:32portfolio website.
2:05:34Then we have to add the variant. Let's
2:05:37add the variant here. And in the variant
2:05:39we'll add class.
2:05:42Next we'll add autofocus.
2:05:46Let's save the changes. And uh after
2:05:49that now you can see here we have some
2:05:51message like we have to provide the
2:05:54onsubmit here it could not be empty
2:05:57object right so I'll just come back here
2:06:01let's provide the
2:06:04empty arrow function here in this
2:06:06onsubmit and in this loading let's
2:06:10provide false we will save the changes
2:06:12and open our application so you can see
2:06:15here we have one text area And we have
2:06:18one upload icon. Using that we can
2:06:21upload the files. And here we have the
2:06:23mic icon. And this is the submit icon.
2:06:25That is the arrow right icon.
2:06:28Now we'll come back here. And if I
2:06:31change it to true. Let's add loading
2:06:34true. Save the changes and come back
2:06:37here. So you can see here we have the
2:06:38loading animation instead of the arrow
2:06:41right icon. So this field will be
2:06:44disabled. We cannot type here. And if I
2:06:47come back make it false. So this field
2:06:51is already focused. And here we can type
2:06:54anything in this text area.
2:06:58Next we have to display the list of
2:07:00projects. For that we'll create our
2:07:02project data in the context that we can
2:07:05share in different component. And we'll
2:07:09also create our functions that will be
2:07:12this onsubmit function
2:07:14in our context. So let's come back to
2:07:18app context.jsx.
2:07:20In this app context dot jsx, we'll
2:07:23create some states first. So scroll up
2:07:28here you can see we have added author
2:07:31states. So after that let's add the
2:07:34other states also. So simply add the
2:07:37comment states and provide
2:07:40this state and we'll change the name. So
2:07:42state name is projects then setter
2:07:46function set projects equal to use state
2:07:49and initialize it using empty array. Now
2:07:53duplicate it.
2:07:56In this one we'll add the loading
2:07:58projects and the setter function set
2:08:00loading projects.
2:08:03By default it will be true. Duplicate
2:08:06it. In the next one we'll add active
2:08:09project and set active project.
2:08:14Default value will be null.
2:08:17Now duplicate it. Here we'll add loading
2:08:20active project and set function set
2:08:23loading active project
2:08:26and initialize it using true.
2:08:30After that we'll add
2:08:33chat loading and set a function set chat
2:08:37loading.
2:08:39Initialize it using false.
2:08:42Next we'll add generating project and
2:08:45the setter function name is set
2:08:47generating project.
2:08:49By default it should be false. Now
2:08:53duplicate it.
2:08:56Here we'll add active file and set
2:08:59function name is set active file
2:09:03equal to user state and provide
2:09:06slash
2:09:09app.js.
2:09:11Now after that just duplicate it. Here
2:09:13we'll add so code and uh setter function
2:09:18set so code.
2:09:20Here we'll add use a state and by
2:09:23default it will be false. We will use it
2:09:26to display our code using sandbox
2:09:31and by default the active file will be
2:09:33app.js.
2:09:36Now in this context you can see we have
2:09:38already created the login and
2:09:40registration function. After this
2:09:41registration function we'll create the
2:09:44next function that will be for logout.
2:09:46So let's add const
2:09:52log out equal to async arrow function.
2:09:55Now in this one we'll add the try
2:09:58catcher statement and in the try block
2:10:00we'll make the network request using
2:10:02await API dot post method
2:10:08and uh here we'll add the
2:10:11path. It will be / ai/ o/
2:10:15logout. After that we'll add the setter
2:10:19function set user and uh we'll set the
2:10:23user null. After that set projects
2:10:29in this set projects provide the empty
2:10:31array. Then we'll add set active
2:10:36project.
2:10:39In this active project we'll add null.
2:10:44After that we'll add toast notification.
2:10:47So we'll add toast dot success and
2:10:51provide the message that is logged out
2:10:54successfully.
2:10:57And after log out we have to navigate
2:10:59the users on
2:11:02login page. Right? So for that
2:11:07here we have the navigate function. So
2:11:08let's use it here. After this
2:11:11notification, simply add
2:11:14navigate and provide the path / login.
2:11:19So it will open the login page after log
2:11:21out. Now come to the catch block. Here
2:11:23we'll add error.
2:11:27Then we'll add console.
2:11:29And then we'll add the toast
2:11:31notification that is toast. Login
2:11:33failed. To display the toast
2:11:35notification, we have to open our app
2:11:38dot jsx. And in this one, we have to add
2:11:41the toaster tag. So let's add one
2:11:43fragment in this return. Within this
2:11:46fragment, we'll insert this routes
2:11:51like this. And uh before this routes,
2:11:54we'll add the toaster tag.
2:11:58Import the toaster from react hot toast.
2:12:01Just close it. You can see toaster tag
2:12:03has been imported. Now we'll come back
2:12:05here in the app context and we have
2:12:08created the logout function. After that
2:12:10we'll create the function to load the
2:12:12projects from API. Right? So
2:12:16let's add the comment here that is
2:12:20projects actions. So just add the
2:12:23function
2:12:25that is con load projects and create a
2:12:31sync arrow function.
2:12:34So here we'll add the if statement if
2:12:36not of user. If user is not available
2:12:40in this case simply add return
2:12:44and if the user is available we will
2:12:46continue it. So just add the try catch
2:12:49and in this try block we'll add con data
2:12:52equal to await and provide the API dot
2:12:57get method and provide the endpoint that
2:13:00is / API/ projects. Now after that
2:13:03simply use the set projects in this set
2:13:06projects provide the data.
2:13:10Now come here in the catch we'll add the
2:13:12error and provide console dot error.
2:13:16Then provide the toast dot error that is
2:13:20failed to load project list. Then we'll
2:13:24add the finally block and in the finally
2:13:26block we'll provide the set loading
2:13:30projects and make it false. So by
2:13:32default the set loading projects will be
2:13:34true. It means the loading projects will
2:13:36be true and after that we'll make it
2:13:39false. And after that let's add another
2:13:42function to load the individual project.
2:13:46Right? So here we'll add the another
2:13:48function.
2:13:50So simply add const load project equal
2:13:54to async arrow function. To load the
2:13:56individual project we have to provide
2:13:59the project id. So just add the
2:14:02parameter here that will be ID and we'll
2:14:05add the next parameter that is silent
2:14:08equal to false.
2:14:10So default value is false. Now again we
2:14:13will use the same statement. If not of
2:14:16user then return
2:14:19then we'll add if not of silent.
2:14:24In this case just add set loading active
2:14:28project and make it true.
2:14:32After that provide the try catch. So in
2:14:35this try block let's add this statement
2:14:39that is data equal to await API.get and
2:14:43provide the endpoint. So we will add the
2:14:46back tix here
2:14:48instead of quote
2:14:51just add the backix
2:14:55and provide / ai/ projects and slash
2:14:59dollar sign curly braces id. So we'll
2:15:03insert the id in the parameter. Now
2:15:06after that just use the set active
2:15:09project and provide the data.
2:15:15Then let's add the command default file
2:15:19selection.
2:15:20So here we'll add con file equal to
2:15:24object dot keys data do files. Then
2:15:28we'll add if statement. If
2:15:30files.length length is greater than
2:15:32zero. In this case, we'll add set active
2:15:36file
2:15:38and uh in this one insert one
2:15:43add a function. Here we'll get the
2:15:45previous data and then we'll add if
2:15:48statement if file dot includes
2:15:53and previous.
2:15:55If it is true then simply add return
2:15:58previous.
2:16:00Then we'll add another if statement
2:16:03files doinccludes
2:16:05app.js.
2:16:07Then we'll add return app.js.
2:16:12After that we'll add the return and
2:16:15provide the file using this files index
2:16:19zero.
2:16:21Then we'll add the statement in the
2:16:24catch block. So just come here in the
2:16:25catch block we'll add the error. Then
2:16:28add console dot error. Then we'll add if
2:16:32statement if not of silent.
2:16:36In this case just add the toast
2:16:38notification using toast dot error.
2:16:42And then we'll add the navigate. So
2:16:44we'll navigate the users on homepage.
2:16:47Then we have to add the finally block.
2:16:49So here we'll add finally.
2:16:54And uh let's add if not of silent
2:17:00then provide set loading active project
2:17:05and make it false.
2:17:08After that we'll
2:17:10automatically call the active project a
2:17:13status.
2:17:16So
2:17:17let's add the command here.
2:17:20automatically Paul active project a
2:17:22status and uh let's add if generating or
2:17:27pending
2:17:28right so if the status is generating or
2:17:31pending it will automatically try to
2:17:33fetch the latest update so here we'll
2:17:36add the use effect in this use effect we
2:17:39have added one add function and then
2:17:41comma dependency array in the dependency
2:17:44array we'll add the active project
2:17:48if it is available then dot
2:17:50underscore id
2:17:54then add comma
2:17:57active project
2:18:00dot status
2:18:02then comma provide the load project
2:18:07then provide
2:18:10user. So if any of these data changes
2:18:14then it will execute this add a
2:18:15function. Now in this one just add if
2:18:21not of active project dot id or not of
2:18:25user then simply add return.
2:18:29Next we'll add const is ongoing
2:18:34equal to
2:18:37active project dot status is equal to
2:18:39generating it means the it is generating
2:18:43the project. Then we'll add or
2:18:47active project a status is pending. If
2:18:49the status is pending
2:18:52or
2:18:54active project dot a status is equal to
2:18:58revising.
2:19:00So in these cases this is ongoing will
2:19:03be true and when ongoing is true
2:19:07just add the if statement.
2:19:11If it is true in this case we will use
2:19:16set chat loading make it true then we'll
2:19:19add con
2:19:22interval
2:19:24equal to
2:19:26set interval
2:19:28in the set interval add the arrow
2:19:30function and provide the time
2:19:352,000 mconds
2:19:37and in this add function let's add load
2:19:40project
2:19:42in this load project
2:19:45provide the active project dot id and
2:19:50comma true
2:19:52after this here we will add the return
2:19:56and provide the arrow function like this
2:20:00and simply add clear interval in this
2:20:03clear interval provide our interval
2:20:07now we'll add the else statement also In
2:20:10this else statement, we'll add set chat
2:20:13loading and make it false.
2:20:16Save the changes.
2:20:18Next, we have to add another function
2:20:19using that generate the project. So,
2:20:24just add con handle generate
2:20:28equal to use call back. In this use call
2:20:33back, let's add asynchronous add
2:20:36function.
2:20:38And after that we'll add comma and
2:20:40dependency array it will be navigate and
2:20:44user. Now in this function we have to
2:20:48add the prompt as parameter
2:20:51because using the prompt we have to
2:20:53generate the project. So let's add if
2:20:56not of user
2:20:59then simply add return.
2:21:02Then we'll add set generating project
2:21:04and make it true. Then to generate the
2:21:07project we have to make the network
2:21:09request. So we'll make it inside the try
2:21:11block. So we have added try catch and
2:21:14here we'll add con data equal to await
2:21:17API.post and provide the endpoint/ API/
2:21:21projects and provide our prompt that
2:21:23will be used to generate the project.
2:21:26Then we have to add the notification. So
2:21:28just add to dot success and uh let's add
2:21:32the message AI agent is planning a
2:21:36structure.
2:21:38Then we have to add the navigate here.
2:21:41So just add navigate and we will
2:21:43navigate the users on builder page. So
2:21:45just add the back tick path will be
2:21:47/builder/
2:21:48then data dot id that will be the
2:21:51project id and come here in the catch.
2:21:54In this catch we'll add the error.
2:21:57Then add console dot error. Then we'll
2:22:00add the toast notification. So just add
2:22:02toast dot error.
2:22:05And then we'll add the finally block. In
2:22:07this finally block
2:22:10we will add set generating and provide
2:22:12set generating project. Make it false.
2:22:18That's it. So we have created this
2:22:20handle generate function.
2:22:23After that we'll add another function
2:22:25that is handle delete. So let me just
2:22:28copy this one only. Paste it here.
2:22:33And this one just change the name. It
2:22:36will be handle delete.
2:22:38And uh let's add the parameter. It will
2:22:42be ID. And here we'll add if not of user
2:22:45then return. Then we'll add the try
2:22:47catch. In this try block we'll add await
2:22:52API dot delete.
2:22:56Then we'll add the end point. So simply
2:22:59add back text / API/ projects and
2:23:04provide the project ID using dollars and
2:23:06curly braces.
2:23:08Then we'll add the
2:23:11setter function. So let me clear this.
2:23:15And here we'll add set projects. Provide
2:23:18the arrow function with the previous
2:23:20data in the parameter. And provide the
2:23:24previous
2:23:25dot filter.
2:23:29And uh here let's get the individual
2:23:34project and provide
2:23:37p dot
2:23:40id
2:23:41not equal to id. Then we'll add toast
2:23:46dot success
2:23:48and uh let's add project deleted
2:23:51successfully.
2:23:53Now we'll update the code in the catch
2:23:55block. So here we'll update this console
2:23:58dot error and then toast dot error and
2:24:03from here we can remove this finally
2:24:05block.
2:24:06Let's update this dependency. So here
2:24:08we'll add only user. That's it. Save the
2:24:12changes. So we have added the handle
2:24:14delete function also. After creating
2:24:17these states and function let me pass it
2:24:20through this value. So in this value
2:24:23let's add comma and provide the
2:24:26projects. Then we will add loading
2:24:30projects.
2:24:31Then we will add active project. After
2:24:35that
2:24:37loading active project
2:24:40then chat loading.
2:24:43Next we will add generating project then
2:24:47active file. After that so code then
2:24:52user is already there and uh next we'll
2:24:56add
2:24:58set active file.
2:25:00After this set add tip file we'll add
2:25:02set so code.
2:25:05Then we'll add load projects. This is
2:25:09the function. After that load project
2:25:12function that will load individual
2:25:14project. Then handle generate function.
2:25:18After this handle generate we'll add
2:25:21handle delete.
2:25:23Now we can access these state and
2:25:26function in any component. So let me
2:25:29open the homepage dot jsx file and here
2:25:33we'll get the required data. So from
2:25:36this use app context we'll get the user.
2:25:39After this user let's get projects
2:25:45then we will get the loading projects.
2:25:49After that
2:25:51generating project
2:25:53then load projects function.
2:25:57After that handle generate function.
2:26:02Next we'll add handle delete
2:26:06and uh then we'll add the log out.
2:26:11After that let me connect this log out
2:26:13with our nav bar. So in the navbar you
2:26:16can see we have this button right? So in
2:26:18this button we'll add on click and in
2:26:21this on click simply add
2:26:24log out.
2:26:27After that scroll down you can see here
2:26:30we have the
2:26:32prompt input. So in this prompt input we
2:26:35have onsubmit. So in this onsummit we
2:26:38can provide our
2:26:40handle generate. So it will generate a
2:26:43new project and in this loading just add
2:26:49generating project. So when the
2:26:50generating project is true then the
2:26:53loading will be true. That's it. Now
2:26:56save the changes and uh we'll come back
2:26:58here. So you can see it is displaying
2:27:02our input field here and when we enter
2:27:06the prompt and submit this form it will
2:27:09execute this handle generate function.
2:27:12Now just below this we have to display
2:27:15the list of projects. But before that we
2:27:18have to add some tags also. So let me
2:27:21just come back and uh
2:27:25after closing off this div that is for
2:27:28the input area or text area here we will
2:27:32add the comment scrolling marku tags. So
2:27:36let's add one div here.
2:27:38In this div provide these classes.
2:27:43Then we'll add another div.
2:27:47Here we'll add the animate
2:27:50mark and we will write the gap three.
2:27:53Now we have to display our list of tags.
2:27:56So just add the curly braces and get
2:28:00home tags.
2:28:03We are not getting the suggestions. So
2:28:04it is available in the assets. If I open
2:28:06assets.js, you can see it is available
2:28:08here. So after opening it, if I start
2:28:10typing home tags, we are getting the
2:28:13suggestion to import it from the assets.
2:28:15It has been imported. Now we'll add home
2:28:17tags dot map. It is an array. So we can
2:28:21use the map method. And then we'll add
2:28:23the add a function. Here we'll get
2:28:26individual tag
2:28:28and index.
2:28:30Then we'll add parenthesis and return a
2:28:33button. So just add the button tag.
2:28:37So we have added a button tag here. And
2:28:40button text will be our tag.
2:28:44Now in this button provide the key
2:28:47property first. So let's add the key. It
2:28:49will be our index. Next we will add the
2:28:52on click. So in this onclick property
2:28:56simply add
2:28:59add a function and provide handle
2:29:01generate. And in this handle generate we
2:29:03have to provide the prompt. So the
2:29:05prompt will be our tag.
2:29:08Next we'll add the disabled. So in this
2:29:12disabled again add the same thing that
2:29:15is generating project then it will be
2:29:18disabled then we'll add the class name
2:29:21and uh here we have to add the
2:29:26TIN classes like this save the changes
2:29:29after that let's come here so you can
2:29:31see here we have the list of tags which
2:29:33is scrolling horizontally
2:29:40after that let me just come back here.
2:29:43Here we will provide this space and
2:29:46provide the comment that is
2:29:49all projects. So we have to display all
2:29:52the projects here. Just below this
2:29:55comment let's add the curly braces and
2:29:58we will add not of
2:30:01loading projects
2:30:03and
2:30:06when the projects do.length length is
2:30:10greater than zero. It means we have the
2:30:13projects available then only we will
2:30:15display the project here. So we'll add
2:30:17and operator and this parenthesis.
2:30:20Now within this parenthesis simply add a
2:30:23div to display our projects.
2:30:27Now in this one we'll add the class name
2:30:30and provide margin top and then provide
2:30:34the width full.
2:30:36Here we have to add one title and uh in
2:30:41the right side we'll display the number
2:30:43of projects. So let's create one div.
2:30:49Here we'll provide the classes that will
2:30:52be flex layout to align the title and
2:30:54number of projects side by side. So just
2:30:57add the P tag for the title. So the
2:31:00title is all projects. Then we'll add
2:31:04the number of projects in the span tag.
2:31:06So just add the span and in this span
2:31:10just add the
2:31:13projects dot length.
2:31:17After that we have to add the text like
2:31:21project or projects. So here again use
2:31:24this same thing projects.length
2:31:28is equal to 1. In this case, we will add
2:31:33the string that is project.
2:31:37Else we will add the string that is
2:31:39projects.
2:31:41Now provide the classes here. So start
2:31:43with the P tag. In this P tag provide
2:31:47the class name and these classes. Then
2:31:50we'll add the classes for the span tag.
2:31:53So we have added these classes here in
2:31:55the span tag. Save the changes and come
2:31:58back here. So now it should display the
2:32:03all projects and number of projects
2:32:05here. So let me refresh this web page
2:32:09after reloading the web page. It is not
2:32:11displaying the projects here because we
2:32:12have to load the project first. We have
2:32:14to call that function load project. So
2:32:17here in the homepage just add the use
2:32:20effect.
2:32:23In this use effect add the arrow
2:32:25function and a dependency array.
2:32:30In the dependency array we will provide
2:32:32the load projects. And in the function
2:32:36simply call the load projects. Save the
2:32:39changes. And now it will call this
2:32:42function and then you can see here we
2:32:44have all projects at the bottom and two
2:32:46projects
2:32:48it is visible.
2:32:50After that we have to display the list
2:32:52of projects. So just come back to the VS
2:32:56code. Scroll down
2:32:59and uh just after
2:33:02this div
2:33:05which is here
2:33:08let's add a space and here we'll add a
2:33:11div
2:33:14provide the classes here. So we'll
2:33:16provide the space Y2
2:33:19then maximum height and overflow and
2:33:21padding right. Now use the curly braces
2:33:26and projects
2:33:28dot map get the individual project in
2:33:31this parameter of the arrow function and
2:33:35add the parenthesis. So it will directly
2:33:38return this div.
2:33:40Now for this div we have to add the key
2:33:43property and in the key let's add p dot
2:33:48id. Then we will add the classes. So
2:33:51just add the class name and uh here we
2:33:54will add these delvin classes. And next
2:33:57we'll add the onclick property here. So
2:33:59let's add on click. In this on click we
2:34:04will add the add function
2:34:06and provide the navigate.
2:34:11So let's add the navigate also from use
2:34:14navigate.
2:34:17We'll add con
2:34:20equal to
2:34:23use navigate from the react router DOM.
2:34:27After that let's come here
2:34:30and provide the navigate function and in
2:34:33this navigate function we can provide
2:34:35our path that will open the project
2:34:38page. So just add the back ticks/
2:34:44builder/
2:34:46dollar sign and curly braces and provide
2:34:49the project dot id.
2:34:53So it will open this path.
2:34:56Now within this we have to add a div
2:35:00again.
2:35:02So in this first div we'll add the
2:35:07project name and then we'll add the
2:35:11updated date time and we'll add the
2:35:16version and then we'll create the
2:35:18another div. So this is the second div
2:35:21and in this one we'll add some action
2:35:24buttons. So start with the first one. In
2:35:27the first one, just add flex one and
2:35:30minimum width zero.
2:35:34Now create a P tag here. In this P tag,
2:35:37we'll add the name. So just add P dot
2:35:41name. Now for this name, provide some
2:35:44classes. So we have added these TIN
2:35:47classes. Next, we'll create a div just
2:35:50after this P tag. Here we have to add
2:35:53the date, time and clock icon. So just
2:35:57add
2:35:59these classes and then provide the span
2:36:02tag.
2:36:05In the span we'll add
2:36:07clock icon and import this clock icon
2:36:11from Lucid React. And for this icon set
2:36:14the size 10
2:36:17and after that we have to display the
2:36:20time. So just add P dot updated at
2:36:27or
2:36:29P dot created at and after this span
2:36:34we'll create another span tag in this
2:36:38we'll add the
2:36:40V for version and just add the P dot
2:36:44version.
2:36:46Now for this version we'll add the
2:36:48classes like this and then we'll add the
2:36:51classes for the span that contains our
2:36:53icon and date time.
2:36:56Let's save the changes and open the web
2:36:59page. So you can see here we have all
2:37:02projects and now you can see the project
2:37:04name and below that we have the version
2:37:08v1 and here we have the time. So now
2:37:10let's update the date time format. For
2:37:13that we'll use the moment package that
2:37:15is already installed. Right? So just
2:37:18import the moment here. Let's scroll up
2:37:23and provide import moment from the
2:37:26moment package and uh let's come here
2:37:31and instead of simply adding this
2:37:34p.tupdated and p.treated got created.
2:37:37Here we can use moment
2:37:41and uh in this moment function let's
2:37:44provide this one and at the end we will
2:37:47add dot
2:37:49from now.
2:37:51Save the changes and let's see the
2:37:55updated data here. You can see now it is
2:37:58displaying the time like 3 hours ago, 1
2:38:02day ago.
2:38:04It looks good.
2:38:07Now we have to display the actions and
2:38:09buttons. So just come back and uh we'll
2:38:13come here in the another div. So in this
2:38:15div again we have to add the flex
2:38:18layout. So we have added these classes
2:38:20and then we'll add a button. So we'll
2:38:22add the button tag and uh after this
2:38:27button we have to add the arrow icon. So
2:38:29let's add opening arrow arrow right
2:38:32icon. Now in this icon we will set the
2:38:35size 14.
2:38:38Then we will add the classes. So just
2:38:41add the class name property and these
2:38:42classes.
2:38:44After that we have to provide the button
2:38:48text here. So instead of adding the text
2:38:50here also we'll add the icon that is
2:38:53trash icon. So just add the trash icon
2:38:56imported from the Lucid React and then
2:38:58add the size 14.
2:39:01Next, we will add the onclick property
2:39:04on this button. And before adding that,
2:39:06we'll add the classes. Let's add the
2:39:08class name and provide these classes.
2:39:13Next, just add the on click.
2:39:17In this on click, add the arrow function
2:39:21and uh provide the event in the
2:39:24parameter
2:39:25here. Just add E dot
2:39:29a stop propagation
2:39:31semicolon and provide the handle delete
2:39:35function. In this handle delete, we have
2:39:37to provide the project ID. So just add P
2:39:39dot ID.
2:39:43Let's save the changes. After adding it,
2:39:45let's come here. So you can see in the
2:39:47right side, we have the arrow icon. When
2:39:50we click here, it will change the route.
2:39:52It will open the
2:39:54builder page where we can update this
2:39:56project. And if I hover it, you can see
2:39:59here we have the trash icon or delete
2:40:02icon so that we can delete this project.
2:40:05After that, let me click on this
2:40:08project. So you can see it is opening
2:40:10the another route that is builder/
2:40:14project 1. That is the project ID and
2:40:18you can see it is opening the builder
2:40:20page. So we can click on any project to
2:40:24open the project builder page where we
2:40:26can update this project or we can
2:40:28publish this project. We can preview the
2:40:30project. So we have to design this
2:40:32project builder page. But before that
2:40:35let me commit these changes and review
2:40:37our code. So just come back here.
2:40:42Here we'll open the sidebar. Let's click
2:40:45on this source control icon. We'll add
2:40:47the message. So just add the message
2:40:51created homepage
2:40:58commit changes and sync changes.
2:41:01So it will commit the changes in the
2:41:03development branch. After that we'll
2:41:06come back to the GitHub.
2:41:11Let's open the repository.
2:41:14So here you can see this button. Let's
2:41:16click on this button compare and pull
2:41:18request. So click on this button create
2:41:21pull request.
2:41:24So once we create a new pull request
2:41:27then the code rabbit will start
2:41:29analyzing our code. Now you can see the
2:41:32code rabbit is running and it is
2:41:35analyzing our code and after analysis it
2:41:38will display the suggestions, feedback
2:41:41and review summary.
2:41:45Now our review has been completed by
2:41:47code rabbit and here you can see we have
2:41:49the review summary. So these are new
2:41:53feature added in this update and here we
2:41:56have some UI improvements. After that if
2:41:59I scroll down you can see we have some
2:42:03suggestions. Here we have some minor
2:42:05issue for this
2:42:08handle submit and uh it is also
2:42:12suggesting this fix
2:42:15right after that let us scroll and see
2:42:17the next issue or suggestions. So here
2:42:20we have the major issue. It says
2:42:24[snorts] the
2:42:26unmemorized load project and uh load
2:42:30projects. So it is suggesting to wrap
2:42:33this inside the use call back. So we can
2:42:35add inside the use call back. And after
2:42:38that let's see the next one. Here it
2:42:41says it is also critical issue. Here we
2:42:44have used the logout function in the
2:42:50homepage right and uh it is not exported
2:42:54using this value object in the context.
2:42:56So we have to insert this log out inside
2:42:58the value object in app context. So you
2:43:03can see the suggestions and bug fixes
2:43:06using this code rabbit. So let me
2:43:08implement this one. I'll just come back
2:43:10to the VS code and open our app context.
2:43:14And uh in this app context
2:43:19we have this value object. Here we have
2:43:21the login register but we didn't add the
2:43:25logout. So just add the comma and
2:43:27provide
2:43:28log out. Save the changes.
2:43:32After that let me just come here and uh
2:43:35you can click on this button
2:43:38merge pull request
2:43:41and confirm merge. After that let's come
2:43:45here in the VS code. We'll click on this
2:43:47three dot and pull. So it will pull the
2:43:49latest changes in the
2:43:52VS code.
2:43:54So after completing our homepage, next
2:43:57we have to create our
2:44:00builder page. Let me just come back to
2:44:01the application. So you can see this is
2:44:04our builder page. So we have to design
2:44:06this page.
2:44:08To create our builder page, let's open
2:44:11the sidebar and here you will find
2:44:13builder page. JSX.
2:44:16Now in this one, we need some data from
2:44:19context. So here
2:44:23we will add con
2:44:26and extract the data from
2:44:29use app context. Use app context has
2:44:32been imported. Now from here we'll get
2:44:34the active project.
2:44:37After that let's get the
2:44:40loading active project.
2:44:44After that let's get the
2:44:48active file
2:44:50then we'll get
2:44:53so code
2:44:55then
2:44:56set active file
2:44:59after that set so code
2:45:02then we'll get the load project to load
2:45:05the individual project data then we'll
2:45:09get the log out
2:45:13and we are getting all these data from
2:45:16context. Now after that here we need the
2:45:19ID also. So if I open the web page you
2:45:22can see we have the ID in the URL right?
2:45:24So we have to find the ID from URL. For
2:45:27that just add const
2:45:31curly braces id
2:45:34is equal to
2:45:37use padams. So here we are getting the
2:45:40id and after that let's get the navigate
2:45:43function also. So just add con equal to
2:45:48use navigate and uh let's import this
2:45:53use navigate from react router DOM.
2:45:57After that here we have to create some
2:45:59state.
2:46:02So I'll provide const left tab and set a
2:46:06function set left tab is equal to use a
2:46:11state and let's initialize it using
2:46:14chat. So we have the initial value chat
2:46:18in the left tab. After that we'll add
2:46:21the another state. So just duplicate
2:46:23this one only. And here we'll add
2:46:26a state name called publishing and
2:46:29setter function name is set publishing
2:46:33and by default it will be false. So just
2:46:36change it to false.
2:46:38Again duplicate it. Here we'll add the
2:46:41next state. So the next state is publish
2:46:45URL and the setter function name is set
2:46:47publish URL.
2:46:50So let's initialize it using null. So
2:46:54the publish URL will be null by default.
2:46:57Save the changes. Now after that we have
2:47:00to load the project data. For that here
2:47:04we will add one use effect.
2:47:08In the use effect create the arrow
2:47:10function and provide a dependency array.
2:47:13Now within this function first we'll
2:47:16check the ID is available or not. So if
2:47:18I add not of id in this case simply add
2:47:22return and stop the execution of this
2:47:24function. Now suppose the id is
2:47:27available in this case we will use the
2:47:29load project and provide the parameter
2:47:32that is ID.
2:47:34Now after that here let's add the
2:47:37dependency. So in the dependency we will
2:47:39add the id and load project. So if any
2:47:42of this changes it will again reload the
2:47:46project data.
2:47:48Now after that we'll add another use
2:47:50effect. So I'm going to copy this one
2:47:52only. Paste it here.
2:47:55Here in this one we'll add if not of id
2:48:00or
2:48:02not of
2:48:04active project.
2:48:06In this case we'll add the return and
2:48:08after that we'll add next if statement.
2:48:12Again we'll add the if and here we'll
2:48:14use the active project
2:48:17dot status. So we'll check the status of
2:48:21our active project. So if the status is
2:48:24equal to pending or
2:48:28active project dot a status is equal to
2:48:31generating.
2:48:33So in this case we have to wait for few
2:48:36more seconds. So let's add
2:48:41const
2:48:42interval equal to
2:48:45set interval.
2:48:48In the set interval create the arrow
2:48:51function and provide the time 1500
2:48:54milliseconds.
2:48:56And here let's add the load project
2:48:58again. In the load project provide the
2:49:01ID and comma true. Now after that here
2:49:05we can add the return
2:49:09and in the return simply add the arrow
2:49:12function that will call our clear
2:49:14interval.
2:49:16In the clear interval provide the
2:49:18interval
2:49:20that is available here and now update
2:49:23the dependency here. So in the
2:49:25dependency we have added the id then
2:49:28load project and then we'll add comma
2:49:32active project. So now it will fetch the
2:49:36individual project data and we'll get
2:49:38the project ID from the padams.
2:49:41After that we can display these data on
2:49:44our web page. So let's scroll down and
2:49:49here we have the return statement. But
2:49:51before this return, let's add one if
2:49:53statement. And here we'll add if
2:49:58loading active project or not of active
2:50:03project.
2:50:05So if the active project is still
2:50:07loading or project is not available, it
2:50:11means active project is not available.
2:50:12So in this case, simply add the return
2:50:15and we'll return the loading component.
2:50:17So let's add the loading and import it
2:50:20from the components folder. It has been
2:50:22mounted. Save the changes. So if the
2:50:26project is loading then it will display
2:50:28the loading component. Else it will come
2:50:31to this another return statement and
2:50:33here we will clear this text and let's
2:50:37add some classes for the parent div. So
2:50:40here we'll set the height using height
2:50:42screen and flex layout with the
2:50:46background white and uh we'll add the
2:50:49text color and relative. Now within this
2:50:51we have to add the header section of our
2:50:55builder page. So to display the header
2:50:58we will create a separate component. For
2:51:00that let me just add one comment here
2:51:03that is top bar or header. Right. And
2:51:08after that we'll add the next command
2:51:09that is main layout. So we have to add
2:51:11the header and then main layout. And to
2:51:15create this header let's create a new
2:51:18component.
2:51:20So let me open the sidebar components
2:51:23folder. And in the components folder
2:51:25create a file called builder header.jsx.
2:51:29Let's add rafce for creating the
2:51:31component structure. And here we will
2:51:34dstructure some data from props. So
2:51:37let's add curly braces
2:51:39and here we will restructure the project
2:51:42name after that
2:51:45version
2:51:47then so code
2:51:51after that publishing
2:51:54then on toggle so code
2:51:59then on open preview
2:52:03then on publish then on download
2:52:09then on back and on log out.
2:52:13So we'll destructure these data from
2:52:15props and let's come here in the return.
2:52:18In the return we will remove this div
2:52:21and we will use the header tag.
2:52:25So we have added the header opening and
2:52:27closing tag. In this header tag just add
2:52:30some TIN classes like this. Now after
2:52:34that we'll create a div where we will
2:52:36add the back arrow icon. Then we'll add
2:52:39the logo then project name and version.
2:52:43So to group all these we'll create a div
2:52:48and provide the flex layout for this
2:52:51div. Now in this div first we have to
2:52:54add a button tag where we will insert
2:52:57the back arrow icon. So let's add the
2:53:00arrow left icon
2:53:05from the Lucid React and in this icon
2:53:08set the size 16. Next we'll add the
2:53:11classes in this button. So in this
2:53:14button tag provide these Telvin classes.
2:53:17Next we'll add the on click. So let's
2:53:20add on click and in this on click
2:53:24we have to provide on back. After this
2:53:29button we have to add our logo. To
2:53:31insert the logo we will use the image
2:53:33tag. And in this image src
2:53:36let's add / logo. SVG. So this SVG file
2:53:42is available in the public folder. After
2:53:45that provide the classes for this logo.
2:53:48So we have added the invert and size
2:53:50five. Next we have to add the project
2:53:53name. So insert one span tag. In this
2:53:57span tag just add curly braces and
2:54:00provide the project name.
2:54:03Then we'll add the classes. In this
2:54:05project name. So we have added these
2:54:08classes. And then again one span tag. In
2:54:11this one we have to add the version. So
2:54:13just add the
2:54:15version. And before that we'll add V. So
2:54:18we'll add some classes for this version
2:54:20also. So just add these classes. Save
2:54:24the changes. So we have added this
2:54:28row with the back arrow icon, logo,
2:54:31project name and version.
2:54:33Now we'll add another div. So create
2:54:37another div here. In this one provide
2:54:40the flex layout again. So we have added
2:54:44flex item center gap 1.5.
2:54:48After that here we have to add a button.
2:54:51In this button we will add the toggle
2:54:54option to
2:54:56display the code or hide the code. So
2:55:00let me provide button tag. In this
2:55:03button tag we will use the turnary
2:55:05operator. So just add the so code state.
2:55:08If it is true then we'll add the
2:55:10parenthesis and fragment. Within this
2:55:13fragment just add the I
2:55:17icon
2:55:19imported from Lucid React and in this I
2:55:23icon we'll add the size. So just add the
2:55:25size 13 and just after this icon we have
2:55:29to add the text also that is preview.
2:55:32Now after that we'll add the else
2:55:33statement. So here we'll add colon and
2:55:36another parenthesis and just copy this
2:55:39one. Paste it here. Here we'll add the
2:55:42code to icon and import this icon from
2:55:45Lucid React. Here we'll add the text
2:55:48called code.
2:55:50Now we have to add the classes in this
2:55:52button and one
2:55:55function. So just add the onclick
2:55:57property and uh in this on click provide
2:56:01our function that is on toggle. flow
2:56:03code
2:56:04then provide the classes. So we have to
2:56:06add the dynamic classes. So let's add
2:56:09the curly braces and back tick in this
2:56:13one.
2:56:14Let me provide the fixed classes first.
2:56:17So we have added these fixed classes
2:56:22and after that insert the
2:56:25dynamic classes using dollar sign curly
2:56:27braces and just use the so code state.
2:56:29If it is true then provide background
2:56:34and text color. Else we will add the
2:56:38empty string. So just add colon empty
2:56:40string. Save the changes. So we have
2:56:44added one button for the toggle code
2:56:47view. Next we'll add the another button.
2:56:51Using that we can display the preview.
2:56:54So after closing up this button create
2:56:56another button.
2:56:59We have added another button tag. In
2:57:01this second button we'll add on click
2:57:04property. In this on click just add on
2:57:07open preview.
2:57:09Then add the classes. So we have added
2:57:12the class name property and these
2:57:14classes.
2:57:16Now here we have to add the icon. So
2:57:19let's add the opening arrow and provide
2:57:21external link icon from Lucid React.
2:57:27Then add the size 13
2:57:30and just after this icon we'll add the
2:57:33text also that is open preview.
2:57:35So we have added the button for open
2:57:38preview.
2:57:39Now we'll add the next button. So here
2:57:43we'll add a space and provide the button
2:57:46tag again.
2:57:48And this button we'll add on click and
2:57:51simply add on publish.
2:57:55After that we'll add disabled.
2:57:58So this button will be disabled when the
2:58:00publishing is true. So just add
2:58:03publishing.
2:58:06Then we'll add the classes. So let's add
2:58:08the class name property. And we have
2:58:12added these classes.
2:58:14Now here we'll add the curly braces and
2:58:16use the publishing state. If the
2:58:19publishing is true in this case we have
2:58:21to add the loading animation. So just
2:58:24add the loader to icon from Lucid React
2:58:29and uh provide the size and animation
2:58:33using class name animate a spin and if
2:58:36it is false then add the colon and
2:58:39provide the
2:58:42globe icon.
2:58:45Import this icon from Lucid React and
2:58:47with this icon provide the size 13.
2:58:50That's it. And after that we'll add the
2:58:54space here and provide publish.
2:58:58Save the changes. So we have added the
2:59:00button for publish. And if the
2:59:02publishing is true, it will display the
2:59:04loading animation inside the button.
2:59:07After that we have to add the button for
2:59:10download. Using that we can download the
2:59:12code. So after this button add another
2:59:16one.
2:59:18In this one add on click.
2:59:21In this on click add on download.
2:59:26Then add the class name. And uh here we
2:59:30have added the same classes. And after
2:59:34that let's add the icon. So I'll just
2:59:38copy this icon
2:59:40and text paste it here. Let's update our
2:59:44icon. So we'll add download icon and
2:59:47import it from lucid react. Size will be
2:59:5013 and the text will be export.
2:59:53Correct. Now after that we'll add the
2:59:56last button. So let me just duplicate
2:59:59this button only.
3:00:02Here we'll add on click. It will be on
3:00:05log out.
3:00:08Then the classes will be same. And just
3:00:11update the button text. It will be sign
3:00:13out. So remove this icon and simply add
3:00:16sign out. Save the changes. So we have
3:00:18created this complete component and now
3:00:21we'll mount this component on our
3:00:23builder page. So we will open the
3:00:24builder.jsx
3:00:26and here only we will add
3:00:29builder
3:00:32header from the components.
3:00:36After that here we have to provide the
3:00:39props. So first we'll add the project
3:00:41name. So in this project name just add
3:00:44the
3:00:46active project dot name.
3:00:51Then we'll add the version.
3:00:54In the version just add
3:00:56active project
3:00:59dot version.
3:01:02After that we'll add the so code.
3:01:05In the so code provide the same so code.
3:01:09Then we'll add the publishing.
3:01:13Here also we'll add the publishing.
3:01:17After that we'll add the on toggle so
3:01:20code. It will be one adder function
3:01:26and provide set so code
3:01:30provide not of so code.
3:01:35Next we'll add on open preview.
3:01:39In this on open preview we'll add a
3:01:42function. So let me create that function
3:01:44first. That is handle open preview.
3:01:47Let's add it here
3:01:50con handle open
3:01:54preview.
3:01:55It will be one add function. In this
3:01:58handle open preview let's add if
3:02:02statement. If
3:02:06not of id then simply add return
3:02:12else we'll add the window dot open and
3:02:17uh provide the
3:02:20path. So just add back text / preview/
3:02:25dollar sign curly braces and provide our
3:02:28id. So it will open this path. Then
3:02:31we'll add comma
3:02:35blank. So we have added handle open
3:02:38preview and let's provide this function
3:02:40here in on open preview.
3:02:44After that we'll add on publish.
3:02:48So just add on publish.
3:02:53In this one we will add the
3:02:56next function that is handle publish. So
3:03:00let's add this handle publish here using
3:03:04the con
3:03:06handle publish equal to
3:03:09async arrow function. Let's keep this
3:03:12function empty for now. And uh after
3:03:15that let's add the function here that is
3:03:18handle publish.
3:03:20Now we'll add our next props. So it will
3:03:24be on download
3:03:28equal to and in this on download we'll
3:03:31add the handle download and let's create
3:03:34this handle download also. So just
3:03:36duplicate this one
3:03:38write the name handle download. Let me
3:03:42remove this.
3:03:45So we have added handle download
3:03:46function here. And uh let's add our
3:03:51next props. So the next props is on
3:03:54back.
3:03:56In this on back we'll add the arrow
3:03:59function. Simply call our navigate
3:04:03function and provide the path. It will
3:04:05be slash that is the homepage.
3:04:08Now we'll add on
3:04:10logout. In this on logout we will call
3:04:14our logout function.
3:04:16Save the changes. After mounting this
3:04:19component and providing all the props,
3:04:21let me just open our web page.
3:04:24After opening this web page, you can see
3:04:26the top bar is continuously reloading.
3:04:31So, let me just come back here in the VS
3:04:33code and uh here you can see we have
3:04:37added this use effect where we are
3:04:39loading the project using load project.
3:04:42So from here we will just remove this
3:04:44dependency called load project. Save the
3:04:47changes and come back here. Now you can
3:04:50see here we have the top bar where you
3:04:52can see the back arrow icon. Then our
3:04:55logo and then we have the project name
3:05:00and then we have the version v1. In the
3:05:03right side we have this button for code
3:05:06that will toggle the
3:05:09state.
3:05:11Then we have the open preview. Then
3:05:13publish, export and sign out.
3:05:16After that we have to display our main
3:05:18content. So we'll divide this main
3:05:21content area in two part in the left and
3:05:23right side. So just come back to the VS
3:05:26code.
3:05:28Scroll down.
3:05:30Here you can see we have this main
3:05:32layout. So under this main layout create
3:05:35a div
3:05:37and create the flex layout here. So we
3:05:40have added flex
3:05:43then overflow hidden and here we have
3:05:45added flex once. So it will use the
3:05:47entire space available in the row. Then
3:05:50we have to add the layout in two column
3:05:55in the left and right side. So just add
3:05:57the comment for left sidebar.
3:06:00After that we'll add the comment here
3:06:02that is preview or code area. So here we
3:06:06have to add the sidebar and in the right
3:06:09side we'll display the preview of the
3:06:11generated project or we can display the
3:06:14code also. So let's start adding the
3:06:18content in the left sidebar. So in this
3:06:20left sidebar create a div
3:06:24and uh for this div we'll set the width.
3:06:26It will be 320 pixel. Then we'll add the
3:06:31shrink zero flex flex column border
3:06:34right and uh border color and
3:06:37background.
3:06:38Now in this one we have to add the tabs.
3:06:41So just add the comment that is sidebar
3:06:45tabs and here create a div.
3:06:49Now in this div just use the flex layout
3:06:54provide the border
3:06:56bottom and border color. Here we have to
3:07:00add the button for each tabs. So just
3:07:02add the button here and uh in this
3:07:05button we will add the icon. So let's
3:07:09add message squared icon and import this
3:07:13icon from Lucid React. Next provide the
3:07:16size for this icon. And after adding the
3:07:19size we have to add the text. So the
3:07:22text is chat.
3:07:25After that here we will add the on click
3:07:28property. Let's add the on click. And in
3:07:31this on click we will add the
3:07:35add function. And in this add a function
3:07:40we will use one
3:07:43setter function that is already created
3:07:45above. So just add set
3:07:48left tab
3:07:50and let's add the value here. So the
3:07:52value will be chat. After that we have
3:07:55to add some classes in this first
3:07:58button. So provide the class name
3:08:01property and insert the dynamic classes
3:08:05using this template lit. So just add the
3:08:09fixed classes first. So we have added
3:08:11these fixed classes. Then insert the
3:08:13template lit like this. Here we'll add
3:08:16the left tab equal to chat if it is
3:08:19true. In this case just provide these
3:08:25text color border color and uh border.
3:08:30Then we'll add the colon for else. Here
3:08:34we'll update the color for
3:08:39left tab. Save the changes.
3:08:42Now after adding it if I come back here
3:08:45you can see here we have the left
3:08:46sidebar where you can see the first tab
3:08:48that is chat
3:08:50right now after that let me just come
3:08:53here and just duplicate this button. So
3:08:57we have added another button in this
3:08:59second button we'll add the
3:09:02left tab or set left tab it will be
3:09:06files. So in the left side we can
3:09:09display the chat or we can display the
3:09:11files
3:09:13right now after that here we will use
3:09:15the classes again. So here also we have
3:09:18to add some dynamic classes. So let's
3:09:21update it like this.
3:09:28Now we'll update the icon. So it will be
3:09:30folder tree icon. Import this icon from
3:09:34Lucid React. And then we'll add the
3:09:37text. So the text will be files. Now let
3:09:40me just come here. You can see here we
3:09:42have chat and files.
3:09:46Let's click here. So the files is
3:09:48enabled. If I click here, the chat is
3:09:50enabled.
3:09:52Now after that,
3:09:55let's come back here and here we'll add
3:09:58the next comment just after this div.
3:10:02So provide the comment that is sidebar
3:10:05content.
3:10:07So just below this sidebar content
3:10:10create a div.
3:10:12In this one we'll add the flex one
3:10:14overflow hidden.
3:10:16Then we'll use the turnary operator.
3:10:19Let's add curly braces.
3:10:23Left tab is equal to
3:10:27chat. So if the left tab is equal to
3:10:30chat in this case we'll add question
3:10:33mark parenthesis and uh here we have to
3:10:36display the chat panel. So let's add a
3:10:39div
3:10:44and add the text chat panel.
3:10:53After that we'll add the
3:10:56colon parenthesis. And here we'll add
3:10:59another div.
3:11:01Here we have to display the file
3:11:04explorer.
3:11:06So let's add the text called file
3:11:09explorer like this. Save the changes and
3:11:12we'll come back here. So now you can see
3:11:14it is displaying the chat panel here. If
3:11:16I click on files, it is displaying file
3:11:18explorer.
3:11:19So we have to create the separate
3:11:20component for chat panel. and uh file
3:11:23exploder that will be displayed here.
3:11:27To create these components, let me just
3:11:29come back to the VS code and uh here
3:11:35let's create a new component called chat
3:11:38panel. So just open the sidebar
3:11:40components and in this folder create a
3:11:43new file chat panel dot jsx right rafce
3:11:49for creating the component structure.
3:11:51Now in this one we'll destructure some
3:11:54props. So we'll get the messages that
3:11:57will be displayed in the chat area. Then
3:12:00we'll add the function on send and uh
3:12:04then we'll add the loading.
3:12:07After that we have to scroll the chat
3:12:12section when a new message comes. Right?
3:12:14So we have to add one reference. So just
3:12:17add const bottom ref equal to use ref
3:12:25and get this use ref from react and
3:12:28initialize it using null. Now after that
3:12:31here we'll add one use effect also. So
3:12:35just add use effect. In this use effect
3:12:39add the add function and provide the
3:12:41dependency array. In the dependency
3:12:43array just add the messages. So when the
3:12:46messages are changing it will scroll the
3:12:50chat box then we'll add the loading
3:12:52also. Now in this function just use the
3:12:56bottom reference dot current
3:13:00dot scroll into view and here we will
3:13:04add the
3:13:06behavior it will be auto.
3:13:10So it will scroll the chat box at the
3:13:13bottom. Now come here in the return. In
3:13:15this return we'll create a div.
3:13:18So we already have this div and in this
3:13:21div we have to add the flex layout with
3:13:23the white background. Then we'll display
3:13:26the messages. So just add the messages
3:13:29comment here and uh after displaying the
3:13:33messages we have to add one input field
3:13:35also. So let's add the comment here for
3:13:38input. Using this input field we can add
3:13:41our new chat message. So first we'll
3:13:44display the messages. So here under this
3:13:46messages command create a div. Let's add
3:13:50some classes in this div. So we have
3:13:52added these telin classes. And after
3:13:55that let's use the messages array. So
3:13:59just add the messages dot length is
3:14:03equal to zero and
3:14:07parenthesis and here provide a div. So
3:14:11if the messages length is zero in this
3:14:13case we have to display one message. So
3:14:18let's wrap this message inside a div and
3:14:21add these classes
3:14:23and within this div create the message
3:14:27in p tag. Now in this p tag we'll add
3:14:30the message ask AI to modify your
3:14:33website.
3:14:36Then provide the classes here. So we
3:14:39have added these classes for the text
3:14:41which is in P tag.
3:14:44Now after that let's come here. Here we
3:14:47will again add the curly braces and
3:14:50messages
3:14:52dot map.
3:14:56In this map add the arrow function
3:15:00and simply add this parenthesis. Now in
3:15:03this parameter we'll get the individual
3:15:05message and index number that is I
3:15:09and simply return a div. Now in this div
3:15:13we have to add the key property. So the
3:15:16key will be our index.
3:15:19Then we'll add the
3:15:21another div here. Here we'll add the
3:15:24flex then gap and item start.
3:15:29Now let's create two other div here like
3:15:32this.
3:15:35Now in the first one
3:15:37we have to add these classes.
3:15:42And here we will check the
3:15:45role. So just add curly braces.
3:15:48This message dot role property
3:15:53is equal to user.
3:15:56So if the role is equal to user in this
3:15:59case just add this parenthesis and here
3:16:02we will add the user icon. So just add
3:16:05the user icon from Lucid React and
3:16:08provide the size here it will be 14 and
3:16:12then provide some classes. So just add
3:16:14the text zinc 500 and if it is not equal
3:16:18to user then we'll add the another
3:16:20parenthesis and provide the another
3:16:23icon. So just add bot message square
3:16:27icon and import this icon from Lucid
3:16:29React and provide the same size and uh
3:16:32color. So we have added the size and
3:16:34color for this one. Now after closing up
3:16:38this div
3:16:40here we have another div. In this one we
3:16:44have to display the name like U or AI.
3:16:48So just add the
3:16:51flex layout and provide the text in P.
3:16:55We have added the P tag. So in this P
3:16:57tag just add the message
3:17:02dot ro.
3:17:05So if the role is equal to user
3:17:10in this case we will display U.
3:17:18else we will display AI
3:17:20and for this P we will add some classes.
3:17:24So we have added these classes and uh
3:17:26after that let's add another P tag in
3:17:30this another P
3:17:32provide the classes
3:17:36like this
3:17:38and within this P provide the curly
3:17:40braces
3:17:43message dot
3:17:46content
3:17:48dot
3:17:50split It
3:17:54provide the
3:17:57dash
3:17:59back slash
3:18:02in the double quote.
3:18:05Here we have to add the space also.
3:18:06After this dash
3:18:09then we'll add
3:18:11dot map.
3:18:15In this map provide the text and index
3:18:21here. Let's add a span tag.
3:18:24So we have added the span and provide
3:18:27the key. Key will be index.
3:18:31And after that we'll add the class name
3:18:34and provide the block and margin top.
3:18:41Then we'll add the another aspan
3:18:44in this aspan provide the
3:18:48dash space back slash and then we'll add
3:18:52the class name here. So in this class
3:18:55name we'll add curly braces
3:18:59I equal to zero then hidden else empty
3:19:02string and after this aspan
3:19:05let's add curly braces text. Save the
3:19:09changes.
3:19:12Now let's come here and here we'll add
3:19:15curly braces loading. If the loading is
3:19:18true in this case just add a div. For
3:19:23this divide
3:19:26the flex gap 2.5 and item start.
3:19:32After that we will display the bot icon
3:19:36and then we'll display some loader
3:19:39icons. So let's create one div and
3:19:42inside this div we'll add the bot icon
3:19:46from lucid react for this icon. Just set
3:19:49the size
3:19:5113 and provide the class name and add
3:19:55the text zinc 900 and provide the
3:19:59classes in the div also that contains
3:20:01this icon. So in this div we have added
3:20:04these classes. Now here we'll add
3:20:07another div.
3:20:10In this one simply add flex one. Then
3:20:13we'll add the text inp tag. So the text
3:20:17is
3:20:21AI
3:20:23and provide the classes in this text. So
3:20:26we have added these classes and then
3:20:29we'll create one div. Inside this div
3:20:32create multiple spans. So just copy and
3:20:35paste it.
3:20:37Now here we'll add the class name called
3:20:40dot loader. Let's add the class name
3:20:43here dot loader. Save the changes. After
3:20:47that here
3:20:49just before this
3:20:51closing div
3:20:55and it will be self-closing div
3:20:59and provide the reference and the
3:21:02reference will be bottom ref that will
3:21:05help us to scroll the chat area
3:21:08right and uh after that let's come here
3:21:12and here we'll display our input field.
3:21:14So simply add a div and in this div
3:21:17provide some classes like this and then
3:21:21we have to add our
3:21:23component. So we have already created
3:21:25this
3:21:28prompt input component.
3:21:31It has been imported. And here we'll add
3:21:33the
3:21:34props that is on submit. It will be on
3:21:38send. Then loading. It will be
3:21:43loading. Then we'll add the
3:21:47placeholder. So just add the text ask AI
3:21:50to modify.
3:21:54Then we'll add
3:21:57autofocus.
3:21:58That's it. Save the changes. So we have
3:22:01created one component here. Now let's
3:22:04mount this component on our builder
3:22:06page. So just open the builder page.
3:22:08JSX. And here you can see we have the
3:22:11text called chat panel. So just remove
3:22:14this text and simply mount our
3:22:19chat panel component. It has been
3:22:21mounted here. And provide the messages.
3:22:25It will be active project dot
3:22:29messages. Then add on send. In this on
3:22:33send we'll add one function that will
3:22:36handle chat. So let's create this
3:22:39function first.
3:22:42So
3:22:44let's come here.
3:22:47We'll add con
3:22:51handle chat.
3:22:53For now we are creating this function
3:22:55here. But later we'll create this
3:22:57function in context and get it from the
3:23:01app context. So let's provide this
3:23:04handle chat here.
3:23:08And uh after that let me add one more
3:23:11props that is loading. So it will be
3:23:16chat loading.
3:23:19So we don't have the chat loading. So
3:23:22let's create this variable also.
3:23:26Let's add con
3:23:31chat loading.
3:23:33set chat loading
3:23:38equal to
3:23:39user state and uh by default it will be
3:23:45false.
3:23:47So let's add chat loading here.
3:23:50Now let me just come here and you can
3:23:52see here we have the chatter screen
3:23:55where you can see two messages by you
3:23:57and by AI.
3:24:00Correct? And here we have the input
3:24:03field where we can submit our query.
3:24:08Now let me provide our function or we
3:24:12will complete this function which is
3:24:15here that is handle chat and this chat
3:24:19loading. So let me just remove it from
3:24:21here
3:24:23and open our app context. In this app
3:24:26context
3:24:27here we have the chat loading right. So
3:24:29we can simply get this chat loading from
3:24:31this context. So just add comma and
3:24:34provide chat loading. And after that in
3:24:36this context we'll create our function
3:24:39to load the chat
3:24:44or handle the chat.
3:24:46So scroll down
3:24:48after this
3:24:52load project we have the use effect then
3:24:56handle generate then handle delete. So
3:24:59after this handle delete let's add con
3:25:04handle chat
3:25:07equal to use call back.
3:25:11In this use call back just add the
3:25:14asynchronous add function
3:25:17and after this function we'll add comma
3:25:20and provide the array where we'll add
3:25:23active project
3:25:26user.
3:25:28Now in this function just add the prompt
3:25:33as parameter and then
3:25:37let's add if statement. If not of active
3:25:41project or not of user then simply add
3:25:46return
3:25:49then we'll use the setup function set
3:25:52chat loading and make it true.
3:25:57After that we'll add the try catch. So
3:26:00we have added the try catch statement.
3:26:01In this try block we'll make the API
3:26:04call. So just add con data equal to
3:26:06await and use the API dot
3:26:10post. In this one just add the back
3:26:13ticks and provide the / API/ projects
3:26:17and provide the project id using this
3:26:20dollar sign curly braces active project
3:26:22dot ID and then / chat. So this is the
3:26:26endpoint. Then provide our prompt. So
3:26:28just add curly braces
3:26:31prompt.
3:26:32Now after that here we will add
3:26:37set active
3:26:39project
3:26:42and in this setter function just provide
3:26:44this data.
3:26:46After that we'll add if statement if
3:26:50data dot errors and data dot
3:26:53errors.length is greater than zero.
3:26:59In this case we'll display the toast
3:27:00notification. So just add toast dot
3:27:02error
3:27:04and this error message. After that we'll
3:27:07add the else statement also. In this
3:27:09else statement we'll add toast dots
3:27:11success and the message is updated to
3:27:15version.
3:27:16Then we'll come here in the catch block.
3:27:18We'll get the error
3:27:21and then we'll add console dot error.
3:27:25Then we'll add to dot error
3:27:29and this message. Then we'll add the
3:27:32finally block and in this finally block
3:27:35we will use set
3:27:37chat loading and make it false.
3:27:40Save the changes.
3:27:43So we have added handle chat function.
3:27:46After that let's get it here. We will
3:27:50add comma and provide handle chat. Save
3:27:55the changes. Now you can see it should
3:27:58run the page right. It works fine.
3:28:02Here you can see in both chat it is
3:28:04displaying the same bot icon. So let me
3:28:07update it. We'll come back here and uh
3:28:10in this chat panel you will find this
3:28:13message roll equal to user. So just
3:28:15correct this one user save the changes
3:28:19and uh after that if I come back you can
3:28:21see here we have the user icon in the
3:28:23first one and in the second one we have
3:28:25the bot icon. Now it is correct.
3:28:28After that we have to create the
3:28:30component for our files. If I click here
3:28:33it is opening this file explorer. So we
3:28:36have to create this file explorer
3:28:38component.
3:28:41To create our file explorer component
3:28:44let's come back to the VS code and uh we
3:28:47will open the sidebar.
3:28:49In this one we have the components
3:28:51folder. So here let's create a new file
3:28:55and write the file name file explorer
3:28:59jsx.
3:29:01Let's add rafce
3:29:05for creating the component structure.
3:29:08Now in this one we'll add a div and for
3:29:12this div we will provide some telin
3:29:14classes and in this one we have to add a
3:29:17text inp tag. So the text will be files.
3:29:22Now provide some
3:29:25CSS properties in this P. So we have
3:29:28added these TIN classes for this P tag.
3:29:31And after that we have to display the
3:29:34tree item. For that we'll create the
3:29:38component. And uh let me add the props
3:29:42here. In this props first we'll get the
3:29:45files.
3:29:47After that we'll get the active file
3:29:53and then we will get the on file select
3:29:56function.
3:29:58So we'll get the all files active file
3:30:01and on file select function. Now after
3:30:05that
3:30:07in this function we will add con
3:30:11tree equal to
3:30:14use memo import it from react and uh in
3:30:19this one
3:30:20let's add the arrow function
3:30:25and let's use build tree function
3:30:30and we have to create this function.
3:30:33So before this file explorer here we
3:30:36will add function and uh the function
3:30:40name is build tree. In this one we'll
3:30:43add the paths
3:30:46and here just provide the
3:30:49object
3:30:51dot
3:30:53keys
3:30:54dot or we'll use this keys function. In
3:30:59this case function add the files. After
3:31:03that add the comma and in this array
3:31:07provide the files.
3:31:11Now let's complete our function that is
3:31:13build tree. So in this one just create a
3:31:16variable with the name root. It will be
3:31:19empty array. Then we'll add the for of.
3:31:24So we have added for off loop. In this
3:31:26one, we'll add the con
3:31:29file path of the paths
3:31:34dot sort.
3:31:37Then we'll add con
3:31:41parts equal to file path dot split.
3:31:49In this split, simply add forward slash.
3:31:52Then we'll add dot filter
3:31:56and in this one provide the boolean.
3:32:00Then we'll add the variable with let
3:32:06current is equal to root.
3:32:09Now we'll add the for loop here.
3:32:14Just add let
3:32:16I
3:32:18equal to zero and uh I less than the
3:32:25parts do.length length
3:32:27then I ++
3:32:31here we'll add const name name equal to
3:32:33parts index I
3:32:37then we'll add con is last equal to i
3:32:42and is equal to parts dotlength minus
3:32:45one
3:32:48then we'll add con full path it will be
3:32:52forward slash plus
3:32:56this parts
3:32:58dot slice
3:33:02then zero comma I + 1
3:33:06then we'll add dot join
3:33:10and provide forward slash
3:33:14now we'll add let
3:33:17existing equal to current dotfind end
3:33:23and create the function with the
3:33:27parameter
3:33:28n.
3:33:30Here we'll add n dot name
3:33:34is equal to name.
3:33:38After that we'll add if not of existing.
3:33:43In this case just add existing.
3:33:46It will be
3:33:49object where we'll add the name. Then
3:33:52we'll add the path
3:33:56and in the path just add full path.
3:34:01After that we'll add is directory.
3:34:06It will be not of is last.
3:34:10Then we'll add children.
3:34:14Now here we'll add current dot push
3:34:18existing.
3:34:19After that here we'll add current is
3:34:21equal to existing dot children.
3:34:25And finally we will add the return and
3:34:29we'll return the root.
3:34:31So we have created this build tree and
3:34:33we are using this build tree here. Here
3:34:36we'll get the tree. After that come here
3:34:39within this div and simply use curly
3:34:41braces and provide the tree dot map.
3:34:48In this map add the arrow function and
3:34:52return this parenthesis. Here we'll get
3:34:54the individual node right and after that
3:34:58using this node we have to display the
3:35:00tree item. So let's add the text here.
3:35:05tree item.
3:35:08So instead of adding this text like
3:35:09this, we'll create the tree item
3:35:13function. So let's scroll up and here
3:35:17before this file explorer
3:35:19just add
3:35:21function
3:35:23tree item.
3:35:27Now here we'll add some parameter. So
3:35:29just destructure these parameters.
3:35:32So just add calibrs and provide the
3:35:36node.
3:35:38Then we will get the active file.
3:35:42After that let's get on file select
3:35:48and then
3:35:50depth. So default value will be zero for
3:35:54this depth. After that just add const is
3:35:58active equal to the node
3:36:03dot path
3:36:07equal to
3:36:09active file.
3:36:11After that we will add if statement node
3:36:14dot is directory.
3:36:17If it is true then we will add return
3:36:22and return a div.
3:36:24In this one let's create the another div
3:36:29and inside this div we have to provide
3:36:32some classes. So we have added these
3:36:34telin classes and after that here we
3:36:37have to add the folder icon. So let's
3:36:39add
3:36:41folder icon from Lucid React.
3:36:45Then we'll add the size. Size will be
3:36:4734. Then we have to add some class name
3:36:50for the icon. So we have to add the
3:36:55color and opacity.
3:36:58Then we'll add the span tag. In this
3:37:00span tag, we'll add
3:37:03the node dot name.
3:37:09After that just come here in this div
3:37:12we'll add the style property. In this
3:37:15style property add the padding left.
3:37:22In this padding left, let's add the back
3:37:24text
3:37:26dollar sign curly braces and add the
3:37:30depth
3:37:32multiplied by 12 + 8
3:37:38then pixel.
3:37:40Now after that let's come here and uh
3:37:44here we'll add curly braces.
3:37:47Then add node dot
3:37:50children dot map.
3:37:54In this map add the arrow function and
3:37:56provide the parenthesis.
3:37:59Here we'll get the child.
3:38:02Then we will provide this tree item.
3:38:07It's here tree item.
3:38:11In this tree item provide the key.
3:38:14It will be child
3:38:17dot path.
3:38:20Then we will add the node.
3:38:24So in this node, let's add the child.
3:38:28After that, we'll add the active file.
3:38:34So it will be active file.
3:38:39After that we'll add on file. Select.
3:38:43It will be on file select.
3:38:46Then we'll add depth. So it will be the
3:38:51depth + one.
3:38:54Save the changes. Now after that
3:38:58we can come here
3:39:00and instead of this P
3:39:03let's provide the component that is tree
3:39:07item.
3:39:10In this tree item, we'll add the key. It
3:39:13will be the node dot path.
3:39:18Then we'll add the node.
3:39:22It will be node.
3:39:25After that we'll add the active file
3:39:29equal to active file. Then on file
3:39:33select it will be on file select.
3:39:38After that we have to update our
3:39:40function that is tree item. You can see
3:39:42here we have the tree item where we have
3:39:44added if node is directory true. So
3:39:49let's add the another statement here. So
3:39:51after this if simply add return.
3:39:59So if the node is a file not a
3:40:02directory. So in this case we'll add a
3:40:07button we have added a button tag. Now
3:40:11in this button we'll add on click. In
3:40:14this on click add the add a function and
3:40:17simply call on file select and provide
3:40:21the node dot path. Then we'll add the
3:40:26class name here in this button. So we'll
3:40:28provide the dynamic classes just add the
3:40:30curly braces back. So these are the
3:40:34fixed classes and then we'll add dollar
3:40:36sign curly braces and write is active.
3:40:39If it is active in this case
3:40:44just add the
3:40:48background color, text color and font
3:40:50medium. And then we'll add else here
3:40:54we'll add other colors. So let's add
3:40:58different color here for the text hover
3:41:02and
3:41:04background hover.
3:41:06Right now after that in this one we will
3:41:09add the style also. So just add the
3:41:13style property then curly braces and
3:41:16just add the padding left.
3:41:19So here we have added padding left depth
3:41:23multiplied by 12 + 8 pixel.
3:41:27After that just come here within this
3:41:29button. In this button we have to
3:41:31display the file icon. So let's add the
3:41:34text file icon
3:41:39and after this file icon we have to
3:41:41display one
3:41:45text that is the file name. So just add
3:41:47the span tag. In this span tag just add
3:41:52node dot name.
3:41:55Then provide the class name here. And uh
3:41:59in this class name we'll add truncate.
3:42:02Save the changes. Instead of displaying
3:42:04this file icon text, we have to display
3:42:08the actual icon. For that we'll create a
3:42:11function. So let's scroll up.
3:42:15Before this item tree
3:42:18just add a function called
3:42:22get file icon.
3:42:27Now in this one provide the name
3:42:31and uh after that let's add the if
3:42:34statement. If the name dot ends with if
3:42:39the file name ends with and provide the
3:42:43details like dot CSS. So if the file
3:42:47name is ending with dot CSS in this case
3:42:49we'll add the return and provide one
3:42:52file icon. So just add the file
3:42:56text icon. Now for this one just add the
3:43:01size and
3:43:04text color using these size property and
3:43:07class name. So we have added file text
3:43:10icon. Now after that let's add another
3:43:13if statement. So just copy this one.
3:43:16Here we'll add ends with dot jsx.
3:43:21In this case we'll return the another
3:43:23icon. So just add the file code icon.
3:43:28import it from the Lucid React.
3:43:31And this icon also
3:43:34and in this one we'll add one more
3:43:36statement. We'll add or
3:43:39ends with JS. So just add name ends with
3:43:44JS. Let's remove this one.
3:43:48Now it is fine. So if it is ending with
3:43:52JSX or JS then we'll add the file code
3:43:55icon.
3:43:57Right now let's copy this one paste it
3:44:01here.
3:44:02Here we'll add dot JSON.
3:44:06So if the file name is ending with dot
3:44:09JSON in this case we will add the file
3:44:13text icon again. So here we are using
3:44:16the same file text icon. size will be 14
3:44:19and then we will update this color
3:44:25and we'll update the color in this one
3:44:28also. Here we will update this color and
3:44:31the size is 14 for each. After that
3:44:34we'll add the icon for other file type.
3:44:37So just add the return statement.
3:44:40In this return simply add one icon. So
3:44:43let's add
3:44:46file text icon size 14 and class name
3:44:50where we have added this color. Save the
3:44:53changes. After that let's call this
3:44:55function here.
3:44:57So instead of adding the
3:45:00file icon let's provide this function.
3:45:05Just add curly braces
3:45:08get file icon and provide the node
3:45:13dot name. Save the changes. After that
3:45:17we have to mount our file explorer
3:45:20component in our builder page. So just
3:45:22open the builder.jsx
3:45:25and this one
3:45:29here we have the sidebar tabs then
3:45:32sidebar content. So here we have the
3:45:35turnary operator. If the left tab is
3:45:37chat then we'll display the chat panel.
3:45:40Else we'll display the file explorer. To
3:45:42display this file explorer here let me
3:45:46remove this div and simply add opening
3:45:48arrow
3:45:51file explorer
3:45:53from components.
3:45:55Now provide some props here. So just add
3:45:57the files. It will be active project dot
3:46:03files. After that provide the active
3:46:06file.
3:46:08In the active file simply provide the
3:46:10active file. After that provide the on
3:46:14file select. In this on file select
3:46:18let's add the function.
3:46:24And in this function parameter we'll get
3:46:26the path.
3:46:29Now in this one just use the setter
3:46:31function set active file and provide the
3:46:35path.
3:46:37Then we'll add setter function set so
3:46:40code and make it true.
3:46:44Let's save the changes and open our web
3:46:47page. So now you can see here we have
3:46:49the file structures. So here you can see
3:46:52we have the folder also. We have a large
3:46:54icon for folder and then we have the
3:46:57files. You can see different color for
3:47:00different files and uh you can see the
3:47:03file name
3:47:05extension also like JS dot CSS app do.js
3:47:10and this is the folder name. And if I
3:47:13click on chat it will display the chat.
3:47:15If I click on files it will display the
3:47:17files. And when we click on any file it
3:47:20will display that file in the right side
3:47:23that we have to create. Correct? So this
3:47:27file will become active file and it will
3:47:29be displayed in the right side. So in
3:47:30the right side either we can display the
3:47:33file preview or we can display the
3:47:37website preview.
3:47:39To display our preview panel here in the
3:47:42right side we will come back to the VS
3:47:43code and uh let's scroll down. Here you
3:47:47can see we have the preview/code
3:47:50area. So here let's add a div.
3:47:54In this div we'll add flex one and
3:47:56overflow hidden and then just add the
3:48:01curly braces. We'll add active project
3:48:04dot a status is equal to pending.
3:48:08So we have added active project dot
3:48:11status is equal to pending or active
3:48:14project dot status is equal to
3:48:16generating
3:48:18or
3:48:20active project dot status is equal to
3:48:22failed.
3:48:25So in these cases we have to display the
3:48:28loader or progress. So just add the
3:48:31turnary operator and here we'll add the
3:48:35loading component for now. Later we'll
3:48:38replace this loading component.
3:48:41Let me open this sidebar loading. And
3:48:44now if I type this loading we are
3:48:48getting the suggestion
3:48:50it is already imported I think. Let me
3:48:52scroll up. Here we have the loading
3:48:54component right. So it is already
3:48:56imported and uh we have mounted this
3:49:00loading component here. Then we'll add
3:49:03else statement. So just add colon and
3:49:05another parenthesis and in this one
3:49:08we'll display our preview panel. So just
3:49:10add the
3:49:12tag and let's add the text preview
3:49:15panel. So it will be displayed in the
3:49:18right side. If I just come back you can
3:49:19see here we have the preview panel.
3:49:22Correct? Now if I come back here and uh
3:49:26let's add exclamation here and come back
3:49:31here. So you can see we are getting the
3:49:32loading. So instead of loading we'll
3:49:34display some other component but for now
3:49:38let me keep the loading only and we'll
3:49:40continue this preview panel. So we'll
3:49:43create a separate component for our
3:49:44preview panel. Just open the sidebar in
3:49:47this component folder. Create a file
3:49:49preview panel dot jsx.
3:49:53Now in this one
3:49:58we'll add RAFC for creating the
3:50:00component structure and after that we
3:50:03will destructure some props. So here
3:50:06we'll get the project then active file
3:50:08and so code. So let's
3:50:12come here and provide
3:50:15project active file and so code.
3:50:21After that
3:50:23before this return
3:50:26let's add const so error overlay set so
3:50:30error overlay equal to
3:50:33use a state
3:50:35and uh let's initialize it using true.
3:50:41After that let me add some comment. So
3:50:44we have added the comment here keep
3:50:46local state of files that updates as
3:50:49user types. So when the user types it
3:50:52updates the local state. So here we'll
3:50:55add con
3:50:58live files set function is set live
3:51:00files equal to
3:51:04use a state
3:51:06and provide the project
3:51:08dot files.
3:51:11After that we'll add another state. So
3:51:13just add con previous project key and
3:51:16set a function name is set previous
3:51:18project key is equal to use state and uh
3:51:22in this one just add the back tick and
3:51:25provide dollar sign curly braces and
3:51:27insert the project id then
3:51:32this let's add
3:51:35dollar sign curly braces
3:51:39project dot version
3:51:42after that we'll add another variable.
3:51:45Just add current key
3:51:48equal to back ticks and provide this
3:51:51one.
3:51:53Just copy and paste it here. So we have
3:51:56added project id dash project dot
3:52:02version.
3:52:05After that we'll add if statement
3:52:08previous project key not equal to
3:52:12current key.
3:52:15In this case just use
3:52:18set previous project key
3:52:22and insert the current key. Then we'll
3:52:25add set live files and provide the
3:52:30project
3:52:32dot files.
3:52:34After that let's come here in this
3:52:36return. In this return we have a div,
3:52:39right? So in this div we will set the
3:52:40width and height. So we have added width
3:52:43full height full. Next we have to add
3:52:46the sandpack provider. So we already
3:52:48have the package installed in this
3:52:50project. If I open the package dojson
3:52:54you can see we have added this package
3:52:57code sandbox sandpack react. So we can
3:53:01use it in this project. So here let's
3:53:03add
3:53:06import kales
3:53:09from
3:53:11at code sandbox/ sandpack react and from
3:53:15here we'll get the sandpack provider.
3:53:19After that just come here in this div.
3:53:22In this div let's add the
3:53:25sandpack provider tag. We have added the
3:53:28opening and closing tag.
3:53:30Right? And uh
3:53:34in this one we will add the key first.
3:53:38So the key will be our project
3:53:42dot id.
3:53:45Then we have to add the template. So
3:53:48just add
3:53:50template. In the template we'll add
3:53:52react.
3:53:55Then we have to add the files. So just
3:53:57add the files. So we have added the
3:53:59files property. And after this files
3:54:02we'll add the custom setup.
3:54:06So we have added custom setups. Then we
3:54:09will provide the options. So just add
3:54:12space and provide the options.
3:54:16After this options we'll provide the
3:54:19theme.
3:54:20Let me move it in the new line. So here
3:54:22we will add the files custom setup
3:54:26options and theme. Now let me add these
3:54:29details one by one. So for this files
3:54:33let's create a
3:54:36variable that is send files.
3:54:39Before this return just add
3:54:44constack
3:54:47files equal to
3:54:50use memo.
3:54:53In this use memo, add the add function.
3:54:58And then we'll add the array with
3:55:02live files
3:55:04and active files. So we have live files
3:55:08and active file. After that in this add
3:55:12a function
3:55:14just add con
3:55:18send files
3:55:20equal to array. Then we'll add for of
3:55:26in this for off we'll add const path and
3:55:28content.
3:55:30We'll add the array with path and
3:55:33content of object dot entries
3:55:39then live files.
3:55:43After that just add const
3:55:46file code equal to
3:55:50type of
3:55:52content equal to
3:55:56string.
3:55:58So if it is equal to a string in this
3:56:00case we'll add the content.
3:56:04Else we'll add content
3:56:08dot content
3:56:10or we'll add empty string. After that
3:56:13we'll add sendpect files
3:56:17path
3:56:19equal to and provide the code.
3:56:23It will be file code. Then provide comma
3:56:28and add the active
3:56:30in this active provide the path
3:56:33is equal to active file.
3:56:38So it will be true or false. Now after
3:56:41that here let's add the return. In this
3:56:45return we will simply add the sandpack
3:56:48files.
3:56:50Now we can add this sandpack files here
3:56:54like this. So we have added the sandpack
3:56:56files. After that we have to add the
3:56:58custom setup. For this custom setup
3:57:01we'll add the dependencies. So
3:57:06let's scroll up here. we will add the
3:57:08comment.
3:57:10Let me add the comment for this one
3:57:12also. Just add convert live files to
3:57:16sandpack format. And after that here
3:57:18we'll add detect dependencies from
3:57:22import a statement using live files.
3:57:26Let's add it as a comment.
3:57:30So here just add
3:57:32con dependencies equal to
3:57:36use memo
3:57:38and in this use memo
3:57:41let's add the arrow function and then
3:57:43array and in this array we'll add the
3:57:46live files and in this function
3:57:50simply add the return and provide a
3:57:53function that is detect dependencies.
3:57:56page.
3:58:00So you can see here we have the
3:58:04utils folder. In this utils folder
3:58:09we have sandpack utils. So in this
3:58:11sandpack utils you can see we have a
3:58:14function called detect dependencies. So
3:58:16we are going to use this one. Let's come
3:58:18here and simply provide
3:58:22detect dependencies. So it has been
3:58:24imported.
3:58:26Now in this detect dependencies we'll
3:58:28simply add the live files.
3:58:32You can see it has been imported from
3:58:34utils folder.
3:58:36Save the changes. Now after that you can
3:58:39see we have to provide the
3:58:42value here in this custom setup. So in
3:58:45this custom setup
3:58:47let's add
3:58:51curly braces and
3:58:54dependencies.
3:58:56That's it. After that here we have the
3:58:58options. So in this options we'll add
3:59:00the curly braces and add the first
3:59:04property that is external resources. So
3:59:07in this external resources just add the
3:59:10array and here we will add the first
3:59:12value that will be Telvin CDN. After
3:59:16that comma and provide the CDN for font
3:59:20awesome.
3:59:22That's it. Then we'll add comma here and
3:59:24provide the next property that is
3:59:26classes. In this classes, let's add
3:59:30sandpack wrapper. It will be sandpack
3:59:33wrapper. After that sandpack layout,
3:59:37sandpack layout and then sandpack
3:59:40preview. Sanpe
3:59:42preview.
3:59:44Then we'll add comma. And next property
3:59:47is log label. That will be zero. Now we
3:59:52have the theme here. So in this theme
3:59:55we'll add the curly braces and for this
3:59:59theme we have to provide the color and
4:00:01font. So just add the color and object
4:00:06then comma and provide the font
4:00:11and object.
4:00:13Now here we can add multiple colors and
4:00:16the name. So we have added these names
4:00:20and colors here.
4:00:22Surface 1 2 3 clickable base disabled
4:00:27hover ascent
4:00:30error error surface. And then we'll add
4:00:32the font here. So in this font let me
4:00:35provide
4:00:37body mono size and line height.
4:00:43Now after adding it let's come here
4:00:45inside the sandpack provider. So in this
4:00:48sandpack provider we have to add the
4:00:50sandpack file watcher. So we have to
4:00:53create that. Let's scroll up
4:00:57and uh here
4:01:00let's add the comment watches for files
4:01:03edits inside sandpack editor and save
4:01:06changes to DB and live state. So here
4:01:09we'll add a function and write the
4:01:12function name sandpack file watcher.
4:01:16Here we'll get the
4:01:18parameter. So just add on live files
4:01:22change.
4:01:24Now in this one just add con
4:01:27send equal to
4:01:30use send.
4:01:34It has been imported here. use send pack
4:01:38and uh after that let's add const files
4:01:42it will be sendpack.
4:01:45Now we'll add con
4:01:49active project and uh update project
4:01:52files
4:01:54and let's get it from the use app
4:01:58context.
4:02:02We have the update project files here
4:02:04from the context. Let's open the context
4:02:07file. We'll open
4:02:11context folder
4:02:14and app context file in this one. Let's
4:02:16find it. So we don't have this update
4:02:19project file. We have to create it,
4:02:22right? So let me create this one.
4:02:26Let's scroll down and before this
4:02:30return
4:02:31here we will add const
4:02:35update project files equal to
4:02:40use call back.
4:02:45In this use call back just add the
4:02:48asynchronous add function and then we
4:02:51will add comma here and add array.
4:02:55In this array we'll add active project.
4:03:01Then we will add the user and after that
4:03:05we'll add
4:03:08a function. Using that we can autosave
4:03:11the file. So let's create that function
4:03:15also. So
4:03:17just before this here just add const
4:03:21debounce save equal to
4:03:25react dot
4:03:27use memo.
4:03:29In this one add the arrow function
4:03:32where we will add debounce.
4:03:36We are not getting the suggestion. Here
4:03:38you can see we have the package
4:03:40installed.
4:03:42Let's open it. In this one, we have the
4:03:45load dash debounce. Right? So, we will
4:03:48import this package. Let's scroll up
4:03:52and provide import debounce from load
4:03:56dash debounce. Now, after that just come
4:04:00here. Here we can use this one
4:04:04debounce and provide the
4:04:06async add function.
4:04:09Here we'll get the file and id. So just
4:04:12add the files and id. Then we'll add
4:04:17try catch a statement. In this try block
4:04:19we'll add await api.put.
4:04:24So it will update the changes in files.
4:04:27We'll add the back tick here
4:04:30and provide the path that will be / ai/
4:04:34projects and insert the id then files.
4:04:37Then we'll add comma and provide our
4:04:40updated files here.
4:04:43After that come here in the catch we'll
4:04:45add the error and let's provide console
4:04:49dot error and toast dot error.
4:04:52Then we'll add comma here and provide
4:04:561,000 milliseconds.
4:04:59After that here also we'll add the comma
4:05:01and provide one array. So we have added
4:05:04empty array.
4:05:06Save the changes. Now we have to call
4:05:09this
4:05:10debounce save. For that we'll use the
4:05:13use effect. So just add the use effect.
4:05:16And for this use effect provide the
4:05:18dependency array with debounce save. And
4:05:24uh within this let's add the return.
4:05:28In this return,
4:05:30it will call a function
4:05:34that executes this debounce
4:05:37save dot cancel.
4:05:41After that, just come here in this
4:05:44update project files function. So in
4:05:47this one, we'll add the if statement.
4:05:51If
4:05:53let's add not of
4:05:56active project or not of user
4:06:00then simply add return
4:06:04here instead of this params we'll get
4:06:06the files
4:06:09and after this return let's add debounce
4:06:13save and provide the
4:06:17files comma active project dot id and
4:06:24after that in this dependency we'll add
4:06:26the debounce save
4:06:29the changes. Now we have to pass it
4:06:32through the value object. So let's come
4:06:35here and after this log out just add the
4:06:38comma and provide
4:06:41update project files. Save the changes.
4:06:46After exporting this update project
4:06:49files, let's just come back here in the
4:06:52preview panel. Now in this preview
4:06:55panel, we are creating this sandpack
4:06:57file watcher. So here you can see we
4:06:59have added the update project files from
4:07:03the use app context. Now after that
4:07:08here we'll add con active project
4:07:12reference
4:07:13equal to use ref.
4:07:17User ref has been imported and in this
4:07:19one just add active project.
4:07:22After that let's add the use effect. In
4:07:26the use effect create the function
4:07:29and uh add the dependency array. So the
4:07:33dependency add will be
4:07:37active project and within this function
4:07:41just add active project reference dot
4:07:43current equal to active project.
4:07:49After that we'll add another use effect.
4:07:52So here we have the first use effect.
4:07:55Now let's add the another use effect
4:07:57here.
4:07:58or let me just duplicate this one only
4:08:01and clear this function and clear this
4:08:04dependency array. So in this dependency
4:08:07array we will add
4:08:10files
4:08:12and uh in this one just add con project
4:08:17equal to active project reference
4:08:22dot current.
4:08:25Then we'll add if not of project then
4:08:27simply add return.
4:08:29Then we'll add con
4:08:32updated files equal to
4:08:36object.
4:08:38Then we'll add let
4:08:41has changes equal to
4:08:44false.
4:08:48In this case let's add the
4:08:51foroff loop.
4:08:54So in this for off we'll add path and
4:08:56object for the file object
4:09:01of the object dot entries
4:09:06files
4:09:08here just at const
4:09:10[snorts]
4:09:11file code equal to
4:09:15file object dot code.
4:09:21Then we'll add updated files
4:09:25and add the path
4:09:30equal to file code.
4:09:36Then we'll add con original content
4:09:40equal to type of
4:09:43project dot files path is equal to a
4:09:46string.
4:09:48Let's add the comparison
4:09:50equal to a string. If it is true, then
4:09:53we'll add project dot files path.
4:09:58Else we'll add project dotfiles
4:10:01path
4:10:03dot content.
4:10:08Let's add the dot here.
4:10:10Now we'll add if statement. If original
4:10:14content not equal to undefined and
4:10:17original content not equal to file code.
4:10:20In this case,
4:10:23let's simply add has changes equal to
4:10:26true.
4:10:28Here we will add the comment sync live
4:10:31files to parent. So just add on live
4:10:35files change
4:10:37provide the updated files.
4:10:41After that just add if
4:10:45has changes.
4:10:48In this case just add
4:10:52update project files and add the updated
4:10:57files.
4:10:59After that let's come here and here
4:11:02simply add return
4:11:04null.
4:11:05After that, let's scroll down and come
4:11:08here in the preview panel function. And
4:11:12uh in this one, we have the sandpack
4:11:15files and dependencies. Here we'll
4:11:18create the
4:11:22handle live file change function. So
4:11:24just add
4:11:26a space. Here
4:11:28we will add const
4:11:32handle life files change equal to add a
4:11:36function.
4:11:39In this one we'll add new files.
4:11:44Then we'll add
4:11:46set
4:11:48live files. In this setter function add
4:11:51the add a function with the previous
4:11:53data.
4:11:55So let's add the previous as parameter
4:11:58and then provide let changed equal to
4:12:01false.
4:12:03Then we'll add
4:12:05for of
4:12:08P and code
4:12:13of of object dot entries new files.
4:12:18Now in this for we'll again add
4:12:22if statement.
4:12:24If previous P not equal to
4:12:30code
4:12:33in this case let's add changed equal to
4:12:35true and break.
4:12:41Now after that here we'll add return
4:12:45and in the return we'll add changed.
4:12:49If the changed is true then we'll add
4:12:52new files.
4:12:54else we'll add the previous
4:13:00save the changes. Now after that we can
4:13:03come here. [snorts]
4:13:06Here you can see we have added this
4:13:10sandpack provider. So in this sandpack
4:13:12provider let's mount the sandpack file
4:13:16watcher. Just add sandpack file watcher
4:13:20and close it. Now in this one we'll add
4:13:23on
4:13:25live files change.
4:13:28Just add handle live files change.
4:13:33Now after that mount the
4:13:37sandpack error monitor.
4:13:40So we have to create the sandpack error
4:13:43monitor
4:13:45component first. So let's add the text
4:13:48sandpack error monitor and we'll create
4:13:50this component. Just open the sidebar
4:13:52and in this components create a file
4:13:54sandpack error monitor dot jsx.
4:14:02Let's add rafce for creating the
4:14:04component structure. And uh after that
4:14:09in this one let's dstructure the props.
4:14:13So here we'll get on error change. After
4:14:17that here [snorts] let's add const
4:14:21sandpack equal to
4:14:23use sandpack use sandpack has been
4:14:25imported and uh let's add con
4:14:33error
4:14:36equal to sand.
4:14:41Now after that here we'll add the use
4:14:43effect.
4:14:48So we have added the use effect and add
4:14:51the array. Now in this array let's
4:14:53provide our
4:14:55error then comma on error change.
4:15:01Let's come here. In this function we'll
4:15:03get the if statement if we have the
4:15:07error. In this case, we'll add cones
4:15:10message equal to error dot message or
4:15:12empty string. Then we'll add const is
4:15:15network error
4:15:17equal to
4:15:20the message dot includes
4:15:27provide failed to fetch or let's provide
4:15:32message dotinccludes
4:15:35call dot csb.io.
4:15:41Then we'll add or and provide
4:15:46message.inccludes
4:15:48error connection time out or we'll add
4:15:52message dotinccludes
4:15:56net error
4:16:00then we'll add if statement. If
4:16:04is network error
4:16:07in this case we'll add on error change
4:16:11it will be false then we'll add the
4:16:14return
4:16:15after that let's come here
4:16:18simply add on
4:16:21error change make it true
4:16:26and in this return simply add null so
4:16:31just remove this parenthesis just add
4:16:34the null. Right now after that we can
4:16:38come back to our preview panel. In this
4:16:41preview panel instead of this text let's
4:16:44mount our component that is sandpack
4:16:49error monitor.
4:16:51mount this component and provide on
4:16:54error change
4:16:56equal to object and provide set
4:17:02so error overlay.
4:17:04Now we have to add the another component
4:17:06that we will import from the sandpack.
4:17:08So just add sandpack layout and let's
4:17:12import it from the sandpack react.
4:17:15Let's add the opening and closing tag.
4:17:19Now in this sandpack layout
4:17:22within this opening tag provide the
4:17:25style. So we have added the style
4:17:27property and here we'll add the height,
4:17:30border, border radius and background.
4:17:35Now after that within this just add
4:17:38curly braces and just add so code. If
4:17:41this so code is true
4:17:44in this case we will mount the sandpack
4:17:47code editor. So let's add the
4:17:49parenthesis and provide
4:17:52sandpack code editor and import it from
4:17:55the sandpack package.
4:17:58It will be self-closing. In this one
4:18:00we'll add so tabs.
4:18:02Then we'll add so line numbers.
4:18:06Then we'll add so line errors.
4:18:12Then we'll add wrap content.
4:18:15After that we'll add the style. So in
4:18:17the style just add the height. Then
4:18:20we'll add the flex
4:18:23and provide
4:18:26min width. That's it.
4:18:30Now after this here we'll add sandpack
4:18:34preview. So let's add the component
4:18:37sandpack preview and import it from the
4:18:40package. Now in this one we'll add so
4:18:43navigator. Let's make it false. Then
4:18:46we'll add so refresh button.
4:18:50Then we'll add show open in code
4:18:54sandbox. It will be false. Then we'll
4:18:57add the
4:18:59so sandpack error overlay.
4:19:03It will be so error overlay. After that
4:19:05we'll add the a style here. So just add
4:19:07the style.
4:19:13In this style we have to add the height
4:19:17flex and min width. So in this flex we
4:19:20have added so code if it is true then
4:19:22one else two then min width zero. Save
4:19:26the changes and uh after adding it let's
4:19:30come back to the builder page. Now in
4:19:33this builder page instead of this text
4:19:36let's mount our component. So let's
4:19:38remove this text from here. And here
4:19:40we'll add the
4:19:44preview panel.
4:19:46We will mount the preview panel here. In
4:19:48this one, we have to provide the
4:19:49project. So let's add the project.
4:19:55So instead of this project, let me
4:19:57provide
4:20:02active project. So we have added the
4:20:04active project here. Then we'll add
4:20:07active file. In this active file,
4:20:10provide the active file only. Then
4:20:12provide the so code. It will be so code.
4:20:18That's it. Save the changes and open the
4:20:20web page.
4:20:23So now you can see right now it is
4:20:26displaying the preview. Correct? And
4:20:29here you can see we have this button. So
4:20:30code. If I click here, it is displaying
4:20:33the code. You can see we can change the
4:20:36pages from these tabs. But it is
4:20:39instantly reloading the web page and
4:20:41displaying the same page when we change
4:20:42the tabs. To fix it, let me just come
4:20:46back to the VS code. Let's open the app
4:20:48context. In this app context, we have
4:20:50added check sessions. So we are calling
4:20:54this check session in this use effect.
4:20:56And here we have added the check session
4:20:58function. And in the dependency array
4:21:00also we have added check session. So
4:21:01just remove this. Just add the empty
4:21:04array in dependency. Save the changes
4:21:07and come back here.
4:21:10Now you can see if I click on code, it
4:21:12will display the code here and uh we can
4:21:15change the pages like this and we can
4:21:17change the pages from the left sidebar
4:21:19also. If I go to files here you can see
4:21:22we have entire files. We have the app
4:21:25features footer. Let's click on the
4:21:27footer.js. So you can see it is
4:21:28displaying the footer code. If I click
4:21:30on header js here we have the header
4:21:32code. We will change this code and it
4:21:36will reflect in preview. So let me
4:21:38change the
4:21:40text here.
4:21:43You can see the button text get started.
4:21:45So let's add get started now. So you can
4:21:47see the button text has been updated
4:21:49here. Let's change it to get started and
4:21:54it will autosave the code. Now we will
4:21:56come here in the hero.jsx or hero.js. In
4:21:59this one, you can see we have the
4:22:03message that is build AI workflows which
4:22:07is here. So we will change it to create
4:22:09AI workflows.
4:22:12You can see the text has been updated in
4:22:15live preview and it will autosave our
4:22:18code.
4:22:20Now we can switch back to the preview
4:22:21mode only. We can click on this button.
4:22:23So it will only display the preview. And
4:22:25if I click here, it will display the
4:22:27code also. Right now, after that, let me
4:22:30update the CSS properties to fix the
4:22:34size of this folder icon. Right. So,
4:22:37I'll just come back to the VS Code.
4:22:43Let's open the
4:22:46builder page. In this builder page,
4:22:50we have the chat panel and file
4:22:54explorer. So, let me open the file
4:22:56explorer.jsx. JSX in this file explorer
4:23:01we will find our icon. So in this one
4:23:04you can see we have the folder open icon
4:23:06size is 34. Let me update it. It will be
4:23:0914. Save the changes and come back here.
4:23:12So you can see perfect size for this
4:23:14folder.
4:23:16Now after that I'll come back here in
4:23:19the builder page. Just open builder.jsx.
4:23:22Here you can see
4:23:24we have added the loading component. So
4:23:26instead of adding the loading component,
4:23:28we will add one component that I have
4:23:30provided in the asset. So just come back
4:23:33to the
4:23:35downloaded folder. So just open the
4:23:38downloaded assets folder. In this one
4:23:40you will find the components and inside
4:23:41this components we have the agent
4:23:44progress dashboard. So just copy this
4:23:46one and add it in the project. Just open
4:23:49the project client src assets. Let's
4:23:53come back. We will not come to assets.
4:23:55We will come to components and paste it
4:23:57here. So we have added this agent
4:23:59progress dashboard component. After that
4:24:02we'll open the VS code.
4:24:05And if I open
4:24:08components here you can see we have the
4:24:13agent progress dashboard.jsx.
4:24:16Now let's mount it here instead of this
4:24:18loading. So remove this loading and
4:24:20provide
4:24:22agent progress dashboard.
4:24:26Now in this component we have to provide
4:24:30uh props. So let's add the
4:24:34project. In this project just add the
4:24:36active project.
4:24:39Save the changes and come back here.
4:24:43So until it load or generate the page it
4:24:46will display the status. Let me change
4:24:50it.
4:24:53Here we have the active project status
4:24:56equal to pending
4:24:59or active project status is generating
4:25:03or active project status equal to
4:25:05failed. So
4:25:07let's add exclamation here not of
4:25:11pending. Save the changes and come back
4:25:13here. So you can see it will display the
4:25:16progress like this. AI agent is
4:25:18building. It will also display the files
4:25:21name when the AI is building our
4:25:23project. Now let me remove it. We'll
4:25:25remove this exclamation and it will be
4:25:28removed from here and we'll display the
4:25:31complete preview or we can display the
4:25:34code.
4:25:38After that we have to display the
4:25:40publish model. So just come back
4:25:43and we'll create a new component. So
4:25:48let's open the sidebar. In this
4:25:50components, we'll create a new file with
4:25:52the name publish model dot jsx. Here
4:25:56we'll add rafce for creating the
4:25:58component structure. And uh in this one
4:26:01we'll get some data as props. So just
4:26:03dstructure it. We'll add publish url and
4:26:06on close.
4:26:08After that in this one we'll add handle
4:26:11copy link.
4:26:14So just add handle copy link function
4:26:17and uh it will be one add function.
4:26:22Now in this function we'll add if
4:26:26not of
4:26:28publish URL. It is not available then
4:26:31simply add return.
4:26:34After that we'll add navigator
4:26:38dot
4:26:40clipboard
4:26:42dot
4:26:44write text and provide the
4:26:48publish URL.
4:26:50Then we'll add the toast notification.
4:26:52So just add the toast. Import the toast
4:26:54here. Then dot success. And in this one
4:26:58add the message public link copied to
4:27:01clipboard.
4:27:04After that come here in the return. In
4:27:07this return first we'll add a div. And
4:27:10in this div we will add some classes to
4:27:13add the absolute position. And after
4:27:16that let's add another div here.
4:27:22Now in this one
4:27:24we will add the white background and
4:27:27we'll add the
4:27:29border color. then shadow and we'll add
4:27:31the position relative.
4:27:34After that here we'll add one button.
4:27:38Using that we can close this model. So
4:27:41just add a button tag.
4:27:45Now in this button we'll add the cross
4:27:47icon. So just add X icon from Lucid
4:27:51React.
4:27:52Now in this icon set the size it will be
4:27:5616. And in this button provide the on
4:28:00click. Let's add the onclick property.
4:28:03In this on click simply add on close.
4:28:06Then provide the classes also. So just
4:28:08add the class name property and provide
4:28:10the absolute. Then we'll add the top
4:28:14right. Then we'll add the text color
4:28:17hover effect and cursor pointer. Save
4:28:20the changes.
4:28:22Now after that we'll add the title and
4:28:26small description. So after this button
4:28:29create a div. In this one we'll add the
4:28:32title in H3 and then we'll add the
4:28:35description in P tag. So the title is
4:28:39your website is live.
4:28:42After that we'll add the small
4:28:44description.
4:28:46So here we have added this description.
4:28:49Now add the classes in this div and then
4:28:53we'll add the classes in the title which
4:28:55is in the S3 tag and after that we'll
4:28:58add some classes in the
4:29:01description text. So here we have added
4:29:03some classes that will reduce the text
4:29:06size and change the text color.
4:29:10After that we have to add the
4:29:15input field and in the input field we'll
4:29:18provide the publish URL and we'll add
4:29:22the
4:29:24button also. So after closing of this
4:29:27div here create a div and provide the a
4:29:31space y 4
4:29:36and within this
4:29:38create two divs.
4:29:41The first one will contain the input and
4:29:45the second one will contain the buttons.
4:29:48So in the first one
4:29:51let's add the label tag. So we have
4:29:53added the label. In this label provide
4:29:56some classes. So we have added these
4:29:58classes and within this label tag add
4:30:00the label text that is published link.
4:30:05Then we'll add the input field. So just
4:30:07add the input type will be text. Then
4:30:11we'll add read only.
4:30:14Then we have to add value. So the value
4:30:16will be publish URL. And then provide
4:30:20some classes here. So we have added
4:30:21these classes. So in this input field we
4:30:24cannot type anything. We can just read
4:30:26the content. Now after that here we have
4:30:28a button. So in this button we'll add
4:30:31the functionality to copy the link.
4:30:34Right? So in the first button we will
4:30:38add the functionality to copy the link
4:30:39and in the second button we will add the
4:30:42functionality to open the live link or
4:30:44published link. So we'll add two buttons
4:30:47here. So just group it using this div.
4:30:49And in this div we have added flex to
4:30:51align both buttons. Now create the first
4:30:54button. In this first button we'll add
4:30:56the button text called copy link.
4:30:59After that provide the classes here. So
4:31:01just add the class name property. And
4:31:03here we have these classes. Now in this
4:31:07button we'll add the on click. So in
4:31:10this on click simply add our handle copy
4:31:13link. That's it. Now we'll create the
4:31:16second button. So we have added another
4:31:19button tag. Here we'll add the text
4:31:21called open site. Then add the class
4:31:23name. So let me provide these classes.
4:31:27After that here also we have to add the
4:31:29on click. So just add the on click
4:31:32property. Add one add function and then
4:31:35simply add window
4:31:39dot open and provide our
4:31:43publish URL. Then add comma and provide
4:31:48underscore blank. So it will open the
4:31:50link in new tab.
4:31:52Save the changes. Now we have to mount
4:31:55our component that is publish model in
4:31:59our builder page. So just open the
4:32:01builder page and just scroll down just
4:32:03above this last closing div
4:32:07here. Let's add curly braces. just add
4:32:12publish URL and if it is available then
4:32:15we will mount our
4:32:18publish URL model or publish model.
4:32:23Now in this publish model provide the
4:32:25props. So just provide
4:32:29publish URL like this. Then we'll add
4:32:33the second props that is on close. In
4:32:36this on close just add the function and
4:32:40here use the setter function set publish
4:32:43URL
4:32:45and simply provide null. So when we
4:32:47don't have the URL it will close it.
4:32:50Let's save the changes and come back
4:32:52here.
4:32:53To preview our model we have to click on
4:32:55this button publish. But it is not
4:32:58functional yet because we have added the
4:32:59empty function. So just come back here
4:33:02and we'll complete our function. Just
4:33:04scroll up. You can see here we have
4:33:05handle publish and handle download. We
4:33:08will complete these functions. So in
4:33:10this handle publish
4:33:13let's add if statement if not of id. In
4:33:18this case simply add return.
4:33:22After that let's add set publishing.
4:33:27In this set publishing we will add true.
4:33:31Then we'll add try catcher statement. In
4:33:34this try block, we'll make the network
4:33:36request using await API. Let's add the
4:33:42API here and import it from the API
4:33:44file. You can see it has been imported
4:33:46from API/ API. Now after that just add
4:33:52dot
4:33:53post
4:33:55in this one add the back tick and insert
4:33:59the path. It will be / API/ projects.
4:34:03then insert the id using the dollar sign
4:34:07curly braces id and then slash publish.
4:34:12So this is the endpoint to publish our
4:34:14project. Now after that here we'll get
4:34:18the
4:34:20URL. So just add con URL equal to back.
4:34:26Then we'll add dollar signal braces
4:34:29window.loation dot origin.
4:34:32then slash
4:34:36publish and provide the ID using the
4:34:40dollar sign and curly braces.
4:34:43Next, we'll add the set publish URL and
4:34:46in this one provide our URL.
4:34:50Then we'll display the toast
4:34:51notification. So just add the toast,
4:34:53import the toast and add the success. In
4:34:56this success just add
4:34:59website published successfully.
4:35:02Then we have the catch block. In this
4:35:05one we'll add the error and provide
4:35:08console dot error and provide the toast
4:35:11error. So just add toast dot error. Then
4:35:14we'll add the finally block also. So in
4:35:16this finally simply set the publishing
4:35:19false. So just copy this set publishing
4:35:22and we will make it false.
4:35:25save the changes. So after adding it, it
4:35:28will handle our publish button. Now we
4:35:32have the download button also. For that
4:35:34we have the handle download function. So
4:35:36in this one let's add if statement. If
4:35:40not of active project. So when the
4:35:44active project is not available then
4:35:46simply add return. Now suppose the
4:35:48active project is available then we have
4:35:51to call a function that we have provided
4:35:53in the utilities. So just open the utils
4:35:56folder. Here we have export project dot
4:36:00js file. So in this one you can see
4:36:02export project zip function. So just use
4:36:05this function here in this builder.
4:36:07Let's add
4:36:12export project zip and import it from
4:36:15the utils folder. You can see it has
4:36:18been imported. And uh after that
4:36:23here we have to provide a
4:36:26project. So just add active project.
4:36:32That's it. Now after that save the
4:36:35changes and we will come back here. So
4:36:37you can see here we have the publish
4:36:40button. If I click here it will display
4:36:43the notification website published
4:36:45successfully. And here we have the model
4:36:48within message your website is live. And
4:36:50here we have the live URL. And here we
4:36:53have the button to copy the link or we
4:36:57can open this site in new tab. Just
4:36:59click here. So you can see it is opening
4:37:00the new tab. Now let's click on this
4:37:03button. So you can see the notification
4:37:06public link copied to clipboard. When we
4:37:09open this site, it is opening the home
4:37:11route because we have added the
4:37:14routes that will redirect us to homepage
4:37:17when the route is not registered. So, we
4:37:19have to register our public route also.
4:37:22For that,
4:37:24let me just come back to the
4:37:29app dot jsx. In this app dot jsx you can
4:37:32see here we have a
4:37:35route that will catch unregistered
4:37:38route. So just before that we'll add one
4:37:41comment that is public routes.
4:37:45In this public routes we'll add the
4:37:50route. It will be self-closing. Here
4:37:52we'll add the path. So in this path
4:37:55we'll add /publish/
4:37:58colon id that is the project id and then
4:38:00we'll add the element. So in this
4:38:03element we'll provide our
4:38:10page. So just add publish page. We are
4:38:14not getting the suggestions. So just
4:38:16open this publish page. And after that
4:38:17if I start typing
4:38:20it should display this page. Let me
4:38:24clear this.
4:38:26In this publish page, we have not added
4:38:28the component structure. Let me add it.
4:38:32And after that, let's start typing it.
4:38:39Here we are getting the suggestion
4:38:40publish page. It has been mounted here.
4:38:44Save the changes and come back here. And
4:38:47uh let's close it and click on this open
4:38:50site. So now you can see it is opening
4:38:52this publish page. We will design this
4:38:55page later. So you can see the route
4:38:57only that is /publish and / project ID.
4:39:03So we have completed our builder page.
4:39:07Let me show you one more functionality
4:39:09here. Here we can click on this open
4:39:11preview. So it will open the preview
4:39:12page. You can see the URL preview/
4:39:14project ID. And if I click on this
4:39:17export, we can download the entire code
4:39:20in zip file. You can see the code is
4:39:23downloaded here in zip file. So we have
4:39:25the export, sign out, publish,
4:39:28open, preview and code. We can display
4:39:30the code. So now we have completed our
4:39:33project builder page.
4:39:37After creating this page, let me review
4:39:39our code using code rabbit. For that we
4:39:42will commit the changes on GitHub. So
4:39:44just come back here, click on this
4:39:46source control icon and we'll add the
4:39:48commit message
4:39:56created project builder page.
4:39:59So it will commit the changes on GitHub
4:40:02and uh after that let me just come back
4:40:05to the GitHub account or GitHub repo.
4:40:11If I open it, you can see here we have
4:40:14this button compare and pull request.
4:40:16We'll click on this button
4:40:19and click on create pull request. So we
4:40:22have created a new pull request. After
4:40:25creating the pull request, the code
4:40:28rabbit will start analyzing our code.
4:40:32Now you can see the code rabbit is
4:40:34running and analyzing our code.
4:40:42Now you can see the review has been
4:40:44completed by code rabbit.
4:40:47Here we have this button review change
4:40:50stack. We will review the change stack.
4:40:53But before that let me see the
4:40:55suggestions here also. So here we have
4:40:57the suggestion
4:41:00in this app context. In this app
4:41:03context, we have to
4:41:06update the code. Here we have the
4:41:08proposed fix also. You can see it is
4:41:11suggesting to remove this debounce save
4:41:14dot cancel and add dot plus. Instead of
4:41:18cancel, we have to use plus. It is
4:41:20recommended. And uh let's see the
4:41:23suggestion for builder page. In this
4:41:25builder page,
4:41:27we have to remove this code because we
4:41:30are already
4:41:32adding it in the context. After that,
4:41:37let's see the change stack also. We'll
4:41:39click here, review change stack.
4:41:47Now in this change stack, you can see
4:41:49the changes made in this files. Here we
4:41:53have the app context file. So you can
4:41:55see the previous files here and the
4:41:57latest changes in this right side and uh
4:42:00you can see we have the explanation also
4:42:03like in this 42 we have made some
4:42:06changes in line 42 and for this line 42
4:42:09here we have the description. Now if I
4:42:12come here
4:42:14we have the changes in line 182
4:42:20to 227. So here we have the explanation
4:42:24for these code. Right? Now after that
4:42:29let's come here in the second file. So
4:42:34we have the agent progress dashboard.
4:42:36Here also we have the updates and we
4:42:40have the description in the right side.
4:42:42And uh if you want to understand
4:42:44anything or want to ask any question you
4:42:46can ask from the agent also. So here we
4:42:49have the agent and you can enter your
4:42:51prompt here and you will get the
4:42:53response from the code rabbit agent. Now
4:42:56after that let's come here in the next
4:42:59file. So here we have the updates
4:43:03and this is the next file that is
4:43:05builder page.jsx.
4:43:10In this builder page you can see we have
4:43:13one suggestion. It says we have one
4:43:16major issue. Right? Let me expand it.
4:43:19And here we have proposed fix. So it is
4:43:22suggesting to remove this use effect
4:43:24from this builder page dot jsx. Let me
4:43:27just come back
4:43:29open the
4:43:31builder page
4:43:34and uh let's find that use effect.
4:43:38So here we have this use effect. So we
4:43:41have to remove this use effect from
4:43:43here. just clear it, save the changes
4:43:46and uh after that let's see the next
4:43:50isue.
4:43:56So
4:43:58currently we don't have any other issue
4:44:00in this file. Let's see the another file
4:44:07here also we don't have any suggestion.
4:44:10We will open the next one.
4:44:13Now we'll open the first file. And here
4:44:16we have the app context. So let's see.
4:44:19We have some suggestion in this app
4:44:21context also. It is major issue. Let's
4:44:25expand it. You can see it is suggesting
4:44:28to remove this one. Remove cancel and
4:44:31add plus. So just come back here in the
4:44:35app context.
4:44:38Here we have
4:44:40debounced save dot cancel. So we will
4:44:42change it to
4:44:44dot plus. Let's come back and uh see the
4:44:49next suggestion.
4:44:51Now we'll click on this comments. So
4:44:53here you can see we have the suggestion
4:44:56for this app context. In this app
4:44:59context we have created the handle chat
4:45:01but it is not exported. So here we have
4:45:04the proposed fix. We have to provide
4:45:07this handle chat inside this value. Just
4:45:10come back to the VS code, open app
4:45:12context and uh inside this value object
4:45:15just add
4:45:20handle chat. Save the changes. So we
4:45:22have implemented all the suggestions and
4:45:25bug fix. And you can click on this
4:45:27overview also to see the entire
4:45:29overview. You can see here we have the
4:45:32code rabbit major issues right and here
4:45:36we have the premerge checks. Now after
4:45:39that you can see the PI description here
4:45:43you can see the code rabbit walk through
4:45:47here we have sequence diagrams.
4:45:50Now after that let me just come back to
4:45:52the
4:45:54GitHub repo.
4:45:58In this pull request simply click on
4:46:00this merge pull request confirm merge.
4:46:04So it will merge the changes in main
4:46:06branch and uh after that we'll come back
4:46:08to the VS code and
4:46:12click here
4:46:14then select
4:46:16pull.
4:46:20Now after creating the builder page we
4:46:22have to create our next page. So just
4:46:25come back to the application
4:46:28and you can see if I click on this
4:46:30publish
4:46:32we'll get the link. Let's open this link
4:46:34in new tab that is /publish/
4:46:37project id and uh if I click on this
4:46:41open preview so we have the / preview/
4:46:46project id. So we have to create these
4:46:48two pages that is publish page and
4:46:51preview page. In both pages we will use
4:46:54the same design. Actually we will use
4:46:56the same layout that is available here.
4:46:58So here we have the small preview. So
4:47:00instead of this small preview we will
4:47:02create a full screen preview. For that
4:47:06let's come back to the VS code
4:47:09and we'll create a component here. So
4:47:15let's open the sidebar.
4:47:19In this one, we have the components
4:47:20folder where we'll create a new file
4:47:22with the name
4:47:28full page preview. JSX.
4:47:31Now add R Ace for creating the component
4:47:34structure. Now here we need the file
4:47:37then only we can display the preview. So
4:47:39just get the files as props.
4:47:44So now we have the files here and after
4:47:46that let me just copy the code here from
4:47:50the previous file.
4:47:54So let me just open the
4:47:59preview panel component.
4:48:03In this preview panel component we have
4:48:06a div, right? So let's just copy this
4:48:08entire div from here from this preview
4:48:11panel
4:48:13and add it here
4:48:15in the full screen preview
4:48:18and uh again come back to the preview
4:48:21panel
4:48:23and from here just copy these code.
4:48:28We will copy this function
4:48:30sendpack files
4:48:42and after that copy this dependencies
4:48:44also. Let's copy it and come here in the
4:48:47full screen preview
4:48:51and paste it here before the return.
4:48:55Now again come back to the preview
4:48:56panel. In this preview panel, we have
4:48:58one state also. Just copy this state
4:49:03and paste it here.
4:49:06So we have con so error overlay and set
4:49:11so error overlay equal to use state. So
4:49:15just import this use state from react.
4:49:19It will be true. And after that we have
4:49:21the sandpack files that is used to
4:49:25convert the live files to sandpack
4:49:28format.
4:49:30So here we have the
4:49:32SP files and we have the
4:49:37return that is SP files and here we have
4:49:40to provide the dependency. So in the
4:49:42dependency we'll add the files that we
4:49:44are getting as props.
4:49:49Let me update it.
4:49:52We have added this files here.
4:49:56And in this one just update the code
4:49:58also. We'll add if statement if not of
4:50:03files. So when we don't have this files
4:50:06then simply add the return and return
4:50:08the empty object.
4:50:12After that we'll add the SP files. It
4:50:15will be path content of object entries
4:50:19and let's add the files here. Just copy
4:50:22this files and replace this one.
4:50:26Then we'll get the
4:50:28file code. So I don't need this one. Let
4:50:32me simply remove it.
4:50:35We'll add sp files path. It will be
4:50:41in this object. We have the code. So the
4:50:44code will be our content. Just copy this
4:50:46content here and then remove this
4:50:49active.
4:50:52So we have updated this code here and uh
4:50:57after that it is returning the SP files
4:51:00and the files as dependency. Then we
4:51:03have the dependencies equal to use memo.
4:51:06In this one let's add the same if
4:51:09statement. If not of files
4:51:13in this case simply add return empty
4:51:15object else we'll add the return
4:51:19detect dependencies and provide our
4:51:22files.
4:51:27Now we have to import this function. So
4:51:31just import it from the utils. You can
4:51:34see it is imported from the utils folder
4:51:37sandpack utils.
4:51:39Now after that let's come here in this
4:51:41return. In this return we have a div
4:51:44where we have to add the
4:51:47screen and we'll add the background and
4:51:51uh overflow. So we have updated this
4:51:53class name height a screen width a
4:51:55screen background white overflow hidden.
4:51:59Then we will provide the sandpack
4:52:01provider and in this sandpap provider we
4:52:04will add the template. It will be react.
4:52:06From here we can remove this key.
4:52:09So we have the template. Then we have to
4:52:12add the files. So the files will be
4:52:14sandpack files which is here. And after
4:52:18that we'll add the custom setup. So in
4:52:22the custom setups we have added
4:52:24dependencies. Then options. So in the
4:52:26options we have external resources that
4:52:29is Telwind CDN and font awesome CDN. And
4:52:35uh after that here we'll add
4:52:38log label zero. And from here we can
4:52:40remove the classes. So we have removed
4:52:43these classes.
4:52:45After that we have to display our
4:52:48preview in full screen. So here we will
4:52:51add the
4:52:54class name.
4:52:56Let's add the class name. Here
4:53:04it will be height full and width full.
4:53:08And from here we can remove this theme.
4:53:14Let's remove this one.
4:53:18So we have removed this theme.
4:53:21Here we have one extra quote sign. Let
4:53:23me correct it. Now it is correct. Save
4:53:26the changes. Now within this we have the
4:53:28sandpack file watcher. So we can remove
4:53:31it. After that we have the sandpack
4:53:34error monitor. So let's
4:53:39import this one also. So this component
4:53:41has been imported and uh in this one we
4:53:44have provided this state. Now after that
4:53:47we have the sandpack layout. In this
4:53:49sandpack layout
4:53:52we can remove this style.
4:53:55And after removing this style, let's add
4:54:00class name
4:54:02and provide
4:54:06width height. And then we'll add the
4:54:09border none.
4:54:11Then we'll add background transparent
4:54:15like this. And in this one we have to
4:54:18add our preview. So just remove this
4:54:21and simply add the sandpack preview
4:54:24component.
4:54:30Let's close this tag here. And here we
4:54:33have sandpack preview component. And uh
4:54:37let's import this one also. It has been
4:54:40imported.
4:54:41Then let's import the sandpack layout.
4:54:44It is already imported. and sandpack
4:54:48error monitor is there. So in this
4:54:50preview we have the so navigator false.
4:54:55Then we have so refresh button. So let's
4:54:59add
4:55:00false.
4:55:03After that we have so open in code
4:55:06sandbox.
4:55:08So here also we'll add false.
4:55:12Next we have so sandpack error overlay.
4:55:17So here we have so error overlay state.
4:55:21Then we have some styles. So just remove
4:55:23this styles
4:55:25and instead of this style we will add
4:55:27the class name.
4:55:29And let's provide the height full and
4:55:32width full.
4:55:35Save the changes. So we have created our
4:55:38component called full page preview. Now
4:55:41let's mount this component in our pages.
4:55:44So first we'll come to the publish page.
4:55:47Just open the pages and publish page dot
4:55:50jsx. In this one
4:55:54we need the project id. So just add
4:55:57const id equal to
4:56:03use padams.
4:56:05Now after that we need some state. So
4:56:08just add const project and set project
4:56:11equal to
4:56:13user state and initialize it using null.
4:56:17Now after that we'll add con loading and
4:56:20set loading equal to
4:56:24use a state
4:56:26and initialize it using true.
4:56:30Then we'll add con error and setter
4:56:32function set error
4:56:35equal to use a state and by default it
4:56:39will be empty string. So we have these
4:56:42state and one id from the use params.
4:56:45Now after that here we will create the
4:56:48use effect
4:56:51where we will fetch the public project.
4:56:53So just add
4:56:56use effect
4:56:59and provide the comma dependency add a.
4:57:03So it will be our id that is the project
4:57:06id. Now let's add if not of id then
4:57:11we'll add the return.
4:57:14Next we'll add con
4:57:17fetch public project
4:57:20equal to await then API import this API
4:57:26then dot get method and provide the
4:57:30endpoint it will be back/ API/
4:57:35projects/public
4:57:37and then provide the project id like
4:57:40this. Now after that we'll get the data.
4:57:43So just use set
4:57:46project. In this set project provide the
4:57:48data that we are getting from the
4:57:50network request.
4:57:53Let me update it.
4:57:56Here we'll create the
4:57:58asynchronous add function. And in this
4:58:02function paste this code that is await.
4:58:07And uh here we'll get the data as a
4:58:10response. So just add const
4:58:15data equal to await API and we'll set
4:58:19the data using the setter function set
4:58:21project. Now let's wrap this code inside
4:58:25the try catch. So just remove it. We'll
4:58:28add the try catch statement and paste
4:58:30this code inside the try block. Now come
4:58:33here in the catch block we'll add the
4:58:35error and then use the console dot
4:58:38error. After that we'll add the set
4:58:41error. So in the set error we have added
4:58:43this
4:58:45response or this message. Now we'll add
4:58:48the finally block here. And in this
4:58:50finally block we will use
4:58:54set loading and we will make it false.
4:58:58So you can see the loading is true by
4:59:00default. So we'll make the loading
4:59:02false. Now after that we have to call
4:59:05this fetch public project. So just
4:59:09before this
4:59:11closing curly braces we'll add
4:59:15fetch public project and call it.
4:59:24After that just come here before this
4:59:26return let's add if statement if
4:59:29loading. If the loading is true in this
4:59:32case simply mount the loading component.
4:59:35So just add the return and provide the
4:59:40loading component. Just import this
4:59:42component and close this tag. Now if the
4:59:45loading is false, let's come here
4:59:50and create another if statement.
4:59:55Here we'll add
4:59:58error
5:00:00or
5:00:02not of project.
5:00:04You can see here we have the error
5:00:06state.
5:00:08So if we have the error or the project
5:00:11is not available in this case let's add
5:00:14the return and uh provide the
5:00:19div.
5:00:22Now in this div we'll add the classes.
5:00:25So just add these element classes and in
5:00:28this one we have to add one icon. So
5:00:31let's wrap this icon inside a div. In
5:00:33this div provide one icon that is alert
5:00:36circle icon.
5:00:39Import this icon from lucid react. For
5:00:42this icon we will set the size. So size
5:00:44will be 24. And we'll provide the
5:00:47classes for the div that contains this
5:00:50icon. So add the class name and these
5:00:53classes. Now after that we have to add
5:00:56the title. So after this just add the
5:00:59title in H1 tag. So the title is website
5:01:02unavailable.
5:01:05Then we will add the description in P
5:01:09tag. So here we'll add the description
5:01:11that will be our error message.
5:01:15Then we will add a div.
5:01:19And in this div let's add the message
5:01:22that is builder AI. Now let's add the
5:01:26classes for each. Here just add the
5:01:29class name for H1 tag. Then we'll add
5:01:33the classes
5:01:35for header message.
5:01:39So we have added these classes. And now
5:01:42we'll add the classes for this text
5:01:44called builder AI.
5:01:48Save the changes. And after that let's
5:01:51come here. We have the return. in this
5:01:53final return. We'll return our
5:01:59component. So just add
5:02:03full page preview component. Now in this
5:02:06component we have to provide the files.
5:02:08So let's add the files and it will be
5:02:10our project dot files. Save the changes.
5:02:16Now after that let me just come back to
5:02:18the web page
5:02:21and uh let's refresh this one that is
5:02:24publish/
5:02:26project id.
5:02:31Let me open it from here. We'll click on
5:02:33this publish open site.
5:02:37Let's come back to the VS code.
5:02:40You can see we are updating the code in
5:02:43publish page. Let me inspect it.
5:02:53use memo. So, we have to import this use
5:02:56memo. Let's scroll up
5:02:59and uh open our full page preview
5:03:01component.
5:03:03Here we have the full page preview and
5:03:06uh let's import this one. Import from
5:03:11React. Save the changes.
5:03:14After that let's clear it and refresh
5:03:17it.
5:03:20Live files is there. So we have to
5:03:21replace this live files from here. Let's
5:03:24find it. Here we have live files. So
5:03:27just replace this one instead of this
5:03:30live files. Simply add files
5:03:34as dependencies. Save the changes. Let's
5:03:37come back.
5:03:38Sandpack provider is not defined. So we
5:03:41have to import the sandpack provider.
5:03:44Sandpack preview is there.
5:03:47We are not getting the suggestion here
5:03:49for sandpack provider. So let me import
5:03:53it manually in this statement. Let's add
5:03:57comma and provide sandpack provider from
5:04:00the code sandbox/ sandpack react. Let me
5:04:05just come back here refresh it. It says
5:04:09sandpack layout is not defined. So just
5:04:11import the sendpack layout also. Let's
5:04:14add the comma here and provide sandpack
5:04:16layout. Save the changes. After adding
5:04:18it, come back here.
5:04:24Now you can see it is loading our
5:04:27website preview. So here we can see the
5:04:29website preview in full screen. So this
5:04:31is the publish page. After publishing
5:04:33the project, any user can see the
5:04:36website on this URL that is /publish and
5:04:39project ID. Similarly, we'll create the
5:04:42preview on our preview page which is
5:04:46here preview/ project id. If I refresh
5:04:49it, you can see we have the text called
5:04:50preview page. So, let me update this
5:04:52page also. I'll come back to the VS code
5:04:57and uh come to our publish page. Just
5:05:00copy the entire code from the publish
5:05:02page
5:05:05and uh
5:05:08open
5:05:10our preview page
5:05:14and update the code here.
5:05:18Let's replace everything and uh update
5:05:22the name. Here we have publish page. So
5:05:25let's change it to preview page.
5:05:31Let's add the preview page here. And we
5:05:34will export the preview page here.
5:05:38Update this line. Export default preview
5:05:41page. And here we'll add con preview
5:05:43page. Now in this one we need the ID. It
5:05:46is fine. Then we need the data from
5:05:50context. So just remove it. Here let's
5:05:53add con
5:05:56curly braces. We'll add the active
5:05:59project. We can preview the active
5:06:02project only. So just add active project
5:06:04as project.
5:06:06Then we'll add comma
5:06:09loading active project
5:06:13as loading.
5:06:16Then we'll add load project function
5:06:20and let's get it from the use app
5:06:24context. Use app context has been
5:06:26imported. Now after that here we have
5:06:28the use effect. Now in this use effect
5:06:30we have this code. So we will update
5:06:32this one. Let's clear this use effect.
5:06:39and simply add if statement if id when
5:06:42the id is available then we'll add
5:06:47load project and provide the id
5:06:51after that here we'll add the
5:06:56load project as dependency
5:06:59then we have if statement if loading
5:07:02or not of project.
5:07:07In this case, we'll return the loading
5:07:09component. Now, remove this if statement
5:07:11from here
5:07:14and simply provide the return statement
5:07:17with full page preview and provide the
5:07:20files and files will be project files.
5:07:23Let's save the changes. After updating
5:07:25this, let's open the web page. And you
5:07:28can see this is the URL/review/
5:07:30project id. And if I refresh it, it is
5:07:34continuously reloading the page. Let me
5:07:36just come back.
5:07:38Now you can see it is displaying our
5:07:40preview here. So after removing the load
5:07:44project from the dependency, it is
5:07:45working fine. And here we have the
5:07:47preview. So we can see the preview of
5:07:49our project that we are building. Let's
5:07:52come here in the project builder. We'll
5:07:55come back to the homepage and open the
5:07:57next project. So this is the another
5:07:59project, right? And if I click on the
5:08:02code, it will display the code here. If
5:08:05I click on preview, so it will open the
5:08:08path / preview/ project ID. So this is
5:08:11the preview. Let's close all these and
5:08:15uh come here, open this, then go to
5:08:20preview. So you can see the URL preview
5:08:23and project ID. And if I go to publish,
5:08:25we'll get the URL publish/ project ID.
5:08:29So we have completed the front end of
5:08:31our AI website builder.
5:08:36Now we will review our code using code
5:08:38rabbit. So just come here and add the
5:08:42commit message.
5:08:49front end completed.
5:08:56Commit and sync changes.
5:08:59After committing the changes, let me
5:09:01just come back to the GitHub repo.
5:09:05Let's go to development branch
5:09:09and uh click on this contribute open
5:09:13pull request.
5:09:16So click on this button create pull
5:09:18request
5:09:20and uh once we create the pull request
5:09:22the code rabbit will start analyzing our
5:09:26code.
5:09:29Now you can see the code rabbit is
5:09:31running.
5:09:32Now you can see the review has been
5:09:34completed and here we have the review
5:09:36summary. You can also go to review
5:09:38change stack and uh after that you can
5:09:41see the suggestions here for any
5:09:45issue or any improvement. So you can
5:09:48implement these fix or suggestions and
5:09:51then merge the changes. So just click on
5:09:54this button merge pull request confirm
5:09:56merge
5:10:00and then come to the VS code click here
5:10:03and pull. So it will pull the latest
5:10:04changes. So now we have completed the
5:10:07front end of our AI website builder.
5:10:10Next we have to create the back end. So
5:10:11just close all files. So right click
5:10:13here and select close saved. Now after
5:10:16that let's
5:10:18fold this one. And here we have to
5:10:20create our
5:10:23folder for creating the backend server.
5:10:26So let's create a folder here and write
5:10:28the folder name server.
5:10:31In this server folder, we will create
5:10:33the backend server where we'll create
5:10:35the APIs and then we'll integrate the
5:10:38APIs with our client.
5:10:41To create our backend server, just right
5:10:44click on this server folder and select
5:10:46open in integrated terminal.
5:10:49So now we have two terminals. This is
5:10:51the server terminal and this one is the
5:10:53client terminal where the client project
5:10:55is running.
5:10:57Now come here in the server. In this
5:11:00one, let's add npm
5:11:04in it dash y. But before adding this,
5:11:08let me open this sidebar. In this
5:11:10server, we'll create a new file and
5:11:12write the file name server.js.
5:11:18So this will be the main file. After
5:11:20creating this server.js file, come here
5:11:22in the terminal and type npm init-y.
5:11:28Now after that here you can see we have
5:11:29package.json
5:11:31in this one we have the name version
5:11:33description and main file is server.js
5:11:36and here we have the start a script that
5:11:38is node server.js
5:11:41and here you can see we have the type
5:11:43common js and if the type is not
5:11:45available you can add it manually. So
5:11:47let me update it. Instead of this common
5:11:49js we will use
5:11:52module.
5:11:54Now after that here we have to add the
5:11:56dependencies. Using that we'll create
5:11:58our backend server. So we'll create the
5:12:02server using express. So in this
5:12:04terminal let's add npm
5:12:08install
5:12:09and add the dependencies or packages
5:12:13name. So first we'll add the express
5:12:14package.
5:12:16After that we'll add course
5:12:19that will support the crossplatform
5:12:22integration. And after that we'll add
5:12:24the env. Using that we can add the
5:12:27environment variables. Then we'll add
5:12:30the cookie parser.
5:12:32Using this we can send the cookies in
5:12:35the request. After that we'll add the
5:12:38brypt package. Using that we can encrypt
5:12:41the user's password and store in the
5:12:43database. Then we'll add the JSON web
5:12:46token. Using that we can generate a
5:12:49unique token for authentication. Now
5:12:52we'll add the mongus package so that we
5:12:54can communicate with the MongoDB
5:12:57database. After adding all these
5:12:59packages name, let's press enter. So it
5:13:01will install all these packages.
5:13:05And after installation, you can find all
5:13:07these packages in the package.json file
5:13:11inside the dependencies. Let's open it.
5:13:14You can see here we have the brypt
5:13:15cookies parser course. Ennv Express JSON
5:13:19web token and mongus. After that we'll
5:13:21add one more package. Here we'll add npm
5:13:25install. Then we'll add dash d to
5:13:28install the package in dev dependencies
5:13:31or development dependencies. And here
5:13:33we'll add the package name that will be
5:13:35nodemon. Using the nodemon we can
5:13:39restart our backend server when we will
5:13:41make any changes in the code file. It
5:13:43will automatically restart the server.
5:13:45So just add this npm installed as the
5:13:48nodemon.
5:13:50So it will get installed
5:13:53after that. You can see here we have the
5:13:56dev dependencies and in this one we have
5:13:58nodemon. Now let's add the nodemon
5:14:01script. So just remove this test and
5:14:04here we'll add the comma
5:14:06and copy this one only. Just copy and
5:14:09paste it here. So just add the script
5:14:11name. So the script name will be dev.
5:14:15And here we'll add the nodemon
5:14:18server.js. js. So when we'll type npm
5:14:21rundev in the terminal, it will execute
5:14:23this nodemon server.js and when we'll
5:14:26start the server using this dev script,
5:14:29it will automatically restart the
5:14:30backend server when we will make any
5:14:32changes in the code file. Now after that
5:14:36in the left side in this source control
5:14:39icon we have the 2,000 plus files. So
5:14:44let's come here in this root directory
5:14:47that is builder- AI. In this one we will
5:14:50add the g ignore file. So let's add a
5:14:54new file here and write the file name
5:14:57dot get ignore.
5:15:01So you can see it is outside of these
5:15:03folder that is client and server. And in
5:15:06this one just add the folder name that
5:15:08is node_modules.
5:15:10Then we'll add the another folder. Let's
5:15:13add the d and then we'll add env also.
5:15:16So it will ignore all these files and
5:15:19folder. After that you can see we have
5:15:21only four files here. Now just come back
5:15:24here
5:15:26and let's start creating our basic
5:15:28express server. For that let's import
5:15:32the express from the express package.
5:15:36And uh after that let's add importv
5:15:42from
5:15:44env/config.
5:15:46Then we'll add the import course from
5:15:49course package. After that let's create
5:15:52one app using express. So we have added
5:15:55cost app equal to express.
5:15:59Next we will add the
5:16:02middleware. So just add
5:16:05app dot
5:16:08use. In this app dot use just add
5:16:11express
5:16:12dot
5:16:14JSON. So all the request will be passed
5:16:17using JSON.
5:16:20Here we'll add another line. Just copy
5:16:22and paste it here. Let's add app dot use
5:16:25and provide the course.
5:16:28In this course we have to add the
5:16:31object. And in this object we'll add the
5:16:34origin. So the origin will be our
5:16:38front end and back end URL. And uh we
5:16:42can add it in this code. Then we'll add
5:16:44the comma and provide the credentials.
5:16:47So just add the credentials
5:16:50true. Then only we can pass the
5:16:55cookies using the
5:16:58network request. So instead of adding
5:17:01the origins here, we will add it in the
5:17:03environment variable. So just open the
5:17:05sidebar and in this server create env
5:17:08file. Just add env.
5:17:12And here let's store our
5:17:16URL.
5:17:18So let's add the
5:17:20name called origins equal to and provide
5:17:24the quote. In this one, we'll add http
5:17:28localhost
5:17:30col 5173. That is our front end URL. If
5:17:33I come back to the web page, you can see
5:17:36this is the URL. Now, let's add comma
5:17:39and provide the URL
5:17:42that is localhost
5:17:44colon 3000 where we will run our backend
5:17:48server. So, we have added this URL here
5:17:51in the origins. Now let's add it here in
5:17:54the
5:17:55course. So in this course we'll add
5:17:57process
5:18:01envisions
5:18:08and then we'll add
5:18:11dot a split
5:18:14and we will split using the comma.
5:18:19Let's come here. You can see we have
5:18:20added the comma here to provide the
5:18:23multiple origins.
5:18:26Now after this course we can add the
5:18:29cookie parser also. So first we have to
5:18:32import the cookie parser. Let's add
5:18:34import cookie parser from cookie parser
5:18:37package and just add app dot use
5:18:41and just add
5:18:43cookie parser here.
5:18:46So it will be added in all the request.
5:18:49After that we'll create the first route
5:18:52or home route. So just add app dot get
5:18:56method. In this get method we'll add the
5:18:58home path. Then we'll add comma and
5:19:01provide a function. In this function
5:19:04parameter we'll get the request and
5:19:06response.
5:19:09Then we will add the response here.
5:19:12simply at response dot send and add a
5:19:16message. So just add the message server
5:19:18is live. So when we will open the home
5:19:22route using the get method, it will
5:19:24display this message server is live. Now
5:19:27after that let's define the port number
5:19:29to run our app. So just add con equal to
5:19:35let's use process env. If it is
5:19:38available in the environment variable,
5:19:40it will be used. else we will add 3,00
5:19:43if it is not available
5:19:45then we will start our server. So just
5:19:49add app dot listen.
5:19:54Now for this app.list we will provide
5:19:57the port number first. So just add the
5:19:59port
5:20:02comma and provide a function that will
5:20:04get executed.
5:20:07So in this function simply add
5:20:11console.log
5:20:14and provide a message that will be
5:20:15displayed in the terminal. So just add
5:20:18server is running at and provide the
5:20:21local host and insert our port number.
5:20:24So just add dollar signals port.
5:20:29So we have created the basic express
5:20:31server. Now let's start our express
5:20:35server. So just open the terminal and uh
5:20:38in this one just add npm
5:20:42run dev.
5:20:47Now you can see the message starting
5:20:49node server.js and you can see the
5:20:51message server is running at localhost
5:20:543000.
5:20:56Now just hide it and open the web
5:20:58browser here. If I type localhost
5:21:033000
5:21:05here also you can see the message server
5:21:07is live that is coming from our home
5:21:10route which is here server is live and
5:21:13this message server is running at this
5:21:15URL it is coming in the terminal after
5:21:18creating the basic express server let's
5:21:21create one
5:21:23global error handler so here let's add
5:21:28one message
5:21:30centralized error handler and provide
5:21:34app dot use.
5:21:40Just create a function. In this function
5:21:43parameter, we'll get the error
5:21:46comma. Then we'll add underscore
5:21:49request.
5:21:52Then response and then we'll add
5:21:55underscore next.
5:21:58Let's add error.
5:22:02After that, simply add console dot error
5:22:07and provide the black tick
5:22:10error and it will be dollar sign curly
5:22:12braces
5:22:14this error dot message.
5:22:18Now in the next line, let me provide
5:22:22response. So just add response dot a
5:22:24status. So a status is 500. Then dot
5:22:27JSON in this JSON we'll add the error
5:22:31property. It will be error dot message.
5:22:34So we have added the global error
5:22:36handler function.
5:22:38So after creating it now we have to
5:22:41connect our backend server with a
5:22:44database.
5:22:46So here we are going to use the MongoDB
5:22:49database. So just open the web browser
5:22:51and search for MongoDB atlas.
5:22:55Open this website and click on get
5:22:58started and create your account. If you
5:23:00don't have an account and uh if you
5:23:04already have an account, you can go to
5:23:06sign in.
5:23:08So let me login with my existing
5:23:09account. I'll continue with my Google
5:23:11account. Let's click here.
5:23:14After sign up, it will ask some
5:23:16onboarding question and then you need to
5:23:18create your project. So let me add the
5:23:20project name builder.
5:23:26Then next
5:23:28then create project and after creating
5:23:31the project we have to create a new
5:23:34cluster.
5:23:35So here you will find this button create
5:23:38a cluster and after that you need to
5:23:41choose the plan. So let me choose the
5:23:43free plan. We'll go for this free plan.
5:23:46And from here you can choose the
5:23:50service provider. So let me choose
5:23:52Google cloud and from this drop-down you
5:23:54can choose the nearest region and click
5:23:57on create deployment.
5:23:59After that you can see it says database
5:24:04user created. So it will create one
5:24:06database user also and password also.
5:24:09You can click on this button to download
5:24:12the file where you can save the username
5:24:15and password for database.
5:24:19So I'll click on this download. It will
5:24:21get downloaded. And after that click on
5:24:24choose a connection method. Now in this
5:24:26connection method we can go for this
5:24:29drivers. And in this drop-down you can
5:24:32choose mongos because we have already
5:24:34added the package. So you can see
5:24:36we have the same step npm install
5:24:39So we have added the package. We
5:24:41can skip this and come to the next step.
5:24:44So next we have to add the
5:24:48connection a string. So we need to add
5:24:50this connection string in our
5:24:53file. So this connection a string
5:24:55includes our database user and this
5:24:57database password. So let me just open
5:25:02the VS code
5:25:04and then go to env file. In this env
5:25:07file let's add the environment variable
5:25:10name. So let's add the name
5:25:14MongoDB
5:25:15URI.
5:25:17After adding it, let's come back here
5:25:20and copy this string from here and it
5:25:24will end here at mongodv.net. Just copy
5:25:27this and uh paste it here. So you can
5:25:30see we have added this string from
5:25:32beginning to this part that is cluster
5:25:35zero and some id mongodv.net ate and at
5:25:39the end we'll add slash and add any
5:25:41project name. So we'll add our project
5:25:43name build.ai.
5:25:46That's it. Now after adding it save the
5:25:49changes and now we'll create the
5:25:50configuration for our connection. So
5:25:54let's open the sidebar. In this server
5:25:56folder create a folder called config.
5:26:00In this config folder create a file
5:26:02called dv.js.
5:26:06Now in this dv.js JS just import the
5:26:09mongus package. After that let's create
5:26:12one function. So just add export async
5:26:14function and add the function name
5:26:18connect to database.
5:26:22After that let's add mongus
5:26:25dot
5:26:27connection
5:26:29dot on.
5:26:32Now in this one just add the
5:26:35event name connected.
5:26:39So we are getting one
5:26:42event or we are registering one event.
5:26:44So when this connected event occurred in
5:26:47this case it will execute this function
5:26:49and here we will display a message. So
5:26:51just add console.log
5:26:53and provide the message that is
5:26:55successfully connected to MongoDB.
5:27:00Now after that let's come here and
5:27:02simply add await and use the mongus
5:27:05package dot connect method. Here you can
5:27:08see we have added connection method and
5:27:12here we are using connect method. In
5:27:14this connect method simply provide the
5:27:16connection string from the environment
5:27:18variable. So just add process envong
5:27:24URI from here. Let's just copy this add
5:27:28it here.
5:27:30That's it. So we have created this
5:27:32function that will help us to connect
5:27:34with the MongoDB database. Now just come
5:27:36here in the main file that is server.js
5:27:38file and here we have to call that
5:27:41function. So after this app instance
5:27:44we'll add the
5:27:46connect to database function and call
5:27:49it. You can see this function has been
5:27:50imported from config / db. Let's add the
5:27:55file name extension db.js. save the
5:27:57changes. Now it will connect our project
5:28:01with database and uh let's come back
5:28:05here in the
5:28:07MongoDB dashboard again. Click on done
5:28:09and after that we have to update our IP
5:28:13address. Just come here in the left
5:28:15sidebar. Open database and network
5:28:17access. Then go to IP access list and
5:28:22click on this edit icon and uh just
5:28:25clear it. Here we'll add 0.0.0.0.
5:28:31So it will allow us to connect with the
5:28:33database from any IP address. So you can
5:28:36see it is displaying the status pending
5:28:39once it is accepted or active. Then we
5:28:43can connect with our database from any
5:28:45IP address.
5:28:49Now you can see the status is active.
5:28:52Let me just come back to the VS code and
5:28:56let's open the terminal. In this
5:28:58terminal
5:29:00the backend server is running and you
5:29:02can see the message here that is server
5:29:04is running at this URL. And after that
5:29:07we have the message successfully
5:29:08connected to MongoDB. It means we have
5:29:11created our express server and connected
5:29:14this express server with MongoDB
5:29:16database.
5:29:18Next we have to store the data in
5:29:21database. For that we have to create the
5:29:23models. In this project first we'll
5:29:25create the APIs for user authentication.
5:29:28It means user can create an account or
5:29:31login into existing account and the user
5:29:33data will get saved in the database. For
5:29:36that we'll create the model and using
5:29:39the model we will store the data in
5:29:41MongoDB database. So in this server
5:29:44folder create a new folder and write the
5:29:46folder name models.
5:29:49In this models folder create a file that
5:29:51will be user.js.
5:29:55In this user dot js file let's create
5:29:58the
5:30:00model. And for creating the model first
5:30:03we have to create the schema. So let's
5:30:05add import
5:30:07and provide curly braces from
5:30:13mongus and from this mongus let's get
5:30:16the schema.
5:30:19After getting the schema here just add
5:30:21con user schema equal to
5:30:26new schema.
5:30:29In this schema we have to define all the
5:30:31properties that we will store for this
5:30:33user data. So just add the name and in
5:30:36this name we'll add the type. Type will
5:30:38be a string and then we'll add the
5:30:40required. Required will be true to store
5:30:42the user data. This name field will be
5:30:44required. Then we'll add the email. So
5:30:47just add email and then we'll add the
5:30:50password. So here we have added the
5:30:52email. Type is a string required true
5:30:55and in this one we have added unique
5:30:56true. So the email should be unique for
5:30:59creating a new account. Then we have
5:31:01added the lowerase true. So it will
5:31:03store the data in lower case and trim
5:31:05true. So it will remove the extra space
5:31:07from the beginning and end of this email
5:31:09id. Then we have added the password type
5:31:12will be string and required true for
5:31:14adding the user data. Then we'll add the
5:31:17comma and provide one object. In this
5:31:19one provide the timestamps true. So it
5:31:21will automatically add the time and date
5:31:24when this data was created or modified.
5:31:27Now after that here we'll add a
5:31:29function. So just add the comment here
5:31:30that is has password before saving. It
5:31:34means we'll encrypt the user's password
5:31:36before we save the password in database.
5:31:38So just add the user schema here
5:31:42then dot pre and provide the event save
5:31:48then add comma and create the async
5:31:51arrow function. Now in this function
5:31:54let's add if statement and provide not
5:31:58of this dot is modified and provide the
5:32:04password.
5:32:08Then simply add return.
5:32:13After that we'll add const salt. We'll
5:32:17generate the salt for encrypting the
5:32:19password. So just add cons salt equal to
5:32:21await and here we will use the brypt
5:32:24package. So just import it. Here we'll
5:32:27add import
5:32:29brypt from brypt package. And uh after
5:32:35that let's add await
5:32:38brypt dot hash.
5:32:44Let's add await decrypt dot
5:32:49gen and provide the digit 10. Then we'll
5:32:53add this dot password equal to await.
5:32:58Then add brypt
5:33:01dot hash that will hash the password. So
5:33:04just add this dot password and provide
5:33:08the salt here.
5:33:10So now we'll get the encrypted password.
5:33:13Now after that let's add one method here
5:33:16that is for compare password. So just
5:33:19add compare password method. Let's add
5:33:22user schema dot methods dot compare
5:33:27password
5:33:29equal to
5:33:31asynchronous function and in this
5:33:34parameter we'll get the
5:33:37password
5:33:40and uh after that just add return
5:33:44and in the return we will use the brypt
5:33:47dot compare here
5:33:51and provide the password.
5:33:53Then provide
5:33:55this dot password.
5:33:58Now after that we can create the user
5:34:01models. Just add export con user equal
5:34:04to
5:34:05mongus
5:34:09dot model and provide the model name
5:34:13user.
5:34:14then add the schema that is
5:34:18user schema. So we have created the user
5:34:20model here and this one we have added
5:34:22one compare password method and we have
5:34:25added the password encryption also. Now
5:34:28after that we'll create the controller
5:34:31using that we can create the user
5:34:34account or user can login with the
5:34:36existing account. So let's come here in
5:34:40the sidebar. Here you can see we have
5:34:41the
5:34:43server. In this server create a new
5:34:45folder and write the folder name
5:34:47controllers.
5:34:50In this controllers folder create the
5:34:53file that will be ocontroller. So just
5:34:55add a new file
5:34:58ocontroller
5:35:00dot js. In this o controller we have to
5:35:05create the controller function. So just
5:35:07add
5:35:09export async function and the function
5:35:11name is register
5:35:15and in this function parameter we will
5:35:18get the request and response
5:35:23right and uh next we'll create the
5:35:27another function that is login. So just
5:35:31copy this one, paste it here and write
5:35:33the function name that is login.
5:35:37After that we'll add one more function.
5:35:39So just add a new function here and
5:35:42write the function name log out.
5:35:45And uh after that let's add one more
5:35:48function
5:35:50that will return the same user data. So
5:35:52just add the function name me
5:35:56that will return the own data for the
5:35:58user. Now let's start with the first one
5:36:02that is registration or user register.
5:36:05So in this one we need some data from
5:36:07the request right. So just add const
5:36:11equal to
5:36:15the request
5:36:18dot body. So in the request body we will
5:36:22send some data for user registration. So
5:36:24we need the email name and password for
5:36:27user registration. So just add name,
5:36:30email and password from request body.
5:36:32After getting it, we'll add the if
5:36:34statement and verify all data is
5:36:36available or not. So just add not of
5:36:39name or not of email or not of password.
5:36:42If any of this data is missing then
5:36:44we'll add the response. So just add
5:36:46response dot a status
5:36:50and set the status 400. Then we'll add
5:36:54dot
5:36:55JSON
5:36:57and uh in this JSON just provide
5:37:02object where we'll add the error. So the
5:37:06error message will be name, email and
5:37:09password are required. Then we'll add
5:37:12the return.
5:37:15Now suppose all data is available. Then
5:37:17we'll add con trim or trimmed email
5:37:23equal to use the email
5:37:26dot
5:37:28to lower case
5:37:33and then dot trim.
5:37:40After that we'll add con existing equal
5:37:43to await. We will find the existing
5:37:46data. So just add the user model here.
5:37:48Import the user model. You can see it
5:37:50has been imported from model/ user and
5:37:53provide the file name extension.js.
5:37:56Now after that here we'll add user dot
5:38:01find one.
5:38:03In this find one we will add the email
5:38:08because the email id is unique. So we
5:38:10have added email and provide this
5:38:13trimmed email and we will find the
5:38:15existing user. Now we'll add if
5:38:18statement if existing is true. It means
5:38:21we have the user existing with this
5:38:23email id. In this case we cannot create
5:38:26an account. So just copy this statement
5:38:28paste it here. We will add response
5:38:30status 400 then JSON error and the error
5:38:34message is an account with this email
5:38:38already exist and then return. Now
5:38:41suppose the existing is false. In this
5:38:43case we can create the user data. So
5:38:45just add con user equal to await and use
5:38:49the user model.
5:38:51Let's add capital U for the user model
5:38:54dot create method.
5:38:57It will create a new user and provide
5:38:59the name. Then add the email.
5:39:07In the email, we will store the
5:39:10trimmed email. Then we'll add the
5:39:12password.
5:39:15Right? So it will create a new user in
5:39:18the database. After creating the user,
5:39:20we have to set the sessions. It means we
5:39:23will set the cookies in the session.
5:39:25Using that we will authenticate the user
5:39:28for every request. So for that we'll
5:39:31create a new function. So here let's add
5:39:35comment called helper to set cookies.
5:39:41Let's add con set session cookie equal
5:39:45to
5:39:47add a function and provide the request
5:39:53and then provide payload.
5:39:57Now in this one we'll add con we'll
5:40:00generate a token. For generating the
5:40:02token we'll add con token and equal to
5:40:05we will use JSON web token package. So
5:40:07just import the JSON web token here. So
5:40:10just add import JWT from
5:40:14JSON web token and just add JWT
5:40:18dot sign
5:40:22then provide the payload here. Then add
5:40:24comma and here we have to add one secret
5:40:27key that we will store in the env. So
5:40:30just open env file and uh in this one
5:40:36let me add one environment variable like
5:40:39JWT
5:40:41secret and here you can add any secret
5:40:43key. So just add any key here
5:40:47you can add anything in this secret key
5:40:50and after that let's come back here
5:40:53in the user controller or o controller.
5:40:56So in this o controller
5:40:59we are creating this set session cookie
5:41:01and provided this JWT sign payload and
5:41:05then provide the secret key. So let's
5:41:07add
5:41:08const JWT secret equal to
5:41:12our process
5:41:14env
5:41:16dot
5:41:18JWT secret. Then we'll add our
5:41:24fallback secret.
5:41:27Now after that
5:41:29here
5:41:31let me provide this JWT secret and then
5:41:35provide comma here we'll provide the
5:41:38expiry time for this token. So just add
5:41:41expires in 30day.
5:41:44After generating the token, let me
5:41:46provide
5:41:48response dot
5:41:52cookie
5:41:53in this one. Just add the token,
5:41:58comma, and provide the token.
5:42:03Then add comma and provide one object.
5:42:06In this one, provide HTTP only true.
5:42:10Then we'll add secure. So let's add
5:42:15secure it will be process env
5:42:19equal to production if it is production
5:42:21then we'll add secure true then we'll
5:42:24add same site it will be lax
5:42:27then we will add max age so just add
5:42:31this max age it means it will expire in
5:42:3430 days then we'll add the path slash
5:42:39so we have to provide these
5:42:40configuration for the cookie
5:42:42Now after that let's come here in the
5:42:45controller function and uh after
5:42:48generating the user data let's add this
5:42:51function set session cookie in this one
5:42:55just add the response then add object
5:42:59with user id that is the payload right
5:43:03so just add the user id it will be the
5:43:07user
5:43:09dot ID
5:43:11Then we'll add dot
5:43:15to string.
5:43:18Then we'll add the
5:43:21comma email.
5:43:25In this email just add
5:43:28user
5:43:30dot email.
5:43:34Now after that we can send the response
5:43:36to user. So just add response dot a
5:43:39status to not one then dot JSON and in
5:43:45this response simply add the user
5:43:48property. In this user property provide
5:43:50the underscore id. It will be
5:43:55user dot id.
5:44:00Then we'll add the name. So the name
5:44:03will be
5:44:06user dot name. Then provide email.
5:44:12Email will be the user
5:44:16dot email.
5:44:19So we have created our user registration
5:44:21function.
5:44:24After registration, we'll complete the
5:44:26user login function. So let me just copy
5:44:29the entire code from here and paste it
5:44:32here in this login function. In this one
5:44:35you can see we are getting the name,
5:44:37email, password. So for login we only
5:44:39need the email and password. Remove this
5:44:41name. So we have the email and password.
5:44:44Then we'll add if not of email and not
5:44:47of password. So we have added either
5:44:50email or password is not available. In
5:44:53this case, we'll set the status 400 and
5:44:55the message is email and password are
5:44:58required.
5:44:59So this is the error message. Then we'll
5:45:02add
5:45:04the statement to find the user using
5:45:06this email id. So let's add
5:45:09con user
5:45:12equal to await user.find one and provide
5:45:15the email. So the email will be our
5:45:19email that we are getting from the
5:45:21request. then dot
5:45:25to lower case then dot
5:45:30trim.
5:45:32Now after that we'll add if user not
5:45:35available. So just add not of user.
5:45:38Suppose we could not find any user with
5:45:40this ML ID. Then we will add the
5:45:43response with a status 400 or let's add
5:45:464.1
5:45:48then JSON error and provide the error
5:45:51message that is invalid email or
5:45:53password. Now after that let's add the
5:45:58password check. Suppose the user is
5:46:00available with the simil ID. Then we'll
5:46:01add const is valid equal to
5:46:05await and provide the user
5:46:09dot
5:46:11compare password
5:46:14method. So just add the compare password
5:46:17and simply add the password here.
5:46:20So it will compare the given password
5:46:22with the saved password. And let's add
5:46:26if not of is valid
5:46:29in this case just add the response with
5:46:33a status 4.1 and message is invalid
5:46:36email or password and return. Now
5:46:38suppose the password is valid in this
5:46:40case we will set the session. So here
5:46:43we'll use set session cookie
5:46:46where we'll add the response then add
5:46:48the object with user id
5:46:52and in this user id we'll add user dot
5:46:55id dot to string and then we'll add the
5:46:58email it will be user do email then
5:47:00we'll add response do a status so let's
5:47:03add the status 2.1 then JSON in the JSON
5:47:07we'll add the user property where we'll
5:47:09add the underscore id name and email.
5:47:13That's it. So, we have completed the
5:47:16user login function. Now, after that
5:47:19just complete this log out. In this
5:47:22logout function, we don't need anything
5:47:24from the request. So, here we'll add
5:47:26underscore request. Now, after that,
5:47:28just add the response dot
5:47:33cookie and uh in this one just add the
5:47:37cookie name that is token and provide
5:47:39the empty string here. So just add comma
5:47:42empty string and then we'll add the
5:47:45configuration in this object. So in this
5:47:48object let's provide the http only true
5:47:51secure it will be process environment
5:47:55equal to production. Then same site lags
5:47:58max zero and path/ now after that simply
5:48:01add response dot json. In this JSON
5:48:06provide the success property and provide
5:48:10true. So we have created the log out
5:48:13function also. And after that we have
5:48:15the last function that is me that will
5:48:17return the user's own data. So here
5:48:19let's add the if statement if
5:48:24not of request do user. It means we
5:48:27don't have the user data in the request.
5:48:29And this user property will be added
5:48:31using a middleware that we will create
5:48:33after creating this controller. So here
5:48:36we'll add the response dot a status and
5:48:39provide the status 4.1. Then we'll add
5:48:43dot JSON. In this JSON provide the error
5:48:48message that is not authorized. So if
5:48:51the user property is not available in
5:48:52the request, we'll display this message
5:48:55in the return that is not authorized.
5:48:58And then we'll add the return.
5:49:03Correct? Now suppose the user is
5:49:05available. So let's add con user equal
5:49:09to await.
5:49:11Then we'll add
5:49:13user model dot
5:49:17find by ID.
5:49:19And let's add the request
5:49:24dot
5:49:26user dot
5:49:30user ID.
5:49:33Then we'll add dot select
5:49:38and in this select provide minus
5:49:41password.
5:49:45So it will exclude the password and
5:49:48after that we'll add if statement if not
5:49:50of user
5:49:52then add
5:49:54response dot a status 44 and provide the
5:49:57message user not found and then return
5:50:03and finally here we'll add the response
5:50:06dot JSON and in this JSON add the user
5:50:10data just add the user now we have to
5:50:14add this request test dot user using a
5:50:16middleware. So let me just create that
5:50:18middleware also that will get executed
5:50:20before executing our controller
5:50:23function.
5:50:25Let me open this sidebar and in this
5:50:28server we'll create a new folder called
5:50:31middleware.
5:50:39In this middleware folder create a new
5:50:41file and write the file name o
5:50:43middleware.js. JS
5:50:48[snorts]
5:50:54in this O middleware we will import the
5:50:57JWT from JSON web token and then we'll
5:51:00create a function. So just add export
5:51:02function and the function name is O
5:51:04middleware and in this function
5:51:07parameter we'll get the request response
5:51:09and the next function.
5:51:13Now let's add if statement and before
5:51:16that let me find the token from the
5:51:19request. So just add const
5:51:22token equal to
5:51:26the request dot cookies
5:51:34dot
5:51:35token.
5:51:38Now we'll check the token availability.
5:51:41So just add if not of token. If token is
5:51:44not available then simply add the
5:51:47response with a status 4.1 and provide
5:51:50the
5:51:51JSON with the error message that is
5:51:54access denied no session token provided
5:51:57and suppose the token is available then
5:51:59we'll add the try catch statement here
5:52:01and in this try block we'll decode the
5:52:03token. So just add const decoded equal
5:52:06to
5:52:08JWT dot verify
5:52:12and provide the token and then provide
5:52:16the process env
5:52:20dot
5:52:22JWT secret
5:52:26or
5:52:28fallback secret.
5:52:32Now after that let's add the request
5:52:36dot user
5:52:40equal to decoded. So we have added the
5:52:43request dot user property and in this
5:52:45one we'll store the decoded value and
5:52:47then we'll execute the controller using
5:52:49the next function. Now let's come here
5:52:51in the catch block we'll add the error
5:52:54and provide response do status 4.1 and
5:52:57then provide the JSON with the error
5:52:59session expired or invalid. Please sign
5:53:01in again. So we have created the
5:53:04middleware that will get executed before
5:53:06executing our controller. Now after
5:53:08creating the controller and middleware,
5:53:10we will create the route. So let's open
5:53:13the sidebar and in this server create a
5:53:15new folder called routes.
5:53:18In this routes folder, create a file and
5:53:21write the file name routes.js JS
5:53:28where you will add all the routes for
5:53:29the authentication feature. So in this
5:53:31one we have to create the router. So
5:53:34let's add import router from the express
5:53:38package and uh after that just add con
5:53:41router equal to this router.
5:53:45Now in this router we'll add different
5:53:48endpoint. So just add oouter
5:53:52dot post method and provide the endpoint
5:53:56path. It will be / register and at this
5:54:00end point we will execute the user
5:54:02registration function. So just add
5:54:06register function from the controllers /
5:54:10controller and then js.
5:54:13Now duplicate it. In the second one
5:54:15we'll add the path. It will be / login
5:54:17and provide the function that is login
5:54:21and import this function from the
5:54:25same file.
5:54:29You can see here we have the register
5:54:30from the controller.
5:54:33Let's update it.
5:54:36We will add ocontroller
5:54:39dot js and then we'll add
5:54:44login from the same file controllers o
5:54:47controller and here we have the login
5:54:48and register. Now just duplicate it here
5:54:51we'll add / logout and here also we'll
5:54:57add the controller function
5:55:00that is logout. It has been imported.
5:55:02Now after that let's duplicate it. Here
5:55:06we will change the method. It will be
5:55:09get method. Just add oouter.get
5:55:13and then provide the path. It will be
5:55:15me. And then provide the middleware that
5:55:17is
5:55:20o middleware. This o middleware has been
5:55:23imported from the middleware folder. O
5:55:25middleware.js.
5:55:26Then provide the comma and function that
5:55:29is me and import this function. You can
5:55:31see this function has been imported here
5:55:33from the controller. Now let's export
5:55:36this router from here. So just add
5:55:38export default and o router. Now we can
5:55:42add this o router in our main file that
5:55:44is server.js file. So just open the
5:55:47server.js
5:55:48and uh here let's add our authentication
5:55:51route. So just add app
5:55:54dot
5:55:57use
5:55:59provide the path. It will be / ai / o
5:56:06then add comma
5:56:08o
5:56:10router. You can see o router has been
5:56:12imported from routes o routes.js.
5:56:16So we have created the APIs for user
5:56:18authentication where we have created the
5:56:21user registration login logout and user
5:56:24data API.
5:56:27After that we'll review our code using
5:56:28code rabbit. So just click here and
5:56:30commit the changes. So let me add
5:56:38backend server
5:56:41created
5:56:45with
5:56:46authentication feature
5:56:51commit changes and sync changes.
5:56:57So it will commit the changes on GitHub
5:57:00in the development branch. Now we'll
5:57:02come back here in the GitHub repo
5:57:06and uh open the repository and click on
5:57:10this button compare and pull request.
5:57:13Then create pull request.
5:57:18After creating the pull request, the
5:57:20code rabbit will start analyzing the
5:57:22code.
5:57:25You can see the code rabbit is running
5:57:27and it is analyzing the code.
5:57:31Now you can see the review has been
5:57:33completed. Here we have the review
5:57:34summary. And after that if I scroll down
5:57:37you can see here we have some critical
5:57:38issue in this ocontroller.js
5:57:42and it says
5:57:45remove the fallback secret. So we will
5:57:49keep it. Now let's come to the second
5:57:50one. Here we have ocontroller.js. JS. In
5:57:54this one,
5:57:56we have to
5:58:02update our
5:58:05code. Let me open this postfix. You can
5:58:08see we have added the request but it
5:58:10will be response because in the code we
5:58:12are sending the response only response
5:58:14docy right. So just come back to the VS
5:58:16code and open the O controller and in
5:58:20this O controller you can see we have
5:58:23session cookie set session cookie and
5:58:26here we are using the request but it is
5:58:28not used in the function we are using
5:58:30the response so just copy and paste it
5:58:32here we are using response and payload
5:58:34save the changes now just see the next
5:58:37suggestion I'll scroll down and see we
5:58:41have the in this middleware in this one
5:58:45we have some suggestion. So what we have
5:58:48to do we have to add the return right.
5:58:51So let's just come back here in the O
5:58:53middleware and you can see we have if
5:58:56not of token then we'll add the return
5:58:58and this response. Save the changes. Now
5:59:02just come back and uh see the next
5:59:04user.js in this user.js
5:59:10use a normal function instead of the add
5:59:12function. So just come back here and
5:59:14open the user.js. In this user dot dot
5:59:16dot dot dot dot dot dot dot dot dojs you
5:59:17can see we have added the add function
5:59:20right. So let me update it here. We'll
5:59:23add
5:59:28a sync
5:59:32function like this. Save the changes. So
5:59:35we have added a sync function and in
5:59:38this one we have this this dot modified.
5:59:41Now let's see the next suggestion from
5:59:44the code rabbit. So we have the
5:59:46suggestion for this
5:59:48server.js. In this server do js it is
5:59:52suggesting to provide the await. Let's
5:59:55come back and uh open server.js and we
5:59:58are calling this connect to db function
6:00:00or connect to database function. So
6:00:02before that we'll add the await and then
6:00:04connect to database
6:00:07and after that let's see the
6:00:12next one. Here we have the isue for
6:00:14origin because we have not updated the
6:00:17env file on the
6:00:20GitHub. Then we have server.js and do
6:00:23not return internal exception messages.
6:00:27Just skip it. And now we have updated
6:00:29all the code according to the code
6:00:33rabbit review. Now we'll click on this
6:00:34merge pull request and confirm merge.
6:00:38That's it and come back to the
6:00:40repository.
6:00:42Now let me just come here and click on
6:00:44this
6:00:47pull. So it will pull the latest
6:00:48changes. So after creating the APIs for
6:00:52authentication, next we have to create
6:00:54the APIs for the project.
6:00:58So that we can create the project using
6:01:00AI. We can create the website using AI.
6:01:06To create the API for project feature,
6:01:09we will store the project data in
6:01:12database. And to store any data in
6:01:14database, we need to create the model.
6:01:16So let's create the project model. So
6:01:20let's open the sidebar. And here you can
6:01:22see we have a
6:01:25models folder. In this folder, create a
6:01:27file called project.js.
6:01:37Here also we have to create the model.
6:01:39So I'll copy the entire code from the
6:01:40user model. Just copy everything and
6:01:43paste it here. And let's update this
6:01:45code. So in this one we have the
6:01:50brypt. Let's remove it. Here we have
6:01:53user schema. And after that we have the
6:01:56user schema pre remove this one and
6:01:58remove this compare password method
6:02:01also. So now it is simple here we have
6:02:03the
6:02:05schema from mongos and we are creating
6:02:08the user schema. So instead of this user
6:02:11schema here we are going to create the
6:02:14project schema. So let's add project a
6:02:17schema equal to new schema. Now in this
6:02:20project a schema we have to define all
6:02:22the properties. So first we'll add the
6:02:25name. So it will be the name of project.
6:02:28The type will be string required true.
6:02:32Then we will add the default value. So
6:02:34let's add comma and provide the default
6:02:38it will be untitled project. So if we
6:02:41are not providing the name the project
6:02:44name will be untitled project. Then we
6:02:47have to add the description. So let's
6:02:51copy this one. paste it here.
6:02:55We will add the property name. So the
6:02:58property name will be description. The
6:03:00type will be a string and remove this
6:03:03required property. And the default value
6:03:06will be empty string.
6:03:10Now after that we'll add the next
6:03:12property. So the next property will be
6:03:15files. Let's add files. I'll clear this
6:03:18one.
6:03:21So here we have files and the type will
6:03:23be [snorts]
6:03:27our schema
6:03:29dot
6:03:32types
6:03:34dot mixed.
6:03:42So this is the
6:03:44type for this files property and then
6:03:47we'll add the default value here. So
6:03:49let's clear it and simply add default.
6:03:52In this default we will add the empty
6:03:55object.
6:03:57Now after that we have to add the
6:03:59messages. So let's copy this paste it
6:04:02here. We will add the property name. So
6:04:05it will be messages. Then we'll add the
6:04:08type. So in this type we have to create
6:04:12another schema. So let's add the empty
6:04:14array here. And here we will provide the
6:04:17another schema. and then we'll add the
6:04:19default. So in this default we'll add
6:04:21the empty
6:04:24array. Now let's add the schema for this
6:04:28message type. So here let's provide
6:04:33con schema or let me just copy this
6:04:35entire code. Copy and paste it here.
6:04:42We will change the name. It will be
6:04:44message schema.
6:04:47Now after that just provide this message
6:04:49schema here in this type
6:04:52correct. Now after that let's complete
6:04:55this message schema only. So here we'll
6:04:57add the
6:04:59object. It's already there. So in this
6:05:02object we'll add the first property. So
6:05:04the first property will be role for the
6:05:07message. In this role first we'll add
6:05:09the type and the type will be a string.
6:05:11Then we'll add the enum. In this enum
6:05:14we'll add the accepted values. So it
6:05:17could be user or assistant. Then we'll
6:05:20add the required it will be true.
6:05:25So this is the type for the role. After
6:05:27that we have to add the message
6:05:31content. So the content type will be a
6:05:34string and required true. After this
6:05:37content we'll add the time stamp. So the
6:05:40time stamp will be type date and default
6:05:44value will be date do.now. Now here we
6:05:48don't have to generate the id. So just
6:05:50add one object here and in this object
6:05:53provide underscore
6:05:56id
6:05:57and provide false.
6:06:00So it will not generate the id for this
6:06:03message.
6:06:06Now after that let's come here and
6:06:07complete our project schema. In this
6:06:10project schema we have added the name,
6:06:12description, files and then messages.
6:06:15After that we have to add the version.
6:06:17So it will be project version. So the
6:06:20type will be number. Default value will
6:06:23be zero. After that we have to add the
6:06:26owner. Right? So it will be the project
6:06:30owner. So just add owner
6:06:33in this owner property.
6:06:35Let's provide the type and the type will
6:06:38be our
6:06:42user data. Right? So just add type
6:06:44property. In this one just add
6:06:47schema
6:06:49dot types dot object ID and then we'll
6:06:56add the reference. So let's add ref.
6:07:00And in this reference we'll add the user
6:07:02model.
6:07:05Then we'll add the required.
6:07:08So the required property will be
6:07:11true.
6:07:17Next we will add the another property
6:07:19that is published. So just add comma and
6:07:22provide published. The type will be
6:07:24boolean and default value will be false.
6:07:27So by default the published will be
6:07:29false and user can make the project
6:07:33published. So it will be accessible by
6:07:35any user without authentication. Then
6:07:38we'll add the project a status. So let's
6:07:41add a status. In this a status we'll add
6:07:43the type a string and then we'll add the
6:07:45enum. In this enum we have to add all
6:07:48the
6:07:50accepted values in array. So the project
6:07:55status could be pending,
6:07:59generating,
6:08:01revising,
6:08:03completed or failed.
6:08:06Correct? Now just add comma and here we
6:08:09will add the default value for the
6:08:11status. So the default value will be
6:08:13pending.
6:08:15Next we will add the
6:08:19files planned. So let's add the property
6:08:23name files planned. It will be type
6:08:29and in this type we have to add the
6:08:32a schema only. So let's add the type and
6:08:35provide the array like this and then add
6:08:38comma default and the default value will
6:08:41be empty array. And uh let's add the
6:08:47next property that will be files
6:08:50generated.
6:08:52In this files generated just add the
6:08:55object with the type.
6:09:01In this type we will add the array with
6:09:05string.
6:09:07Then we will add the default.
6:09:12And in this default we'll add the empty
6:09:14array.
6:09:16Next we will add current file.
6:09:22So in this current file add the type a
6:09:25string and default value will be null.
6:09:30Now we will add error. In this error
6:09:33property we will add the type a string
6:09:35and default is null.
6:09:37Correct? Now after that let me complete
6:09:40this files plant type is empty array but
6:09:44here we have to add the schema of the
6:09:46files plant. So let's scroll up here
6:09:50we'll add
6:09:52con
6:09:55plant files schema equal to new schema.
6:10:01In this new schema add one object. In
6:10:04this object we'll add the path.
6:10:07We'll add the path property and in this
6:10:09path property provide the type string
6:10:12required true.
6:10:14So for the files there will be a path
6:10:17and after that we will add the
6:10:19description. In the description just add
6:10:21the type string and required true. So
6:10:24there will be a path and description for
6:10:26the files. Now we'll add the comma here
6:10:29and provide another object where we'll
6:10:31add underscore id
6:10:33and make it false. So it will not
6:10:36generate the ID for this
6:10:39plant files schema. Now just add it here
6:10:43inside this array under this files plant
6:10:48like this. Save the changes and after
6:10:50that just come here. You can see here we
6:10:52have export con user. So instead of user
6:10:55we will add project export con project
6:10:58equal to mongus domodel and provide the
6:11:01model name. So the model name will be
6:11:04project and here we have to add the
6:11:06schema that is
6:11:08project schema.
6:11:11So we have created the
6:11:13project model and using this project
6:11:16model we can store the data in database.
6:11:20Now we can create our controllers.
6:11:24So let me open the sidebar. Here we have
6:11:28the controllers folder. In this one,
6:11:30create a file and write the file name
6:11:33project controller.js.
6:11:37Now in this controller file, we have to
6:11:39create multiple controller function for
6:11:42different APIs for different
6:11:45functionality. So here
6:11:48let's add one comment.
6:11:51we will add the comment that will be the
6:11:54method type or API type and then API
6:11:59endpoint. So the type will be post and
6:12:01the path will be / API/ projects
6:12:05right and uh let's add the description
6:12:09in the comment. So here we'll add the
6:12:11description that is
6:12:13create a new project from an AI prompt.
6:12:18So the first controller function will be
6:12:20used for creating a new project using AI
6:12:24prompt. So let's create a function and
6:12:27export it. We'll add export
6:12:31async function and write the function
6:12:34name
6:12:36create project.
6:12:41Now in this function parameter we'll get
6:12:43the request and response
6:12:47like this. So right now we have created
6:12:50one empty function. After that we have
6:12:53to create our next function. So the next
6:12:56function will work in the background
6:12:59when the project is generating. So it
6:13:02will update the
6:13:04generated project file in the database.
6:13:08Right? So let me add the description
6:13:10here.
6:13:12that is background worker to progressive
6:13:16generate files and update database in
6:13:19real time.
6:13:21So let's create another function here
6:13:24like this and add the function name. So
6:13:27I'll provide the function name that is
6:13:30run background generation. In this one
6:13:34we will get the project ID
6:13:37and after that we'll add the prompt
6:13:41as parameter.
6:13:43Now after that we'll create the
6:13:45controller function here. For that we'll
6:13:48add the
6:13:50method. It will be get and the path will
6:13:52be / API/ projects. You can see the API
6:13:56endpoint is same here and here but the
6:13:59type is different. It is post. It is get
6:14:03here. Let's add the description also. So
6:14:06we will use this function to display the
6:14:08list of all project owned by single
6:14:11user. So let's add the comment that is
6:14:14list all projects owned by the user
6:14:17summary only no files contents. Right?
6:14:22So
6:14:25let's add the function from here. Just
6:14:28copy this
6:14:30and paste it here.
6:14:33Now in this previous function you can
6:14:35see we have added export. So let me
6:14:37remove this export because this function
6:14:38will be used here only. We'll add async
6:14:41function. That's it. Now in this one we
6:14:44have added export async function and
6:14:48let's update the function name. So the
6:14:50function name will be
6:14:52list projects.
6:14:58We have added the function name here
6:15:00list projects.
6:15:02Now after that we'll create the another
6:15:05function. So first we'll add the
6:15:07comment. So let me just duplicate the
6:15:09entire thing.
6:15:11We will update the comment.
6:15:15So the first comment is the method type.
6:15:18It will be get and the path will be /
6:15:20API/ projects and id. And then we'll add
6:15:23the description that is get full project
6:15:26details. It means we will get the
6:15:28complete details of the individual
6:15:30project. For that we'll add the function
6:15:33name that is
6:15:36get project and add the request and
6:15:39response in the parameter.
6:15:41After that we have to add the next
6:15:43function. So copy and paste it here. We
6:15:46will update the details. So first we'll
6:15:49add the
6:15:51method. it will be delete and the path
6:15:53will be / API/ projects/ colon id and
6:15:58then we'll add the description that is
6:16:00delete a project. So we will use this
6:16:02function to delete a project. So just
6:16:04add the function name called delete
6:16:07project and here also we'll get the
6:16:08request and response in the parameter.
6:16:11Now duplicate this one
6:16:14here we will add
6:16:18the
6:16:20method. it will be put and the endpoint
6:16:23API projects id and files. Then we'll
6:16:27add the description that is update
6:16:28project files. So it will update the
6:16:31project file when we will edit the code
6:16:33manually. So we have added manual edits.
6:16:36So just add the function name that is
6:16:40update project files.
6:16:43Now let's duplicate it.
6:16:48Here we will add the
6:16:51comment that will be type post and the
6:16:55path will be / API projects id and
6:16:58publish. So using this we can publish
6:17:02any project. We can mark it as public.
6:17:05So it will be visible to anyone.
6:17:08Right? So let's add export as sync
6:17:13function and provide the function name
6:17:15publish project.
6:17:17Right now after that we have to add one
6:17:20more function here.
6:17:23So let's add the details that will be
6:17:26the method type. Then we'll add the
6:17:29endpoint/ API/ project/ public and id.
6:17:34And then we'll add the description that
6:17:36is
6:17:38get publicly published project details
6:17:41without o. It means using this function
6:17:45we can display the details of individual
6:17:48project and it can be visible to anyone
6:17:51who is not authenticated. So here we'll
6:17:54add the function name that is get public
6:17:58project. So we have added all empty
6:18:01functions for this project controller.
6:18:03Now we will add the functionality in
6:18:05each function one by one. So let's start
6:18:08with the first one that is create
6:18:10project. For this create project, we
6:18:12need a prompt and we'll get the prompt
6:18:14from the request body. So let's add
6:18:16const
6:18:18braces prompt
6:18:21equal to
6:18:23our request dot body. Now after getting
6:18:28the prompt, let's add if statement if
6:18:32let's add not of prompt. So if the
6:18:35prompt is not available or
6:18:39type of
6:18:41prompt
6:18:43not equal to a string
6:18:46in this case
6:18:50just add response dot a status it will
6:18:52be 400. Then we will add
6:18:57dot JSON with the error and the error
6:19:01message will be prompt is required
6:19:04and then we'll add return
6:19:09correct. Now suppose the prompt is
6:19:11available and the type of prompt is a
6:19:13string. In this case we will check the
6:19:16user is available or not. So just add if
6:19:22not of
6:19:24request dot user this user property will
6:19:28be added using the middleware and we are
6:19:31checking the user property is available
6:19:34or not. If it is not available then
6:19:36let's add it here. Add this statement.
6:19:39We will provide response do a status 4.1
6:19:43then JSON and provide the error and the
6:19:46error message is unauthorized
6:19:52and then return. Now suppose the user is
6:19:55authenticated. In this case we can
6:19:58create a project in the database with
6:20:01the pending status. So let's add the
6:20:04command first that is create project in
6:20:07DB immediately with pending status. For
6:20:11creating the project we will add con
6:20:15project equal to await and then use the
6:20:20project model. You can see we are
6:20:22getting the suggestion just import it.
6:20:23Let's scroll up. You can see the project
6:20:26is imported from model/ project and
6:20:28write the file name extension.js.
6:20:31Let's move it here at the first line.
6:20:35So here you can see we have added a
6:20:36weight project model then dot create
6:20:40method. So it will help us to create a
6:20:43new project in the database. Now let's
6:20:46add the details in this object. So first
6:20:48we'll add the name.
6:20:51So in this name let's add
6:20:55planning project.
6:20:57Then we will add description. So in the
6:21:01description let's add the prompt that we
6:21:04have received from the request body.
6:21:06Then we'll add the files.
6:21:09So initially the files will be empty
6:21:13object. Then we'll add the messages.
6:21:17Now in this messages let's add the
6:21:20array. And in this array
6:21:23let's add the first object where we will
6:21:27add the role. it will be user. And then
6:21:31we'll add the content. And in the
6:21:33content we will add the prompt.
6:21:36Then we'll add the second message. So
6:21:39just duplicate it.
6:21:43Here we will add the role assistant.
6:21:46In this one we'll add the content and
6:21:49the content will be planning project
6:21:52structure. Now after that add the comma
6:21:55here.
6:21:56Here we will add the next property that
6:21:58is version.
6:22:00So the version will be zero.
6:22:04Next we will add the owner and in this
6:22:07owner we will add the request dot user
6:22:11dot user id. Then we will add the a
6:22:14status. So a status will be pending.
6:22:16Then we'll add files planned it will be
6:22:20empty array. Then files generated it
6:22:23will be empty array. And then we'll add
6:22:27current files. So the current file will
6:22:29be null. And then we'll add the error
6:22:32null.
6:22:34So using this information, we will
6:22:36create a new project in the database.
6:22:40After adding this data in database, we
6:22:43can start generating our project. For
6:22:45that, you can see we have added this
6:22:47function run background generation. So
6:22:49it will start generating the project in
6:22:52the background and it will store the
6:22:54data in the database. So let's add the
6:22:58commit first that is
6:23:02a start background generation and call
6:23:04this function. So let's call it here.
6:23:08Now in this function we have to provide
6:23:09two arguments that will be project ID
6:23:12and prompt. To provide it here you can
6:23:14see we have the project right. So simply
6:23:17add this project then dot
6:23:22id and after that we have to add the
6:23:26prompt also. So let's add the prompt.
6:23:29Now after that you can see we have the
6:23:31project ID. So let's convert it into a
6:23:33string. So just add dot
6:23:36to a string.
6:23:39That's it. Now at the end here we'll add
6:23:42dot
6:23:44catch. So it will catch all errors and
6:23:47in this one we'll add the
6:23:51function.
6:23:52Now let's catch the error here in this
6:23:55parameter and after that let's provide
6:24:00console dot error
6:24:04in this console dot error provide back
6:24:06tick and insert the
6:24:10background AI file generation error for
6:24:13project and then insert the details
6:24:16using
6:24:18dollar sign curly braces and provide
6:24:22project
6:24:24dot
6:24:26id then colon
6:24:30and then add comma error save the
6:24:35changes. Now it will keep generating the
6:24:40project in the background and after that
6:24:42we can send the response here. Let's
6:24:44just add response dot
6:24:47status and in this status we'll add 2.1
6:24:51then we will add dot JSON
6:24:56in this JSON add the object where we'll
6:24:58add underscore id. So it will be our
6:25:02project
6:25:05dot
6:25:06id.
6:25:09Then we will add the name. In this name
6:25:12we will add the project
6:25:16dot name.
6:25:19After that we'll add description. It
6:25:21will be project dot description. Then
6:25:24we'll add files. It will be empty
6:25:27object. Then we'll add the messages. It
6:25:30will be project dot messages. Then
6:25:32provide version. It will be project dot
6:25:35version.
6:25:37So we are sending these data in the
6:25:39response. Then we'll add the status. It
6:25:41will be project dot status. Then files
6:25:44planned it will be project
6:25:46dotfilesplanned.
6:25:48Then files generated it will be project
6:25:51dot files generated. Then current file
6:25:54it will be project dotcurren file. Then
6:25:57error it will be project dot error. And
6:26:00then created at property it will be
6:26:02project do.created at. So we are sending
6:26:06these data in the response and it will
6:26:09execute our function that is run
6:26:11background generation and in this one we
6:26:13will use the AI to generate our project.
6:26:16So for now let me skip this function we
6:26:18will create it later after creating all
6:26:21these
6:26:23functions right. So here let's come to
6:26:27the next one that is list projects. So
6:26:30in this list projects we'll add if
6:26:33statement.
6:26:35In this if we'll add not of request
6:26:40dot user. So if the user is not
6:26:43available in the request it means the
6:26:45user is not authenticated. So just add
6:26:49response status 4.1 JSON error will be
6:26:52unauthorized and then we'll add the
6:26:54return.
6:26:57Now suppose the user is authenticated in
6:27:00this case just add con projects
6:27:05equal to await and then add the project
6:27:10model
6:27:12dot find method.
6:27:15In this find method add the
6:27:18object where we'll add the owner
6:27:20property. So this owner property will be
6:27:23the
6:27:25request
6:27:26dot user dot user id.
6:27:35Then we will add
6:27:39name one description one version one
6:27:42created at one and updated at one.
6:27:47After that we will add dot sort.
6:27:53In this sort provide the object
6:27:56where we will add
6:28:00updated at
6:28:03minus one.
6:28:06Now we can send the response here. So
6:28:09let's add the
6:28:11response do.json JSON and uh in this one
6:28:14provide the project
6:28:17I mean projects. So here we'll get list
6:28:20of projects owned by a single user.
6:28:26After that let's come to the next
6:28:28function that is get project. So here
6:28:31we'll get the details of a single
6:28:33project. Right? For creating it
6:28:38here we will add the same if statement.
6:28:41Just copy this, paste it here. We will
6:28:44add if not of request do user. Then
6:28:48we'll add the response unauthorized and
6:28:51return. And after that we have to find
6:28:53the project details. So just add con
6:28:56project equal to await. And here we will
6:28:58use the project model.
6:29:02And in this project model we'll add
6:29:05find one method.
6:29:08Now in this find one add the object
6:29:11where we'll add underscore id and in
6:29:14this underscore id just add the request
6:29:20dot padams
6:29:24because in this request padams we are
6:29:26getting the id right so we will add the
6:29:27request dot padams dot id and after that
6:29:32we'll add the comma and provide the
6:29:34owner so the owner property will be
6:29:36request dot user dot user id. Now after
6:29:40that let's add if statement if not of
6:29:45project. If we could not find the
6:29:47project data
6:29:49in this case just add the response dot a
6:29:53status for not four then json with the
6:29:56error message project not found and
6:29:58return. Now suppose the project data is
6:30:01available then we'll add con files
6:30:06object it will be empty object then
6:30:09we'll add
6:30:11for off loop in this for off we'll add
6:30:15con path and entry
6:30:19then of object dot entries
6:30:23then add the project
6:30:27dot files
6:30:32Then we'll add
6:30:34files object. Then add the
6:30:40path
6:30:42equal to
6:30:44entry dot content.
6:30:47Now after that we can send the response.
6:30:49So let's add response dojson.
6:30:54And uh in this JSON let's provide the
6:30:57details. So I'll just come here and copy
6:31:00this one.
6:31:02Copy it and paste it here.
6:31:06So you can see in this response dojson
6:31:08we are adding underscore id that is
6:31:10project dot id then name then
6:31:14description and files. In the files
6:31:17simply add this
6:31:20files object.
6:31:22Correct? Then we'll add the messages.
6:31:26Then version
6:31:28then we'll add the a status. Then files
6:31:32planned files generated
6:31:35and
6:31:37current file and error and then created
6:31:41at it will be project do.created at. So
6:31:45after this error we have the created at
6:31:47property. It is project do.created
6:31:49created at and with that we'll add the
6:31:51updated at also. So just add the next
6:31:54one updated at and it will be project
6:31:58dot updated at save the changes. So we
6:32:02have completed our function to get the
6:32:04details of individual project right now
6:32:07after that let's scroll down and see our
6:32:10next function. So the next function is
6:32:13delete project. In this delete project
6:32:15again we will check the user is
6:32:17authenticated or not. So just copy this
6:32:19paste it here in this delete function.
6:32:23If request dot user is not available
6:32:26then we'll add unauthorized and return.
6:32:29Now user is authenticated. In this case
6:32:32we'll add con result
6:32:34equal to await and use the project model
6:32:41dot find one and delete.
6:32:44In this find one and delete we will add
6:32:47the object where we will add underscore
6:32:50id. It will be request.padams do id.
6:32:54Then we'll add owner it will be request
6:32:57dot user dot user id. Now after that
6:33:02we'll add the if statement if
6:33:05not of result. So in this case let's add
6:33:10response dot a status.
6:33:13it will be 4.4 and provide the error
6:33:16that is project not found
6:33:19and after that if the result is
6:33:22available in this case let's add
6:33:25response dot JSON
6:33:30and simply add the message that will be
6:33:33success message it will be true
6:33:36that's it so the project will get
6:33:39deleted
6:33:41now after that let's come here in the
6:33:43next function that is update project
6:33:45files. So when we will make changes in
6:33:48the code file, it should update the
6:33:49project files in the database. So here
6:33:53let's add con files
6:33:56and get this files from the request dot
6:33:59body. After that we'll add if statement
6:34:02if not of
6:34:05files
6:34:07or
6:34:11type of files not equal to object.
6:34:17In this case just add response status
6:34:21400 and error will be files object is
6:34:24required. Then we'll add the return.
6:34:29Now after that come here and provide the
6:34:31if statement if not of request do user.
6:34:35In this case we'll add the same message
6:34:37that is request
6:34:40dot a status 4.1 JSON error will be
6:34:44unauthorized and returned. Now user is
6:34:46authenticated. Then come here and
6:34:49provide the con project equal to await
6:34:51and use the project model.
6:34:56Then dot
6:34:59find one. In this find one add the
6:35:04underscore id it will be request.params
6:35:08do id then add comma owner and provide
6:35:13request dot user dot user ID. So here
6:35:17we'll find the project. Right. Now let's
6:35:20add if statement if not of project. So
6:35:23if the project is not available in this
6:35:26case just add the message that is
6:35:28request dot status 4.4 and the message
6:35:31is project not found and return and
6:35:33suppose the project is available in this
6:35:36case let me add the comment that is
6:35:40reveal project files map with content
6:35:43and hes. So let's add const new files
6:35:48will be
6:35:50empty object then we'll add
6:35:54for of
6:35:56const path and content
6:36:01of object dot entries and provide the
6:36:04files. Now in this for we'll add the if
6:36:08statement if type of content is equal to
6:36:11a string.
6:36:14In this case, let's add new files and
6:36:18path
6:36:20equal to
6:36:22object and provide the content
6:36:26then comma and provide the has property.
6:36:30In this one, we'll add
6:36:33has content
6:36:36and content.
6:36:39And we have to h our content using
6:36:42crypto. So let me just scroll up
6:36:45and here we will create a function just
6:36:49add has content function
6:36:53and provide the return in this one we'll
6:36:56get the content as parameter and provide
6:36:59the crypto and let's import it. We'll
6:37:01add import
6:37:05crypto from crypto and then we'll add
6:37:10crypto dot Create hash
6:37:16and provide
6:37:19MD5.
6:37:22Then dot
6:37:24update and provide content.
6:37:29Then dot
6:37:33digest.
6:37:35Then [snorts]
6:37:36let's add hex.
6:37:41Then dot
6:37:44slice and provide
6:37:480 comma 12
6:37:51and we are using this as content here
6:37:58in this for of.
6:38:00Now after that
6:38:04let's come here
6:38:09and provide the project dotfiles equal
6:38:11to new files.
6:38:14Then we'll add await project dots save
6:38:22and uh after that let's add con files
6:38:26object. It will be empty object. And
6:38:28then we'll add the same thing. Just copy
6:38:30this.
6:38:32Paste it here. In this one, we'll add
6:38:35con path entry
6:38:41of object dot entries and provide
6:38:44project dot files.
6:38:49Then we'll add
6:38:51files object
6:38:53and path it will be entry dot content.
6:38:58And uh after that we can simply add the
6:39:02response. So just add response dot JSON
6:39:07and provide one object. In this object
6:39:09we have to provide the project details.
6:39:11So I'll copy from here.
6:39:15Let's copy it and come back here.
6:39:19In this one we are providing underscore
6:39:21id. It is project dot id then name
6:39:25project.name then description then
6:39:28files. So the files will be files object
6:39:31then messages then version and uh after
6:39:35that we can remove these details. Simply
6:39:38add created at and updated at.
6:39:44Save the changes. So we have created
6:39:48this function that is update project
6:39:52files when we edit the code manually.
6:39:55Right? Now after that
6:39:58you can see we have the next function
6:40:00that is publish project. Right? So in
6:40:03this one again add the same statement
6:40:06for user authentication check. We will
6:40:08add if
6:40:10request do user is not available then
6:40:13we'll add
6:40:16response do status 4.1 and the message
6:40:19is unauthorized and return. Now suppose
6:40:21the user is authenticated then we'll add
6:40:23con project equal to await and use the
6:40:27project model. So just add project dot
6:40:33find one and update. Now in this one add
6:40:37our first object. In this one just add
6:40:41underscore id. It will be request dot
6:40:44padams do id. Then we will add
6:40:50owner it will be request dot user dot
6:40:53user id. We have to update the status
6:40:57right. We have to update the published
6:40:59property. Right? So you can see we are
6:41:02providing the
6:41:04method find one and update and it will
6:41:07help us to find the record. Then we'll
6:41:10add comma and provide the next object
6:41:12where we'll add published property and
6:41:15make it true. So it will be publicly
6:41:17available. And after that let's add the
6:41:20next object where we'll add return
6:41:22document and provide after.
6:41:26So it will return the updated document.
6:41:30Right now after that
6:41:32here we will add the if statement if not
6:41:35of project
6:41:38it means we didn't get the project after
6:41:42update right so in this case we'll add
6:41:44response do a status 44 and then we'll
6:41:47add the error message that is
6:41:53project not found let me add it inside
6:41:55the curly braces and if the project is
6:41:59available after update then we'll add
6:42:02response dojson with this success true
6:42:05and we'll add the published property it
6:42:08will be project dotpublished
6:42:11that's it save the changes so we have
6:42:13created this function using that we can
6:42:16publish a project right now after that
6:42:19we have to create this function
6:42:22that is get the details of the publicly
6:42:26published project so here we'll get the
6:42:29entire details of the project and it
6:42:31will be visible to all user without
6:42:34authentication.
6:42:35Right? So in this one we'll add con
6:42:38project equal to await project dot find
6:42:42by id and we'll get the id from request
6:42:44patterns and id right here we are not
6:42:48checking the authentication then we'll
6:42:50add the if statement if not of project
6:42:53suppose we could not find the project
6:42:55using this ID provided in the padams
6:42:58then we'll add response status 44 and
6:43:01the error message is project not found
6:43:03and return then we'll Add
6:43:06another if statement. Copy and paste it
6:43:08here. We'll add not of project
6:43:10do.publish. Suppose the project is
6:43:12available but published property is
6:43:15false. Right? Then we'll add response
6:43:18status 4.3.
6:43:20And in the error message we'll add
6:43:23project is not published yet.
6:43:28It means the project is available but it
6:43:30is not public. Right? Now suppose it is
6:43:33public in this case we'll add con files
6:43:36object will be empty object and then we
6:43:40have to add the for off. So just copy
6:43:43the for off loop from here.
6:43:49Let's copy this one. Paste it here.
6:43:53Let's add con
6:43:56path entry of object dot entries.
6:44:00Then project dotfiles if
6:44:04let me remove this if simply add this
6:44:08files object path equal to entry dot
6:44:12content
6:44:17and uh after that we can send the
6:44:19response
6:44:21right for sending the response let's
6:44:23just copy the statement from here copy
6:44:26this response dojson and paste it here
6:44:30Now in this one we'll add underscore id.
6:44:32It will be project id. Then name
6:44:36description and files. Then we'll add
6:44:39the version.
6:44:42That's it.
6:44:44ID name description files and version.
6:44:48Save the changes. So we have created
6:44:50this function. Using that we can return
6:44:52the details of published project. so
6:44:55that any user without authentication can
6:44:57view the published project. After
6:45:01creating these controllers, we will
6:45:03create the API routes. For that, we have
6:45:05to create the route file. So, in this
6:45:08routes folder, create a new file and
6:45:10write the file name project routes.js.
6:45:18In this project routes, we have to
6:45:22create the router using express. So just
6:45:24add import router from express and after
6:45:28that let's add con project router equal
6:45:32to router. Now in this project router we
6:45:37will add different endpoint. So let's
6:45:39add project router dot get
6:45:44and in [snorts] this one we'll add the
6:45:47endpoint. You can see we have added the
6:45:49type get and provide the endpoint. So
6:45:51just add the endpoint for this last one.
6:45:55You can see here we have the last
6:45:57controller that is get public project.
6:46:02So the endpoint will be this
6:46:07public/
6:46:09id right and the type is get. So let's
6:46:12add it here. Just add public/
6:46:16id and then we'll add the comma and
6:46:19provide the function. So just add get
6:46:24public project and it is imported from
6:46:27the controllers project controller file.
6:46:30So just add the file name extension js.
6:46:33So first we have added this one because
6:46:35this will be public route right. So let
6:46:38me add the comment that is public route.
6:46:41Here we don't need any authentication
6:46:43and after that we have to add the other
6:46:45routes where we have to add some
6:46:49authentication right let me show you
6:46:52that we'll add project router and uh
6:46:57then we'll add the method dot post. So
6:47:01we'll add the method post and then we'll
6:47:04add the end point. So let's add the
6:47:06endpoint it will be slash and then we'll
6:47:10add the controller that is create
6:47:13project. So just add the create project.
6:47:15It has been imported here. You can see
6:47:18this is the endpoint and the method is
6:47:20post. Then we will use the create
6:47:22project. And in this one we have to add
6:47:24the middleware so that only
6:47:26authenticated user can access this
6:47:28route. So instead of adding the
6:47:30middleware here we can add the
6:47:33middleware just before this
6:47:37route creation. So here just add this
6:47:40project router
6:47:42dot use
6:47:46and in this use method we'll add the O
6:47:50middleware.
6:47:51So you can see O middleware is imported
6:47:54from middleware o middleware.js. Now
6:47:57after this o middleware use we'll create
6:48:00other routes and these routes will be
6:48:02protected. Let me add the comment here
6:48:07that is protect all following routes. So
6:48:10now whenever we'll create the new route
6:48:14below this one all the routes will be
6:48:16protected. It means first it will
6:48:18execute this o middleware then only it
6:48:21will execute the controller. Right? So
6:48:24here we have added the first one. Let's
6:48:26add the next one. So just copy this
6:48:32is project router and then add dot.
6:48:36We'll add project router.getate and the
6:48:38path will be slash. Then we'll add list
6:48:41projects.
6:48:43So list projects has been imported. When
6:48:46we'll hit this route using get method,
6:48:48we'll get the list of projects by
6:48:50individual owner. Now just copy this,
6:48:54paste it here. We will add project
6:48:56router.get and then colon id that is the
6:49:00project id. Then it will give the
6:49:03details of individual project. So just
6:49:05add the get project controller. It has
6:49:08been imported here. Now duplicate it and
6:49:13uh here we'll add the method delete.
6:49:17And for this delete, we'll add the
6:49:19endpoint / id and provide the function
6:49:23that is delete project. Now just
6:49:27duplicate it. Here we'll add the type
6:49:31put and then we'll add the path. It will
6:49:35be colon id /
6:49:39files.
6:49:41And then we'll add the function that is
6:49:45update project files. Let me just come
6:49:48back here in the controller. You can see
6:49:50we have this function called uh update
6:49:55projects files and the method type is
6:49:57put. Correct? Now come here in the
6:49:59routes and duplicate this one. So in the
6:50:03next one we will add the type post and
6:50:07in this post we'll add the path. it will
6:50:10be colon id and publish. So we will use
6:50:14this route to publish a project. So
6:50:17let's add the function
6:50:20publish project.
6:50:22So we have added all the routes here and
6:50:25after that let's export this router from
6:50:28here
6:50:29that is project router. So just add
6:50:33export default project router. That's
6:50:37it. Next, we have to add this router in
6:50:39our main file that is server.js file.
6:50:42So, let's open server.js.
6:50:46And uh here let's add app dot use.
6:50:54And in this app dot use just add the
6:50:58path. So, the path will be / ai/
6:51:04projects. Let's add this slash also. /
6:51:07API/ projects and then we'll provide our
6:51:10router. So let's add
6:51:13project
6:51:15router. So you can see the project
6:51:18router has been imported from routes
6:51:19folder project routes.js file. So we
6:51:22have created the endpoint for our
6:51:24projects where we can create a project.
6:51:28We can display the list of projects. We
6:51:30can get the individual project data. We
6:51:33can delete the project. We can update
6:51:34the files. We can publish the project
6:51:37and we can get the data of published
6:51:39project. Now we have to complete the
6:51:42functionality of this run background
6:51:45generation. It means we will generate
6:51:47the project or generate the website
6:51:50using AI. So we have to implement our AI
6:51:53feature. To add the AI functionality
6:51:57first we need the keys for AI APIs. So
6:52:01let me just open the web browser and
6:52:03search for open router. We will use the
6:52:05open router keys. After that, let's sign
6:52:09up here. And after sign up, you will
6:52:11come to
6:52:14workspaces. And in the left side, you
6:52:16will find the API keys. And you will
6:52:19find this button new key. So just click
6:52:22here and create a new key. Let me add
6:52:24the name for this key that is builder AI
6:52:28and click on create.
6:52:31So here we have a new key. Let me add
6:52:33this key in our environment variable. So
6:52:36let me open ENV file here.
6:52:41In this env file, we'll add one
6:52:44environment variable name. So just add
6:52:46open router API key
6:52:51and paste this key from open router.
6:52:54Copy and paste it here.
6:52:59After that we have to provide the model.
6:53:01So let's add the another
6:53:04environment variable that is open router
6:53:06model
6:53:08and to get the model let's come here and
6:53:12let's go to homepage
6:53:15and after that click on this models from
6:53:18this navigation bar and here we will
6:53:21search for free.
6:53:23So it will display the free models and
6:53:27here we have the list of free models. So
6:53:29we are going to use this co here. Let's
6:53:31click on this one.
6:53:34So this is cohair north mini code free
6:53:38and uh let's add the model name in our
6:53:43environment variable. I'll copy this
6:53:46one. Come to env file and paste this one
6:53:50that is coher/n
6:53:52north mini
6:53:54code free. So this model has some
6:53:58limitation. You can use 50 API request
6:54:01per day or up to 500 token per day. And
6:54:06if you go for any paid API then you will
6:54:10get the more limit and even that will
6:54:13generate a better response that will
6:54:16generate a better code for your website.
6:54:19So we are using the free model here and
6:54:21after that we have to add the packages
6:54:25to add the AI functionality. So let's
6:54:28open the terminal.
6:54:34We will open the terminal. You can see
6:54:37this is the
6:54:40server terminal where backend server is
6:54:42running. So just add Ctrl C to stop the
6:54:44project. And after that here let's add
6:54:49npm
6:54:54install
6:54:56and write the package name AI. We will
6:54:59use this package for open router API
6:55:01call. Then we will add a space at
6:55:06AI
6:55:08dash SDK
6:55:12/ open AI.
6:55:16So we will use this package for creating
6:55:20AI schema and after that add a space and
6:55:23provide p-map.
6:55:25We will use this p map for mapping the
6:55:29files in database. Then we'll add the
6:55:33next
6:55:35package that is zod.
6:55:39So we will use this zord package to
6:55:43extract the structured data from the AI
6:55:46response. So you can see we have added
6:55:48these packages npm install AI then AI
6:55:52SDK then /open AI then pmap and zord.
6:55:57Press enter. So it will install these
6:56:00packages and after installation we can
6:56:03verify it from the package.json file.
6:56:07Let me open package.json.
6:56:11Here you can see we have these packages
6:56:13pmap zord
6:56:16AI and AI SDK open AI.
6:56:22After adding it let's start our project
6:56:25again. So in this terminal we'll add npm
6:56:28rundev. So it will start our backend
6:56:31server again. You can see the message in
6:56:33the terminal
6:56:35successfully connected to MongoDB and
6:56:38server is running. Now let's hide this
6:56:40terminal and in this one we'll add some
6:56:42assets. So let's come here in the
6:56:46downloaded file that is the downloaded
6:56:48asset. In this one you will find the
6:56:50server. In this server we have services
6:56:53folder. In this services we have four
6:56:55files that is code validator then
6:56:58content normalizer diff and prompts. So
6:57:03just copy this services folder from here
6:57:06and open our project folder. Then go to
6:57:09server and in this server simply paste
6:57:12this services.
6:57:15So we have added the services here in
6:57:18the server project. Now close it and
6:57:21come back to the VS code. So if I open
6:57:24this sidebar here you can see
6:57:28we have the
6:57:31services folder and in this services
6:57:34folder we have four different file. Now
6:57:36we'll create a new file in this services
6:57:38that will be AI.js. So just create a new
6:57:41file that is AI.js
6:57:44JS and in this AI dot js let's add
6:57:48import
6:57:50and provide
6:57:52curly braces from at AI SDK/open
6:57:59AI
6:58:00and from here we will get
6:58:04create open AI
6:58:06correct now let's add the comment here
6:58:08that is open router model client setup
6:58:13for this client line setup.
6:58:16Let's provide
6:58:18the con model equal to and use the model
6:58:22from the environment variable using
6:58:24process.env
6:58:26dot open router model which is here open
6:58:29router model. After that let's add or
6:58:34and provide open router/free.
6:58:39Then we will add
6:58:42max concurrency
6:58:45equal to
6:58:47parse int. In this parse int we will add
6:58:50process dot env
6:58:54and uh let's provide
6:58:57a max concurrency
6:59:00and if it is not available then we will
6:59:03add or
6:59:06six
6:59:07then comma 10.
6:59:11After adding it, let's provide con
6:59:15open router equal to
6:59:20create open AI.
6:59:23In this create open AI, just add the
6:59:26base URL. So the base URL will be https
6:59:31open router.
6:59:33AI/
6:59:35API/v1
6:59:37that is version one. Then we will add
6:59:39the API key. So let's provide the
6:59:43process envi
6:59:46key from the environment variable.
6:59:50Now after that we have to create the
6:59:53model here. So just add con model equal
6:59:56to
6:59:58open router
7:00:01and in this open router provide our
7:00:03model.
7:00:06That's it. Now we will create our
7:00:08function. Using that we can generate the
7:00:11project. So let's add command first.
7:00:15We'll add the command.
7:00:18Generate project files.
7:00:22Then we have added plan first. Then
7:00:25build the files in order with fallback
7:00:29retries. It means first it will generate
7:00:32the plan then it will build the files
7:00:36one by one right. So
7:00:40let's add the function and export the
7:00:43function. So just add export as sync
7:00:45function and write the function name
7:00:48generate project.
7:00:50So it will generate a project and in
7:00:52this project it will plan the files and
7:00:56then generate the files one by one. So
7:00:58let's create that function also that
7:01:00will handle the single file generate. So
7:01:03let's add the comment here that is
7:01:07generate a single files code. So just
7:01:11add a sync function
7:01:14and write the function name generate
7:01:16single file.
7:01:18Now for generating the single file code
7:01:21here we provide the file then all files.
7:01:26After that we will provide the prompt
7:01:29then provide
7:01:31already generated files
7:01:36right and let's come here in this
7:01:38function that is generate project in
7:01:40this generate project we have to provide
7:01:42the prompt and then we'll add the
7:01:45callbacks
7:01:47in this file we have to create one more
7:01:49function that is revise project function
7:01:52right so let's add export
7:01:56async function function and write the
7:01:58function name that is revise project. In
7:02:02this revise project we will get the
7:02:04prompt.
7:02:07After that we'll get the manifest then
7:02:11relevant files
7:02:13and then recent messages.
7:02:17So we have created three functions here
7:02:20and to complete these functions we need
7:02:24some schemas right. So let's create the
7:02:27schema in different file. In this
7:02:29services we will create a new file and
7:02:31write the file name AI schemas.js.
7:02:35In this AI schemas we will use zod. So
7:02:38just add import zed from zod. We will
7:02:41use this zord for creating the schema.
7:02:44And uh let's add
7:02:47export const generation result schema
7:02:52equal to
7:02:54Z dot object. Here we'll add the files
7:02:59and in this files just add Z dot record
7:03:04and then Z dot string then comma again
7:03:09add Z dot string. Next we'll add the
7:03:12description
7:03:15and in this description we'll add Z dot
7:03:18string dot default
7:03:20and in this default provide generated
7:03:24project.
7:03:25So we have added generation result
7:03:27schema.
7:03:29So this generation results will contain
7:03:32files. Now after that we'll create the
7:03:36next schema. So just duplicate this one.
7:03:39In this one we'll add the name that is
7:03:43file operations a schema or file op
7:03:46schema equal to
7:03:48Z
7:03:50dot object and here we'll add the
7:03:53details. So let's add
7:03:56operation optinum.
7:04:02In this one add array that contains
7:04:07create, update and delete.
7:04:10So these are the file operations and
7:04:13after that we'll add the path.
7:04:16So we have added the path here and in
7:04:18this path let's add Z dot a string. Then
7:04:23we'll add content. So in this content
7:04:26provide Z dot a string dot
7:04:30null label dot optional
7:04:34then we will add search and replace.
7:04:40So we have added search and replace. For
7:04:42this one also we have added the same
7:04:44details.
7:04:46Now after that we'll create our next
7:04:49schema. So I'll just copy this paste it
7:04:52here. Here
7:04:55we'll add the name that is revision
7:04:58result schema. In this revision result
7:05:01schema, I'll copy the details from here.
7:05:04Paste it here.
7:05:07Here we will add the operations.
7:05:12It will be Z dot array. And provide the
7:05:16file operations schema which is here.
7:05:20Then let's add the description. It will
7:05:23be Z dot string dotdefault. And here
7:05:26we'll add applied revisions.
7:05:29Now we'll create our next schema. So
7:05:32let's copy this and paste it here. Here
7:05:36we'll add the schema name
7:05:40file plan schemas or schema. So we have
7:05:43added file plan schema z.object and
7:05:46provide the files.
7:05:48So let's add the files property. It will
7:05:51be Z dot array
7:05:53and uh after that we'll add the project
7:05:56name.
7:05:58In the project name we'll add Z dot
7:06:01string dot default and then we'll add
7:06:04the value that will be generated
7:06:07project. After that just duplicate it.
7:06:13It will be project description.
7:06:16It will be Z dot string dot default and
7:06:20the data will be a react project.
7:06:24Correct? Now let's update this one that
7:06:27is files. It will be Z dot array. In
7:06:30this array let's add Z dot
7:06:34object. Now in this one we'll add the
7:06:38path. It will be Z dot string.
7:06:41Then we will add the description. It
7:06:43will be Z dot string.
7:06:46Then exports. In this exports, we'll add
7:06:49Z dot string dot optional dot default
7:06:53empty string. Then we'll add imports. In
7:06:56this imports, just provide Z dot array.
7:07:00It will be Z do.ring dot optional dot
7:07:04default empty array. So we have created
7:07:07the file plan schema. And after that we
7:07:10have to create our last schema that is
7:07:12file code schema. So I'll just copy the
7:07:16simple one. Just copy this and paste it
7:07:18here. Add the schema name file code
7:07:21schema.
7:07:23Then add code.
7:07:26It will be Z dot string.
7:07:30That's it.
7:07:32So we have created all these schemas.
7:07:34Let me show you one by one. Let's fold
7:07:36it. So here we have generation result
7:07:40schema, file operation schema, division
7:07:43result schema, file plan schema and file
7:07:46code schema.
7:07:48After that we can come back to our AI
7:07:51file that is AI.js.
7:07:53Now we'll come to this AI.js file and in
7:07:56this one we'll start creating this
7:07:59generate project function. So in this
7:08:01generate project function let's add the
7:08:04comment that is phase one that is plan.
7:08:08So in the phase one we'll plan the
7:08:10project. So let's add the message in
7:08:13console also we will add console.log log
7:08:16and provide a message in back tick that
7:08:19is AI phase 1 planning file structure
7:08:24for and provide the prompt
7:08:29and in this prompt add the slice.
7:08:33So it will display only 80 character
7:08:36when we add 0 and 80 and uh at the end
7:08:41we'll add this dot. So this message will
7:08:45be added in the console. Now after that
7:08:48let's add const
7:08:51object as plan equal to await and here
7:08:56we will use the generate object
7:09:01and we will get this generate object
7:09:03from AI. Let's scroll up. You can see
7:09:05generate object has been imported from
7:09:07the AI package.
7:09:09Now in this generate object add one
7:09:13object where we will add the model
7:09:18then add schema.
7:09:22In this schema just add file
7:09:26plan schema from the schema file. You
7:09:29can see it is imported from the AI
7:09:31schemas file. So let's add the file name
7:09:34extension also that is js. Now let's
7:09:38come here add the comma after this a
7:09:41schema let's add system in this system
7:09:45property provide the file plan
7:09:49system
7:09:51and let's import it from the file that
7:09:55we have provided in the services that is
7:09:58this prompt let's open it and after that
7:10:02if I start typing this
7:10:06we are getting the suggestions so you
7:10:07can It is imported from the prompts.js.
7:10:11After that, let's add prompt. So, we
7:10:16will add back
7:10:18plan a react website for and provide our
7:10:22given prompt. So, just add prompt. Then
7:10:26we will add the next properties that is
7:10:29max retries. It will be two. Now, we'll
7:10:32add if statement if not of plan.
7:10:38and find. In this find method, add the
7:10:43add a function. We'll get the first file
7:10:48or individual file and then we'll add
7:10:51file dot path
7:10:55equal to / app.js.
7:10:59So in this case, we'll add plan.files
7:11:02files dot
7:11:04unshift
7:11:06and simply add the path. It will be app
7:11:10js using the slash. Then we'll add the
7:11:13description. So the description is main
7:11:16application entry point. Then we'll add
7:11:19exports
7:11:21default app. then imports and in the
7:11:24imports let's provide
7:11:27dot /styles
7:11:30dot CSS.
7:11:32Now we will duplicate this if statement.
7:11:34Just copy and paste it here.
7:11:37So in this second if statement we'll add
7:11:40not of plan dot files dotfind. It will
7:11:44be path equal to
7:11:49/st style dot css. So we have added a
7:11:53styles dot css. Then plan dotfiles dot
7:11:58push
7:12:01and provide path
7:12:04that is styles dot css. Then we'll add
7:12:08the description.
7:12:10So we have added the description that is
7:12:13global CSS Google font import key frame
7:12:16animations utility classes then we'll
7:12:20add exports it will be none and import
7:12:24it will be empty array.
7:12:29Now after that here we'll add if
7:12:33in this if we'll add the callbacks
7:12:38dot on plan
7:12:42then just add await and here use the
7:12:47callback dot on plan and provide the
7:12:51plan. After that we'll add console log
7:12:54here. So just add console do.log log
7:12:58and in this console log
7:13:04just add the back text and provide AI
7:13:07phase 2
7:13:09generating
7:13:11then
7:13:13add the plan dot files.length length
7:13:18that will be total number of files and
7:13:21then we'll add files in parallel
7:13:25concurrency
7:13:27and then we'll add max concurrency.
7:13:32After that just add this parenthesis and
7:13:36colon and provide dollar sign curly
7:13:39braces here. Just add the plan
7:13:44dot files dot map. Get the individual
7:13:49file and uh after that it will return
7:13:54file dot
7:13:56path. Then add dot join and in this join
7:14:01we will add comma and a space. That's
7:14:05it. So we have added this console log
7:14:08and uh after this we will add con files.
7:14:12It will be empty object.
7:14:16Then provide
7:14:18let pending files equal to plan dot
7:14:23files
7:14:25dot map. In this map we will add the
7:14:28individual file and after that add the
7:14:31parenthesis curly braces a spread
7:14:34operator and this file. Now we'll add
7:14:38max retry rounds it will be two. Then
7:14:42we'll add
7:14:44for loop. We'll add let round it will be
7:14:49zero.
7:14:52then round
7:14:55less than equal to
7:14:58max retry rounds. Just copy and paste it
7:15:01here. Then round ++
7:15:05that is round increment and then we'll
7:15:07add
7:15:10if
7:15:12pending files.length is equal to zero
7:15:16then simply add break. After that we'll
7:15:20add if statement. If round is greater
7:15:24than zero in this case we'll add
7:15:27console.log
7:15:28and in this console log we have added AI
7:15:32retry round and provide the round number
7:15:35max retry round for pending files.length
7:15:40then failed files and insert the pending
7:15:42files dom then it will return file.path
7:15:46path dot join using this comma and
7:15:51space.
7:15:52Now after that just come here let's add
7:15:57con results equal to await
7:16:01and here we will use the P map let's
7:16:04import it we are not getting the
7:16:06suggestion so we will import it manually
7:16:09let's scroll up
7:16:11here just add import pmap from p-map we
7:16:18have already added this package now
7:16:20after that scroll
7:16:22Now in this result we'll add await pmap
7:16:27and then let's provide
7:16:31pending files comma
7:16:34asynchronous
7:16:36add a function. Here we'll get the file
7:16:39as parameter and uh after that here
7:16:42we'll add the try catch a statement.
7:16:46Now in this try we'll add if callback
7:16:49dot on file start then just add await
7:16:56callbacks dot on file start
7:17:00then add file
7:17:03dotpath.
7:17:04Now come here after this if statement
7:17:07just add con single result equal to
7:17:11await and now we will use the previous
7:17:14function that we have already declared
7:17:17that is generate single file. In this
7:17:20generate single file we will provide the
7:17:22file
7:17:24then provide the plan dot files then
7:17:28provide prompt and files. Now just add
7:17:33if.
7:17:35In this if we'll add callbacks dot
7:17:38onfile complete.
7:17:41In this case we'll add await callbacks
7:17:45dot onfile complete.
7:17:48Then add the file.path
7:17:51and single file or single result doc
7:17:54code. So here we have a single result
7:17:57then dot code and after that simply add
7:18:00the return
7:18:02in this return we'll add the object with
7:18:05success true and provide the file and
7:18:08then we'll add the result property
7:18:11result property will be single result
7:18:14and come here in the catch block in this
7:18:16catch we'll add the return and provide
7:18:19the object with success false and
7:18:22provide the file and error it will be
7:18:25this error. Now after that here we'll
7:18:28add comma and provide concurrency.
7:18:34It will be max concurrency.
7:18:38Now [snorts] after that here let's add
7:18:40con
7:18:42failed files. It is empty array. Then
7:18:46we'll add for of
7:18:51just add con entry of results.
7:18:55Then provide if entry dot success.
7:19:02In this case, we'll add con path and
7:19:05code equal to the
7:19:09entry dot
7:19:12result. then files path dot starts with
7:19:17slash if it is true then path else
7:19:22forward slash plus path equal to code.
7:19:28Now we'll add the else statement. So
7:19:30just add the else. In this else just add
7:19:34the console dot warn that is the
7:19:36warning. So we have added this warning
7:19:39and after that we'll add the failed
7:19:42files
7:19:44dot push
7:19:46and just add the
7:19:49entry dot file. Now after that here
7:19:53we'll add the pending files equal to
7:19:57failed files. Now after that just add
7:20:00the if statement here. if pending
7:20:04files.length is greater than zero. So in
7:20:07this case let me provide const
7:20:12failed paths equal to pending files
7:20:17dot map
7:20:20and provide the arrow function with a
7:20:24single file. Then it will return the
7:20:26file dot path. After that we'll add dot
7:20:30join. Then add comma and a space. Then
7:20:35we'll add one message in console that is
7:20:37console dot error like this. And after
7:20:41this console just add if statement if
7:20:44pending files
7:20:46dot sum and provide the arrow function
7:20:49with individual file file.path is equal
7:20:52to app dot js.
7:20:55In this case here we'll add con
7:20:57extension ext equal to
7:21:01file dotpath
7:21:03dotsplit
7:21:05and we'll split using dot. Then just add
7:21:10dot pop
7:21:15then dot two lower case.
7:21:21Now after that let's add if
7:21:24extension equal to CSS.
7:21:27In this case just add files
7:21:32file.path equal to backix and insert
7:21:38/ start. Then insert the file
7:21:42description and generation failed.
7:21:46Please retry.
7:21:48After that we'll add the else statement.
7:21:54In this else statement
7:21:56just add the
7:21:59files file.path is equal to and provide
7:22:04the
7:22:07string. So we have added this string and
7:22:10here we'll add the text called import
7:22:13react from react
7:22:16like this. Then we'll add plus. In the
7:22:20next line, we'll add back tick and
7:22:22provide
7:22:25this comment. This file could not be
7:22:29generated. Please retry. Then plus in
7:22:33the next line just add
7:22:36back text
7:22:39and provide purpose.
7:22:42It will be file dot description. Then
7:22:44plus
7:22:46then we will add
7:22:50export default function and
7:22:54it is placeholder.
7:22:57Then we have added this plus.
7:23:00After that we'll add return. Let me add
7:23:03the entire code here. So we have added
7:23:06export default function placeholder
7:23:08return. It will return a div with these
7:23:12classes. Here we have the message
7:23:15component failed to generate please try
7:23:18again.
7:23:20Now after that just come here and we'll
7:23:22add the if statement
7:23:25and provide not of
7:23:29files app dot js. So in this case just
7:23:33add throw new error and the error
7:23:36message is AI did not generate appjs
7:23:40entry point and after that just add the
7:23:43return here. In this return let's
7:23:47provide files and description.
7:23:51In this description we'll add the plan
7:23:54dot project description.
7:23:57Save the changes.
7:23:59Now in this function you can see we are
7:24:01using the generating or generate single
7:24:04file. Let's scroll up. You can see we
7:24:06are using this generate single file. So
7:24:08just complete that function also. So
7:24:10scroll up and we will fold this function
7:24:14and let's complete this generate single
7:24:16file. So in this function just add const
7:24:22system equal to
7:24:26build build file code system and import
7:24:30it from prompts.
7:24:32Then we'll add
7:24:35all files
7:24:37comma and provide already generated
7:24:41files. Then we will add con user message
7:24:45equal to back tick and provide project
7:24:50colon and provide the prompt
7:24:54and uh after this prompt provide write
7:24:58the complete code for and then we'll add
7:25:04the file.path path
7:25:07then
7:25:09add the purpose and it will be file
7:25:12do.escription
7:25:14then we'll add console.log it will be
7:25:19AI creating file and the file.path path.
7:25:23After that just add con object
7:25:28equal to await and here we will use
7:25:31generate object. Just add the generate
7:25:34object
7:25:36and it is already imported from AI
7:25:40package right and in this one provide
7:25:42the model
7:25:44and after the model we'll add the
7:25:46schema.
7:25:48So in this schema just add file
7:25:52code schema
7:25:55then we'll add system
7:25:58then we will add prompt that is the user
7:26:01message
7:26:03and then we'll add the max retries it
7:26:06will be two. After that here we'll add
7:26:08let
7:26:10code equal to
7:26:13normalize content and get this normalize
7:26:16content imported. Let me open this
7:26:19normalize content or content
7:26:22normalizer.js file. Here it is. After
7:26:25that if I start typing
7:26:28you can see we are getting this sgestion
7:26:30to import it. And uh if I scroll up you
7:26:34can see it is imported from the content
7:26:36normalizer.js.
7:26:39Let's come back here. So we have added
7:26:42let code equal to normalize content and
7:26:45simply provide the
7:26:48object dot code.
7:26:52Here we have the object and in this one
7:26:54we have the code. Now after that we'll
7:26:56add if
7:26:59code.trim
7:27:01dotlength is equal to zero.
7:27:04In this case, just add throw new error
7:27:07and provide the message generated code
7:27:10is empty after normalization.
7:27:14Now let's add the comment here that is
7:27:17apply postgeneration validation and
7:27:20autofix.
7:27:22Right? So here we will use the validator
7:27:26code. If I open the services here we
7:27:30have the code validator.js.
7:27:33open this one and then let's add it
7:27:35here. So here just add con validation
7:27:39equal to validate and fix code. Just
7:27:43import it from the file and uh in this
7:27:46one provide the code then we'll add the
7:27:50file dot path. Then provide object with
7:27:56all planned files. It will be
7:27:59all files. Then we'll add code equal to
7:28:03validation
7:28:05dot code.
7:28:08Now we'll add if validation dot warnings
7:28:14do.length is greater than zero.
7:28:17In this case we'll add console log and
7:28:20provide
7:28:22validator code adjustments for and
7:28:26file.path. And then we'll add the
7:28:29warning and
7:28:32join using dash. Now after that let's
7:28:35add another console log here. So just
7:28:38add console.log.
7:28:40And here we have
7:28:42AI created file and file.path and
7:28:46code.length characters. Then we'll add
7:28:49the return statement here. So just add
7:28:51the return and simply provide the object
7:28:55with path. It will be file.path and then
7:28:58we will add the code also. Save the
7:29:01changes. So we have created the
7:29:04functionality to generate our project
7:29:06using AI. Now you can see we have the
7:29:10third function that is revise project.
7:29:12So let's complete this function also. So
7:29:14in this one just add const
7:29:18context parts equal to empty array. Then
7:29:23we'll add context parts dot push and
7:29:27provide the string here.
7:29:31So we have added current project files
7:29:35manifest.
7:29:38Then we'll add context parts dot push.
7:29:42And here we'll add this string. After
7:29:45that we'll add for of in this for of
7:29:48we'll add con file of
7:29:52manifest. It will be context parts dot
7:29:56push
7:29:58and provide back text with dollar sign
7:30:01curly braces file.path path space
7:30:05and let's add parenthesis that contains
7:30:10file has comma file dot size b.
7:30:16Now after that we'll add context parts
7:30:19dot push and provide this a string. Now
7:30:23we'll add the if statement here. In this
7:30:25if just add object dot keys and provide
7:30:30relevant files
7:30:33that we are getting as parameter and
7:30:37then we'll add dot length
7:30:41is greater than zero.
7:30:44So if we have the relevant files in this
7:30:47case we'll add context parts dotpush and
7:30:50provide the file contains for reference.
7:30:55Then we'll add the for. So let's just
7:30:58copy this and add it here. We'll add for
7:31:01of and con path and content
7:31:07of object dot entries and provide
7:31:11relevant files. Then we'll add context
7:31:14parts dot push and provide the
7:31:17back text. In this back we add this n
7:31:21and path. Then we'll add the
7:31:24content. Now after that here we'll add
7:31:27another if statement.
7:31:30In this if statement we'll add recent
7:31:32messages dotlength is greater than zero.
7:31:36We are getting the recent messages here
7:31:38as parameter. So in this case
7:31:43just add these statements copy and paste
7:31:47it here that is context parts dotpush
7:31:50and provide
7:31:55this string and after that we'll add for
7:31:59con msg that is message of recent
7:32:03messages dot slice
7:32:08and provide
7:32:09minus 3. Then we'll add context parts
7:32:12dot push and provide back text with
7:32:16dollar sign curly braces and uh insert
7:32:19the message dot roll and message dot
7:32:24content.
7:32:26Now after that let me close this curly
7:32:29braces here.
7:32:34Now it is correct. Here we'll add
7:32:37context parts dotpush provide back text
7:32:40and provide the message
7:32:43revision requested and add the prompt.
7:32:47Then we'll add console.log and provide
7:32:50the message from AI revising project.
7:32:55Then we'll add const
7:32:58object as
7:33:01row pared equal to
7:33:05await and here again use
7:33:09generate object. Now in this generate
7:33:13object we will add the model. Then we'll
7:33:17add the
7:33:19schema.
7:33:21In this schema just add revision result
7:33:25schema and import it from the schema.js
7:33:29or AI schema.js. Then we'll add the
7:33:32system.
7:33:34In this system we'll add
7:33:39revise system from the prompts dot js.
7:33:43Then we'll add the prompt.
7:33:46In the prompt, we'll add
7:33:49context parts dot
7:33:52join
7:33:54and provide
7:33:56back slash n.
7:33:59Then we'll add
7:34:02max retries
7:34:04it will be two. Now let's add the if
7:34:08statement here. In this if we'll add row
7:34:12passed and
7:34:14array dot is array row passed dot
7:34:20operations.
7:34:21In this case we'll add raw path dot
7:34:24operations equal to raw dot operations
7:34:28dot map. And uh let's add the add
7:34:32function and provide the
7:34:36individual operation. And here we'll add
7:34:39if statement
7:34:41if not of op or
7:34:46type of op not equal to object. Then
7:34:53return and provide the op.
7:34:57After that we'll add let
7:35:00operation a string equal to a string
7:35:06and then we'll add op dot op or empty
7:35:11string then dot
7:35:15trim
7:35:17then dot to lower case. Now we'll add if
7:35:21statement here. If
7:35:25array contains create add new includes
7:35:28operation a string then simply add opt
7:35:34equal to
7:35:36create then we'll add else if and
7:35:40provide this array that update edit
7:35:45modify patch
7:35:48dot includes
7:35:50operation string
7:35:52Then provide op dot op equal to update.
7:36:00Let's move this parenthesis here.
7:36:04Now it is correct. After that let's add
7:36:08another else if. Just copy and paste it
7:36:10here. In this one we have added else if
7:36:15delete remove d or rm dot includes
7:36:21operation string then opt
7:36:24equal to delete. After that
7:36:28just add the if statement.
7:36:30If op.path and type of op.path path is
7:36:35equal to a string and
7:36:40not of op dot path start with forward
7:36:44slash in this case just add the
7:36:48operation dotpath it will be forward
7:36:50slash plus optath
7:36:53now let's come here here we will add if
7:36:57optent
7:37:00then we'll add optent equal to normalize
7:37:04content and provide op.content.
7:37:10Now let's duplicate it. Here we'll add
7:37:12opt.
7:37:15Then add
7:37:18optarch
7:37:19equal to normalize content opt.
7:37:25Let's duplicate it. We'll add op.replace
7:37:31and provide op.replace replace
7:37:34equal to normalize content op dot
7:37:37replace.
7:37:39Now just add the another if statement
7:37:43if opt
7:37:45equal to create and operation dot
7:37:49content. Now in this if statement we'll
7:37:51add con validation equal to
7:37:55validate revision content and import it
7:37:58from the code validator.
7:38:01And after that we'll add operation dot
7:38:04content in the first argument and then
7:38:07provide operation dotpath
7:38:11and then we'll add comma create. Then
7:38:15we'll add operation dot content equal to
7:38:18validation dot content. Again we'll add
7:38:22the if. Let's add validation dot
7:38:26wararning.length is greater than zero.
7:38:30In this case just add console log. So we
7:38:33have added this console log and uh after
7:38:37that we'll add else if
7:38:45and this else if we'll add operation dot
7:38:47operation
7:38:49equal to update.
7:38:54Let me remove it from here and we will
7:38:57add it here. For this if we'll add the
7:38:59else if
7:39:03here we have equal to create and here we
7:39:06have equal to update and operation dot
7:39:10replace. So in this case just add con
7:39:14validation. So just copy this one paste
7:39:17it here.
7:39:19validation equal to validation revision
7:39:22content operation dotreplace
7:39:27dot operation dot
7:39:31path and here we'll add update.
7:39:35Now after that just add operation
7:39:38dotreplace equal to
7:39:40validation dotcontent.
7:39:43Then we'll add if
7:39:47validation dot warning.length is greater
7:39:50than zero
7:39:52in this case simply add one console log.
7:39:56So we have added this console log here.
7:40:00That's it. And after that here simply
7:40:03add the return and return this
7:40:05operation.
7:40:07And at the end here we'll add
7:40:11return and provide
7:40:14raw pasted. Save the changes. So we have
7:40:18completed the function that is
7:40:24device project.
7:40:26Now let's use this generate project
7:40:29function in our project controller. So
7:40:31let's open the controllers. Then we have
7:40:34the project controller. Now in this
7:40:37project controller
7:40:39we have the run background generation.
7:40:42So in this run background generation
7:40:44just add the try catch. Now in this try
7:40:47block first we'll add the console log.
7:40:50So we have added this console log that
7:40:53is background AI a starting generation
7:40:57for project and the project ID. Then we
7:41:00will add the con
7:41:03result equal to await and use that
7:41:06function that is generate project and
7:41:09get this project from the
7:41:12services folder and AI.js file. Let's
7:41:15scroll up. You can see it is imported
7:41:17from the services/ AI.js. Now after that
7:41:21here we'll add
7:41:24the argument that will be prompt. Then
7:41:27we'll add the
7:41:29object. In this object we'll add on
7:41:32plan.
7:41:35It will be asynchronous add function
7:41:38with the plan in the parameter.
7:41:41Now here we'll add the console log
7:41:43again. So we have added this console log
7:41:45and provide the con
7:41:48file list equal to plan
7:41:52dot
7:41:54files
7:41:56dot map. In this map add the arrow
7:41:59function get the individual file. Here
7:42:03we will add the
7:42:06back tick.
7:42:08In this back tix we'll add dash back
7:42:12slash
7:42:13file.path
7:42:15then colon file dot description
7:42:18and after that we'll add dot join
7:42:22and in this join add back slash n. Now
7:42:26we'll add await project model dot find
7:42:31by id and update
7:42:36and provide the project id to find the
7:42:41project and then we'll add the object
7:42:43that will update the data. So just add
7:42:45the name property. In this name property
7:42:47add plan dot project name or generated
7:42:51project. Then we'll add the status. It
7:42:54will be generating. Then we'll add files
7:42:58planned. It will be plan dotfiles. Then
7:43:01we'll add dollar push
7:43:05object. And uh in this object just add
7:43:11the messages.
7:43:14So just add the messages. It will be ro
7:43:17assistant. Then add the content. So in
7:43:21the content let's provide planned
7:43:23website structure and then file list.
7:43:27Then we'll add the time stamp. It will
7:43:29be new date. Now after that let's come
7:43:33here. Here we'll add on file start. It
7:43:38will be asynchronous add function with
7:43:42the path in the parameter. Here also
7:43:44we'll add the console log.
7:43:47Let's add it here. And after this
7:43:49console log, we'll add await and simply
7:43:52use the
7:43:54project model
7:43:56dot find by ID and update.
7:44:01In this one, we'll add the project ID,
7:44:04comma, and provide one object where just
7:44:09add the current file. It will be path.
7:44:13Now after that let's add the comma here
7:44:17and provide
7:44:18on file complete. It is also
7:44:22asynchronous add function. Here we'll
7:44:24get the path and code. Here we have on
7:44:27plan. After this on plan we have on file
7:44:30start and then on file complete. Now in
7:44:33this on file complete again we'll add
7:44:36one message in console. So just add
7:44:38console.log log and then we'll add con
7:44:42project equal to await and use the
7:44:45project model dot find by id and provide
7:44:51the project id. Now after that let's add
7:44:54if
7:44:56project if the project is available in
7:44:59this case just add project dotfiles
7:45:03equal to the project dotfiles or empty
7:45:08object then we'll add project dot files
7:45:11path equal to
7:45:14object that contains content it will be
7:45:18code then hash has content
7:45:23Then we'll add the project dot files
7:45:27generated
7:45:28equal to
7:45:30array with a spread operator and provide
7:45:35project dot files generated or empty
7:45:40array
7:45:41then comma path. After that we'll add
7:45:44project dot messages dotpush. So just
7:45:48add the role assistant content and
7:45:50timestamp. So in the content we have
7:45:53added created file and the path.
7:45:57Now after that here we'll add the
7:45:59project dot current file it will be null
7:46:03and then project dot mark modified and
7:46:07provide files. Then we'll add await and
7:46:12project
7:46:14dot save. So it will save the changes in
7:46:18the database. Now after that here we'll
7:46:22add console.log
7:46:25that is background AI successfully
7:46:27generated project and the project id.
7:46:30Now let's add con project equal to await
7:46:34and provide the project model dotfind by
7:46:36id and provide the project ID. Then
7:46:40we'll add the if statement if project is
7:46:42available. Then provide project dot a
7:46:46status it will be completed. Then add
7:46:49the project dot version. It will be one.
7:46:53Then we'll add the if
7:46:56result dot description.
7:47:00In this case just add the project name
7:47:03and equal to result dot description.
7:47:08Then we'll add project
7:47:10dot messages dotpush. Here we'll add ro
7:47:14assistant and content and time stamp. So
7:47:18in the content we have added website
7:47:20generation complete. You can view and
7:47:22edit the files.
7:47:25After that let's add a weight and
7:47:28provide the project dot save to save the
7:47:33data in database.
7:47:35Now let's come here in the catch block.
7:47:37In this catch block we'll add the error
7:47:40and then we'll add the console.
7:47:44Now we'll add await
7:47:47and provide the
7:47:49project dot find by id and update. Here
7:47:55we'll provide the project id
7:47:58then comma and provide one object. Here
7:48:01in this object we'll add the status
7:48:03failed and the error will be error dot
7:48:06message. And then we'll add the dollar
7:48:09push and provide one object. And here
7:48:13just add the messages.
7:48:16In this messages, let's add the role
7:48:19assistant. And then we'll add the
7:48:20content and time stamp. And the content
7:48:23is generation failed and the error dot
7:48:25message.
7:48:27That's it. So we have completed our
7:48:30function that is run background
7:48:32generation. Now we can generate the
7:48:35content in the background when we enter
7:48:37the prompt. Now after that we have to
7:48:41add the functionality for the chat. It
7:48:44means we can enter the prompt in the
7:48:46chat to revise the website or again edit
7:48:49the website. For that we'll create a
7:48:52separate file. Now let's create the
7:48:56chat controller for creating the chat
7:48:58APIs. Using that we will update our
7:49:01generated project. So just open the
7:49:04controllers folder. In this one create a
7:49:06new file and write the file name
7:49:08chatcontroller.js.
7:49:13In this one
7:49:15we have to create a controller function.
7:49:19So first let me add the
7:49:23method type. it will be post and the
7:49:25path will be / API/ project/ colon id
7:49:28and chat. Then we'll add one another
7:49:32command that is send a revision prompt
7:49:36and return updated project. So let's
7:49:40create and export the function here. So
7:49:43just add export a sync function called
7:49:46chat.
7:49:48Here we'll get the request
7:49:52and response.
7:49:56Then we'll add const and we'll get the
7:49:59prompt from the request body. So just
7:50:01add the request dot body
7:50:04and here we will get the prompt. Now
7:50:07we'll check the prompt is available or
7:50:10not. So just add if
7:50:12not of prompt or type of prompt
7:50:18is not equal to
7:50:21string.
7:50:23In this case simply add response dot a
7:50:26status 400 and we'll add the error
7:50:28message that is prompt is required and
7:50:31returned. Now we will check the user is
7:50:34authenticated or not. So let's copy this
7:50:37paste it here. I'll provide if not of
7:50:43request dot user property in this case
7:50:47we'll add a status 4.1 then JSON with
7:50:52the error message that is unauthorized
7:50:55and add return now suppose the prompt is
7:50:58available then the user is authenticated
7:51:03after that we have to find the project
7:51:06so just add con project equal to await
7:51:08it and then add the
7:51:11project model. Just click here to import
7:51:13it. You can see project model is
7:51:16imported from the models folder. Project
7:51:19file just add the file name
7:51:21extension.js.
7:51:23Now here just add dot find one.
7:51:27In this one let's add the underscore id.
7:51:32It will be request.params
7:51:35do ID. Then we'll add the owner
7:51:38property.
7:51:40In the owner property, just add the
7:51:42request
7:51:44dot user dot user ID. So it will find
7:51:50the project. Now just add if statement
7:51:52if not of project. Suppose we could not
7:51:55find any project. In this case, just add
7:51:58response. status 4.4 and the error
7:52:01message is project not found and return.
7:52:05Now let's add one comment here. Suppose
7:52:08the project is available then we'll add
7:52:10comment set a status to revising and
7:52:13save user prompt immediately. So just
7:52:16add the project dot status
7:52:21equal to
7:52:24revising. Then we will add project dot
7:52:27messages dot push. And here we'll add
7:52:30the object with ro user. And then we'll
7:52:34add the content. And the content will be
7:52:36our prompt. Then we'll add the time
7:52:38stamp. It will be new date.
7:52:42After that save the changes in database.
7:52:45So just add await
7:52:48project dots save. Next we'll add the
7:52:52try catch a statement here. So let's add
7:52:54the try catch. In this try block just
7:52:58add one comment that is
7:53:01build compact manifest that contains
7:53:05path hash size instead of sending all
7:53:08code. So we have to create a function
7:53:10for building the manifest. So just
7:53:12scroll up and here we will create that
7:53:15function. So just add export function
7:53:20and function name is build manifest
7:53:24and here we provide all files. So just
7:53:27add the
7:53:29files.
7:53:31Now in this one let's add con manifest
7:53:36equal to empty array. Then for of in
7:53:39this for off we'll add the array with
7:53:44path and entry. Then we'll add object
7:53:48dot entries and files. Then just use the
7:53:53manifest dot
7:53:56push
7:53:59and provide the object with path. Then
7:54:02we will add hash. It will be entry.ash.
7:54:07After that provide size.
7:54:13It will be entry
7:54:17dot content.length
7:54:21and then return this manifest. So just
7:54:23add return manifest
7:54:27and let's use this function here
7:54:33in this try block. So in this try block
7:54:36let's provide
7:54:38con
7:54:43manifest equal to build manifest and
7:54:47provide the project
7:54:50dot files.
7:54:54After that let's add another comment
7:54:57that is include all files
7:55:01contents so that AI can do accurate
7:55:05search and replace. So just add con
7:55:09relevant files it will be object.
7:55:13Then we'll add for of
7:55:17and let's add path and entry
7:55:22of of object dot entries
7:55:25and provide the project dot files. In
7:55:29this one provide relevant files path
7:55:32equal to entry dot content.
7:55:37Now after that again add the comment
7:55:40that is recent messages for content that
7:55:43is last for maximum. So here we'll add
7:55:46const recent messages equal to
7:55:51project dot
7:55:54messages
7:55:55dot slice and provide minus4.
7:56:00Then we will add dot map. Add the arrow
7:56:04function here in this map and get the
7:56:06individual message.
7:56:10And after that just add the parenthesis
7:56:13and object that contains the role. Ro
7:56:17will be message roll or m dot roll. Then
7:56:21we'll add content. It will be m dot
7:56:24content.
7:56:27Now after that we have to add one
7:56:29console log. So I have simply added this
7:56:32console log here and then we'll add one
7:56:36comment that is call AI with manifest
7:56:38plus relevant files.
7:56:42So just add const result equal to await
7:56:48and here we will add a function that we
7:56:50have added in the AI.js file that is
7:56:52revise project. Import it. You can see
7:56:56here the device project is imported from
7:56:59the services/ AI then js.
7:57:04Now let's come here and uh in this one
7:57:08we will provide our prompt then provide
7:57:11manifest.
7:57:13After that provide the relevant files
7:57:15and uh recent messages
7:57:20and here we'll get the result. Let's add
7:57:22the console log here.
7:57:25So we will add console.log
7:57:28that is AI got result operations.length
7:57:34and operations result dot description
7:57:37and after that just add one comment
7:57:39apply operations to file map.
7:57:44So just add const files
7:57:48updated files applied error equal to
7:57:51apply
7:57:53operations. Let's
7:57:56import it. So just open the sidebar.
7:58:00Here we have services and div.
7:58:03So let's open it. And now we'll get the
7:58:05suggestion. So now if I type
7:58:09apply operations, we are getting the
7:58:11suggestion to import it. So let's import
7:58:13it and scroll up. You can see it is
7:58:15imported from the services/diff.js.
7:58:19Now let's complete this. So in this one
7:58:24provide some arguments that will be
7:58:26project dotfiles,
7:58:30result dot operations. Next we'll add
7:58:33the if statement if errors do.length
7:58:37greater than zero. In this case, just
7:58:39add the console. That is the warning.
7:58:43And uh if there's no error in this case,
7:58:48we'll add update project in database.
7:58:51For that, just add the project dot
7:58:54files. It will be updated files. Then
7:58:57add project dot mark modified. Let's add
7:59:03files. Then add project dot version. It
7:59:07will be plus equal to 1. Then project
7:59:11dot a status it will be completed. Then
7:59:15project dot
7:59:17messages dot push
7:59:20and add one object. Where we'll add the
7:59:23role. It will be assistant.
7:59:27Then we will add the content. In the
7:59:30content we will add result.escription
7:59:34plus
7:59:35error.length length is greater than
7:59:37zero. Then we'll add some operations
7:59:39field. Else we'll add the empty string
7:59:44and after that we'll add a weight and
7:59:47provide the project
7:59:50dot save. Now let's come here in the
7:59:54catch block. But before that here in
7:59:55this try block only we will add one
7:59:58comment that is return updated project.
8:00:02For that just add const
8:00:05files object will be empty object and
8:00:07provide the for of. So in this for off
8:00:10we have added the const path entry of
8:00:14object dot entries project dotfiles and
8:00:18files object path it will be entry dot
8:00:21content and then we'll add response
8:00:23here. So just add response dot
8:00:26JSON and add the object. So in this
8:00:29object we'll add underscore id. It will
8:00:31be project dot id. Then name it will be
8:00:35project dotname. Description will be
8:00:37project dot description.
8:00:41Then let's add the files. It will be
8:00:45files object. After that we have to add
8:00:48the messages. It will be project dot
8:00:51messages. Then add the version a status
8:00:55applied and uh errors. Then we'll add
8:00:59the AI description. And here just add
8:01:01result dot description. Now come here in
8:01:04the catch block here we'll get the error
8:01:08and then add the console dot error.
8:01:11After that we'll add project dot a
8:01:13status and we'll mark the status
8:01:16completed. Then let's add await project
8:01:19dots save. Then add response dot a
8:01:22status it will be 500 and provide the
8:01:25error message that is error dot message
8:01:28or failed to process revision request.
8:01:31That's it. So we have completed this
8:01:34chat controller and after that we have
8:01:36to create the route for this chat
8:01:38feature. For that let's open the sidebar
8:01:41and in the routes we have the project
8:01:43routes. So just open it and here
8:01:47before this export project router let's
8:01:50add the command that is chat and for
8:01:54this chat we'll use the project router
8:01:57and uh dot post method in this one add
8:02:02the endpoint that will be /
8:02:06id then / chat and then we'll add the
8:02:11function that is chat. Let's import it.
8:02:13So you can see the chat function is
8:02:15imported from the controllers
8:02:17chatcontroller.js.
8:02:18Save the changes. So now we have
8:02:21completed all our APIs.
8:02:26So we have completed the backend server.
8:02:29Let me commit these changes on GitHub
8:02:31and we will review our code using code
8:02:33rabbit. So just click here and add one
8:02:37commit message.
8:02:42Backend server completed. Commit changes
8:02:45and sync.
8:02:48After that, let me open the web browser
8:02:51and we will open the GitHub repo. Here
8:02:54we have this button compare and pull
8:02:56request.
8:03:00Then click here create pull request. And
8:03:03once we create the pull request, the
8:03:05code rabbit will start analyzing our
8:03:08code.
8:03:10Now you can see the code rabbit is
8:03:12running and it is analyzing our code.
8:03:16Now you can see the code rabbit has
8:03:18reviewed our code and here we have the
8:03:20review summary and after that you can
8:03:21see the code rabbit is suggesting some
8:03:25changes for different code files. So you
8:03:28can see so we have to update the project
8:03:31controller js file. In this one we have
8:03:33one critical issue and here it is
8:03:35suggesting to remove this statement. It
8:03:39means we have to remove this if
8:03:41statement and directly provide this
8:03:43files object path entry content. So let
8:03:46me update it in our code file. And you
8:03:49can see the file name project
8:03:51controller.js and line number 245 to
8:03:55250. So just come back here
8:03:59and open
8:04:01controller project controller and then
8:04:04come to the
8:04:06245.
8:04:08So here you can see we have the if
8:04:11statement. So we have to remove this if
8:04:13statement and directly provide this
8:04:16files object path entry content. Save
8:04:19the changes and let's see the next
8:04:21suggestion. So scroll down and see the
8:04:24suggestion
8:04:26for the next file. So here we have the
8:04:29suggestion in package.json. So we can
8:04:31skip this one. It is minor. And after
8:04:34that you can see here we have the major
8:04:36issue in project router or project
8:04:40routes.js. So in this one we have missed
8:04:43this forward slash. So just come back to
8:04:46the VS code then open the routes project
8:04:50routes.js JS and you can see here we
8:04:52have the project router.get and here we
8:04:55have to add the slash just update this
8:04:57one and save the changes. Now we'll come
8:05:00back here and see the next suggestion or
8:05:03work fix. So here we have the AI.js
8:05:06file. In this one we have the critical
8:05:08issue. So it is suggesting this fix. So
8:05:12we have to correct this spelling for
8:05:14validation.
8:05:16Let's come to AI.js js file and open the
8:05:20line number
8:05:22235.
8:05:24So just open services AI.js and 235.
8:05:30Let's update it. It will be validation
8:05:33dotwnings.length.
8:05:36It is correct. And uh after updating it,
8:05:39let's scroll down. You can see we have
8:05:42some
8:05:44major issue in the AI schema. So in this
8:05:47one we have the unused file import.
8:05:52So just come back to the VS code and
8:05:55open the AI schema and in this one you
8:05:58can see we have this file. So let's
8:06:00remove it.
8:06:02Save the changes and after that let's
8:06:05see the next iso. So here we have the
8:06:08content normalizer.js and uh here it is
8:06:11suggesting some fix. So we have to
8:06:13remove these three lines and add this
8:06:15one. So I'll just copy it
8:06:21and open our
8:06:24content normalizer js file and come to
8:06:26line 27.
8:06:28Here you can see we have these commands
8:06:30and code. Right? Let's verify it again.
8:06:34So we have to replace all these three
8:06:35lines and add the new code. So we have
8:06:38updated it. Let me just come back here.
8:06:42We are getting some warning in this
8:06:43content. Let me revert the code.
8:06:46So we have to remove this code and add
8:06:50the code from here. So let me just
8:06:52update this last statement. We will
8:06:55leave the comment as it is. So in this
8:06:57one you can see here we have this
8:06:58expression. Just copy it
8:07:02and update it here inside this replace.
8:07:08Now save the changes.
8:07:10Let's remove this extra parenthesis.
8:07:13save the changes. So we have updated
8:07:15this code also. Now scroll down and see
8:07:17the next critical issue in this div.js.
8:07:22So here we have to
8:07:25update the code. We have to add the
8:07:28import statement import crypto. So just
8:07:31copy this one and open the
8:07:35div.js. And here at line one we will add
8:07:40import crypto from
8:07:43crypto package. Save the changes. And
8:07:46after that you can see we have some
8:07:48suggestion
8:07:52in this diff only. Here it is suggesting
8:07:56to replace this
8:07:59code in this line.
8:08:02So just copy this one.
8:08:06and come to
8:08:10diff. Scroll down and here we have this
8:08:14code. Let me verify it. It is in 75
8:08:2078.
8:08:21Right? So here we have the line number
8:08:2378.
8:08:27Let me replace this one.
8:08:32Save the changes. Now after that you can
8:08:36see we don't have any other suggestions.
8:08:38So we have updated our code based on the
8:08:41code rabbit suggestion for bug fix.
8:08:44After that let me merge these changes in
8:08:46the main branch. So just add merge pull
8:08:48request.
8:08:50Confirm merge
8:08:54and uh let me just come back here
8:08:58then click here and click pull. So it
8:09:02will pull the latest changes. So we have
8:09:04completed the front end and backend
8:09:08server. Now we will integrate these
8:09:09backend APIs with our front end. So let
8:09:13me close all these files. So right click
8:09:15here and select close saved and we will
8:09:18fold this one also. So here you can see
8:09:20we have the client and server.
8:09:23To connect our backend APIs with client
8:09:25just open the sidebar and then come to
8:09:28client repository. In this one you can
8:09:30see we have the API folder and here we
8:09:32have API.js and in this one we have
8:09:34added the dummy data that is dummy user.
8:09:37Just remove this dummy user. After that
8:09:39you can see we have the initial
8:09:41projects. Let's remove this initial
8:09:44projects. Then we have this API
8:09:47dodefaults dot adapter. So we will
8:09:50remove this one also. So now the API
8:09:54file is cleared. Here we only have the
8:09:57axios and we have created the instance
8:09:59of axios called API and provided the
8:10:02base URL and this is the vat base URL.
8:10:06So we have to update the base URL in our
8:10:08environment variable. So just openv file
8:10:11from the client. So currently we don't
8:10:16have the env file in this client. So let
8:10:20me create that.
8:10:22In this client, we'll add new file with
8:10:25the name env. And here we will add in
8:10:30the environment variable with the name
8:10:32vase URL.
8:10:36And in this one we will add our backend
8:10:39server URL. So you can see the backend
8:10:41server is running at localhost 3000. So
8:10:45just add it here. Remove this forward
8:10:47slash from the end. So it is http
8:10:49localhost 3000. save the changes and
8:10:52after that let me open our web page.
8:10:57So now you can see if I open the web
8:11:00page it is asking to sign in or sign up
8:11:04because we are not authenticated. So
8:11:07whenever we try to open our homepage it
8:11:10will redirect us to the login page and
8:11:13if we don't have any account we can go
8:11:15to create an account. So here we have to
8:11:18create an account. So let me add the
8:11:20name
8:11:26greatest tag. Then we'll add one email
8:11:29id. So let's add the
8:11:31greatest [email protected]. And here we'll
8:11:34add the password
8:11:38then sign up.
8:11:40After sign up we can see our homepage.
8:11:43And on this homepage you can see we
8:11:45don't have any previous project. So we
8:11:47can create a new project. Here for that
8:11:49here we have to add a prompt. So here we
8:11:52will add a prompt. Using that we can
8:11:54create a new website.
8:11:59Let's add the prompt. Create a portfolio
8:12:02website for a web developer. And after
8:12:05that we'll click on this send icon.
8:12:08So after adding the prompt it will open
8:12:11the project builder page. At the top you
8:12:14can see we have this path builder/
8:12:17project id and in the left side you can
8:12:19see we have the chat. So in this chat we
8:12:22have our prompt and after that you can
8:12:24see the AI response that is planning
8:12:27project structure
8:12:29and in the main content area you can see
8:12:33planning architecture and betting
8:12:35production ready react code base and we
8:12:39have the loading animation. So we have
8:12:41to wait for few minutes to generate our
8:12:45website.
8:12:47After few minutes you can see here we
8:12:49have the another response in the left
8:12:52sidebar which is the chat area and here
8:12:55we have the message AI agent is building
8:12:58and here you can see the progress.
8:13:00Here we have the list of files that is
8:13:03total number of files is nine and it is
8:13:05creating the first one that is app.js
8:13:08and the first one has been created now.
8:13:10And here we have the list of files that
8:13:13is the
8:13:15file and folder structure. And in the
8:13:18left side if I click on this files here
8:13:20you can see we only have the app do.js
8:13:23because only app do.js is created for
8:13:26now and it is creating the other files
8:13:28one by one. So we have to wait for few
8:13:30minutes.
8:13:35Now you can see our project has been
8:13:37generated. Here we have the beautiful
8:13:38portfolio created using AI. Let me
8:13:41scroll it. You can see it is a single
8:13:44page website where we have the features
8:13:48then testimonial. Here we have the
8:13:51contact section and we have the footer
8:13:53also right and after that let's go to
8:13:58code. So it will display the code also.
8:14:00We can manually edit this code and it
8:14:02will be autosaved in our database. If I
8:14:05go to left side in the files here you
8:14:07can see the entire file structure and
8:14:09folders. So here we have the app and
8:14:11then components. In the components we
8:14:13have these files like contact features
8:14:16footer header hero and
8:14:20projects and testimonials. Let me open
8:14:23the hero.js. In this hero.js you can see
8:14:27we have the text. So let me update this
8:14:32text. Here we have the name. Hi, I am
8:14:34Alex. So, let me change it. Hi, I am
8:14:41Avin. And uh after that you can see it
8:14:44is updating the content on our website
8:14:48and we can see the live preview also.
8:14:51Let's click on this open preview. So, it
8:14:54will open a new tab and you can see the
8:14:56full screen preview. So, right now it is
8:14:59a private project only. You can see this
8:15:01right and if I make it public let's
8:15:03click on this publish and now it is a
8:15:07public project and anyone can see this
8:15:09project using this link. Let me open
8:15:12this link in new tab. So this is the
8:15:14live link and it is publish project. So
8:15:17anyone can see this project without
8:15:19authentication.
8:15:20Now after that let's see the next button
8:15:23that is export. So we can click here to
8:15:26export this entire code. So you can see
8:15:28we will get a zip file that contains all
8:15:31the code files. So we have created our
8:15:34portfolio website using the AI prompt
8:15:37and let's come here in the chat and if
8:15:39you want to modify anything using the AI
8:15:42then you can enter the prompt in this
8:15:45text area. Enter the prompt like I want
8:15:47to update the contact I want to update
8:15:50the footer right and it will update the
8:15:53particular section only. So we have
8:15:55completed our project that is AI website
8:15:58builder. I hope this video will be
8:16:00helpful for you. If you have any
8:16:02question you can ask me in the comment
8:16:04section. Please like and share this
8:16:06video and also subscribe my channel
8:16:08great tag to watch more videos like this
8:16:10one. Thank you so much for watching this
8:16:12video.

About this transcript

This page contains the full transcript of Build a Full Stack AI Website Builder with MERN Stack | Complete AI SaaS Project Step by Step by GreatStack, generated from the public captions YouTube serves with the video. The transcript has 60,068 words across 9,689 segments, with the original timestamps preserved so you can click any line to jump to that moment in the embedded player.

What you can do with it

Use the transcript to take notes, quote the speaker, build a study guide, generate a summary with ChatGPT or Claude via the YouTube Summary tool, or export it as a timed subtitle file with YouTube to SRT. You can also re-open it in the transcriber to choose a caption track available on the video.

Free YouTube transcript tool

YouTube2Text is a free YouTube transcript generator — no signup, no daily limit. Paste any YouTube link and get the full transcript instantly, with timestamps, click-to-jump, caption language selection, AI prompts for ChatGPT, Claude, and Gemini, and exports to TXT, SRT, VTT, or Markdown.