Vibe Coding FULL COURSE For Beginners [In 1 Hour] | Figma & Lovable Tutorial

0:00 Do you know how to chat on WhatsApp? Do 0:01 you know how to design on Figma? Great. 0:04 If the answers to those questions was a 0:06 yes, stay tuned because today I'm going 0:08 to teach you how to design. Nope, not 0:11 design. How to build a fully functional 0:13 web app with just these two skills. 0:16 Designing on Figma and chatting on a 0:18 messenger. To teach you how to do this, 0:20 I have designed a sample web app. And 0:22 for the very first time in the history 0:24 of this channel, I have designed a food 0:26 delivery app. Yes, I've never used food 0:28 delivery as an example so far. One 0:30 reason is that I do that as a part of my 0:32 job every day. So these sample apps give 0:35 me an opportunity to try out other 0:37 domains just for fun. But today I 0:38 thought let's try food. So food it is. 0:41 Again this app is not exactly like 0:43 Swiggy. There won't be any restaurants 0:45 but dishes directly. The app will have 0:47 item listings with photo, item name, 0:49 description, price, add button and so 0:51 on. It will have an address section 0:53 clicking on which you can change the 0:54 address. It will have a search bar using 0:56 which you can search the items. But as a 0:58 part of this exercise, I'm not going to 1:00 make the full functionality of the 1:01 search bar. The video would get too long 1:03 otherwise. It will have a cart where the 1:05 added items would show up along with a 1:07 detailed bill section and a button to 1:09 check out. And the entire experience 1:11 will be functional. That is you can 1:13 browse items, add them to cart and you 1:15 can see those items appearing on the 1:17 cart, see the bill calculations and all 1:19 taxations. And you can also click on the 1:21 check out button to place an order. Of 1:23 course, no orders will get placed 1:25 because we are just building the front 1:27 end here. But if I had hired a team to 1:29 build this from scratch, it would have 1:31 costed me in laks. I asked Chad GBD for 1:33 a breakdown of all these expenses and 1:35 the design of the entire app itself 1:37 would cost over three lak rupees. But 1:40 the single screen that I'm using for 1:41 this exercise today, if I were to 1:43 interpolate the cost of designing that 1:45 only screen, it would still be close to 1:47 30 to 50,000 rupees, which is 1:48 substantial. But instead I myself 1:50 designed it in Figma and with the help 1:52 of this tool called lovable transformed 1:54 it into a working app. Big shout out to 1:57 my friend and colleague Akshai for 1:58 introducing me to this tool. I am loving 2:00 it so far. Lovable is an AI powered app 2:02 builder that lets you build, edit and 2:04 deploy apps in minutes. Yes, minutes. 2:06 You heard me right. Lovable is not like 2:08 other no code tools available in the 2:10 market. What makes it special is that it 2:12 is completely chatbased. This reminds me 2:14 of the time when we used to interact 2:16 with our engineers at Swiggy during 2:17 lockdown when everyone was working from 2:19 home. We would discuss over Slack, tell 2:21 them about the changes that needs to be 2:22 made, share screenshots for references, 2:25 also report bugs and everything else. 2:26 The developers in return would also 2:28 respond to us, ask for clarifications if 2:30 needed, share screenshots of the updates 2:32 and we all would build stuff together. 2:34 Lovable works just like that. The only 2:37 difference is there's no human on the 2:39 other side of the chat but artificial 2:41 intelligence. You feel there's too much 2:43 padding between the heading and the 2:44 button. Just take a small screenshot and 2:46 tell lovable about it. Reduce little bit 2:49 of padding between the heading and the 2:50 button. Yes, it understand abstract 2:53 articulation like a little bit, fix it, 2:56 make it better, clean it up and so on. 2:58 It feels just like you're interacting 3:00 with a human. Now you might simply 3:01 choose to describe what you need, add a 3:03 few reference of screenshots to it maybe 3:05 and Lovable would do the design or also 3:07 make them functional complete with 3:10 databases, API integrations and backend 3:12 support. And when you're ready, deploy 3:14 your app with a single click, skipping 3:16 all the complicated setup. You can also 3:18 start by designing on Figma and move 3:19 that design to lovable and then continue 3:21 building it by chatting. And this is 3:23 what we are going to do today. This 3:25 means designers, founders and teams can 3:27 go from idea to a fully working app 20 3:30 times faster than traditional 3:31 development. But the best part about 3:33 this project is that it is a full stack 3:35 design project that you can add to your 3:37 portfolio. So keep watching it till the 3:39 end. I'll walk you through every step 3:41 and by the time you are finished 3:43 watching this video, you will be able to 3:44 build something like this all by 3:46 yourself. Let's get started. So this is 3:48 how lovable looks. Now the moment you 3:50 look at it you will know that this is 3:51 unlike any other no code website builder 3:54 that you might have seen. In fact the 3:56 first screen only has one text box where 3:58 you can write a prompt and directly 4:00 generate any website. Now here you 4:02 cannot make native apps yet but you can 4:05 make any websites or web apps and that's 4:07 what we are going to do today. It uses 4:09 React and other HTML and CSS to build 4:12 all these stuff out here and React is 4:14 good as we all know. So here you can 4:16 either start by writing a prompt or you 4:19 can even attach a screenshot. If you 4:21 have seen something and you want a 4:22 similar thing to be built for you as 4:23 well, you can just use it as a reference 4:25 and then ask lovable to do it. Or you 4:27 can also import Figma. You see the Figma 4:30 logo out here. So when you click on it, 4:31 it actually teaches you how to do that. 4:33 It says import from Prima. So you need 4:35 to have the design on Figma and use 4:37 builder.io Figma plugin. It's a 4:39 different plug-in, not a lovables 4:40 plugin, I guess, but okay. It's a 4:42 builder.io plugin. Then you can select 4:44 the frame and you can do it right. And 4:47 the design that we're going to make 4:48 today, like I said, we are doing a food 4:50 app. This is a very basic design that I 4:52 have made. Now, here's a warning. Please 4:54 do not take this as a gold standard of 4:56 designing any food app. Just because I'm 4:58 associated with a food delivery company 5:00 doesn't mean that this has got anything 5:01 to do with that. I have simply taken a 5:03 reference because I was curious what my 5:06 developer counterparts build. Can I 5:08 build something similar using this tool? 5:10 Right? This is very basic. This is not 5:12 how an ideal food delivery app should 5:14 be. This is very basic, an example. 5:16 Please treat it like that. So, I've just 5:18 created the homepage. It has address, 5:20 search, and cart at the top. And this 5:21 section usually has banners and offers 5:23 and stuff. But I just put a logo. I just 5:25 made this random logo in 2 minutes. 5:28 Literally food and then flipped and 5:29 food. So, food, food is the name of our 5:31 app followed by a list of items. You 5:33 know, this grid is what I have made it 5:35 like this. And I've also made a drop 5:37 down for the address selection. But I 5:39 think lovable should be able to make it 5:41 itself. If it's not able to then we will 5:43 use this reference. So let's go ahead 5:45 and convert or transfer this to lovable 5:47 and then we will do the rest of things 5:49 out there. Okay. So the first things 5:50 first you need to trigger the plugin. So 5:52 you know you just go click on this thing 5:54 which is actions. Go to plugins and 5:56 builder.io I have already installed. If 5:59 you haven't please go and install the 6:00 plugin. It's a free plugin. Log to 6:03 builder.io and connect lovable. It's 6:05 very easy. It'll prompt you to do it 6:06 whenever you're doing it for the first 6:08 time. So logging in with lovable as well 6:10 as builder.io. You can use your Gmail ID 6:12 and it will seamlessly connect. And once 6:14 you connect, it is ready to go. I've 6:16 done it in the past so I don't have to 6:17 do it anymore. Select this artboard and 6:19 click on builder.io. Now it'll take a 6:21 few seconds for it to load. And there it 6:24 is. Since I've selected this artboard, 6:25 it is showing up here. And I'll click on 6:28 export design. Now it's going to take a 6:31 couple of minutes. It's analyzing the 6:32 Figma layers. It'll do a couple of 6:34 things. I'll probably speed up the 6:36 section. And after that, it will show me 6:38 some previews. It'll give me two or 6:40 three options and I get to pick which 6:42 one is closest to the design. Of course, 6:44 it's not going to be perfect right away. 6:46 We will make it perfect after going to 6:47 lovable, but it is going to do a fairly 6:49 good job at converting what you have on 6:51 Figma there. Now, in this regard, it's 6:53 very important to know that use auto 6:56 layout here. Now, if you have seen my 6:58 videos, I've always said that auto 6:59 layout does a tool that makes your life 7:01 easier. It has got nothing to do with 7:02 how good or bad your design is. But in 7:04 this case auto layout is essential and 7:07 it's because in code things are dynamic. 7:10 The screen size is never fixed. You know 7:12 it can be a smaller screen bigger screen 7:13 and based on that the width of elements 7:15 needs to be dynamic and that's why auto 7:18 layout helps preserve that. So if you 7:20 put auto layout out here lovable will 7:22 understand the logic and add it to the 7:24 code just like the way you want it. 7:25 Okay. So here are a few options. I see 7:28 you know like I said it's never perfect 7:29 here. It has missed the logo and it's 7:31 also showing the preview for desktop and 7:33 mobile. For this exercise, for this 7:34 example, we will only stick to desktop 7:36 and not mobile. You could easily do it 7:38 from mobile as well, but I'll just keep 7:40 it simple. You know, once you know how 7:41 to do it on desktop, you can do it on 7:42 mobile as well. So, I'll just do it for 7:44 desktop for now. All right. So, these 7:45 are the options that we have out here. 7:47 There are three options that we have. 7:50 And I think I'm going to pick this one 7:52 because the listings looks pretty much 7:53 there. Just the logo is missing and 7:55 these things can be easily uh fixed. So 7:58 I'm just going to click this one, the 7:59 desktop one. And the moment I do, uh, it 8:02 says there are a couple of options. I 8:04 need to send it to lovable. That is open 8:06 in lovable. I'm going to click this one. 8:08 So it's doing a few things. Once it is 8:11 done, it is automatically going to open 8:13 up my browser, a new tab in my browser 8:16 with this project loaded. It takes 2 or 8:19 3 minutes depending on how complex your 8:21 file is. So we'll speed up this section 8:23 or we'll just cut and come back when it 8:26 is already loaded. So here we are in 8:28 lovable and it has loaded the preview 8:30 that it was showing up. Of course u this 8:32 part isn't right. These parts are quite 8:35 good. The cart and the search bar I 8:37 think is almost there. The logo is 8:39 missing which we will add. These 8:41 listings are almost there. It feels 8:44 exactly like the way we had designed. So 8:46 this is nice and uh you know even the 8:48 spacing padding everything is perfect. 8:49 So let us start working. So this is the 8:52 interface the working interface of 8:53 lovable. And uh on the right side you 8:55 keep seeing the preview of what you're 8:57 making. And on the left side there's a 8:58 small chat panel. If you work for a 9:00 company you probably are used to uh 9:02 reporting bugs over chat. It could be 9:05 you know Slack or Microsoft Teams or 9:07 whatever you use. And one of the ways 9:08 that you do is you take a screenshot 9:10 then you put it on Slack and then you 9:11 write hey this part shouldn't be like 9:13 this. It's breaking or you know the 9:14 button should have a little more padding 9:16 and stuff like that. That's what we all 9:17 do isn't it? I do it as well and then 9:19 you know some developer maybe sees it 9:21 from that group and they say okay I'm 9:22 fixing it or it'll be fixed in the next 9:24 release and so on. This works just like 9:26 that. So you do exactly the same. You 9:29 can give instructions just like you 9:30 speak to a human. You can add 9:32 screenshots and point out to that 9:33 screenshot and say you know this needs 9:35 to be fixed and all and it'll get fixed 9:37 just that there's no human on the other 9:38 side but artificial intelligence which 9:41 is nothing but lovable. Okay, it's very 9:44 interesting. It's very simple as well. 9:45 So let's go and start fixing it. All 9:47 right. First things first, so this part 9:49 is bothering me. So let's go and fix 9:51 that. Right? I can directly start 9:53 chatting in simple human understandable 9:55 language. Doesn't have to be 9:56 grammatically correct in all of them. Or 9:59 I can also use this thing called edit. 10:00 So edit is nothing but when I click on 10:02 it, I get to point at a particular 10:05 element. And when I do, it opens up one 10:07 small menu where I can go and manually 10:09 fix some of those things as well like 10:10 the spacing, padding and all. Pretty 10:12 easy interface like what you see in auto 10:15 layout and Figma. So you can do that. I 10:17 will do some of those as well or you can 10:19 just point out so that lovable knows 10:21 that you are giving instruction only for 10:23 this small unit and then you know you 10:25 can go and type a chat both are possible 10:27 I'm going to do both and if you're one 10:29 of those people who like to fiddle 10:30 around with code you can also uh turn on 10:32 this toggle it says code viewer you can 10:34 actually go and see the code that 10:36 lovable is writing I'm not going to do 10:37 that because I know most of you don't 10:39 like it so here I have I've clicked the 10:41 edit option and I have clicked on this 10:43 one I'll do it once again yeah this part 10:45 is selected Now I'm going to say 10:47 truncate the address to one line. Just a 10:54 simple human language. All right. And I 10:56 hit enter. Now you will see it is going 10:58 to articulate back. I'll update the 11:01 location bar component to truncate the 11:03 address to a single line. So it has 11:05 actually explained what it is going to 11:07 do. And it also gives me the confidence 11:08 that it understood what I asked for and 11:11 it fixed it. You see it fixed 11:13 immediately. The page refreshed and now 11:16 it is there. It is that simple and this 11:19 is exactly the technique we are going to 11:21 use to fix each and everything that you 11:23 see out there. Okay. All right. Now this 11:25 is spine. This part looks nice. We'll 11:28 add the logo later. But let's perfect 11:30 the listing. So here I think I'm going 11:33 to take this component. Okay. I'm not 11:35 going to point out at anything. I'm just 11:37 going to say that I feel this price 11:39 needs to better align with the button. 11:41 Right now the price is at the top edge 11:43 of the at button. I want it to be center 11:45 align. Okay. So uh center align the 11:49 price in the product card. No center 11:53 align the price um with 11:57 the ad button. I think that's enough. I 12:00 don't even have to say product card 12:01 because there's only one ad button. It 12:03 is smart enough to figure that out. 12:04 Let's see if it's able to do. I'll 12:06 center align the price with the ad 12:07 button in the product card conf. It 12:09 figured out that you know it's product 12:10 card. uh it should happen anytime it's 12:12 working working yes there you see that 12:15 the prices have just come and center 12:17 aligned with that right and I also feel 12:19 the height of the button is a little too 12:21 much you know that's not what I had 12:22 designed so if I just go here I had 12:24 added a height of around 36 pixels I'm 12:27 going to do that right so and I also 12:28 want it to be like a perfect pill like 12:30 this so what I will do is I will say if 12:33 36 is the height the corner radius 12:35 should be at least 18 to make it look 12:36 like a perfect pill and that's what I'm 12:38 going to do so I'll just select this add 12:40 button probably it's not needed but 12:42 still I will do it and I will say um uh 12:46 set the height of the add button to uh 12:52 36 pixels 12:55 and 12:56 corner radius to 18 pixels so that it 13:02 looks like a 13:05 perfect pill see I'm using just human 13:09 understanding understandable languages. 13:10 So I'll just go and hit enter and it 13:13 should be able to fix it. Let's see if 13:14 it was not 36 already. Maybe it is 13:16 already 36. Okay, it says I'll modify 13:19 that button to make it perfect shape 13:20 with the specified height and border 13:22 radius. No, this articulation back when 13:25 it articulates back just gives me so 13:27 much confidence that yes, I have done 13:28 the right job. Yeah, now it looks more 13:31 like what I wanted it to. Right. All 13:34 right. Now let us make it functional. 13:36 Right. So these are supposed to when I 13:38 click on add it should add an item to 13:40 the card. So we'll do all of them. Let 13:42 us go and do hover states right. Uh let 13:45 us I've defined some colors for hover as 13:47 well. So if I go to Figma you see this 13:49 is what I want when I when I summons 13:51 hover this I want the button to get 13:53 lighter. So I'll just copy this hex code 13:55 and I will go here. Um on hover do okay 14:01 on 14:03 hover do the following things to the add 14:09 button. Yes I can give multiple 14:10 instructions as 14:13 well. Okay. So I'm going to write um 14:16 change 14:18 the fill color to hashtag and the code 14:22 that I had uh copied. And then I will 14:25 also say 14:27 um scale 14:31 the entire button to 14:35 um by by 5%. Let's call it by 5%. Right? 14:38 So 105% slightly bigger it'll get. Let's 14:40 go ahead and press enter. Okay, it's 14:43 working. Let's 14:46 see. All right, it is working. Almost 14:49 about to get over. It is still not 14:51 reflecting. Okay, I've added the hover 14:54 there. You see there? You see, you know, 14:55 when I hover on it, the color changes 14:57 and also the button scales up a bit just 14:58 like the way I want it. I also feel 5% 15:01 is a little too much. Uh reduce the 15:04 scale 15:05 scaling reduce the scale to maybe 2%. 15:10 Yeah, 2% instead of 5%. 15:15 Okay. Yeah. So, I'm not giving any other 15:17 context just because it has just fixed 15:19 something to five. When I say that no no 15:21 not five but make it two it'll 15:23 understand what I'm talking about. See 15:24 it figured out that I'm talking about 15:25 the add button. I think it is still 15:27 fixing. So the scaling amount of scaling 15:29 should reduce a bit. The reason I'm 15:31 reducing it because yeah there oh damn 15:34 it's not even seeing. Is there even a 15:36 scale? Uh okay I don't even see the 15:39 scale. Okay I undo this right. I feel 15:41 okay 5% is okay because I don't even see 15:43 any scale. Something broke I guess. 15:45 Anyways so if you want to undo anything 15:47 you can always go to view history. And 15:49 once you go to view history, you will 15:50 see all the things that you've done and 15:51 you can select any of them and you can 15:54 go to the uh and you can go to the uh 15:57 you can go back to that state. So 15:58 enhance add button hover effect. So when 16:01 you click on it, it will load up that 16:03 version like in this version the scale 16:04 was there and you can restore to this 16:07 version and that's what I'm going to do 16:08 right now because you know yeah we all 16:10 make mistakes. I don't know if it's AI 16:11 that made the mistake or I made the 16:13 mistake but okay I'm I'm happy that I 16:15 could go back to where I wanted to. So 16:17 it is back. Okay, it is not refreshed. 16:19 It's not it's not updating here. Why 16:22 not? Let's see. Yeah, there it is. I 16:24 just have to hit the refresh manually. 16:26 Normally, it automatically refreshes. 16:28 Okay, now we'll make a few things. The 16:30 veg non symbol is definitely not right. 16:32 So, I'm going to feed the veg nonveg 16:34 symbol to it. Right. So, I'll go to 16:37 Figma. I will generate this. I I'll do 16:40 some maybe a 2x PNG or something and I 16:43 will export it to desktop veg and nonvid 16:46 symbols and all I will do is here I'm 16:49 going to attach you know these are my 16:51 things and I'm just going to attach it 16:53 here and I will say replace the veg and 17:01 nonveg symbols with these and I'll just 17:05 hit enter it will do 17:07 it okay let's 17:11 There it is. You know, I have the veg 17:12 and the nonit symbol the way I wanted, 17:14 the way it is on 17:18 Figma. Yeah, there it is. And I also 17:21 have uh like opacity to this. It's gray. 17:23 This is black. Right. Well, let's try to 17:25 do that as well. Now, in this regard, 17:26 you will see what Lovable has done or 17:28 what builder.io plug-in has done 17:30 directly is a pretty good job because, 17:32 you know, all the spacing paddings are 17:34 perfect. But at times, if you try, you 17:35 will see it's probably not all that 17:37 perfect. You might see some less 17:38 spacing, more spacing here and there. 17:39 And if that's the case, you can always 17:41 keep taking screenshots or tell it, hey, 17:43 increase the spacing between the name of 17:45 the item and the description and it will 17:46 do it. And I feel I want to do it. Maybe 17:49 increase it by 2 pixels or something. 17:50 We'll see. But right now, it looks fine. 17:52 So, let us see this one. I would want to 17:55 change the color uh to 50% black. Okay. 17:59 So, we'll just bring it here and I will 18:02 change the opacity to 50%. So if you see 18:06 here also it is changing. So this is the 18:08 color. I just set the color as black and 18:09 I want to set the opacity as 50%. So 18:12 this is it 044. I'm just going to make 18:13 it 0.5 here and hit save. I could have 18:16 used a chat to do that as well but it's 18:19 okay you know I I just want to show you 18:20 how you can use both of them to your 18:22 benefit. Just because it's an AI powered 18:24 tool doesn't mean you'll have to make AI 18:26 do everything. Sure you can do that but 18:28 not needed you know. Okay. So there 18:31 there it is. I think our listing looks 18:33 pretty good but I want to give one more 18:34 effect to it. on hover. Okay, let's 18:37 let's select the entire product card 18:39 right now. So, this is my product card 18:43 and I'm going to write on 18:45 hover scale 18:48 the product card by 18:53 5%. Okay, so that when it is scaled, I 18:56 would want the entire card to be scaled 18:58 as well. And that's the reason I was 18:59 trying to uh you know reduce the scale 19:01 of the add button to 2% because then it 19:03 like too many scale. But let's see how 19:05 it works. Right now the card as well as 19:07 the button both should scale up on 19:10 hover. Okay, it says it has added. Let's 19:11 say yeah it has added. See it has added 19:14 but again 5% is too much. Oh damn I 19:16 should have made it 2% at the beginning 19:18 itself. Instead of 19:20 5% make the 19:24 scale to 2%. Let's try once again. Last 19:27 time I think for the add button it 19:29 didn't work. Maybe didn't understand me 19:30 properly. Let's see if it does. 19:33 Um, maybe I think it understood. I don't 19:36 know why it couldn't do it last time. 19:37 Let's 19:38 see. However, scale might need to 19:40 refresh it once. Or maybe, you know, it 19:43 worked last time as well. I just didn't 19:45 refresh. No, it's not working. No, it's 19:47 not working, bro. It didn't work. Um, 19:51 it's not scaling on hover. Yes, I can do 19:55 that. Please fix that. Yes, that's a 19:59 kind of instruction I can give as well. 20:01 and it'll go and check it is just like a 20:03 human. At times it happens, right? 20:05 Developers say, "Hey, I fixed that." But 20:06 you're like, "Hey, you know what? It's 20:07 not right. It's not quite fixed. Can you 20:09 check it once again?" So, yeah, here it 20:11 is. It says, "Let me fix the hover 20:12 scaling issue with the product card 20:13 component." It figured out that it 20:15 thought it did, but that since I said it 20:18 figured out, 20:19 yeah, you see, oh man, is it really AI 20:23 or do you think some folks at Lovable 20:25 Edge headquarters are sitting behind and 20:26 taking all my instructions? Because it 20:28 feels like that. Okay. But but 20:31 brilliant, you know, my work is done. My 20:33 work is done for the listing. So, it's 20:34 pretty much there. Let's go and make the 20:36 add buttons functional. Okay. Uh let's 20:40 click on the add button. Um when the add 20:46 button is 20:49 clicked, uh let's do do the let's uh 20:52 when this clicked, add the 20:55 counter in the middle. 21:00 counter of 21:02 added items um in the middle and 21:08 uh and plus 21:11 and oh and minus icons 21:17 to increase or reduce the count. So 21:22 essentially I'm asking it to behave in a 21:24 way that when I click on add the plus 21:25 minus should come. So this is what I 21:27 have written. Not perfect. But I think 21:28 it should understand. Let's 21:31 see. Okay, I'll implement. It is doing 21:33 something. Uh, okay. Looks like it 21:35 figured out. Let's see if it actually 21:38 did. Okay, it says it did. Let's see. 21:41 Yes, it did. Yes, it did. But it has 21:44 this weird things. Okay, we'll we'll fix 21:47 it. And I also saw that the width of the 21:49 button increased because of this, right? 21:51 Um, 21:54 keep the width of keep the width of the 22:01 add button 22:03 constant no matter an 22:07 item 22:09 is added or not. Let's see if it's able 22:14 to fix that 22:19 part. Okay. Okay. Um, okay. It fixed the 22:23 con the con constant but the add button 22:25 the alignment got screwed. Okay. Say um 22:29 but I will just take a screenshot of 22:31 this. Uh 22:36 please center the text add inside the 22:42 button and I'll hit enter. I think it's 22:44 too small a thing for it to fix. It is 22:46 going to fix it. Let's see. Let's see. 22:48 Let's see. Let's see. Please do it. 22:50 Please do it. Please do it. Please do 22:51 it. If it is done, then just that other 22:54 thing will have to 22:56 fix. Okay. Yes, it fixed. Yes, it fixed. 22:59 Now, things look fine. Things look fine 23:02 except this block. So, we'll fix that as 23:04 well. So, um uh I'll make a few more 23:07 changes in the in the added state of the 23:13 button. Change the color to I want it to 23:17 become yellow. If you remember, I 23:18 defined a yellow color. I'm going to 23:20 define it to uh I'm going to set it to 23:23 this so that when an item is added, I 23:25 want the button to turn yellow so that 23:26 you know it's like very different from 23:28 the added versus non-added. Yeah, I mean 23:30 that's kind of the theme that I picked, 23:31 right? Orange, yellow, pink. Yeah, let's 23:34 see if it's able to do 23:36 it. There it is. Yes, it has done. So, 23:39 yes, you know, when it is there pink, 23:41 when I hover it becomes light pink. When 23:43 I click on it, it becomes yellow. And I 23:45 can increase and reduce. So, I need to 23:48 take a screenshot 23:55 here. A weird yellow 24:00 boxes appearing 24:03 when hovering on the plus 24:07 and the plus and minus 24:12 icons. Remove 24:16 that yellow box. I got it. Remove that 24:21 unwanted yellow box. I think. Let's see 24:24 if it's able to figure out. I think it 24:26 will. Fingers crossed. Fingers crossed. 24:28 Fingers 24:29 crossed. Okay, I see the issue. He sees 24:32 the issue or she sees the issue. We 24:34 don't know what the gender is. There's a 24:35 yellow hover effect appearing around an 24:37 icon. Let's fix that by removing the 24:39 hover effect. It knows. Okay. But I do 24:42 want a hover effect which we'll do in a 24:44 bit. Yes, it removed it. Yes, it removed 24:46 it. Yes, it removed it. But I do want a 24:48 hover state which is this. I want the 24:51 entire button. Of course, this is just 24:53 showing add. I want the entire button to 24:55 be this lighter yellow color. Right. Um 24:57 when an item in the in the wait in the 25:03 added added state of the add button uh 25:09 change uh when hovered over it change 25:17 the color of the button to # this shade 25:22 and hit enter. 25:28 Waiting. 25:29 Waiting. Okay, apparently it did 25:31 something. Yes, it did. Yes, this is 25:33 exactly the way I wanted. See, this is 25:35 the card. I hover over the card. The 25:37 card scales up a bit. I hover over the 25:39 button as well. The button also scales 25:40 up a bit and the color pink reduces a 25:43 bit or a light pink that I had chosen. I 25:45 click on it, it starts showing the 25:46 counter. I can do plus minus the way I 25:49 want. And then when I hover on the added 25:52 state of the button, the yellow color 25:53 also changes to the light yellow color. 25:56 Now here the only thing is um these or 25:59 these are SVG. Can I not make them 26:01 thicker because I feel they're a little 26:02 thin. I want them thicker because you 26:05 know they're not matching with the 26:06 outline. But that's a small thing. We'll 26:07 fix it later. Now I think our listing 26:10 looks perfect. Our listing looks 26:12 perfect. Okay. Now what we want is when 26:14 items are added to this add button, I 26:17 want the items to get added to the cart. 26:18 Right now the cart doesn't exist. Let us 26:21 ask it to make a cart. Okay. Right. I'll 26:24 I'll click on this cart button with the 26:26 edit. I'll say uh add a 26:31 um 26:33 build a cart. Let's see. Just build a 26:36 cart with the added items shown 26:45 inside along with a 26:48 button 26:50 to check out. Let's just hit enter. It 26:54 will build a cart. It's also going to 26:55 design gives you know I have already 26:57 designed a cart and kept a very basic 26:59 one. It's not it's there on the other 27:00 page. which I'm not going to show you 27:01 but you know without any reference it is 27:04 still going to do a good enough job for 27:06 making the card. Let's see how it does 27:08 and we will modify it based on our needs 27:10 if we need 27:12 it because right now it is not just 27:15 fixing padding and spacing but also it 27:18 is building a whole new component which 27:19 it doesn't even know right so let's see 27:22 I'm keeping my fingers crossed again I 27:24 hope it does a good job when I was doing 27:26 the trial one it had done a pretty good 27:28 job actually I was quite impressed I 27:30 feel it designed a better card than what 27:32 I did anyways let's click on this okay 27:35 it opened a cart like this uh Um I don't 27:37 know why. Let's just uh reduce this 27:40 panel and see. It is coming from the 27:41 bottom. Okay. I want it to come from the 27:43 side. Okay. I want it to come from the 27:45 side. Um make 27:48 the cart 27:51 um appear in from the right side of the 27:59 screen. Okay. Let's see if it 28:02 does. And let me also see meanwhile does 28:05 it show? Yes, it does. It shows me the 28:07 items uh along with 28:10 the 28:12 Okay. All right. Functionally, it got 28:14 the cart right. So when I click on 28:16 multiple items, it uh shows me the cart 28:20 like this. But this is more like a 28:21 mobile cart. Now we are building a 28:22 desktop. So I wanted to slide from the 28:24 right side. Right. Yeah. There it is, 28:26 you know. Okay. In the empty state, it 28:28 is still has the button. Okay. Let's add 28:30 some items and see, you know, maybe two 28:32 chicken burger, two Thai bobachi, one 28:34 spicy noodles. And yeah, there it is. I 28:37 think it has done a good job without 28:39 giving a lot of instructions. Man, I'm 28:41 already impressed with this thing. It 28:43 says check out with take total. Um, 28:45 okay, we'll make some more changes. 28:47 Perfect. Now, I want uh the add button 28:51 to be exactly same inside this cart as 28:54 well. So, let us uh do this. I'm going 28:56 to take a screenshot because it's much 28:58 easier. 29:01 um change the add 29:04 button with the plus and 29:09 minus inside the card. Okay. Um make 29:12 I'll say make the add button with inside 29:15 the cart same as the 29:18 one outside. Let's see if it does. I 29:21 know I'm grammatically incorrect, but 29:23 I'm relying on its smartness. Let's see 29:25 if it's able to do. If yes, well and 29:27 good. If no, we'll rewrite the prompt. 29:29 Okay. I'll update the card component. 29:31 Use the same style of add remove button 29:33 as the one used on the product card. 29:36 Great. It understood. It understood. It 29:38 understood. Man, this is fun, isn't it? 29:40 This is fun. This is real fun. And 29:43 meanwhile, I also have to move this to 29:44 the other side. Yes, there it did. There 29:46 it did. The same hover effects and 29:48 everything that we had, it just carried 29:50 forward here as well, right? And if you 29:52 remove an item, boom, it just goes away, 29:54 right? So, perfect. This is what I 29:56 wanted. Okay. Now we'll do one more 29:58 thing out here. In India, we have GST, 30:00 isn't it? Let's ask it to add GST. 30:03 Okay. Right. In the 30:08 bill section, add a line item for GST. 30:15 I'll also tell it maybe it'll know goods 30:21 and services tax which is 18% of the 30:27 bill amount. Let's see. It'll add the 30:30 GST section just like that. It'll do the 30:32 math. It'll do the calculation. It'll do 30:34 everything and it'll show you the 30:35 updated card in a 30:37 while. And I also feel uh the bill and 30:40 the checkout button should always be 30:43 order placed successfully. Okay. I 30:44 didn't ask it to bake. It made it that I 30:46 can click on check out and order place 30:48 successfully. It just built it. Okay. 30:50 So, never mind. Uh we'll just add a few 30:52 more items and see how the card looks. 30:53 Yeah, there it is. See subtotal. It said 30:55 6002 items are there. GST 18% it added. 30:58 I can increase the items and it'll do 31:00 the GST calculation and show me the 31:02 total items here perfectly. Right. All 31:05 right. Wonderful. Man, this is such a 31:07 fun thing to work on. Right. Um okay. Um 31:10 I'm nitpicking right now. Let's do a 31:12 couple of things. You know I don't want 31:14 this icon here and I want this text to 31:16 be bigger the your card. I want this 31:18 heading to be bigger. So font size it 31:20 has picked a body. So it defines all of 31:23 them based on what you've done right. So 31:24 I can change it to large extra large 31:26 whatever I want. I think large is good 31:29 or extra large. I I'll put extra large 31:32 and I will remove this icon. I'll just 31:34 ask it to remove this icon. Um okay. So 31:37 I'll just take a screenshot again. And 31:39 screenshot is just like you take your 31:41 Mac screenshot. something uh same. Okay. 31:44 Uh remove the icon from 31:49 here. Okay. I don't want the icon. And 31:53 the icon should go away. And I also want 31:55 to make this corners more rounded. So it 31:58 is picking up the right images, but I 31:59 want them more rounded. Okay. Uh maybe 32:02 around 8 pixels. This looks definitely 32:04 looks lesser than 8 pixels. We'll make 32:06 it 8 pixels and see if that works. 32:10 Okay, it is working. And of course, this 32:13 one once this instruction is completed, 32:15 we'll do that as well. Uh, yes, it has 32:18 removed the icon. Perfect. This is how 32:20 we wanted it. Perfect. Okay, we'll close 32:22 it. Now, let us fix this one. Okay. Um, 32:27 [Music] 32:29 okay. Oh, click on 32:33 edit. Let's add an item. Oops. Now let's 32:38 add an item so that this appears and 32:42 we will move it move this to the top 32:48 right corner of 32:51 the cart button. Okay, so it's going to 32:55 move this to the top right corner of the 32:56 right button. And I'm also going to add 32:57 a styling. I want a black outline and I 32:59 want the text inside it to be black and 33:01 not white because then it'll go with the 33:03 overall style of what we are building 33:05 out here. And I also see that it has 33:07 changed the card icon. I had designed a 33:09 different card icon. You know, I think 33:11 this is nice. It changed it. Made its 33:13 own icon. I can go ahead and, you know, 33:14 upload and say, "Hey, change it to this 33:16 card icon." But okay, I'll not do it 33:17 right now. Um, okay, it is there. But I 33:20 think it is too much outside. 33:23 Uh, it has put it exactly on the you 33:27 know corner, right? Um add 33:32 top add some top and 33:37 right padding to this so that 33:43 it comes a bit inside 33:49 the cart button. You see the kind of 33:52 language I'm using. This is something 33:54 only a human usually understands. needs 33:56 to be a little inside but a computer 33:58 usually doesn't understand inside. It'll 34:00 say okay know maybe a little more 34:01 padding and all but it will understand 34:03 you know it is adding left padding. 34:05 Let's see if it adds the right. Yeah it 34:07 did. Oh man this is exactly what I 34:09 wanted. I love this. I love this. So I 34:12 now we'll go and make those changes. 34:14 Right here it is. Uh the size of this is 34:17 you know if you see if you open this one 34:19 uh you can you can ask chat as well but 34:21 I think I want to manually do it. It 34:22 says the width is five and the height is 34:24 five. I'm going to make it eight and 34:26 eight. Let's see if 8 and 8 is Oh, eight 34:28 is too big. It is too big. Let's try 34:31 six. Let's try six. Six should be good. 34:34 Okay, I will uh make I'll save it and um 34:38 we'll just go and see how much of the 34:41 corner. Uh this is 2 pixels weight is 34:44 what I had given. So, I'm going to 34:46 select this once again. 34:50 is going to just uh save once 34:56 again. So here it is. I'm going to 34:58 select this once again and make the 35:01 following 35:04 changes. I'll say um add a 2 pixel 35:10 black stroke. Make the 35:15 text also black. And I'll hit enter. I 35:19 think that's a style that I'm looking 35:20 for. Goes well with what we have made 35:22 out 35:23 here. There it is. This is how I wanted 35:26 it. I also feel the text can be a little 35:27 bigger. Let's see if we can make the 35:29 text a little bigger. Uh can we can we 35:32 can we should be able to 35:36 uh let's take a screenshot and try to do 35:41 it. Make this text slightly bigger. So 35:48 the best part about AI is it also 35:49 understands emotions like slightly just 35:52 a little and all of them. I hope it 35:54 does. Let's 35:55 see. Yeah, it made it it made it a 35:58 little bigger. It knows that what this 36:00 component is and what kind of big is big 36:02 enough. So it has done it. So perfect. 36:04 So this is how it is. This is my card. 36:06 Now I'm going to change the corner 36:08 radius of this uh ch make 36:12 the make the corner radius 8 pixel. 36:19 Okay, let's hit enter. And uh I feel a 36:22 little more corner radius. And even this 36:23 one, right, we don't want 36:25 um Okay, probably it is done. It is 36:31 doing okay. Has it? Let me refresh it 36:33 once again. It says it has done rounded 36:36 1g which is 8 pixels. Let's see if it 36:38 has done. Okay, no items inside. Um 36:42 yeah, I think it has increased you know. 36:45 Uh we'll make it change it to 12 pixel. 36:49 Okay, because I feel I need a little 36:50 more. Maybe 12 would be good. So, let's 36:53 see if it does. Yeah. The next couple of 36:56 things that I want to do out here is of 36:57 course make a drop down for this and 36:59 make this element sticky so that 37:00 whenever you scroll, this sticks and it 37:06 doesn't go away. That's all we want. And 37:08 a simple instruction here would do the 37:10 job. I feed. Yes. Now, I think I like 37:12 the corner radius. So, it is it is like 37:14 properly visible. And now I'm going to 37:16 take one more screenshot here in this 37:19 one and I will say 37:24 make following 37:27 changes changes right on 37:31 hover change 37:33 the of the color of the 37:37 button to the same yellow color that I 37:40 had defined. At times you know it picks 37:42 up from other places. If you say that 37:43 you give instruction to change the color 37:45 to a certain thing um uh you know to one 37:48 button, it will intelligently do it for 37:50 the other button as well um to this and 37:53 u 37:55 and scale 37:58 up scale up the 38:01 entire 38:02 button by 2%. Okay. And what else? Huh? 38:07 Corner radius. Change the corner. 38:11 Increase the corner 38:12 radius. Increase 38:15 the radius of 38:18 the button so that it feels like 38:24 a perfect fill. Okay, you know right. 38:28 Essentially perfect pill. These are 38:30 perfect pills where the corners are like 38:31 full circles. That's what I want. The 38:33 same effect for all the buttons inside 38:35 because that's the style that I have 38:36 picked. should be able to do. It's like 38:39 a small thing for it, I think. 38:42 So, now you know you can do a whole lot 38:44 of things. Another thing that I feel I 38:46 want to do is uh, you know, maybe move 38:48 this. Make sure that the button is 38:50 always sticky at the bottom no matter 38:51 how many items are there. Uh, but, you 38:53 know, I'm not just not going to do it. 38:55 Ideally, I would do it, but you can go 38:56 ahead and do if you're trying something 38:58 out like this. Okay, it has done. Um, I 39:01 don't want the icon as well. Damn, I 39:03 forgot. 39:04 [Music] 39:06 uh remove the tick icon. Okay, let it 39:11 remove the tick icon. Okay, yes, it is 39:14 scaling the hover effects, everything is 39:15 there. Just that it'll remove the check 39:17 icon. And I also think that the text 39:19 size can be a little bigger, right? Uh 39:21 compared to the rest of the things, you 39:22 know, in a world where this number is 39:24 this big, this check out text can be a 39:25 tad bit bigger. I'm not saying it has to 39:27 be exactly as big as that, but a little 39:29 bit bigger. You know, I think it does 39:30 better justice. 39:33 There it is. And the text size, let's 39:36 try to do it manually. Let's see if I 39:38 can. Okay, the font size is body. I can 39:40 change it to large or excel. Let's 39:43 change it to large. I think large is 39:46 good. And um yeah, select. We can do a 39:49 weight as well. What if we do it uh 39:52 bold? What if we do a semi bold? Let's 39:54 do a bold. And uh large. Should I try 39:57 body now? Body with bold is also good. 40:00 Yeah. Uh, what should I put? 40:03 Um, I think let's keep it large with 40:06 bold for now. I'm going to save it. 40:08 Okay, like I said, not everything needs 40:10 to be done by AI. Something went wrong. 40:12 Why the hell? But I think it did the 40:14 job. You know, it did the job. Let me 40:16 refresh. Something did go wrong, but it 40:19 did took the instruction that I had 40:20 given it to, right? Let's see. Uh, yes, 40:23 it is it did. No, the but X looks a 40:25 little big, but okay. I will leave it 40:27 that way. We have bigger fish to fry. 40:29 Let's go ahead and fry that. Um, I'll 40:32 take a screenshot of 40:35 this. When 40:38 the page is scrolled, make 40:43 sure this 40:47 section sticks to the top, making it 40:53 always visible. So, that's a sticky 40:56 part, right? Uh, yeah. Yeah, it'll just 40:58 change the div property to sticky or 41:01 fixed or something. That's what it'll 41:03 do. And uh we will have what we want. 41:05 But we can give instruction just like we 41:08 give it to a 41:10 human. Okay. The navigation bar now 41:12 sticks. It doesn't stick. It has 41:16 not stuck. Oops. It's 41:20 not sticking. Can you please fix that? 41:25 Okay. Let's see if it is able to fix. 41:28 Looking for the nap bar. I'll fix the 41:29 sticky position so 41:32 that okay, still it is 41:34 not. We'll fix the issue. Let's see. Oh 41:38 no, it is not fixed. It is not 41:43 fixed. Once again, 41:46 the 41:48 nav 41:49 bar 41:51 is scrolling away. 41:55 Please make it fixed. Let's see. Let's 41:59 see if it's able to 42:02 do. Okay, it's also giving me in. Ah, 42:04 now it is working. Yes, finally. 42:06 Finally, this is what I wanted. So, I 42:08 add items. The cart is always in my 42:10 control. I can go and open it and I can 42:12 go check out whatever I want, right? And 42:14 of course, I can increase and reduce 42:17 items here as well. Everything 42:18 dynamically gets updated. Okay, perfect. 42:21 I think we almost are done. Let's 42:23 quickly make this one. Um Okay. Um make 42:28 a drop down with 42:33 three addresses to choose from and a 42:40 button to add a new address. Let's go 42:44 ahead and hit 42:45 enter. And I also think this card text 42:48 is a little too big. I'll make it a 42:49 little smaller. Especially you know with 42:51 this faint icon which they introduced. I 42:53 had made a better icon man. Okay, never 42:56 mind. I can't complain. It is doing 42:58 wonderful job so far. So let's see. Uh 43:03 there it is. Now this is also it's going 43:05 to make a new thing. It's going to 43:06 design a new drop down. Let's see. Okay, 43:09 it did. It did. We'll fix some visuals 43:12 of it. Now it overall did a good 43:15 job. Okay. Okay. So here we'll do this 43:19 uh this button. First of all, I want the 43:22 styling to be like the checkout button 43:25 inside 43:26 cart. Change the styling of this button 43:31 to match 43:33 the checkout button inside 43:38 cart. Okay, it's going to do that and it 43:41 changed this icon also. So meanwhile, 43:43 you know, I will just export these two 43:44 icons. Why did I open notion that? Oh, 43:48 not this as well. Meanwhile, I'll just 43:50 go to Figma and I'm going to just uh uh 43:53 generate these 43:56 icons and we'll try to make our dropdown 43:59 like this. Okay. So, this is cart icon 44:04 and this is location icon. Okay. Let's 44:08 just 44:10 export. Let's just export these into 2x 44:14 and uh I just throw them in my desktop. 44:17 And then we will go to lovable and uh 44:20 we'll pick these two things. 44:24 Um change the card and location icons 44:29 with these. I hope it'll understand 44:32 which one is card, which one is 44:33 location. I've also named the file that 44:34 way. But yeah, this it did, you know, it 44:37 uh it changed the button to the way I 44:38 wanted and um we will get it 44:42 done. So, home work other. Okay. Um 44:47 yeah, we need some functionality change 44:49 as well. When address is clicked, I want 44:51 it to dismiss and that address selection 44:53 is happening. U but we want it to 44:55 dismiss as well. Um what else what I can 44:58 do is okay, added the icons here as 45:01 well. Okay, I don't need the icons here. 45:05 Um, remove the icons from the 45:10 drop down menu. Okay. Uh, yes. Uh, and 45:17 add 45:19 line 45:23 separators between the between the 45:27 addresses separators. Okay, let's see. 45:31 And we of course need more padding. 45:32 Another thing that I can do is I can 45:34 just take a screenshot of this thing and 45:36 ask it hey make it like this right it it 45:38 it will do okay here I have not given 45:40 line separator but I think we can have 45:42 some line separator out there let's see 45:43 how it 45:46 works and I also don't want this icon 45:48 they're making all the icons very 45:52 thin okay let's see okay it did a decent 45:57 job now we need to fix some paddings now 45:58 I can fix the padding by either okay 46:01 let's do one 46:02 Uh 46:05 um let's take a screenshot. Why is this 46:08 weird thing coming 46:10 up whenever I attempt to take a 46:12 screenshot of weird that thing is 46:14 appearing? But it's okay. 46:15 Um add some more padding. Um after 46:23 uh padding between the last 46:28 address in 46:32 the drop-down and the add new address 46:38 button. 46:44 Yep. Okay. It has added some padding. 46:46 Now it is fine. Now let's see if I can 46:49 you know fix the padding spacing without 46:51 so this is eight. What if I make it 20 46:54 uh 46:56 or what if I make 46:58 it 47:00 20 20 or should I make it 16? Let me 47:03 make it 16. And top and bottom let's 47:05 make it 20. 47:07 [Music] 47:09 Uh yeah this is fine. And uh border 47:14 radius. Yeah let's try large border 47:16 radius. Oh no, not not radius. I don't 47:18 want any border rad. Oh, I want a border 47:20 radius. Yes, but why is it not 47:22 reflecting 47:24 here? Okay, rounded. It is set to none, 47:28 but I want a large border radius. And 47:30 let's try go ahead and save 47:32 it. So, something went wrong, but it is 47:34 still working. Maybe it's just a problem 47:36 with the preview. Maybe actually it is 47:38 working. Yeah, I think I'll make that 47:41 also 16. Actually, I can reduce 47:45 that or I have this option. I can just 47:48 take a screenshot of this and put it 47:52 here and 47:55 say make the address drop-down look like 48:00 this. And I can go ahead and 48:03 hit enter and uh it should be able to 48:07 read the screenshot and do what I have 48:09 asked it to do. Let's see. 48:12 So it just changes 48:14 other No. 48:17 Yeah. Okay. It made it. It made it but 48:20 added a lot of extra padding. We'll 48:22 probably go and reduce them and then we 48:25 are done. Maybe I should have done that 48:26 before. Right. 48:29 Uh now I'll ask it to this one. The size 48:32 of this is uh background is there fully 48:35 rounded. Now it has a padding of eight 48:37 and eight. What if we make it six and 48:40 six? That 48:42 should that should change the size. 48:44 Yeah, that is fine. And uh I'll just 48:47 save 48:48 it. And uh to this I'll also 48:53 say add a two 48:55 pixel 48:57 black stroke 48:59 to this one. 49:04 Okay, it is uh just showing two lines 49:06 only for the selected ones. I can also 49:08 say 49:13 truncate also 49:17 say truncate the address to one 49:24 line. And now I also feel the text 49:26 button is a little big. It's a little 49:28 too huge. I will uh reduce the size. 49:30 It's very simple. 49:32 Oh man, what is 49:34 this? Not 49:37 unsure. The address is 49:39 going outside. Please fix this. So, it's 49:44 just going to add 49:45 ellipses. Let's see if it's able to. So, 49:48 the fixer display in the location bar 49:50 component so that it doesn't overflow. I 49:53 wanted to go under ellipses. Maybe I 49:55 should just call it out specifically. 49:57 Let's see if it's able to do that, which 49:59 introduces ellipses automatically. If 50:01 not, I'll have to ask it to do it. Yeah, 50:04 it did. Okay, it did. Good enough. Good 50:08 enough. I I still don't fully like how 50:10 it looks. So, I'm just going to go here 50:12 and see if there is something that I can 50:14 fix, right? Uh so, no, I don't want 50:18 this. And I want this to be perfect 50:20 white. I don't know why it picked up a 50:22 different color. So, I'll just save this 50:25 one. 50:27 And I'll just go back to this. It has 50:32 added white doesn't have okay. It's an 50:35 extra thing which has come up. I can 50:37 also ask it to remove unwanted devs from 50:40 here. Right. Let me just do 50:44 that. Let's see if it's able to because 50:46 I see that there's an extra box. You 50:48 know, at times it happens that you have 50:49 a frame inside a frame and that's how 50:51 things ends up looking which we do not 50:53 need. Let's see if it's able to fix 50:54 properly. If it's able to fix, well and 50:56 good. If not, we will just revert using 50:58 the history option that we have 51:01 here. Has it? Okay, looks like it has 51:04 fixed some of those things. Let me Yes, 51:06 the other extra thing is not here right 51:08 now. So, it is perfect. Uh, so yeah, 51:11 this is good. And we will reduce some of 51:13 the spacings here. Let's 51:16 see. I'll make some more micro 51:18 adjustments to this to make it the way I 51:20 want. 51:31 I'm once again trying something new. So 51:32 I want the spacings to be reduced here, 51:34 you know, in all of them to tighten 51:36 things a bit. And I'm exactly saying the 51:37 same thing. Make the Okay, this one is 51:39 done. Reduce some padding here to 51:41 tighten things up. And I've added a 51:43 screenshot of this section. Let's see if 51:45 it's able to do. And it'll mostly be 51:47 able to do, but whether it does it 51:49 effectively that I like or not, that's a 51:51 thing that I need to check. Let's see if 51:52 it's able to do it. Oh, please. 51:58 Please. Okay, it did. It did. Okay, but 52:02 I tightened it a little too much. Oh, 52:05 okay. Maybe a little more. These are 52:07 fine, but I need 52:09 um add some more 52:13 padding between the last address and the 52:18 button. 52:19 Uh and once that is done, I think we are 52:22 good. Uh maybe a hover 52:29 state. Okay, it added the padding. You 52:31 know, I can keep doing things to it, but 52:33 for now, I'll just keep it that way, you 52:35 know, because otherwise this tutorial is 52:37 going to get really, really long. Now, 52:39 one last thing that I want to do here is 52:40 this one. Uh this says it's body. Man, 52:43 this is too big to be body. Yeah, body 52:46 is good. Now I save it and inside the 52:49 cart. Okay, this is the check out. I 52:51 think when the cart is empty, this 52:53 doesn't need to show up. Uh, okay. When 52:56 the cart is empty, don't show 53:03 the bill 53:07 and check out button. 53:14 Instead show 53:16 a button which 53:21 says buy now or something, right? Or 53:25 browse 53:26 items. Browse items. So that browse 53:29 items would just exit the card and take 53:32 you back to the items. It is, you know, 53:33 just a loop closure. Otherwise, the only 53:35 option is to go click on this or this. 53:40 There it is. So I can click on browse 53:42 items and it just dismisses the cart and 53:44 it just comes back here. So we are 53:46 almost there. We are done. So hovering 53:48 on this items, I can add items, more 53:51 items. And then inside the cart, it 53:53 shows me the item preview. It shows me 53:55 the bill section. I can add a coupon 53:57 section if I want to, but you know, I'll 53:58 just leave it for that. And I can click 53:59 on check out and it'll just go and place 54:02 the order. Of course, no order is 54:03 getting placed because I haven't built 54:04 the back end yet. You can build the back 54:06 end as well, but I'm not going to do 54:07 that. uh in this tutorial at least and 54:10 you can click on this and change the 54:12 address to something else. Okay, 54:13 selecting an address this 54:16 um one more thing selecting an 54:20 address 54:22 should dismiss 54:26 the should dismiss the drop down. So 54:29 yeah that's just a behavioral change 54:31 because you know uh otherwise you know 54:33 this option is when you have multi 54:34 select you select three four items then 54:35 you click on done and then it gets 54:37 selected in our case it's a single 54:38 select and the stick is just an 54:40 indicator that this one is selected so 54:42 you know when something is selected it 54:44 should get dismissed that's the 54:45 functionality I want to bring out here 54:47 that's the instruction I had given okay 54:49 there yes there it is so I select one 54:51 address and it just gets dismissed just 54:53 like the way I wanted and clicking on 54:55 this of course can open up an address 54:56 form which we're not getting out here 54:58 The last thing, the cherry on the top, 55:00 is to add a logo here. You know what? 55:03 I'm not going to show you how to do that 55:04 because by now you already know how to 55:06 do that. So, go ahead and design your 55:08 own logo and then add it out here. Or 55:10 you can even ask Lovable to design an 55:12 appropriate logo for you. And the same 55:14 goes for this. Right now, it just says 55:16 your cart is empty. Why not have a nice 55:18 fun image, an empty state image which 55:21 says your cart is empty, then followed 55:23 by the browse items button. So these are 55:25 the two things I want you to do when you 55:27 try out doing this. Right? So there it 55:30 is. We have created this website, a 55:32 functional website to a good extent, not 55:34 the entire one which does an important 55:37 job in under 1 hour. And that's how I 55:42 built a fully functional app in under an 55:44 hour by simply chatting. What do you 55:47 think? Let me know in the comments 55:48 below. With tools like Lovable, you can 55:50 turn your ideas into fully functional 55:52 apps faster than ever. No coding 55:54 required whether for your portfolio 55:55 startup or side project. This is 55:57 excellent for designers. Check it out 55:59 from the link in the description. I 56:00 recently made a detailed guide to build 56:02 a job ready UX design portfolio. Check 56:04 it out here if you haven't already. And 56:06 to upskill as a UX designer in 15 days, 56:08 watch this video. This is STA signing 56:10 off. See you all in the next one.