vibe-coding a full-stack app (full walkthrough + technical vs non-technical vibe-coders)

0:00 so we've got data being saved images 0:02 being uploaded we've got o we've even 0:05 got purchases being made with a credit 0:07 card and I did it all without writing a 0:09 single line of code myself and all in 0:12 the span of less than 4 hours so for the 0:15 first try I just typed in what I wanted 0:18 we're building a Marketplace for users 0:19 to sell digital products we want to 0:21 start by displaying products that 0:23 already exist start with the front end 0:25 and then all by itself it created this 0:28 entire beautiful site with a ton of 0:32 different 0:33 features that sometimes don't work and 0:37 also I didn't really want like I don't 0:40 want categories I don't want featured 0:42 and uh you know I want people to pay 0:45 using tokens not using dollars and so I 0:49 need to be a little bit more specific 0:51 about what I 0:53 want it does have some good ideas on 0:56 what to do next but what I really wanted 0:58 was to remove the features that I didn't 1:02 want first to simplify this and so you 1:05 can see let's go ahead and restore this 1:08 version and you'll see that it removed 1:12 them from the top navbar but this 1:15 featured button is still here and that 1:18 page is still here and so it didn't do 1:21 quite as good a job at removing things 1:24 as I would have liked and if you look in 1:27 here at the code changes this is really 1:30 cool they let you see the diff per uh 1:33 change which is different than something 1:35 you'd get in for example Claude 1:38 projects you can see that all right it 1:40 took some stuff out of the product type 1:44 and it removed uh some 1:47 of these uh uses so it changed the 1:53 card but it's not removing entire Pages 1:57 like we'd want it to and it's just 2:00 removing the links to those pages 2:02 sometimes and it actually removed this 2:06 from the type and this causes a type 2:08 error the build was unsuccessful because 2:12 these types are still relied on and the 2:13 stuff it didn't remove and so it had 2:16 this err and there's a nice little 2:18 button here try to fix it and it did fix 2:22 it but it just added the types back so 2:26 this is not really what we were going 2:29 for and one thing you'll learn 2:31 throughout this video and as you try it 2:33 is that Vibe coding is a skill and it's 2:36 something that benefits from you already 2:39 having technical knowledge although it's 2:41 not completely 2:43 necessary so the first lesson in Vibe 2:46 coding is just like real coding you want 2:48 to start simple with something that 2:51 works and so we're going to create a new 2:54 project and start with just the simplest 2:57 thing so I actually mapped out the thing 2:59 things that I want it to do and this is 3:02 how I would approach a regular project 3:04 is doing it step by step and now we're 3:07 just telling the computer how to do this 3:10 I mean we were telling the computer how 3:12 to do it before but now we're using 3:13 natural English and typing a lot fewer 3:15 words so first we want to display 3:18 product listings and do it from a local 3:20 file and have no feature no anything 3:25 else just the product listings then we 3:29 want to get theu products from superbase 3:31 which is a uh SAS database which makes 3:34 it really easy to work with a 3:36 backend then we want to be able to log 3:38 in and log out as a 3:40 user and that's required for the Nyx 3:43 thing where we want to create a product 3:46 and then assign that product to be as 3:49 created by that user and we want to 3:52 include uploading a cover 3:54 image then we want to allow users to 3:56 purchase products using tokens and 3:59 finally we want to connect to stripe to 4:02 purchase tokens using a credit card and 4:05 this is a lot and you know this would be 4:10 more than 4 hours of work let's say if 4:13 you were building this by 4:15 hand and as part of being a technical 4:18 user I also made a little diagram of 4:21 what I think the back end would look 4:23 like so we've got our users and then we 4:27 have products that are created by a user 4:29 we have product purchases which connect 4:32 to both a product and a user and then we 4:35 have token purchases for a user which is 4:38 how we record the real money purchases 4:40 through stripe having a framework like 4:44 this in your mind can really help the 4:46 computer stay on track when you're Vibe 4:49 coding because it'll take care of the 4:51 details but like we saw with the first 4:54 example if you just tell it to do 4:58 whatever it'll make up Det details and 5:01 it'll make up a product direction that 5:03 you don't necessarily agree with by the 5:06 way before we start again if you want to 5:08 follow along I'm using lovable dodev so 5:12 they are another AI Vibe coding tool 5:15 their claim to fame is they can connect 5:18 with a super base backend and with 5:21 stripes you can actually build a real 5:23 app and not just something in JavaScript 5:26 like you could with Cloud projects for 5:27 example you can also import figma files 5:31 and I'm sure they have other features 5:33 that I haven't explored yet by the way 5:36 they are sponsoring this video but I 5:39 only do sponsorships if I'm allowed to 5:42 tell the complete truth about the 5:44 product and that's nice cuz it the ones 5:48 with bad products choose not to continue 5:51 after I say that and they were like yes 5:53 please say whatever you want they're 5:55 very confident in their product and have 5:57 to say it's pretty good as you'll see 6:00 okay so I redid my prompt and now it's 6:04 pretty simple it says we're building a 6:06 Marketplace for users to sell digital 6:08 products and so this is the exact same 6:11 as before but I added and make it simple 6:15 I said the product type will be so I 6:17 gave it just these four keys and what 6:21 values they'll have and I said do not do 6:24 any categories filtering or featured 6:26 type screens we just want an index and I 6:30 probably could have just said we just 6:31 want an index and so then it did 6:36 it so if we expand this we'll see that 6:41 yeah it 6:42 has this index we cannot yet click into 6:45 it it took me seriously when I said I 6:47 just wanton an index but it has this 6:49 nice hover over feature and this is a 6:52 better design than I would have done for 6:55 sure and it's even got names that are 6:58 digital products for for the sample data 7:01 and if we look at the code here then 7:05 we'll see that we have this file so 7:09 Services product service.ts where we 7:12 have all these 7:15 products all right and so the next thing 7:18 we want to do is i' told to create an 7:20 individual page for each product and 7:25 that is pretty easy it just did that and 7:29 these p Pages don't look fantastic just 7:31 cuz there's not that much information 7:33 but that's okay that's not the most 7:35 important part right now and by the way 7:39 we can go ahead and look at the code 7:40 here as well and there's two ways of 7:42 looking at it there is raw where we see 7:45 all the code that they generated as well 7:47 as it's thinking and then there's the 7:50 diff and so you can see product details 7:52 completely new but in app. TSX then it 7:57 will show you what was added and changed 8:01 and when they're generating so you can 8:04 see in the Raw it's generating the 8:05 entire thing again so once your 8:08 components get large this does get 8:11 slower uh however showing the nice diff 8:15 is really good if you want to be able to 8:18 understand what it's 8:20 doing of course if you're completely 8:23 non-technical which is the target market 8:26 that lovable is going for then viewing 8:29 this code uh doesn't really help you but 8:32 as a technical person who just wants to 8:33 use this to speed up your development 8:36 then this is really 8:37 useful all right and so n said to 8:41 connect to superbase and get the 8:42 products from there and so for that I 8:46 had to go 8:48 and connect 8:51 to a new product 8:53 Marketplace and hit connect here 8:57 and oh 8:59 so we can go to our superbase dashboard 9:03 and I'm actually paying more money for 9:06 superbase than I am for lovable for this 9:10 project I'm paying like $10 a month to 9:12 get this 9:15 database and when you're here you can 9:18 look at your 9:19 database and here you can see uh oh yeah 9:23 here's the schema visualizer which this 9:26 is more uh advanced than we are right 9:31 now uh because this is once we're done 9:35 and that's okay and for some reason this 9:38 does not connect with uh user that's uh 9:43 surprising anyways uh you can look at 9:46 our tables and you can go to the 9:49 specific tables and see what they're 9:52 like as well as look at the actual table 9:55 editor and make changes here and so 9:59 obviously you wouldn't want to go making 10:01 CH random changes in production but you 10:04 can go around and look at your data 10:08 and you know what let's demonstrate we 10:11 can save 10:13 changes 10:16 oh there we go so this is full-fledged 10:20 database solution you don't have to know 10:23 backend in order to be able to do this 10:25 you do still want to know the concepts 10:26 of how database tables connect but all 10:30 the little fidgety stuff about setting 10:33 it up is all abstracted away for you and 10:36 they also do off and storage so here 10:40 storage you'll see that we have product 10:43 images anyways we'll get to this in a 10:46 second showing how lovable does it but 10:49 this is the magic of how they do the 10:51 back end and this is what makes it more 10:54 powerful than Cloud projects or any the 10:57 other frontend only build 11:00 so when you're setting up your own 11:02 project you'll need to spend a little 11:03 bit of time uh setting up super base and 11:07 there is a gacha we'll get to later when 11:08 we get to authentication but the first 11:10 part should be pretty easy and so if we 11:13 restore this version then you'll be able 11:16 to see that uh all right it's restored 11:19 here and it's basically the exact same 11:22 the only difference is we are now 11:25 getting the code from 11:28 superbase and and yeah we get a bunch of 11:31 types from superbase don't worry about 11:35 that oh yeah so this one just connected 11:38 it to it and now I had to actually tell 11:41 it to uh create the products table and 11:44 then load it all on the main page and I 11:47 kept it deliberately simple in order to 11:50 not get a bunch of features that we 11:52 weren't going to use yet like filtering 11:54 which we can add later all right so then 11:58 when working with super base 12:00 so it has this SQL that it shows it to 12:04 you and you have to approve it and if 12:08 you are a non-technical person uh I'd 12:10 imagine this would be either scary if 12:13 you know how databases work a tiny bit 12:16 or not scary enough if you are just 12:19 purely Vibe coding and don't know what a 12:22 database is and she like yeah whatever 12:26 uh so I don't know how I feel about that 12:29 but uh if you're a coder it's great cuz 12:32 you can just basically review their code 12:35 and this whole thing is kind of like 12:37 being an engineering manager with a 12:40 pretty good Dev who works really 12:44 fast it's definitely much better than 12:48 Devon all right okay so there was an 12:51 error and had to do with uid format and 12:55 so it corrected it automatically because 12:58 uh okay so it added so U IDs they're in 13:02 HEX and so they should only do numbers 13:04 and a through F they added GH and I and 13:08 a bunch of other alphabet characters in 13:10 the first round ran it caught the issue 13:13 fixed it and then it was successful boom 13:17 all right and then it ran the script and 13:20 it updated the application to fetch the 13:22 super bit stuff from 13:24 superbase and then we restore this and 13:28 you'll see 13:30 that yep it's got a little loading uh oh 13:33 wait no that loading was for restoring 13:35 to the earlier version for this I think 13:38 we may have to do this okay yeah if it 13:41 doesn't load just hit refresh page here 13:43 sometimes it's a little uh says a little 13:46 bit of Errors there not errors just it 13:48 gets in a weird State and you got to 13:50 reload it yeah it's working just like 13:52 before and if you look at the code then 13:56 oh it added the created app because you 13:59 you get that uh in a good database table 14:02 and it removed all of this mock data and 14:06 instead is just connecting to superbase 14:09 and you don't even really have to 14:11 understand this just know it's 14:13 connecting to superbase and so how I 14:15 think of it when Vibe coding is 14:18 sometimes this stuff would be in a 14:20 library like do you understand 14:21 everything that's in library code no but 14:25 now that Library code is in your code 14:27 base and written just for you and so a 14:32 lot of times that's okay if you think of 14:34 it like that other times it might I 14:37 don't know introduce the security flaw 14:39 or uh put one of your keys out there so 14:43 like don't fall for the anti-hype people 14:47 who are like oh if you use Vibe coding 14:49 then people hack your website 14:51 immediately but also like maybe read the 14:54 code a little bit and how well you need 14:57 to read the code is a lot of times 15:00 determined 15:02 by what part of the code base it's in 15:05 what type of code it is cuz some are a 15:07 lot more likely to introduce weird bugs 15:10 or security flaws than others and your 15:12 experience as a programmer should help 15:15 you understand that so that you can not 15:18 waste your time looking at you know a 15:21 random react component with mostly UI 15:24 when you can just you know look here and 15:26 be like yep it's good 15:29 all right so we've connected to the back 15:31 end and now we want to create the 15:34 authentication workflows using 15:37 superbase and we set up a uh profiles 15:41 table and in superbase the 15:44 authentication you don't see it in the 15:47 table uh so you can see we've got our 15:51 database that they show and authenticate 15:54 so we have off. users. ID which all 15:57 these tables connect to and off is 16:00 handled here and so you can set up all 16:03 of this and we'll show you in a second a 16:06 setting that you definitely want to 16:08 change uh but yeah just know that 16:11 database like you're not going to see 16:13 the authentication table 16:16 here all right so we have this set up it 16:20 does ask us to run the SQL to create 16:24 profiles and uh here so this I I figured 16:29 out was a 16:32 um it autoc creates a profile picture an 16:36 avatar and this basically puts in your 16:39 initials and so we'll show it 16:42 here we'll restore this oh we shouldn't 16:46 restore this actually because the build 16:48 was unsuccessful and oh okay here it is 16:52 it has bi for my last name uh so this is 16:57 what happens here and pointing this out 16:59 cuz this was the part of the SQL code I 17:01 didn't quite understand and had to look 17:04 up all right and 17:07 then once again we see that we can hit 17:10 try to fix it and this is great cuz you 17:14 don't need to copy and paste in the 17:17 error and then you can see 17:20 that it fixes the error but then there 17:24 is another issue all right so let's go 17:27 ahead and restore this and I'll show you 17:29 what the issue 17:31 is all right so I'm going to log out 17:35 and then you hit login you see nice 17:39 login and register screen and remember 17:42 when I used to make like an entire hour 17:44 and a half video showing you how to make 17:46 one of these and now it just did it for 17:48 us this is pretty 17:52 cool all right so you hit register and 17:55 you enter your 17:57 email and you know you enter your email 18:00 and what it's going to do is it's going 18:03 to require that you check your email and 18:05 hit confirm here however by default it's 18:10 going to send you to localhost 3000 18:13 which is not where where we are building 18:15 it and so how we get to this screen we 18:18 go to authentication and URL 18:21 configuration and you could paste 18:24 in what you have there in The Lovable 18:27 app or you could just turn off email 18:31 authentication for now and for that you 18:34 go to 18:36 uh sign in sign up and you go down here 18:41 to 18:42 email and you turn off confirm email 18:46 like that and then you will not need to 18:50 confirm your email so you'll want to 18:52 turn this back on when you actually 18:54 launch your app however when you're 18:57 testing you don't really need it so that 19:01 is one tip that's going to save you 19:03 quite a while because uh when I was 19:05 doing this okay so first I told it not 19:08 to use the authentication take us to 19:10 Local Host and then it supposedly 19:12 refactored something 19:15 but as you can see this isn't really 19:18 changing much it adds user metadata but 19:21 that's not going to do any good it 19:24 creates a pseudo email like this did not 19:27 actually fix the thing 19:29 and the 19:30 reason oh yeah and by the way I just 19:34 keep on asking it things and oh it's 19:39 still not answering and none of these 19:42 changes are actually useful and so you 19:46 can see here I didn't actually fix this 19:48 through lovable so this is a completely 19:51 separate thing in between here and here 19:53 what I did was I just went and read the 19:56 superbase stocks and that's I fix the 19:59 problem so that is a weakness of lovable 20:02 is when it's doing stuff like this it's 20:05 not super integrated with the you know 20:09 the outside code things that you need to 20:11 do yet it you know it has the connection 20:15 here but you have to know that you have 20:18 to go into super base and start changing 20:20 things it doesn't tell you automatically 20:23 well at least that's what I thought 20:25 until I reread this so up here right 20:28 after the first one it has this one 20:30 sentence so you do want to actually read 20:34 this uh so it says you might want to 20:37 disable email verification in the 20:39 superbase console and so it did tell us 20:43 right before an error so I've gotten in 20:46 the habit of when there's an error I 20:48 just go and say try to fix it and ignore 20:51 everything that came before the error 20:53 and that is probably not ideal and so I 20:57 would have loved if if it had kept 20:59 saying if it had recognized that you 21:03 know the things I was complaining about 21:05 were because of this but uh it did 21:09 actually say it anyways let's log back 21:12 in so that we can actually use the next 21:16 feature we're going to 21:18 build by the way to keep you oriented in 21:21 what we're doing so we have the first 21:24 three things completely done and now we 21:27 need to do creating a product purchase 21:30 products using tokens and connect to 21:32 stripe purchase tokens and if you look 21:35 over here at our chart we have users and 21:37 we have products we don't have product 21:40 purchases token purchase or any of these 21:42 connections yet but even though it only 21:45 looks like we've made a tiny bit here 21:47 we've actually done some of the most 21:49 complicated stuff because you know 21:52 getting your backend set up and getting 21:54 everything connected in O is well I was 21:57 about to say it is not trivial but I 22:00 mean it kind of was because we Vibe 22:02 coded it and the reason we could Vibe 22:04 code it so well is because these are the 22:07 sort of things that need to happen in 22:09 every app and so the closer you are to 22:13 something that's in every app the better 22:15 you are able to Vibe code it because 22:17 there's so much more in the training 22:19 data and the reinforcement learning has 22:22 acted on it more and so the way I think 22:25 about it by the way is you know in every 22:29 app there's a bunch of random stuff 22:31 represented by this red and at the core 22:34 there's this nice unique thing that is 22:37 only in your app which I have 22:39 represented in green 22:42 and you know a lot of stuff you have to 22:46 build around that uniqueness to make it 22:48 palatable to make it usable and how I 22:51 see Vibe coding is well okay so first 22:54 how I see Frameworks is it shrinks that 22:56 amount of boilerplate 22:59 and then what vibe coding does is uh 23:02 let's see if I can draw with this is 23:05 this a line it's a line how do I draw 23:08 okay here I here's how I 23:10 draw the vibe coding 23:12 just fills in a bunch of this for you 23:16 and so you know you spend a lot less 23:19 time on the stuff you have to write 23:21 every time or that's in you know 80% of 23:24 apps and more time on the stuff that 23:27 makes your app unque by the way this is 23:30 also why some people such as Linus tvod 23:34 are probably not as excited about 23:36 generative Ai and Vibe coding because 23:39 what they work 23:40 on there's not a whole lot of boiler 23:43 plate so it's not nearly as useful for 23:46 them like yeah Vibe coding a react 23:51 component that makes a ton of sense 23:53 there's tons of react components just 23:54 need to make yours a little bit 23:56 different uh to fit your needs can you 23:59 imagine Vibe coding the Linux kernel no 24:02 that would be a horrible idea at least 24:05 with the current set of 24:07 tools okay back to our app so NYX asked 24:10 it create a form where a logged in user 24:12 can upload a product and then it goes 24:15 ahead and creates some SQL that I have 24:17 to approve and it creates a product 24:21 images bucket which allows us to upload 24:24 images which is nice like it knew that 24:27 this is probably something that we would 24:29 want well okay actually it definitely 24:32 knew it because you know these are 24:34 images and so to upload one of these 24:37 you're going to want to supply an image 24:39 uh but is nice we can upload our own 24:41 rather than just put in a 24:43 URL all right and so it did do a price 24:47 which is different than what I wanted so 24:50 uh I said do not add price yet so we're 24:53 not going there 24:55 yet and so it Updates this just remove 24:58 the price column and I hit okay by the 25:01 way uh I don't type this in every time 25:03 there's a button you hit okay and it 25:05 types this in for you and all right so 25:09 um yeah there's errors and it fixes 25:13 it and I review the new stuff obviously 25:16 I didn't review the previous version as 25:19 well as I could have but uh yes this is 25:23 the nature of vibe coding if this was a 25:25 production app I probably would have 25:27 been a little more careful 25:29 uh but all right so great successful and 25:35 it's created a upload system for logged 25:38 in users and let's go ahead and go to 25:40 that and see how to do 25:47 it and we need to hit refresh 25:50 here and we hit add product and there we 25:54 go we can put in a name a description 25:57 and a product 25:59 image and let's go ahead and yes we're 26:02 going to sell a signup confirmation 26:11 woo and we'll hit create 26:14 product and then we can see there it is 26:18 it shows up and it is saved we'll 26:20 refresh and yeah it's still there as you 26:23 can see by the uh this this is obviously 26:27 custom 26:28 you'll recognize it if you've been 26:30 watching the 26:31 Channel all right so now we have four 26:35 out of the six features that we wanted 26:38 next is to purchase a product using 26:41 tokens and oh by the way we want the 26:43 product to belong to a Creator let's go 26:46 ahead and double check that that 26:49 happened so uh in the 26:52 migrations here we can see that 26:56 uh yes 26:58 it's uploading there and we're add 27:02 altering the products table so you can 27:04 add the user ID U ID so we are good and 27:09 just to make sure we could check the 27:11 code we could also check here in uh 27:14 superbase and so we'll go to our actual 27:18 table editor and go to products and 27:22 we're going to go to the newest 27:25 one um let's sort by this 27:29 oh okay it doesn't sort by that 27:32 anyways um the newest one 27:39 is sign up 27:41 confirmation and we can see it does have 27:44 a user ID it's the same one as the one I 27:46 created before so it is set up correctly 27:49 to connect the user 27:50 ID okay so then we'll go with number 27:53 five which is purchase the product using 27:55 tokens and so this is I give it a little 28:01 more details because I know it will 28:03 probably not do what I want to do if I 28:05 just say this right so we want the 28:08 current number of tokens per user stored 28:10 on the user table and then the product 28:13 to have a number of tokens that it costs 28:15 like my suspicion is that if I didn't do 28:17 this it would just do this second part 28:21 all right so it adds these to both uh 28:25 profiles and products great 28:28 and after it does that it goes ahead and 28:32 implements the product purchase 28:34 functionality and this so if you look at 28:36 the code this is not actually what I 28:39 want so uh we're purchasing a product 28:43 right 28:45 and uh so there's actually going to be 28:47 some errors here that we'll see in a 28:50 second but 28:53 uh yeah it's called purchase product and 28:57 you don't actually uh oh okay so we do 29:01 have some of this but it's just 29:04 subtracting it there's no record that 29:07 actually shows what's being purchased 29:10 and interesting it does have a 29:12 recommendation to do that so uh I didn't 29:16 read this before CU I knew that it was 29:18 not complete uh but if I had just been 29:21 reading this it would have given me the 29:24 idea to do what I eventually did all 29:27 right so 29:28 here uh we'll notice that okay so first 29:32 it has an error so we just fix it 29:38 and this starts a string of really weird 29:44 things where it's like uh it has a 29:48 typescript error and I went back and 29:52 forth of it quite a bit and you know 29:55 let's go ahead and look at this air 29:59 so it is product service argument of 30:03 type string is not assignable to 30:05 parameter of type never and here I got 30:08 pretty stuck because I didn't understand 30:11 our code because I didn't have to and so 30:14 I did actually go and clicked view on 30:17 GitHub and tried to understand the code 30:21 so you can see you can see the GS here 30:23 we can uh the commits here we can look 30:27 at the different branches 30:30 and 30:32 uh here and we can see what it's like at 30:36 any stage of it we could actually put 30:39 this in the cursor and start working 30:41 there so that is something we can do and 30:44 oh interesting it reverts here as part 30:47 of the main branch so that's uh 30:50 interesting that's probably not 30:51 something that you 30:53 want uh in your main branch if this is 30:57 production 30:58 so 31:00 uh yeah once again this is better for 31:04 generating the first part of it and 31:06 getting a lot of the boilerplate out of 31:07 the way they say they have stuff coming 31:09 for importing code bases but I wouldn't 31:12 quite trust it yet with uh my code base 31:16 uh that has a ton of stuff in 31:18 it anyways so I looked at the code 31:21 didn't understand what was wrong and 31:24 then I had a bunch of back and forth 31:26 with it trying to tr Trace what's 31:29 happening and with this uh product 31:33 purchase RPC and eventually I realize 31:36 like we don't want that uh and so after 31:42 a lot of this we end 31:46 up removing purchase product 31:52 and yeah I think this is where we remove 31:56 it nope this is they keep thinking it's 31:59 a typescript error but no the error is 32:01 that this just doesn't work and uh once 32:05 again it's possible it could be made to 32:07 work I don't know enough about superbase 32:09 uh RPC functions to 32:12 know and so we go back and forth back 32:15 and forth if you've been working with uh 32:18 llms you'll recognize this sort of loop 32:20 where uh I mean humans sometimes get 32:23 into Loop like this but it's harder to 32:25 get a uh llm out of it 32:29 and just keep 32:32 going and eventually we like I say hey 32:36 let's do something completely 32:39 different and let's see if this is the 32:41 one that 32:43 worked yeah all right so we remove the 32:47 RPC and just do this 32:51 and we do a direct database transaction 32:55 and that is what ends up working 32:58 so let's go ahead and restore 33:04 this great and you can see that we have 33:07 the tokens assigned now and let's go 33:10 ahead and oop this is zero tokens well I 33:13 don't have an edit function so uh we 33:15 can't change that let's go ahead and buy 33:16 an AI engineering road map we're going 33:18 to hit purchase and boom now we have 113 33:23 tokens left instead of 33:26 118 so this is the first time where I 33:30 really thought you know if I'd been 33:32 non-technical I don't think I would have 33:34 been able to figure this out and so this 33:37 is one of the limits of vibe coding is 33:38 like you have to understand what's 33:40 happening at some level or you are going 33:43 to get stuck and then it's so 33:46 frustrating so you go in 60 miles an 33:48 hour then you just stop and then you're 33:50 stuck for a long time and as a 33:53 programmer you're kind of used to that 33:55 uh and you develop tricks for getting 33:58 unstuck but if you haven't programmed 34:01 before like this would be super 34:04 frustrating especially when the llm 34:06 tells you like oh yeah okay we fixed it 34:08 and then nothing changed like we'll see 34:11 in a little bit it keeps telling us we 34:13 fixed it but it's changed comments 34:15 because uh anyway we'll get to that in a 34:16 second all right so now we want to make 34:18 the product purchases table so that 34:21 keeps a record of all products purchased 34:23 by a user and so we tell it the user ID 34:26 and product ID and a purchase price and 34:28 number of tokens and we create a new 34:31 record when a purchase is made so we're 34:33 just describing what we want to happen 34:36 in the workflow and then it does all of 34:38 this for 34:39 us 34:41 and so it has an error and interestingly 34:47 we don't uh tell it to handle the error 34:50 we're just like okay make a p purchase 34:52 history page and then it does that and 34:54 it still has the error then we fix the 34:57 error 34:58 so something funny with this error so it 35:01 had a duplicate identifier 35:03 database and so I kept on trying to find 35:07 ways to get that to be fixed and it just 35:13 kept on erroring and I was getting 35:15 pretty frustrated and eventually I was 35:17 like you know what it still 35:19 runs let's just keep doing things and 35:23 you know it still has the air but page 35:25 still runs like let's hit restore here 35:28 and you'll see 35:32 that oh 35:35 maybe preview oh 35:40 okay oh right right there we go had to 35:43 exit the 35:44 code uh okay so here we can go to our 35:48 purchase history and we can load the 35:50 purchase history and it works even 35:52 though there's this eror and so I just 35:54 kept rolling and added a link in the 35:57 header 35:58 Navar and started doing purchasing 36:01 tokens in four different pack sizes and 36:04 we'll go over that in a second but first 36:06 I want to show like yeah just this air 36:08 keeps going and eventually it just 36:11 disappears and I'm not entirely sure why 36:15 and so uh anyways that's just part of 36:20 the 36:22 experience anyways we can go and 36:24 demonstrate that this is working uh we 36:27 go to our signup confirmation we 36:29 purchase it your tokens don't go down 36:33 but it does show up in your purchase 36:35 history and if we looked here it would 36:38 show up in product purchases once we 36:41 reload 36:43 it right 36:47 here all right our final thing we're 36:49 adding to this is connecting to stripe 36:51 to purchase tokens and so like any good 36:55 software developer we're going to split 36:57 this up so that our coder in this case 37:01 the llm does not get confused so first 37:04 we're going to save token purchases in 37:06 the database each token purchase should 37:09 have a user ID so it creates a new table 37:13 and it gets the price oh actually the 37:15 price is correct the amount is the 37:17 integer so it actually does this 37:19 correctly and it does that and then uh 37:26 if we restore this it will will have 37:29 a buy tokens page and it has four 37:33 different tiers from 5 to 100 just like 37:35 we asked and we can go ahead and notice 37:38 we have 113 now we can purchase it's 37:40 like o we have 37:41 118 but we didn't actually pay any real 37:44 money for that and so now say I would 37:47 like to pay using stripe and so it asks 37:51 you for your uh API key in this case I'm 37:54 using a test private key and so uh it 38:00 will not of course share it with your 38:02 front end is is this test key is being 38:06 used on the back end but you know this 38:08 is the type of code you do want to 38:09 double check and make sure it's good 38:12 before you ship it to 38:14 production all right and so it does this 38:18 let's go ahead and restore 38:21 and going to buy 38:24 tokens oh buy tokens and go here and it 38:31 failed to initiate checkout and so I 38:34 tell it that and it says okay we know 38:37 what the error is and like all right 38:40 still broken still broken 38:44 uh and it's doing a lot of error logging 38:47 but not fixing it and 38:51 so yeah 38:53 it we go back and forth all right and 38:57 and this is actually where it fixed it I 39:00 believe and so we hit here we hit here 39:04 and 39:05 so oh right no checkout URL return so it 39:09 fixed the thing we were doing before and 39:11 now we say Okay use this to go to the 39:14 checkout page I had to use the technical 39:17 knowledge uh believe I looked at the 39:19 stripe docs and also at the uh data it 39:22 was sending us you know open the 39:25 inspector and then 39:29 at some point it actually fixes it so 39:33 right here but now the checkout page is 39:37 not displaying correctly I'll show you 39:39 what I mean so we go 39:42 here and it looks like this and so I 39:46 actually spent a lot of time trying to 39:48 debug this and if we go to some of these 39:53 then you'll see that it is just 39:58 changing the comments because it doesn't 40:02 really know what else to do it knows 40:04 that I say it's not working but its code 40:07 matches what it thinks it should be so 40:10 you know if you go to Raw then it 40:13 generates each of these completely new 40:15 every 40:16 time 40:17 uh but the difference is just comments 40:21 and spacing sometimes and so what I 40:25 finally figured 40:26 out you got to click this button to open 40:29 it in a new tab and then it will 40:33 actually 40:35 work so there was something about it I 40:39 think being in an iframe that was 40:41 causing it to not work and so you got to 40:43 test it out here when you're doing a 40:45 stripe checkout 40:48 page and so there we go like this 40:51 actually works and you know this is a 40:55 test key so there are test 40:57 credit cards you can use like this one 41:00 if you actually want to 41:02 pay so I went ahead and filled it out 41:05 and oh we need name on card and it will 41:09 accept it 41:11 and then it shows all right we're 41:14 processing it and we've got a new 41:17 balance 41:19 excellent so if we push this production 41:23 and put in our real stripe API key we 41:25 could take actual credit cards and do 41:28 actual payments and this is all just in 41:31 Vibe coding now of course I wouldn't 41:34 quite necessarily trust Vibe coded 41:37 payment uh code so I'd want to actually 41:40 read that code myself and maybe feed it 41:43 to a different llm as well and ask it if 41:46 there are any issues it can see but I 41:50 mean it does work this does work and so 41:54 honestly I was kind of amazed with how 41:57 far far you could get using Just Vibe 42:00 coding and so before we go I do want to 42:03 mention some limitations like we've 42:05 talked about them which is like if 42:09 you're not technical a lot of this is 42:11 going 42:12 to and not be great for as an experience 42:17 like it'll be great at first because 42:19 you're doing so much more than you ever 42:21 had the power to do but then you get to 42:23 a part where you need some technical 42:24 knowledge to start debugging it and 42:26 it'll like running into a brick wall and 42:29 this will get better both as the 42:31 foundation models get better and as 42:33 teams like lovable start adding more 42:35 affordances that can help you get over 42:38 those gaps the other limitation is that 42:42 as your code base gets bigger then in my 42:45 experience LMS have gotten less good at 42:48 handling it and maybe they're doing 42:50 something different behind the scenes 42:52 here I don't know people are developing 42:53 techniques to handle this but uh in my 42:57 experience the bigger the amount of code 43:00 you have to work with the lower the 43:01 quality gets 43:04 and this could be a problem sooner if 43:06 it's entirely Vibe coded because like 43:09 look at all these UI components we are 43:11 not using these it just put them in 43:14 there and code tends to grow faster when 43:18 you're Vibe coding 43:20 because the llm specifically models like 43:24 clad which they're probably using cuz 43:27 Claud is the best uh coder right now uh 43:31 then it just really likes to Output code 43:34 and it's usually correct code but it 43:37 will make things that are generally 43:39 longer than a human 43:42 might so let me know in the comments 43:44 what you'd like to see me Vibe code next 43:46 or cover next go ahead drop a like And 43:48 subscribe and I will see you next time