I Built a Docusign Clone with Lovable.ai Because of Greg Isenberg | Vibe Coding

0:00 so I saw Greg Eisenberg um post a couple 0:04 weeks ago um where he uh was basically 0:08 saying that we should um create um a 0:13 clone for duus 0:15 sign um a free version a free 0:18 alternative because we are paying 0:21 everyone's paying a lot of money to uh 0:24 to use D sign but now with AI Revolution 0:28 we should just build our own for free 0:31 and then I saw his video using uh menus 0:35 AI where they tried to build but it did 0:40 a b a bunch of research checked all uh 0:44 documentation about doc sign but at the 0:46 end it wasn't able to build the app so I 0:50 thought okay I just build a tool where 0:53 we can basically create a prompt based 0:57 on um on uh scope of a project and what 1:02 if I ask chpt to build me a description 1:07 for do for duu sign clone and then add 1:10 to my tool and with my tool send to 1:15 lovable and then we would have like a 1:17 better prompt with every feature every 1:21 every page and everything else that we 1:22 need to build a dock Cyclone so this is 1:26 what we are going to do today first step 1:29 is is basically ask 1:32 jpd to 1:34 describe uh what DocuSign 1:37 is um I need you to give me 1:45 a 1:47 complete 1:49 description of 1:52 what docu sign 1:57 is this 2:01 should this should be only maybe three 2:09 sentences 2:11 and please do not 2:15 use doc docu sign name in the 2:23 description 2:25 create 2:26 your own name 2:31 okay let's see what jpt will give 2:33 us share signf flow is a secure digital 2:37 signature platform that allows 2:39 individuals and businesses to electronic 2:42 sign send and manage documents from 2:45 anywhere it string line workflows by 2:47 automating contract approvals 2:49 integrating with um popular tools like 2:52 CRM and cloud storage services and 2:55 ensuring legal compliance with 2:57 encryption and audit trails 3:00 with features like book sending mobile 3:04 accessibility and identity verification 3:07 it 3:08 enhance efficient efficiency while 3:11 reducing paperwork and turnaround times 3:15 okay this is pretty pretty good so we go 3:19 to my tool 3:21 here and we create a new project so let 3:25 me add the description and the name of 3:28 the project will be 3:30 sign flow for some 3:33 reason the name of the the my project is 3:36 Scopes flow and chat gave me sign flow 3:40 maybe it's just coincidence or maybe 3:42 it's the universe now thei will 3:45 generate the scope for us the flowchart 3:49 with the scope for us we will give just 3:52 a brief um uh quick look and I'm now 3:57 going to change add pages add features 4:01 change apis we probably will see some 4:03 crazy apis that I never um heard about 4:07 but let's see here open project okay 4:09 that's not 4:12 like that 4:13 big 4:15 um 4:17 okay so let's see first what do we have 4:21 here so we have a homepage we have a 4:23 user dashboard we have a document 4:25 signing we have a book send we have 4:28 profile settings we have user 4:31 authenication document management we 4:34 have document sign we have book document 4:38 sign we have docu sign API send GD API 4:43 AWS 4:45 API and um let's 4:50 see okay I'm not sure that I want to use 4:53 doign 4:55 API 4:56 because we want to build our own so I 4:59 will delete 5:01 this okay we're not going to use this 5:05 one 5:06 and because this is only a test what 5:09 what what what I would probably I would 5:12 probably do if what's something that I I 5:16 wanted to create like a real side 5:19 project I would just add more pages 5:23 probably and iterate more with the tool 5:27 to get like we don't have we don't want 5:29 use um um docu sign API of course so how 5:34 we're going to manage this we probably 5:36 have some errors 5:38 here but let's see now we have here the 5:42 um the description of the app this 5:44 description was created by uh uh by The 5:48 Prompt this is not our uh description 5:51 then we have here all the features we 5:53 have the pages we have the apis that we 5:56 want to use and we have the assets that 5:59 we need for for this project I like to 6:01 let the um um I wanted to add the assets 6:05 here because then the project knows that 6:09 we need a place for the app logo we need 6:11 to find a libraries for the icons and we 6:14 need graphics for the um for the landing 6:18 page so it will um uh give us places to 6:22 place this on the landing page so I'll 6:25 just cop 6:26 this go to lovable 6:30 paste 6:31 here and hit enter now we can wait and 6:35 see the magic 6:37 happen let's see if we can actually 6:40 build H doc sign clone before Greg 6:44 Eisenberg does um 6:49 okay this is just a blank page 6:55 uh okay we probably had an error 7:01 here let's try 7:04 to 7:05 okay come on this is the first 7:08 error let's try to copy and paste 7:23 again 7:25 okay let me see I have 7:30 credits let's refresh the 7:35 page okay maybe just maybe it's just too 7:39 much for l b when I tried the first time 7:43 my two it worked so let's see if we can 7:50 actually okay it's not even letting me 7:53 uh hit enter here 8:00 let's go back to the dashboard and let's 8:02 try 8:05 again okay so it looks like it's 8:08 probably some error with 8:12 um with 8:16 lovable let's try one more time let's 8:19 give one more shot 8:21 here let's now click here 8:27 again okay now it looks like that is 8:32 thinking spin Up 8:35 preview we see here this dot here that 8:38 does it look like is okay now now now we 8:42 have something okay we have the 8:44 structure okay we have the structure for 8:46 the landing page we have the structure 8:48 for the dashboard we have our index page 8:52 we have dashboard page we have assigned 8:54 document page we have off page it's good 9:00 um 9:04 okay we had the layout let let's see 9:10 if okay has always is using 9:15 Tailwind 9:16 [Music] 9:18 um and I do prefer that it us stay wind 9:21 because when everyone was using um vzero 9:26 I was using vzero so I was creating the 9:29 layout the design in visero and then 9:32 sending to cursor the problem was that 9:35 every project looked the same because it 9:37 was using Chetan 9:40 mostly so like it doesn't matter if I 9:43 was building um uh CRM or if I was 9:47 building um I don't know a Marketplace 9:51 or a social media they all look the same 9:55 so it's it's it's cool that it now is um 10:00 it's trying to build something that is 10:02 not like this look like everyone is 10:05 building the same 10:06 thing so okay 10:09 sticking um stick more time than I 10:12 expected in something like the folder I 10:15 don't know why let me see if I can go to 10:21 the okay now went to 10:24 the hero uh component for the homepage 10:38 okay I will let the video running 10:41 because I want then to um be able to 10:44 check how many um the minutes that we 10:48 spent here let me 10:57 just okay um Google Chrome was already 11:00 taking too much uh from my 11:04 laptop and now with loveable when I open 11:08 lovable in two tabs and I 11:11 open um cursor it's just like looks like 11:15 I can fry a EG here but okay it's going 11:20 it's 11:21 going it's spending more time than I 11:23 expected again and the the component for 11:26 the landing page but probably because on 11:30 our prompt we have here let me show 11:36 you we have 11:39 here the 11:42 homepage we have all these sections we 11:45 and we basically have two pages so yeah 11:49 it it's it's it's it's reasonable that 11:51 we will spend more time trying to um 11:56 improve the only pages that we have so 11:58 okay that's that's fine that's 12:01 fine let's see what we will get from 12:07 this 12:12 okay let me try to go down 12:16 again let's go let's go let's 12:19 go okay it's already on working on the 12:24 off I never know if I'm pronouncing 12:27 correctly sorry English is not my 12:30 primary 12:32 language and lately it's not even my 12:36 secondary language Spanish is 12:39 so yeah we are already in here so if is 12:45 following this um this 12:49 order we are already creating the um 12:52 components for the off page 12:57 so we should be almost at the end let's 13:04 see and I saw I think the difference uh 13:08 there something that would be pretty 13:09 cool if we have if we had this in um in 13:15 um in lovable is or even though this is 13:19 maybe something that I can add into my 13:22 app 13:24 because what I saw here from man AI is 13:27 um that it spent a lot of time doing 13:31 research and like taking screenshots um 13:36 uh scraping the page to find information 13:39 about the cosign checking probably 13:41 checking the the layout checking like we 13:43 see here the features checking the um 13:47 the whole structure that it used 13:50 probably it it wasn't like that um 13:53 accurate 13:54 because it wasn't able to log in into 13:57 DocuSign to see all the pages 13:59 and how worked the the UI and ux inside 14:03 the doshine dashboard but if we could 14:06 have um here something that is um a 14:11 search before starting building the app 14:14 okay we have we have an 14:17 error let's dismiss this is probably 14:23 something because of 14:25 my Google 14:27 Chrome so signing 14:30 [Music] 14:31 in 14:33 okay okay it looks like that we have um 14:37 he created an off 14:39 component and now is creating a sign in 14:44 component this is probably for the 14:46 signature not the um 14:49 authentication but let's see okay 14:54 this uh I hope this wasn't too much to 14:57 ask from uh from lovable let me close 15:00 these tabs here cuz I also want to 15:04 show uh the test that I 15:07 did that you can see in my uh my 15:15 YouTube 15:17 um let me 15:20 just because the first test that I did 15:23 with my to and um 15:26 lovable was asking to create like um a 15:30 Jito 15:32 album and it went pretty well like 15:36 better than what um I expected like way 15:41 better than what I 15:42 expected 15:44 um like it created the um I was thinking 15:48 about building this in FLIR flow like 15:51 the project that I'm I'm talking about 15:54 um because I wanted to be um mobile 15:57 first I want to be a native app but I 16:00 even thinking now if I can build this in 16:05 lovable if is reactive and 16:10 um then send to cursor and ask 16:15 to to uh refractor and use 16:21 Expo um but I'm I'm still thinking about 16:24 this let this let wait this for uh load 16:28 here 16:32 okay now it went back to the dashboard 16:36 page and here we are still loading I 16:40 probably need an uh a new 16:43 laptop or maybe just 16:46 buy uh standard computer with a better 16:52 um with a better setup let's 16:57 see come on on I really want this to 17:01 work cuz here man it looks so cool to be 17:04 honest not that is not because it's my 17:08 tool not because I built this 17:13 but this is something that I saw someone 17:17 uh on um Twitter saying that this would 17:20 be pretty cool to have on um on 17:25 loveable like a place where we could 17:28 create Pages create the features be able 17:31 to see the S map before start buildings 17:34 before start 17:35 prompting but 17:38 okay um yeah like I 17:42 said it was to 17:45 much um a client expection see the 17:49 browser console for more information 17:52 okay 17:53 probably because I had to this two tabs 17:57 open 17:59 let's 18:03 um okay created okay this one was 18:07 running to 18:09 probably let's see the console give me 18:12 five minutes and I will figure this 18:16 out 18:26 okay okay let's just close close this 18:29 one close this one I will not give up 18:33 for real I will not give up I will make 18:36 this work I will make this 18:41 work okay now looks like I can see my 18:44 project okay it's just trying to 18:47 load come on come 18:50 on so this is the one that I was 18:52 building right let's click the 18:57 here uh 19:00 um okay it looks like they created the 19:04 dashboard now created the sign in 19:10 now okay um build wasn't 19:13 successful cannot read package let's 19:16 just try to fix 19:19 this what let's see what would 19:25 happen cuz nothing is actually working 19:30 and and here it says I have created a 19:33 stunning digital signature 19:36 platform with a modern clean interface 19:39 inspired by Apple's design now I really 19:43 want to see 19:45 this now now now we we need to see 19:50 this I I we would had to find a way to 19:53 fix this for 19:57 real not not even if I need to go 20:00 somewhere and buy a computer we are 20:04 going to finish 20:06 this let's see if we can do this without 20:08 me 20:10 spending tons of 20:12 money to buy a computer that can then 20:17 handle this let's 20:22 see okay it went back to the index 20:26 page so this this is something that 20:31 um uh it's probably yeah it's probably 20:35 something wrong with the client side so 20:37 probably something wrong with my um 20:42 laptop it's not being able to handle 20:45 this but it would be cool if anyone 20:51 could do this so anyone with any laptop 20:55 any computer any like setup set up could 20:59 do this so then we could do this using 21:02 our mobile 21:04 devices and work on our mobile devices 21:07 it's something that I don't like 21:10 not I don't really want to work on my 21:14 phone like build an app on my phone but 21:20 maybe if I have an idea and I want to 21:23 implement right away this could probably 21:26 something uh be something that we could 21:28 do 21:31 but let's uh see if now it's going to 21:35 work because it started creating like 21:38 like we said before we had index page we 21:41 have dashboard we have um the sign 21:43 document page we see here that we 21:45 already have the uh the path so we have 21:48 the sign slash the ID of the document 21:52 that we are signing and we have the off 21:54 page 21:59 uh okay went back to the um to the off 22:05 page I just wanted to like to be sure 22:09 that it just stop it working because of 22:14 my 22:15 [Music] 22:17 um my laptop and not because it was like 22:22 Nar with the 22:24 project I have moved all the page 22:26 components into 22:28 okay this is 22:32 reasonable I 22:34 added the mission file 22:37 text let's see the code where is 22:42 my okay the build was sucessful 22:46 again uh we have the call in here 22:51 so or testimonials are all inside 22:56 components home 22:59 component home we have 23:01 here features we have hero and we 23:08 have testimonials okay let's see the 23:12 error that we are 23:15 getting okay 23:17 because probably if we see here that's 23:20 something that I learned um not a long 23:23 time ago but if we come here 23:32 uh actually let's just this is this 23:37 video is already too long oh 23:42 okay 100,000 23:49 characters 23:53 okay um 23:59 let's try first to refector the 24:04 dashboard maybe if we break down the 24:06 dashboard we will be able 24:09 to um to fix 24:15 this bringing into small components okay 24:19 this this is something that 24:22 um this is is also a problem with cursor 24:26 I'm not sure if the other um 24:28 platforms if like boat or repet do the 24:33 same but usually creates huge files like 24:38 huge files um I Tred to build 24:42 something um in the cursor and I 24:47 remember like the uh again the dashboard 24:52 dashboard is Al always the problem but 24:54 the dashboard had like 600 700 lines of 24:59 gold and we had a lot of things that 25:02 could be a component being called and I 25:06 had to then I I had to ask to refactor 25:10 the dashboard didn't give me cursor 25:13 didn't give you um cursor don't give you 25:16 like these cool buttons here saying hey 25:19 maybe you should refactor the dashboard 25:21 or refactor the 25:23 index but let's see if it will be able 25:26 to refractor the de dashboard at 25:30 least um but but from what I can see 25:36 here probably so if we cannot find 25:41 module cannot find the 25:43 module 25:51 um okay we have a different error now 25:58 oops looks like our AI had a bit of hit 26:00 up hit 26:09 cup okay it looks like this is not going 26:13 to work for some 26:20 reason I believe that this was too much 26:24 for the 26:26 AI we're not going to be able to fix 26:30 this this is the last last 26:33 try this is the last try okay may maybe 26:38 maybe Greg Eisenberg gave us this task 26:41 because he knew this was too much he 26:44 knew that this was something that we 26:46 could not do with just one 26:50 prompt let's see 27:08 um what I'm not understanding 27:13 is we 27:15 have for for our Pages we have off we 27:20 have dashboard we have index we have um 27:23 not found and we have um signed up 27:28 document for sign document we have 1 2 3 27:33 4 5 27:38 six 27:39 seven Imports so not that many and one 27:45 is for uh an effect one is for uh 27:49 navigation one is for animation one is 27:53 for um uh the icons one is for a button 27:58 and just one is an actual 28:02 component 28:10 so 28:18 okay if maybe if we take this and send 28:24 this the way that it is now and send to 28:29 cursor cursor would probably have a 28:34 better um perspective on how to manage 28:39 this cuz now I think this this is not uh 28:42 a front end 28:44 problem this is 28:46 probably um something that not like for 28:50 me lovable is my um front end developer 28:55 and cursor is my backend developer 28:58 anytime that I want to improve um 29:01 security improve performance I take from 29:05 lavable and send to cursor but usually I 29:10 do this after the features are set up so 29:15 after I can at least um do some 29:17 navigation I can see the features how 29:19 the features work and we have the design 29:23 done because cursor even though I always 29:26 ask to keep uh using the same design 29:30 usually just create crap design for some 29:34 reason maybe I'm I'm 29:36 not prompting correctly but let's 29:54 see okay now it's telling me that 29:58 uh I fixed all the Errors By remove the 30:03 duplicated file 30:05 text created all the missing module 30:09 files 30:12 um yeah I don't think that 30:16 okay okay created the Ling page that's 30:19 good okay it's a pretty cool landing 30:25 page not going to lie okay 30:30 but what we want to know is if we can 30:34 actually use this I'm not going to be 30:36 able to sign in because it's not 30:37 connected to any of 30:40 my 30:44 um uh super base 30:50 projects and yeah the 30:54 dashboard okay now the dashboard is 30:56 broke dashboard is broke let's 31:00 see now the error is way way shorter 31:04 than it was before uh let's see if we 31:07 can 31:09 um if we can fix this now 31:14 um I just want to say sorry for 31:19 um um to lovable team CU it looks like 31:25 that I'm forcing the AI to much much I 31:29 will probably break this at some point 31:32 I'm and I'm I'm sorry uh let me check 31:35 the file to fix and the issue is fixed 31:39 by changing the default value of 31:45 terms um not sure if I 31:50 follow the off form okay 31:53 so probably is not showing because 31:58 we are not actually signed in right 32:03 because the schema defines terms has 32:06 little true means that it can only be 32:10 true by setting the default value true 32:13 you can 32:16 true 32:18 okay can we fix the this is the first 32:24 time that I'm typing here so after I I 32:26 copy and paste here 32:28 the The Prompt the only thing that I had 32:31 to do was just click to try to fix the 32:35 error can we fix the 32:38 dashboard so we can take a 32:43 look please 32:46 remember this project is not yet 32:52 connected to any 32:56 database we we 32:59 will connect to super 33:03 base 33:05 once we can at 33:10 least 33:12 navigate the 33:15 dashboard oops 33:21 dashboard now let's see if can fix the 33:24 dashboard because 33:29 two two two two options here one we are 33:32 not being able to see the dashboard 33:34 because we are not locked in but we 33:36 can't log in like the the app can't 33:39 verify that we are logged in because we 33:43 have the um the off form but we don't 33:47 have connected to to to super base so we 33:50 can 33:51 actually um authenticate the 33:54 user maybe this is the problem or 33:58 maybe it fixed the index page it fixed 34:01 the off page but it didn't fix the 34:03 dashboard page because if we take a look 34:06 in 34:08 here uh the one that is working is 34:11 index so we have all the um components 34:16 here okay we have all the components 34:19 here imported and but then here in the 34:23 dashboard we have navbar we have header 34:27 we have we have filters we have 34:29 documents grid we have quick actions we 34:32 have um 34:34 upload to upload the document and then 34:37 we have the actual document 34:40 card but I'm not sure if we have all 34:43 these 34:46 components 34:48 uh where is the okay we have the 34:51 document card let's see if fix it okay 34:54 okay okay never mind okay fix it 34:58 okay fix 35:00 it but if I try to ve here we are not 35:04 be okay we are able to see 35:08 this it's not is not 35:12 [Music] 35:15 um the best but 35:18 oh can we see the details 35:21 here now I can see the 35:25 signature if I click to 35:32 F 35:34 okay so this is like if I if I'm if I'm 35:37 logged in I just click here for the 35:40 signature just click here to add the DAT 35:42 and this just click here because I 35:44 already know my full name what if I 35:47 click download nothing 35:50 happens but we have here the good fing 35:54 we have documents we have all documents 35:56 we have drafts we have pening we we have 35:57 complete we can upload uh 36:01 document we actually can uh let's upload 36:05 like something that I don't know what it 36:07 is it's 36:08 uploading I'm not going to sure if it's 36:10 going to upload because we don't have a 36:12 database 36:15 so 36:17 okay kind of 36:20 did send for Signature books and 36:24 templates new document we have here our 36:27 profile so I believe that like we spend 36:31 now 35 36:34 minutes of course we have a lot to do 36:37 like a lot to do but if we imagine that 36:42 um a couple months ago with 36:46 um just this in um with no code with 36:51 bubble let's say um we will probably 36:56 spend like 37:00 I would spend a week building just this 37:04 let's see okay a weake working from 9 to 37:08 5: and not worrying too much about it it 37:13 will take me a week but now we spend 37:15 here 35 minutes with a bunch of Errors 37:18 of 37:20 course but we see that we we we actually 37:24 did just one prompt all of this this 37:28 like all of 37:30 this it was all using just one 37:35 prompt 37:38 so yeah if again if we had spent more a 37:42 little bit more time in my tool in in 37:45 scop flow trying to add more pages add 37:49 more features add like um all the little 37:52 pieces that um docu sign 37:55 has this would probably 37:58 we will probably get more errors but we 38:00 will probably um get this done easily 38:05 okay we'll probably have more features 38:09 done we could probably um set up the um 38:14 describe better how we wanted the 38:17 document to be signed how to send a 38:19 documents how to 38:23 um we see here that we 38:25 can I'm I'm I'm bit press like we have 38:28 to say that we want to take this and be 38:32 able to place in where that we want we 38:34 probably need a library for this and we 38:37 um didn't specify in any 38:41 dependencies but this is this was pretty 38:45 cool okay we have we had a bunch of 38:48 errors but at the end we were able to 38:51 build this 38:53 okay it's not 38:55 done it's not not been close to be done 38:59 but I loved the uh the laning page and 39:03 also I love the uh this 39:06 um this um off page I I love the design 39:11 this will probably be something that um 39:13 I will try to get a little bit more a 39:16 bit closer to what duck sign is I try to 39:21 get a uh the feature of the document 39:24 done connected to super base and then 39:27 and send to cursor to um like to 39:31 refractor the the the components the the 39:33 pages that we need try to split the 39:37 components so we can load faster and 39:41 um create the um the edge functions to 39:45 like send the document to the um to the 39:49 person that need to sign 39:52 this and have a secur for this person to 39:56 click the link that is a unique link and 39:58 then go to the page and then be able to 40:01 authenticate themselves and then um sign 40:04 the document but this is with 35 minutes 40:08 one prompt and only one prompt this is 40:10 just incredible so Greg I'm sorry I 40:14 wasn't able to uh build the entire Duck 40:19 sign clone in 35 minutes but we got 40:22 pretty close if I had a better laptop 40:25 and 40:26 if uh we didn't had that many errors 40:29 we'll probably um get this done in 40:32 probably like 20 minutes or even less 40:35 but yeah so Greg eberg gave us this 40:40 um this Challenge and 40:44 we almost done we almost done okay um if 40:49 you want to keep uh watching me um 40:53 trying new things and building this 40:57 clones or getting more challenges from 40:59 Twitter and 41:00 Linkedin um and learning more about 41:03 loveable and cursor and other ai2 make 41:06 sure to subscribe to the channel and hit 41:08 the Bell button if you have any question 41:10 leave any the 41:12 comments thanks for watching me and see 41:15 you in the next video