Here's My Lovable + Cursor AI Coding Workflow (Nothing Beats This!)

0:00 all right so today in this video I'm 0:02 going to walk you through my cursor Ai 0:04 and lavable workflow that I follow to 0:06 create all my MVPs or landing pages or 0:09 even web applications so the idea here 0:11 is that you use both lovable dodev and 0:13 cursor AI to work on the exact same 0:16 project and yes that is something that 0:17 you can actually do so basically in L.D 0:20 we have a feature called as GitHub 2 0:22 Wasing so how it works is that you go 0:24 ahead and create a new project in loable 0:26 and push all these changes to a GitHub 0:28 repo and now you can go ahead and 0:30 download the GitHub repo or clone it and 0:32 open it up on cursor and start editing 0:34 on the file and once you make all the 0:36 required changes using cursor you can 0:37 then push the changes to GitHub repo and 0:40 all the changes that you made using 0:41 cursor AI will be reflected on lavable 0:43 as well okay so you can go ahead and 0:45 continue working on the same project 0:46 from both lovable and cursor and that is 0:49 exactly what I'm going to show you in 0:50 this video so if that sounds interesting 0:52 let's quickly get started all right so 0:54 this writer is loable dodev and this 0:56 writer is the official website of cursor 0:58 AI so I assume you have already 1:00 downloaded and installed cursor AI on 1:02 your computer if not just head over to 1:04 cursor. comom and sign up for a new 1:06 account download the installer and get 1:07 it running on your computer and now that 1:09 out of the way first we'll start working 1:11 on the project from loable okay so let's 1:13 just say I want to create a simple 1:15 Airbnb clone so I can go ahead and say 1:17 build a Airbnb clone and hit enter and 1:21 now the whole intention of this video is 1:23 to show you the actual loable plus 1:25 cursor air workflow so I'm just going to 1:27 give a simple prompt like this and let's 1:30 see how far lable can take things to and 1:32 then we can go ahead and open it up in 1:33 cursor and start working on it as well 1:35 so let's wait all right so it's been 1:37 some time and lble is still writing the 1:39 code for the same and it seems like 1:42 lable has went too far and it is 1:43 creating a lot of these files so it is 1:46 implementing a lot of functionalities is 1:47 what I guess and as you can see it says 1:49 I'm envisioning a Sleek minimalist 1:51 Airbnb inspired platform with Elegance 1:53 of apple design principles that's 1:56 interesting in which ways we'll wait for 1:58 it to complete the same and we can take 1:59 it from there all right so this writer 2:01 is the clone of Airbnb that loveable has 2:04 created for us and look at the detailing 2:06 oh my God I mean I just went ahead and 2:09 gave a single prompt just as to build a 2:12 Airbnb clone and this is what lovable 2:15 has created for me I'm truly amazed to 2:18 be honest and here we have all these 2:19 options to search for I mean that's not 2:22 working okay and if I click on let's say 2:25 any one of these 2:26 project are you kidding me bro seriously 2:30 ly with just one single prompt lble has 2:33 actually went ahead and implemented a 2:34 full-blown like the UI of Airbnb so here 2:38 we have this form individual property 2:39 details and all that wow in which ways 2:42 now that we have the basic version or 2:44 the initial version of our product ready 2:46 and I'm not going to give any more 2:47 prompts because this is more than enough 2:49 okay and the next step to do is to click 2:51 on this GitHub option towards the top 2:53 right and click on connect GitHub and 2:56 now if this is your first time you'll be 2:58 asked to log to your GitHub account and 3:00 once you sign it to your GitHub account 3:01 you'll find your account in here and I 3:03 can click on that one and now loable 3:06 will go ahead and create a new 3:07 repository in your GitHub account and 3:10 add all these code okay and now once 3:12 that's done you can click on this button 3:13 that says view on GitHub to open that 3:16 GitHub repo and it says hospitable 3:18 aboard and there you have it so this 3:20 right here is all the code and now 3:23 whatever be that all these files that 3:24 you see on let's say lble you can find 3:27 all of that in your GitHub repo so 3:29 pushing all the changes to a GitHub repo 3:31 part is now complete and now the next 3:33 step that you got to do is to clone this 3:35 GitHub report to your computer and for 3:37 that you can click on this Cod option 3:38 right here click on https and copy this 3:41 link okay clone using web URL and next 3:44 upep you can go ahead and open a 3:47 terminal just like that and now I'll CD 3:50 into my 3:51 desktop and get clone and paste this 3:55 prompt I mean the link and now I hit 3:58 enter all right so we went ahead and 4:00 clowned the GitHub repo into our 4:02 computer and if this git clone command 4:04 is not working for you that is because 4:06 you don't have git installed on your 4:08 computer so just head over to this 4:09 website that is gi.com and install git 4:13 on your computer and you should be able 4:15 to run this command so as you can see 4:17 here we have the report that we cloned 4:18 to our desktop and the next step is to 4:21 open cursor just like that and now I can 4:23 go ahead and drag and drop that folder 4:26 that we just cloned and obviously we 4:28 need to first run the this npm install 4:30 command so first of all I'll go ahead 4:32 and open a terminal instance and run npm 4:36 install and hit enter and now it will go 4:39 ahead and install all these dependencies 4:41 that are necessary to run our project so 4:44 as you can see it is now done so let me 4:46 make it a bit bigger just like that and 4:49 I can run the project by running npm 4:51 runev and I can hit enter okay there you 4:54 have it so I should be able to access 4:56 the project if I visit this local host 4:57 address 8080 and there you have it so 5:01 this is the project uh that we created 5:03 using loable so this right here is 5:04 running within lble and here we have the 5:07 code for the same and now we are running 5:09 it locally within our machine okay so we 5:11 went ahead and cloned the GitHub repo 5:13 and this project right now is living 5:14 inside of our computer or more 5:16 specifically you can go ahead and edit 5:18 it using cursor for example let's just 5:21 say I want to add let's say a contact 5:23 page to my app so I can go ahead and say 5:26 add a contact page to my Airbnb clone 5:32 app at/ Conta us okay and now I'll 5:36 select let's say CL 3.5 sonit and I'll 5:39 go ahead and click on send and now as 5:40 you can see cursor is making some 5:42 changes to the code so it has created a 5:44 new contact. TSX file and it is writing 5:47 all this code and once that's done it 5:49 will go ahead and include that component 5:51 inside of our let's say app. TSX file 5:54 and then we should be good to go in 5:55 which ways seems like that's done and I 5:58 can go ahead and click on this access 5:59 accept all button and now if I go to/ 6:02 contact us I should be able to uh access 6:05 our contact page so let me just go ahead 6:07 andp put slash contact us and hit enter 6:11 so there you have it so here we have 6:13 this contact us page and if you notice 6:15 in lable we don't really have that page 6:17 okay so if I go and put let's say slash 6:21 contact us and hit enter it will return 6:25 a 404 error so as you can see we don't 6:27 really have that page yet in our loable 6:29 account or lavable project so now that 6:31 we have this basic feature implemented 6:33 or if you want to let's say Implement 6:35 any other feature or do any kind of 6:36 changes within cursor you can go ahead 6:38 and do that all right now but for just 6:40 demonstration purpose I'll be making 6:42 only this one change and the next 6:44 important step that you got to do is to 6:46 go ahead and push all these changes to 6:48 the same GitHub report that is this one 6:50 right here okay and now you can go ahead 6:52 and make whatever changes all within 6:54 cursor and once done you need to go back 6:56 and push all these changes back to 6:58 GitHub for that I'll goad head and open 7:00 a new terminal and for now I'll run a 7:02 symbol git status command and hit enter 7:06 so here we have two files uh edited so 7:09 that is app. TSX file and a new file 7:11 created that is uh contact. TSX all 7:15 right next upep I'll go ahead and say 7:17 get add and Dot hit enter so all of that 7:21 files are now added and now I'll go 7:23 ahead and commit all these changes for 7:24 that I can type get then commit then 7:29 let's say put a message cursor edit and 7:33 then hit enter and now all I got to do 7:36 is to push this changes so that I can 7:38 type kit 7:40 push origin and then mean and hit enter 7:44 and let's see all right so all of these 7:46 changes are now made live and now if I 7:49 head back and click on this refresh 7:51 button all these changes that I made 7:53 using cursor should be instantly live 7:55 and as you can see here we have this 7:57 cursor edit and now as well so if I open 7:59 the SRC folder now and go to 8:03 components okay where was it uh layout 8:06 all right so in the pages section we 8:07 have this contact. TSX file and this 8:10 file that you see right here is actually 8:11 created using cursor all right so we 8:14 went ahead and made some changes using 8:15 cursor and now this is the cool part if 8:18 I now head back to cursor and I go ahead 8:20 and refresh my project just like that I 8:23 can find a popup saying external commit 8:25 and cursor edit that means lable has 8:28 actually detected the change that I made 8:30 using cursor and it is showing me this 8:32 external commit right here okay and now 8:34 if I open it up in a new tab and now if 8:37 I head to let's say the/ contactus page 8:39 so there you go now I can access the 8:41 contact us page and this page that you 8:43 see on the LA project right now is 8:45 created using cursor so basically I went 8:47 ahead and added all these features using 8:49 cursor and I pushed all these changes to 8:51 GitHub and now lable has actually synced 8:54 all these changes and is now showing me 8:56 all the changes within their platform 8:58 okay so the cool thing here is that you 9:00 can now go ahead and simultaneously work 9:02 on the same project using both cursor 9:04 and L.D so if you feel like cursor is 9:07 better for doing something you can 9:08 actually go ahead and use cursor and if 9:10 you feel like lable is better for doing 9:12 something you can go ahead and use lable 9:13 and both these changes will be synced 9:15 just make sure to go ahead and push all 9:17 these changes within cursor so that is 9:19 an important step that you must do if 9:21 you want to let's say make all these 9:22 changes live within lble as well okay 9:24 now the possibilities are infinite and 9:26 you can just go ahead and do whatever 9:29 stuff that you want to you can build 9:30 cool features within cursor push all 9:32 these changes have it live on lavable 9:34 and now publish the website with lavable 9:36 or whatever stuff that you want to do 9:37 you can now do it okay so this is 9:39 basically the ultimate lble plus cursor 9:41 workflow you can go ahead and work on 9:43 the exact same project using lble and 9:45 cursor so that's pretty much all I 9:46 wanted to show you in this video so I 9:47 hope you guys found this video useful if 9:49 yes make sure to subscribe and I'll see 9:50 you in the next one