Building a Dashboard in Lovable: Claude AI Mockups, Figma to Lovable & Framer Landing Page

0:00 hello everyone welcome to today's video 0:03 my name is Lucas and today we are going 0:05 to be building a dashboard in lovable so 0:10 I started off with you know getting some 0:13 ideas I started using Gro because it's 0:16 quite new and I wanted to test it out so 0:18 I started getting some ideas with grock 0:20 I wanted to create some type of you know 0:24 just I was just you know brainstorming 0:26 some ideas should not be too advanced um 0:30 should have a login screen maybe a 0:32 dashboard I wrote right so at the end it 0:36 it came up with some things I I I 0:37 actually like the idea with fitness 0:40 trainers or teachers or something in 0:42 this realm and for 0:44 teachers lesson plan organizer and 0:47 student assignment 0:49 tracker 0:50 um there there were also some other 0:53 things but I decided to go with this 0:54 four teachers one and I went and took 0:58 that and brought it into Claude and in 1:01 Claude basically what I did here is just 1:05 I created a few visual you know uh 1:10 sketches right can you sketch out a 1:12 visual dashboard prototype for the 1:15 assignment tracker so we have this 1:17 assignment tracker it's called assign 1:19 track we have a dashboard we have 1:21 classes assignment students and we don't 1:23 really need the analytics right now but 1:26 basically I just created different views 1:28 of these different tabs right so we had 1:31 the dashboard we had the 1:33 assignments um classes and students 1:35 right so it all looks like this and this 1:37 is kind of something that I want to um 1:41 build using lovable I want to actually 1:43 first bring this from claw into figma 1:47 kind of stylize it in a way that we like 1:49 it and then export that figma design 1:53 into lovable and actually get that 1:56 working right and then at the end what 1:58 we can also do um is you know build a 2:01 quick little landing page like a 2:02 marketing landing page in framer and 2:04 Link that to The Lovable um login right 2:08 so once you click on login in that 2:10 landing page it takes you to that 2:12 authentication page where you can log in 2:14 with the email or register right and 2:17 then once you're in you're basically you 2:19 can check out this dashboard so if that 2:22 is something interesting for you guys 2:24 stick around and let's build this 2:26 together all right now the first thing 2:27 that I want to do is I actually kind of 2:29 want to you know 2:31 visually have this in place have this 2:34 kind this this this s map in place right 2:37 or this userflow right so the first 2:39 thing that I want to do is I want to 2:40 start putting some different sticky 2:42 notes saying okay this is the marketing 2:47 landing page which will be done in 2:51 framer and I'm just going to put this 2:53 bold and maybe 2:54 increase the sizing of 2:57 this so we got that first which which is 3:00 actually going to come at the very end 3:01 of the video and let's make it blue 3:02 because this is 3:03 framer and then we have 3:07 the login 3:10 page or let's put the authentication off 3:14 page so this you know it's going to have 3:17 the email email and and 3:22 uh 3:25 password and login button right then 3:29 after that we're going to have the 3:33 dashboard 3:36 right let's make these another color 3:40 because this is going to be with lovable 3:42 let's make it Pink just reminds me of 3:44 lovable somehow so dashboard and we're 3:47 going to 3:48 have so this is going to 3:51 be the app and we're going to 3:55 have the dashboard 4:01 we're going to 4:02 have the what was it classes assignments 4:07 and 4:09 students 4:14 classes 4:18 assignments and 4:21 students so this is like the very very 4:24 first step of doing this right obviously 4:28 this is going to have other types of 4:29 branches like under the dashboard you 4:31 can have the ability to do this and this 4:33 and same thing with the classes like 4:35 this is going to be a you know 4:38 much much larger tree right there's 4:42 going to be other steps involved and 4:44 whatnot but right now let's just think 4:46 of these main ones right so we have the 4:48 landing page that takes us here then we 4:51 have the off page that takes us to the 4:53 dashboard and then each one goes to each 4:57 other simultaneously right you can click 4:59 on the different 5:00 tabs 5:01 okay so what I want to do is actually 5:04 now I have this in place I'm just going 5:05 to copy this and bring this to an actual 5:09 figma design file so I was in a fig Jam 5:11 file I'm going to a figma design file 5:14 and what I'm going to do now is the 5:16 following I'm going to start to um 5:21 publish these so you can do this here 5:24 publish I publish this one for example 5:27 and you can like 5:30 what you can do is you can inspect and 5:33 you know double check if it's like real 5:35 code which it is so you can see this is 5:38 a text this is a 5:40 rectangle and it's all like in a 5:42 specific type 5:44 of you know different texts with the 5:47 aial so it's it's html text and you can 5:50 double check here right so what I want 5:52 to do is I want to use something like 5:53 HTML to figma and I found this over here 5:59 called h HTML to figma by div riots and 6:02 I'm going to try this out so I'm going 6:04 to go back to figma and I'm going to go 6:06 to HTML to 6:09 design and I'm just curious to see if 6:14 this would actually work so you can do 6:16 web and you can do HTML okay 6:19 interesting so I'm just going to try 6:21 with the web maybe that's easier I hope 6:25 you know maybe it Imports this other 6:27 thing but 6:29 let's just try like this I don't think 6:31 it's going to work like this but let's 6:33 just try you 6:35 know so I finished loading and there's a 6:39 few options there's like use Auto layout 6:41 I'm just going to click 6:42 that 6:47 and just click on go and it kind of 6:51 works wow okay so it does import this 6:54 bottom thing which we can just delete 6:56 and all I want is this over here so 6:59 let's just click on X here and yeah 7:03 let's just have this Perfect Look it's 7:05 even everything is auto layout let me 7:08 even see if 7:10 that's true or 7:12 not I mean it's not really Auto 7:19 layout 7:22 okay we could put these things together 7:24 in Auto layout 7:32 so instead of having these groups they 7:34 can 7:35 be Auto 7:37 layout going downwards I would 7:41 say well I would have to kind of clean 7:43 this up but I've heard that the best way 7:45 to do this is to actually have Auto 7:47 layout so I'm just going to you know I'm 7:50 going to see how it works like this 7:52 without the auto 7:54 layout 7:56 and I'm going to move this out 8:01 I'm going to try to bring this in like 8:03 that 8:04 perfect and this as well like this boom 8:07 okay so we have this SVG file I'm going 8:10 to remove these little 8:16 icons because they're not really useful 8:19 at the 8:22 moment 8:25 and let's just make these white so you 8:28 see how I am basically editing 8:32 this 8:35 so there were a few issues with the 8:38 cloud um project but basically this is 8:42 how we do it so I can grab these 8:47 things and make 8:50 them closer to these icons 8:53 perfect and what I can do with this is I 8:56 can make it maybe 8:57 bold align it left left boom okay and 9:01 then we have this want to also align it 9:05 like this with the 9:09 logo like so so we have the t-shir 9:12 teacher 9:14 dashboard and I don't know what that was 9:18 for okay it's not really anything 9:22 so I'm just going to delete these 9:25 because we don't really need 9:27 them but we could add a new assignment 9:30 we could so these are the different 9:32 assignments so and this gives us like a 9:34 quite a 9:35 good you know overview of how this would 9:40 end up looking like so I'm just going to 9:42 delete this we have this 9:45 SVG let's call this the 9:50 dashboard and there's no Auto layout 9:52 applied to this so just you know telling 9:55 you and now what we want to do is we 9:57 want to bring this into lovable now if I 10:01 go to lovable right we have the ability 10:03 to attach images so we could you know 10:06 attach a 10:08 screenshot but there's this figma logo 10:10 right here and that's the thing that we 10:11 want to test out today right so let's 10:13 click on figma import and see what's 10:16 needed okay it says import from figma 10:19 use the Builder IO figma plugin so let's 10:22 just click on 10:23 that and select a frame using Auto 10:26 layout and use export to 10:30 code than lovable so it 10:33 says that that the frame has to have 10:35 Auto layout or or you know it says using 10:38 Auto layout so I suspect that it's best 10:41 that this does have Auto layout but I'm 10:45 curious to 10:46 see how this would work without this 10:48 Auto layout just to test it out 10:51 eventually if if it's really bad we're 10:53 going to have to do auto layout I can 10:55 you know pause the video and do that 10:57 really quick but um let's just check to 11:02 see that so we have this Frame let's go 11:04 plugins and let's cck Builder IO right 11:07 so click on Builder IO I already had it 11:10 somehow and now what we want to do is we 11:13 want to export to code and we're going 11:16 to see we have to wait now until it 11:18 finishes analyzing everything okay and 11:21 now let's put open in lovable and let's 11:24 just connect this with the 11:27 Builder and I just have to you know sign 11:30 in so let me do that really quick so 11:32 once I'm signed 11:34 in we it's analyzing the expect exported 11:37 code again it's generating react 11:41 components so I don't think this is like 11:43 a you know AI process here I just think 11:46 that it's just reading the layers so I'm 11:49 pretty sure it's not really going to 11:52 work very nicely without this Auto 11:55 layout 11:57 function but let's just just wait and 11:59 see all right so my lovable just 12:02 automatically opened it says build a 12:04 pixel perfect UI clone of this figma 12:06 design and now and it did this 12:09 automatically I didn't type this right 12:11 so it says I'll create a project from 12:12 this figma design and now it's just 12:15 creating so let's just see I can already 12:17 see that there's some you know code 12:19 being written everywhere so there's the 12:21 dashboard stats dashboard sidebo user 12:25 profile what else do we have we have the 12:28 performance chart 12:30 layout and these are all different react 12:32 components right okay and as you can see 12:35 look so this is the problem it did a 12:38 good job but there's no Auto layout 12:41 so that was the problem right so we have 12:45 this it's working well 12:47 but there it's the design kind of sucks 12:51 right and the reason for that is 12:55 because let me just see just publish it 12:58 and check it out in the actual browser 13:01 so I'm going to publish this and see how 13:04 long it takes to 13:06 publish but eventually when this works 13:08 when we have Auto layout and this works 13:11 we can add the authentication so on so 13:13 I'm going to just do that I'm going to 13:14 add some AO Auto layout and it does look 13:17 okay like this still kind of no it's 13:19 still not good but let me 13:23 just you know 13:27 it's still not the best right 13:32 so so let's just go ahead and go 13:36 back let's just go ahead and go back and 13:40 fix this autol layout issue because 13:42 that's what the team said at lovable 13:46 just to add some Auto 13:47 layout and in order to do that what we 13:51 have to do so this one we is an example 13:53 of what we did with auto layout but I'm 13:56 going to have 13:57 to create 13:59 for each one of these groups has to be a 14:02 layout so Auto layout 14:05 boom this has to also be an auto 14:08 layout not a group this has to also be 14:11 Auto layout and this was working fine uh 14:15 in that preview so if we go back to that 14:18 preview these were working actually 14:21 pretty fine you see how they like 14:22 collapse with each other and that's 14:25 because we add an auto layout to this 14:28 line right but this isn't really working 14:31 so now we fixed that so now it should be 14:34 working a little bit better at least so 14:36 let's just put these 14:38 together as an auto layout boom and this 14:43 one as well so buttons should be Auto 14:46 layouts as well or or layouts so to say 14:50 I'm just going to group 14:53 this hold on command G Auto layout boom 14:58 let's give some 15:01 nice 10 pixel radius and now let's just 15:05 create an auto layout 15:18 here let's just create a group Auto 15:21 layout 15:23 boom we make it like 15:26 this and this would also be kind 15:35 of just grab all of these so let me 15:38 first actually make layouts to the 15:39 buttons 15:43 First Auto 15:45 layout Auto layout and each one of these 15:49 has to have a nice 15:53 little something like that 15:59 we can put something like 20 to make it 16:00 a little bit more 16:03 precise as you can 16:09 see just trying to make this look better 16:13 okay this has a fixed it's hug contents 16:16 exactly that's what we wanted hug 16:19 contents and we want this to be 16:23 20 here as well hug contents and we 16:26 might want to do that as well for all of 16:28 these so making sure that everything is 16:31 hug contents hug contents 16:35 beautiful 16:39 and hug contents 16:44 here so you can already start 16:47 seeing that these 16:50 things 16:53 are right good 16:56 so just grabbing everything and putting 16:59 them into their own layouts 17:04 great boom boom boom boom 17:09 boom so by the 17:11 way um if you find this quite difficult 17:15 to follow I do have a video about Auto 17:17 layouts in 17:19 figma so you can check that 17:23 out but it should be you know something 17:28 that you can work on so Auto layout 17:33 here Auto layout there and you can 17:36 already start seeing that the text kind 17:37 of Center we want that to be in the 17:39 bottom so we'll just do that eventually 17:41 let me just finish this Auto 17:44 layouts and then we just select all of 17:47 these and move the text to the 17:51 bottom and we 17:53 want the 17:56 radius well I mean we can leave them 17:59 like four like that and then we just 18:02 grab all of 18:04 these and auto lay out these right boom 18:07 so everything is starting to 18:10 be to have their own layout let's just 18:13 create a group here and let's Auto 18:17 layout and I would really like if this 18:20 had like a fill but it 18:23 doesn't I guess constraints top 18:27 no we can do that at the end okay Group 18:31 auto layout boom so I guess okay so now 18:35 we can group these boom Auto layout 18:41 group these boom Auto 18:44 layout 18:47 and group these boom Auto layout and now 18:53 we want this to also be an auto layout 18:56 going to the left 19:02 and what is this this is a 19:05 vector just put it like 19:08 this we get actually group these 19:14 three 19:18 and I'm thinking we actually just make 19:21 this see that we have like this this 19:23 this little shape let's just group these 19:26 three into this so Auto layout 19:30 and then we get this and 19:33 this and it's 19:36 another all 19:38 layout so we have the 19:42 right right panel we have the 19:47 title we have the 19:49 content and then we 19:51 have section 19:54 one section 19:56 two section three 19:59 so guys basically it's just create 20:01 putting everything into like little 20:03 boxes that's all that it 20:06 is so okay now let's just put these 20:11 together Auto layout put these together 20:16 Auto layout let's make 20:18 this have a rounded yeah Corners put 20:22 these 20:23 together Auto layout boom and then these 20:29 each one Auto layout 20:32 actually these have to be kind of 20:34 grouped 20:36 together now these or this is going to 20:40 be Auto layout this Auto layout this one 20:46 let's just group these together make 20:48 sure that the icons are grouped and auto 20:53 layout let's make sure that this is 20:56 looking nice and not weird something 21:00 like that and group these and auto 21:04 layout and finally this last 21:07 one let's group let's just group these 21:10 two get this group give it an auto 21:14 layout well actually this is the last 21:16 one sorry 21:18 group get these 21:21 two Auto layout 21:30 actually group these 21:33 two this would be the other lay 21:37 okay and then 21:40 this Auto 21:42 layout and then we can go left aligned 21:46 perfect and then this 21:49 Vector is basically going to 21:53 be 21:56 this this this 21:59 this this and 22:04 this actually no we got to get these 22:07 first together into their own 22:09 group so let's Auto layout 22:15 this and let's put some padding on the 22:19 left actually these have to be 22:28 H I'm thinking maybe we have to 22:30 duplicate these a few 22:32 times 22:36 classes 22:39 assignments students and I don't really 22:41 need analytics and settings so let's 22:45 just remove 22:55 these sh classes so this one's going to 22:58 go 23:00 here let me just delete this one boom so 23:04 it's very easy to duplicate these things 23:07 we want this to be you know zero and we 23:12 want these to have zero 23:16 fill we want the 23:18 assignments to have this one and we want 23:21 the 23:23 students let's give the students this 23:25 one 23:32 why not okay so now we got this one and 23:36 we got this one and let's give this 23:39 let's give this an auto 23:41 layout and 23:44 perfect they have this big 23:47 space we want them to be left 23:52 aligned something like that that looks 23:55 fine this is centered 24:04 so we want this to actually have some 24:06 padding just like this one how much does 24:07 it have 34 so we also wanted to have 24:11 34 and kind of make this left line 24:14 perfect so now we have this one and this 24:17 one so these two are going to be also 24:20 its own Auto 24:22 layout and then these two let's just 24:25 make this left and these two 24:29 or this one so to say is auto layout so 24:32 we got 24:33 this 24:36 dashboard and then we have the layout 24:39 this is going to be the logo or top 24:42 let's just call it 24:43 top then we can go this is the the logo 24:47 perfect then we got this this is going 24:50 to be the 24:52 bottom bottom then we have the right 24:55 okay we can start off like this so guys 24:57 this is just you know a quick little 25:01 Auto layout um tutorial right so let's 25:04 go ahead and click on the plugins again 25:07 and run this what was it again Builder 25:10 Builder 25:11 IO and Export code so it's going to now 25:16 you know this do this whole process 25:18 again so let's just open in lovable and 25:20 see how that 25:22 goes so it might take a few seconds but 25:26 I just want to kind of show you how how 25:29 the process goes right so it's analyzing 25:31 the exported code and now it's going to 25:32 just do another few um checkpoints here 25:36 and eventually it's going to open by 25:39 itself in lovable so yeah that's that so 25:45 it's just open by itself again build a 25:47 pixel perfect UI clone of this figma 25:49 design let's see how good it gets now 25:51 that it has some Auto layouts everywhere 25:55 maybe there's there going to be a few 25:57 you know errors 25:59 but you know this is my first time doing 26:02 this so let's just see how this goes so 26:04 it's loading okay it looks much 26:07 better something is not 26:11 really okay I can see that it's going 26:13 like 26:15 this so it did it's doing better but 26:18 it's not really the best so let's just 26:21 publish 26:25 this and what happens if I increase this 26:28 size of my screen okay 26:30 so does maybe it's because there are 26:33 some 26:35 fixed um 26:38 widths right let's just scroll 26:41 down maybe because the widths 26:44 are 26:46 fixed but it's not 26:48 really working so well 26:52 so let's just figure that out again in 26:56 figma so I'm just going to collapse down 26:58 down oh I can see that there's 27:03 something yeah fill 27:06 container I want this to fill 27:13 container sure we want this to stay 27:16 fixed and or 27:20 fit hug content 27:24 yeah and so now this is looking more and 27:26 more like and I guess we can do a good 27:28 preview by just doing like 27:34 this so we want these different things 27:37 to be 27:39 fill we want this to be 27:42 fill we want this to be 27:46 fill and these also to be fill so we do 27:50 have have fill I don't know why it 27:52 wasn't working but we do have it so 27:55 section one fill 27:59 hug let's just do 28:01 fill I like that better so this is going 28:05 to be not fixed but just put 28:09 fill and each one of 28:12 these are going to be filled as 28:16 well same here let's just see what 28:18 happens let's put hug because it's a 28:21 button and then this is going to be hug 28:24 as well just like an framer you know fit 28:28 want things like this to fit and here we 28:30 have 28:31 hug what I can do is I can just make 28:33 this fill right and then the content 28:38 inside can also 28:43 be fill right so I'm just going to do 28:46 that here as well get these three set it 28:49 to 28:50 fill get these 28:53 three set it to 28:56 fill and go to this next section fill 29:01 this is going to be 29:02 fill and we want this to be left 29:06 aligned excuse me let's make this fill 29:09 as 29:10 well and then let's go through each one 29:13 of these okay they're all fill great but 29:17 I guess the content inside is not really 29:21 fill H 29:23 fill frame three is going to be fill 29:28 or let's just keep it at 29:31 hug this is going to be 29:33 Phill right and then we want 29:37 to let's say decrease the Gap to 29:42 about 60 29:45 pixels 29:47 right so we want to do that for each one 29:49 of these two want to decrease the Gap 29:53 260 and just make everything except for 29:56 the button fill 30:00 why not the button well because the 30:02 button we wanted to keep it 30:04 fit uh to this text and not be like 30:08 really long right so we got that let's 30:11 get this fill perfect and let's make 30:16 each of one of these set to fill and 30:20 this last text as well set to fill boom 30:23 now it's looking more you know it's more 30:26 it's looking more like it 30:29 great so let's go down to this one fill 30:33 perfect this has to be set to 30:36 fill and this as well 30:39 fill and this fill 30:44 amazing and let's see each one of these 30:47 so we have fill let's make all of these 30:50 fill I'm not fixed so that was kind of 30:53 the main problem here so why it wasn't 30:56 really collapsing and doing the job 31:04 right cuz this was set to 31:10 fill and here for example this has a 31:15 pretty um big 31:19 gap and we want to 31:21 just make sure that 31:24 it's something like this and eventually 31:27 we want to have have you know a 31:30 different you know mobile view for this 31:33 right we wanted to kind of go underneath 31:35 in the mobile 31:37 view have a different type of design so 31:39 let's kind of get that you know see how 31:42 we do that when that problem comes 31:44 anyways let's just get these different 31:47 pills these different bars here 31:51 and each one is a frame and each one of 31:55 these has to have has to be fill 32:00 so hug no fill and let's make this like 32:04 12 pixels so it's quite 32:08 small so it's looking much better let's 32:11 make these smaller as well something 32:13 like 12 that's also something good to 32:16 kind of check out just to make sure that 32:19 everything 32:21 is at a you 32:24 know font size that makes sense 32:29 want to have something like 16 32:33 pixels and not 32:41 18 yeah that looks better and these can 32:44 be something 32:46 like 32:48 18 these can be 32:53 24 this can 32:55 be 32 and and 32:59 bold and this can be 32 this can be 33:03 28 this can be 32 or 20 28 as 33:08 well 33:10 right so that's looking more like 33:16 it and this can be 12 33:18 boom this can be 33:22 18 all 33:25 right I like it all right so let's see 33:29 if we grab this and we go like this it's 33:31 going to you know look strange so this 33:34 has to be 33:35 fixed if I were to increase it it's 33:38 looking nice but if it goes to the 33:40 mobile view it's not really looking good 33:42 and I think that this also has to have 33:45 that no 33:47 sizing issue solved so right now it's 33:50 set at 33:51 hug and I might want to make it set to 33:54 fill but have like some type of Max 33:57 width 33:59 and I think we can do that 34:04 somehow 34:07 by adding some type of Max constraint or 34:12 I don't remember how to do it but it 34:13 should be 34:15 possible so Auto 34:21 layout let's just keep it like this hug 34:25 let's just make sure that these are set 34:26 to fill so let's make these over here 34:31 set to a hug 34:34 content and I'm just wondering why this 34:40 is not really going to the 34:46 end okay this is 34:49 hug we want this to 34:52 be hug as well 35:03 got it 35:07 okay so we want this then to be 35:10 fill and each one of these to be 35:13 fill this one can stay fixed this one 35:17 can be fill so let's just make all of 35:20 these 35:22 fill fill 35:26 container let me just see how this would 35:28 look 35:38 like so if I do 35:41 this look somehow like 35:44 that so I guess it's not really mobile 35:47 friendly in my opinion we can try to 35:50 make this 1200 it's like the standard 35:53 size I guess 35:59 and get one of all of these frames and 36:01 make them 36:08 fill and 36:13 let's set this to 36:17 30 set this 36:20 to 36:23 five okay 36:28 all right I don't know if we can really 36:30 do this in terms of you know making a 36:33 mobile variant maybe lovable can do it 36:35 for us let's just see cuz right now in 36:37 figma I know that you know we have it in 36:39 in desktop version and it's looking good 36:42 you know we can like increase this it's 36:44 going to be pretty big but and when it 36:46 comes to the mobile version we can't we 36:49 have to do like another separate version 36:51 of it so um that's the that's the issue 36:55 here that we have so why did see a few 36:58 or I just saw one tutorial on this let 37:01 me see if we can do something 37:04 that has this as the 37:08 minimum with can do something like 37:14 700 so for example this right one can 37:17 have a 37:20 add minimum 37:23 width actually let's put 390 37:31 and see how this goes 37:37 so right now it's looking like 37:41 this I'm seeing that this right one has 37:46 to something here has to hug the 37:48 containers I'm guessing this 37:50 yeah hug 37:54 contents so it's starting to look better 37:59 this one has to be 38:03 fill or I'm sorry maybe this bottom one 38:06 has to be 38:24 fill contents 38:34 [Music] 38:36 okay and let's make it 39:12 I'm just making sure that this works 39:34 so we can do something like this that it 39:35 says at the 39:38 top yeah I think I think for today 39:43 uh Des sub version would be enough right 39:46 guys all right so let's just bring this 39:48 over again let's go plugins Builder and 39:51 let's do that export again and see how 39:53 that goes there are going to be some 39:55 problems 39:57 with that responsiveness 100% but at 40:00 least the desktop version is going to be 40:02 looking 40:03 better because we adjusted the whole you 40:07 know fix widths and everything so that's 40:10 for sure going to be you know much 40:11 better so let's just see how that goes 40:15 I'm over here just taking some notes for 40:18 next 40:19 time 40:22 and yeah it's again generating react 40:25 components 40:27 making them pretty good 40:31 okay just got to wait for 40:33 that and right now it's just configuring 40:36 the Styles and now as you can see it 40:39 just opens by 40:40 itself it opens like this and now it's 40:43 opening new project generating the code 40:45 I haven't even touched 40:48 my my keyboard yet 40:51 so let's just see let's just sit and 40:54 wait and now it's not looking you know 40:56 perfect there is a there are a few 40:58 things here with the icons that are not 41:01 really sinking and this is you know like 41:03 I said 41:06 with uh the responsiveness that it's not 41:09 really working but I can move this and 41:12 as I make it wider well let's just 41:14 publish this check that out on a normal 41:17 screen size it should be it should look 41:20 like this right it should look like this 41:23 so let's go back to Chrome and wait for 41:25 it to be published and and let's go 41:28 here and as you can see it's looking 41:32 much 41:33 better obviously these are you know 41:36 these are still kind of weird it's not 41:37 in the same it's not in the same you 41:39 know 41:41 like design but it's getting it's 41:44 getting there I guess for example this 41:46 button looks pretty big I guess we have 41:48 to you know get this and give it a hug 41:53 contents and maybe align this 41:57 to the bottom it is already lined to the 42:00 bottom so I don't know why it's looking 42:03 like 42:04 that is it also a line to the bottom 42:06 here no yeah that's strange see there's 42:09 a few strange things happening anyways 42:13 I'm going to go back to lovable and 42:14 start editing this 42:18 so can you generate a mobile 42:24 version of the dashboard 42:28 so that when I use it on my 42:33 mobile 42:35 phone it works but with a mobile 42:42 layout so I'm just going to type that 42:44 and see how that 42:48 goes 42:50 and yeah so let's just see how that goes 42:53 with in terms of fixing the 42:54 responsiveness in lovable so it says 42:57 I'll help you create a mobile responsive 42:58 version of the dashboard by modifying 43:00 the existing components okay maybe that 43:02 works right maybe that works let's go 43:04 ahead and see and what I want to do next 43:07 is I want to add start adding some 43:09 functionality 43:11 to uh or I want to start I want to see 43:14 if I can you know adjust this button to 43:18 have a fit height and not a fixed height 43:22 let's just go step by 43:25 step and then eventually we're going to 43:29 add we're going to start adding some 43:31 functionality by adding an 43:34 authentication page or adding 43:37 functionality to this new assignment 43:38 button that when you click on new 43:39 assignment you can add a new assignment 43:42 right 43:44 so let's just uh wait and see it's been 43:47 a few seconds now and it's I guess 43:49 generating some things but we don't 43:52 really have anything right now 43:54 so so yeah let's just wait and see 43:57 and so lovable just finished with this 43:59 mobile um fix and it actually works 44:03 pretty well I mean still needs a few 44:06 adjustments because if you scroll down 44:08 you can see this still kind of there um 44:13 and this is not 44:15 really performing so well and this is 44:18 this blue part it's not really 44:22 fill filling 44:25 the container and I can't really adjust 44:28 that or maybe here no can't really can't 44:31 really do that 44:34 so fill container maybe 44:40 now yeah so that's not really working 44:43 but whatever let's just go back to 44:45 Chrome and go back to our project and 44:48 now let's say okay thank you right thank 44:52 you uh first first off can you make the 45:00 button 45:04 containing plus new assignment can you 45:10 can you 45:11 give uh the button containing a a fit a 45:17 fitted height not 45:21 fixed 45:23 also so let's think about this also 45:35 um okay so also can you so I'm going to 45:39 go back to my first 45:42 claw uh you 45:45 know wood board here and just take a few 45:49 screenshots of this I'm going to take a 45:51 screenshot of 45:54 this and 46:03 assignments so 46:06 assignments and then 46:08 students and what I'm going to 46:11 do is I'm going to just bring these into 46:17 figma 46:20 and bring these screenshots into 46:23 figma put them right here I'm going to 46:26 remove 46:30 these these options because we deleted 46:33 them and I'm going to remove the buttons 46:37 at the top because I I deleted them as 46:40 well so 46:41 just going to go something like this put 46:45 that here on the right and put that for 46:48 the first one 46:51 so let's group 46:55 these and then I'm going to just export 46:57 these 46:58 three so I'm going to make this students 47:03 DB this courses 47:06 DB DB for dashboard and assignments 47:13 DB and let's just grab all of these 47:16 export PNG export three 47:19 layers and save perfect so now what we 47:23 can do is we can go back to Chrome and 47:26 go to our lovable also so thank you 47:29 first off can you give the button 47:31 containing the plus new assignment a fit 47:35 height not fixed also can you 47:39 create the 47:44 classes 47:46 assignments and 47:48 students 47:51 Pages view the images as references 47:57 so I'm going to move this guy over here 48:00 attach 48:02 images and I got these three open let's 48:06 wait for them to load should take a few 48:08 seconds boom and let's click on submit 48:11 so now I've sent that to lovable and 48:14 let's see what they do so the new 48:18 assignment button is fitted now it's not 48:21 really clickable but it's it's a nicer 48:24 height so to say 48:27 um let's click on classes so you can see 48:30 the classes right here we have biology 48:32 we have chemistry we have active an AR 48:35 archive but they're not really there you 48:38 can't really create a new class yet but 48:40 we're getting there right eventually 48:43 with more prompting you can create that 48:45 but just like that right I just added a 48:48 new prompt and it fixed and that's what 48:50 you you just have to do right just 48:52 continue prompting and and and 48:54 fine-tuning your product so we have five 48:57 different 48:59 students we can in in in different 49:02 classes right we can eventually search a 49:05 student name I don't really think you 49:07 can do that now but it's possible we can 49:10 add a 49:11 student 49:13 and let's just do one more thing let's 49:16 let's make the ability to add a student 49:19 so give the um can you 49:25 please um 49:27 or let's write when the user clicks 49:32 on plus 49:35 add 49:37 student can you give the ability to can 49:44 you when um the the user should be 49:48 prompted to add a student Name ID class 49:58 drop down of 50:02 the five different 50:11 classes yeah and that's 50:16 it um okay so we can do that so when 50:20 they giv you clicks on plus add student 50:23 boom this should work so let's just 50:24 click on enter and then once 50:27 lovable does that I think the next step 50:29 would be to uh create this 50:31 authentication 50:33 page uh this login page and once the 50:36 user is logged in then they can see that 50:39 dashboard and then at the end we just 50:41 create you know a little website 50:44 marketing website here this is our 50:46 product boom log in boom lovable and 50:49 that's it right so that's the whole goal 50:51 of this video we're almost there so 50:53 let's just wait on this new um on this 50:57 new task that lovable has to do for us 51:00 so lovable says input that they included 51:03 a model that has these different 51:07 fields so let's just add a student and 51:09 then boom we have that so we can put 51:13 Lucas and my ID is 997 2134 51:17 676 I don't 51:19 know and class physics cool add student 51:23 and I should be added 51:27 so basic form validation though you 51:28 might want to add more robust validation 51:31 basic form validation 51:34 okay so when I click on ADD St when 51:41 I uh finish 51:44 inputting the the student info and click 51:50 on ADD 51:53 student add student 51:57 the student 51:59 should 52:01 appear in the 52:04 students list in the students tab boom 52:10 okay so let's just make sure that works 52:12 so we're just adding functionality 52:15 slowly and slowly and surely obviously 52:18 this is a bigger project this is quite a 52:19 big you know app to work 52:22 on so yeah let's just see how that goes 52:27 obviously I would say I would recommend 52:28 that you don't that you try to put as 52:31 many you 52:33 know how can I say you try to fit as 52:37 much as possible into one prompt make it 52:39 very genuine make it very you know 52:43 specific try to point things out don't 52:45 be vague in terms of description be very 52:48 specific because I'm using the starter 52:52 account which is I think 20 bucks a 52:54 month and you get 100 prompts a month so 52:58 you just got to be careful with that you 53:00 don't want to exceed that right let's 53:02 say that you're building an app and you 53:04 do you do not want to exceed your your 53:07 prompts you just want to make it as 53:09 efficient as possible so 53:11 now okay initial completion rate is 53:14 0% okay perfect so let's click on ADD 53:18 student and let's put my 53:21 name let's put in 9874 32516 53:26 class physics at 53:29 student and here I am 0% perfect so 53:33 that's that's exactly what we want okay 53:35 now what I want to do is the following I 53:39 want to go ahead and add authentication 53:42 and I need super base for that so we're 53:44 going to go ahead and click on super 53:47 base 53:49 and yes create a new 53:52 project and we're going to call 53:55 this what's it called assign track so 53:59 assign 54:01 track and I'm going to create a database 54:05 password so I'm just going to generate a 54:08 password 54:10 and let's put 54:15 East and create new 54:21 project and let's see how long it 54:25 takes so so let's just save 54:28 this 54:31 and now I just I'm going to say 54:36 okay um please add a user you please add 54:42 a 54:44 authentication page where users can 54:49 either 54:51 register or 54:53 login to view the 54:58 dashboard 55:01 connect this 55:04 to super 55:06 base to my super 55:09 base 55:11 account project what's it called the 55:15 project name is assign track okay so 55:18 it's still setting 55:22 up assign track 55:27 still setting 55:29 up what if I refresh this it's still 55:32 setting up so let's just wait a bit for 55:35 this to be set up I guess right okay so 55:39 just after a few second seconds set up 55:42 so I'm just going to go here and send 55:45 this so pleas please add a an 55:48 authentication page where users can 55:50 either register or log into view the 55:51 dashboard connect this to my superbase 55:54 account project name assign TR want to 55:57 integrate has a native I recommend using 56:00 that for the best this value okay so I 56:03 already have 56:05 this and let's just connect 56:10 connect okay so we do it like this so I 56:13 shouldn't write it but I should do it 56:15 like that so I am now connecting to your 56:20 superv you haven't created any tables in 56:22 your supervis products 56:24 use okay 56:33 so I'm going to put enable sign up and 56:35 login with option with opt with email 56:40 password 56:43 options 56:45 and social so these social ones aren't 56:48 going to work for now but we have to 56:51 just connect it to Google for 56:53 example um store and use real data okay 56:58 okay enable sign up and login 57:02 page okay so let's just do 57:04 that so I think I might be like around 57:07 seven prompts in so one let's just count 57:10 this as a prompt two three four five 6 7 57:17 8 so we've gone so far just with eight 57:20 prompts and again you have 100 per month 57:23 with 57:24 this with this uh starter pricing right 57:29 so and the other day I created an like a 57:32 I don't even remember what I created was 57:34 some app yeah some language learning 57:38 app with the free version of lovable and 57:41 I compar that with bolt new and with v0 57:44 it's another video that I have and it 57:47 actually went pretty far with the free 57:50 version as well 57:51 so also cool for you guys to kind of 57:54 check out 57:57 so now that our database is set up I'll 57:59 create the so I created a database so 58:01 you can see there's probably like 58:05 some yeah created a 58:10 table so I guess this is not so 58:12 important 58:13 to understand but we have like a table 58:16 with full name Avatar new 58:18 [Music] 58:20 ID so on off user created okay so it 58:25 creates this table 58:27 I don't know where it's stored but I'm 58:31 interested so we have table 58:34 editor SQL editor so we have different 58:38 tables we have a 58:40 database so it doesn't hasn't created 58:42 the table 58:46 yet no tables created yet so let's just 58:49 see 58:51 okay and 58:53 now don't have an account sign up okay 58:58 so so complete the setup says you need 59:00 to configure so Google and get Hub in 59:02 your superbas dashboard make sure to set 59:06 the site URL and 59:08 R so let's just click 59:15 on let's just click on 59:17 this so we do have Google authentication 59:20 but it says here to you know use 59:23 configure the O off provider 59:27 but we're not going to really do that 59:30 now and now what we're going to do is 59:32 we're going to publish 59:34 this we're going to update 59:37 this and I'm going to publish 59:41 this and open the link when it's 59:46 ready by the way I think I can change 59:49 this so I'm going to call this what was 59:52 it again assign track 59:59 so assign 60:02 track so we're renaming this 60:06 now and I'm just going to open 60:10 this and update this 60:18 actually let's close 60:21 this and what we're going to do so we're 60:25 going to run this boom assign track. 60:28 lovable. apppp and we're going to just 60:31 go ahead and don't have an account so my 60:34 name is Lucas I'm going to put 60:36 my my 60:40 email actually I'm going to delete 60:43 this I'm going to put another 60:48 password sign 60:52 up so it says to check my email for 60:55 verification 60:57 so I'm going to do that really quick so 60:59 I get this email so I'm just going to 61:01 click on 61:03 this it takes takes me to this which is 61:06 pretty weird that has to be fixed but we 61:08 don't have enough time right now we want 61:10 to go here and we should be you 61:13 know authenticated so I'm just going to 61:15 click on sign in and we're signed in 61:18 right so we just have to fix that little 61:21 you know email uh confirmation 61:26 uh user flow so that are other things 61:30 that you have to do with lovable but for 61:31 today's video just bringing stuff from 61:34 figma to lovable works fine so what you 61:38 have to do so now we have the dashboard 61:39 we have the classes we have the 61:41 assignments we have the students we can 61:43 add a student so we can say we can put 61:46 my name here we can put a random ID and 61:49 we can pick a random class and add 61:51 students and it's going to start off 61:52 with 0% because there is still no 61:55 information on this and none of these 61:57 buttons work because we haven't prompted 62:00 anything yet for these buttons 62:04 so so yeah this is basically it right 62:09 and it says that I'm Jane Smith 62:12 obviously we have to you know add like a 62:13 membership profile that you can edit 62:16 your um you know your name and your 62:20 email and your password I 62:23 guess but this for first step is right 62:26 so what I'm going to do is I'm just 62:27 going to 62:30 um I'm going to go ahead and try to 62:33 connect this to framer and show you how 62:35 it would look like if you have a 62:37 marketing page in framer and have this 62:40 login button go to lovable so I'm in 62:43 framer right now I'm going to rename 62:45 this to assign track I think it was 62:47 called assign track and open a tablet 62:51 and a phone and go ahead and I'm going 62:54 to just do it with one of my favorite 62:57 component libraries called 62:58 compa and in compa 63:02 basically we have different types of nav 63:04 bars I'm just going to use this 63:07 one to start off 63:09 with and make sure that it's not fix 63:12 with but 63:14 fill and I'm going to go back here and 63:17 select a hero 63:19 section pick something like this make 63:22 sure that it's set to 63:23 fill and let's make the height fit 63:26 content now what I'm going to do is I'm 63:28 going to go ahead and unlink this snap 63:31 bar by double clicking on it and click 63:35 on login so 63:40 login and here I'm just going to put 63:43 some image of a 63:44 teacher so we can use 63:47 that like uh what's that plugin 63:53 called um so we can search for a 64:00 teacher something like 64:05 that 64:08 and teacher 64:11 or this this 64:14 ass app to help 64:19 you to help 64:21 teachers track progress 64:25 I'm not the best at copyrighting 64:28 but you get it so log 64:31 in so now what I'm going to do I mean we 64:34 have this now for the different screens 64:36 right now what I want to do is I want to 64:40 connect these buttons to 64:44 these to this link so I'm going to just 64:47 go like 64:49 this I'm going to open it in the Safari 64:51 browser because in the Chrome it kind of 64:53 recognizes my name my my 64:56 profile so this is going to be signed 64:58 into your account so I'm going to copy 65:02 this put this into the login 65:05 link boom and go into the snap bar as 65:10 well and boom and now what I'm going to 65:13 do is don't have oh let me go to this 65:17 Safari one don't have an 65:22 account I guess we can use the same you 65:25 know 65:27 same thing here right so get 65:32 started so if I were to publish 65:36 this and open this 65:39 here I can just go ahead and log in so 65:43 this is just like the landing page and 65:45 then you're logged in right or I can 65:47 open 65:48 it 65:49 here and open it in 65:53 Safari and click on get start started 65:56 and basically here you have your login 65:59 destination so that's basically it guys 66:02 like it obviously requires much more 66:05 time I I just showed you like the setup 66:08 process of going from figma or Claud 66:13 let's say like IDE ideating in Claud 66:16 creating some visuals with Claud 66:17 bringing that to figma with that HTML to 66:20 design plugin then actually editing that 66:24 that uh design and then bringing that to 66:26 lovable creating functionality with it 66:29 and then using a tool like framer to 66:32 create a nice marketing page for your 66:34 web app and in less than I mean the 66:37 video might be like an hour long but for 66:39 me it took less than an hour and 30 to 66:42 to make and this just shows you how 66:44 crazy um our our industry is getting 66:47 with with AI and with design so we have 66:51 to be able to learn quickly we have to 66:53 be able to be brave in order to try 66:55 these new tools and not be scared of you 66:58 know you know getting our our hands 67:01 dirty with these tools right so I hope 67:03 this video was was useful for you guys I 67:05 hope you guys learned something I hope 67:07 you guys can take this and build 67:09 something great and if you do please let 67:11 me know um you can join my Discord and 67:14 and and talk to me there we do daily 67:17 live calls at around 2 pm eastern time 67:20 so you can share your findings with us 67:22 whenever you build something cool all 67:23 right so hope you guys have a have a 67:25 wonderful day thank you so much for 67:27 joining and I'll see you next time 67:30 bye-bye