Transcript
Ah, for the viable weather for Vibe Coding. Hello, friends. Now, if you don't yet use AI in your code editor, I really recommend that you should. It'll definitely be much more productive. Previously, I used to use GitHub copilot first, uh, the Autocomplete feature than when it be the chat feature. And now I'll move to Cursor. I paid for the subscription and I've never been happier. So in this episode, we're going to try to use, uh, cursor and do some vibe coding to add a feature to an existing application. Specifically here have this, uh, money Gun Material Multitenancy boiler plate. Uh, you can, uh, see it here on GitHub and they're going to try to add dark mode with only adding prompts and not writing any actual code ourselves. So first of all, I have installed Cursor locally on my computer. I have, uh, pulled my, uh, repository and, uh, I have it open now, just double check. I will go to the cursor settings. So settings, cursor settings, uh, features. And as I've just, uh, imported this repository, I will double check that it has been indexed. So, going to the features, um, here, you see the code base has been indexed, the still syn in. Let's re-index it. Okay. It has been indexed. Uh, now I'm going to have a look. So, okay, I, oh, close it. Let's open it on scan. Um, okay, so here is my, uh, application. Let's, uh, run the server bin slash dev. And you see at the moment, it just has a light mode, no dark mode. If I open appearance, um, I see light mode. And dark mode is usually different in the browser, but the same inside my application. And, uh, many people, especially me in the evenings, I really prefer looking at dark mode and not having a very, very bright screen. So, uh, let's try adding the dark mode. Uh, first of all, I'm going to open a new chat. Now, uh, you can open it, uh, by open the command line and search for new chat, or you can use the command shift, uh, uh, uh, search and uh, search for new chat. And here I'm, uh, going to add some context. I'm going to use the agent, uh, model, not ask, not edit agent is the one that is going to itself. Add all the changes in the files. And um, I can use the model that is auto. But, uh, uh, each model can provide further results. So you can experiment with all of them. Now I'm going to do some front changes. So let's go to application html. Application HTML here has application HTML. And uh, I'm adding this file to the context. I will also add the, uh, sidebar navbar footer. Um, I have some more sidebar related files. Okay. And, uh, uh, this CSS file. So application, uh, Devin, c, s, s, and, uh, uh, the better the prompt you give, uh, the more context you give, the better the result is, uh, likely to be and the fewer iterations you'll need to make. So I'll make a prompt, uh, add the dark mode to this application. Um, take inspiration from linear. Um, the changes should be minimal. Um, use only in line television CS uh, update the buttons. So I have some buttons defined in application CSS here. Then, uh, I can say that I'm using TNT four. And TNT four is configured in application CSS, not application tel js. Um, and I can also say that I don't want to add a toggle button to toggle light and dark mode. I want to do it only based, uh, on the, uh, browser's preferred color scheme. Uh, okay, so here's more or less a prompt. Let's, uh, send, and let's give it some time to generate a result. So it's going to have a look at the all the files. It's going to edit the files, uh, one by one. And, uh, in the meantime, while it is generated the code, you can already start reviewing the changes. So here you see it's trying to add dock mode by default in the whole application. So if you set dark in htm me, then it's going to use exclusively dark mode. This is actually a change I would, uh, reject 'cause I want to use the, uh, settings set here. Then, uh, here you see it sets a default background white. And if the dark is background gray, it shows background gray, uh, on its own. Let's, uh, accept the file for now. Go to the next file. Uh, so it's updated in the N bar and so on. You see, uh, the idea kind of with vibe coding is that, uh, you don't, uh, you don't even have to review the changes. Uh, you kind of trust, uh, the chat and you click around application and, uh, uh, you tell the chat what you don't like. And it would be, uh, just updating everything based on the what you like and what you don't like. So I'm not really going to, uh, review each of the files. I will just click on accept. All right. Here, let's, uh, just refresh that page and see if it works. Okay, uh, going to doc mode. And you see part of the application has been set to dock mode. If I toggle the sidebar, you see the other sidebar has been, uh, made to work in the dock mode. Just one of them, not the other sidebar, because I have different sidebar layouts here. So I will say I add the dock mode two, uh, vault that files side by the two columns. I will jug the name of the file here and, uh, also the navigation links. Yeah, they look fine here. Uh, yeah, some of them are style differently, but that's fine. Let's, uh, updated. So see, I'm not even, uh, kind of activating my brain and thinking about the code. I'm working more as a project, uh, as a product designer telling what the specifications I want, saying what I like and what I don't like. And code kind of just generates itself. So let's, uh, see the result. And yes, it looks, uh, not that bad. There are still some tweak that we can make, uh, like, uh, the backgrounds, uh, the backgrounds of the buttons here, but it's already a wonderful leap forward. And looking at the GI changes, you see there are not so many changes that have been, uh, applied and uh, it was quite fast to add dark mode. So I encourage you to try, uh, this approach to adding features to your application before doing something yourself. You can try to let the AI do it and then review the I AI changes and work incrementally on top of it.
0