PearAI’s Post

Transcript

All right, so we're going to use the period landing page as an example. So in the documentation page right now there's nothing. It's 404 and we're just going to prompt it directly. I'm going to say I'm new to this. Next year as code base, I want to create a new documentation page. How can I do that? We're going to use code based context here because we want to have the knowledge of the best practices. We're already using the code base and the other files and the context. So it says to create a new directory in the app folder called documentation and make a file inside called page dot TSX. So we're going to do that. And then it says. Uses basic structure to start off with. And you see there there's a button called alley and it just applies the code directly into the file. And then it says to create a new component into this components folder. So we're going to go find it and create a new file called documentation dot TSX. So this is going to be the actual component and we're just going to prompt it directly by using command I, which is inline code generation. And we're going to say to use that previous file but also create the actual UI for it by having some buttons on the left side. And the text on the right side and then it generates it. I'm just going to wait for this to finish and press command shift enter to accept the changes. And let's go see. OK, so there's nothing here. I've missed the actual component in the previous file. So I'm just going to bring this to the chat panel again. We've command plus L and set to import it. And I'm going to click apply here again. And it knows exactly which line to change or to add or delete. And now I'm going to save it. And there we have it. Amazing the basic structure, but it still doesn't look the best, right? Let's ask it to make this look better. And that's literally what I'm going to ask. And I'm going to wait for this to finish generating. And again, I'm going to click the apply button. We don't have to write a single line of code. And it's also going to show you the diffs, right? So you can really choose what you want to keep and see the differences. I'm just going to press command shift enter to accept everything and save it here. And let's go back. There you go. Watch, this is so much better, so much better. And there we have it. We have a great foundation to start our documentation page without writing a single line of code, without having to know much about next years React or this code base. Amazing.