Is This the Future of No-Code? This AI Turns Figma Designs Into Apps (Lovable Course)

0:00 Imagine building a complete project 0:02 management app with user authentication, 0:04 database connections, and advanced 0:06 features without writing a single line 0:08 of code. Sounds impossible? Watch as I 0:10 turn this Figma design into a 0:12 milliondoll web app in under 30 minutes 0:15 using Lovable. This isn't the future of 0:17 no code development. It's happening 0:19 right now. Let me show you how. First 0:21 things first, let's check out our design 0:23 in Figma. Well, in order to create an 0:25 app or website with Lovable, you don't 0:27 have to have a design ready. However, if 0:29 you do, it's going to deliver much 0:31 better results and you're going to get 0:33 to the end point much faster. So, here, 0:36 as you can see, I have two pages. I have 0:39 the sign-in page and also the dashboard. 0:42 But why do I have only two pages? Well, 0:44 of course, when you want to build a 0:46 complete project from scratch, you need 0:48 to design all pages and you need to have 0:50 a clear flow for your project. However, 0:52 for this project, I specifically 0:54 prepared only two screens. Why? because 0:57 I'm going to show you how incredibly 0:59 powerful Loveable is at creating UIs 1:01 using just a few screenshots. So here, 1:04 as you can see, I have the sign-in page 1:06 with a few fields. And then we have the 1:08 main dashboard for our project 1:10 management app. Here, as you can see, we 1:12 have the sidebar on the left side with 1:14 these options. Here we have the my 1:16 project section. We have home, messages, 1:18 tasks, members, settings, and right at 1:21 the top we have this header with the 1:23 search bar. And here we have the project 1:25 name with a few buttons and also three 1:28 columns. We have the to-do column on 1:30 progress and done. And inside each 1:33 column we have a few task cards. Here as 1:35 you can see each card includes a few key 1:38 elements such as a priority level tag, 1:41 title, description, the profile images, 1:43 number of comments, and number of files 1:46 attached. And here we have a thumbnail 1:48 which is optional for these task cards. 1:50 All right. So, how can we create this UI 1:53 using Lovable here? I'm just going to 1:55 take a screenshot of this dashboard just 1:58 like this. Then, I'm just going to copy 2:00 this screenshot and let's head over to 2:03 Lovable.dev right here. Then, I'm going 2:05 to paste that screenshot. And here, I'm 2:08 going to describe what I'm trying to 2:10 build. Well, when it comes to using AI 2:12 tools like Lovable, the prompt you use 2:14 to create a product determines the 2:16 quality of the end result. So, it's so 2:18 important to describe what you're 2:20 looking for in a clear way. And here's a 2:23 tip. Make sure to use an incremental 2:25 prompt process. I mean, you shouldn't 2:27 describe every single thing in one 2:30 single prompt. It just confuses AI. So, 2:32 here, since I'm going to create a 2:34 project management app, I'm just going 2:36 to type I want to build a project 2:38 management web app. And then I'm going 2:40 to describe the features of the app. So, 2:42 I'm just going to type the app should 2:43 allow users to create projects, assign 2:46 tasks to team members, track task 2:49 progress, set deadlines, and communicate 2:52 via comments. Then I'm going to say 2:54 generate the app structure and screens 2:56 based on the UI design I attached. All 2:58 right. Now, I'm going to submit and 3:00 let's see what Lovable comes up with. 3:02 So, here it describes what it's trying 3:04 to build. It says a sleek dark sidebar 3:07 for navigation. So, it clearly 3:09 understood our design. Then we have 3:12 clean card layouts for tasks, user 3:14 avatars for team collaboration, priority 3:17 indicators, low, high, etc. Status 3:20 columns, comment and file attachment 3:22 features. So it clearly understood what 3:25 the project is all about and what 3:27 features we need for this project. So 3:30 what should be implemented? And then it 3:32 says, I'll implement the following 3:34 features. Project creation and 3:36 management, task creation with 3:38 assignees, deadlines and priorities, 3:40 camp board for task status tracking, 3:43 comment system for team communication, 3:45 clean modern UI, matching your design. 3:48 And then it says, let me build this for 3:50 you. And now it's actually writing the 3:52 code for us. If I just click here, 3:54 you'll see that it's writing the code in 3:56 real time and it's implementing all 3:59 these features. All right, it's done. 4:01 Let's see what it did here. described 4:04 what it did. It says your project 4:05 management web app is complete blah blah 4:07 blah and we have all the details and 4:10 here on the right side as you can see it 4:13 built our UI almost perfectly. There are 4:16 a few things we can adjust but as you 4:18 can see it did an incredible job 4:20 creating the UI based on the screenshot 4:23 we provided. So here as you can see we 4:25 have all the menu options. We have home, 4:27 we have this dashboard with recent 4:29 projects. We have a few draft projects. 4:32 Then we have this create project button. 4:35 If I just click on it, nothing happens 4:37 because here we just have the basic UI 4:39 and not everything is functional but 4:41 we'll definitely make everything 4:43 functional here. Then we have messages. 4:46 As you can see, we have all these draft 4:49 messages. Again, the chat function may 4:51 not work properly at this stage. Then we 4:54 have tasks. Look at this page. You see, 4:57 I told you we only need just a few 4:59 screenshots in order for Lovable to 5:02 create a complete app for us. Here we 5:04 have all these filters. We have all 5:06 these cards. Just like that. It looks 5:09 very nice. Then we have the members page 5:12 as well. We can add members. This button 5:14 doesn't work yet. Then we have setting. 5:17 Okay. When I click on setting, we get an 5:19 error. It happens sometimes. And the 5:21 only thing you need to do is just click 5:23 on try to fix. Just like that and then 5:26 lovable tries to fix the issue for you. 5:29 So here it says looking at the error I 5:31 can see we have an issue with the form 5:33 components and then it tries to resolve 5:35 the issue quickly. So keep in mind that 5:37 from time to time you may get some 5:39 errors but it's quite easy to fix the 5:42 issues. All right as you can see the 5:44 issue is resolved. Now if you just click 5:46 on settings here we have all the 5:48 settings. We have profile we have 5:51 account. Look at this. We have all these 5:53 fields. So we have notification, email, 5:56 display. There is nothing under these 5:58 two tabs. That's fine. But here, as you 6:00 can see, we have all these settings. We 6:02 have these switches that work properly. 6:04 So the UI looks quite good. Now let's 6:07 move on to the main functionalities. 6:09 Here we have my project section. If I 6:12 head over to home or dashboard and I 6:14 click on create project, nothing happens 6:17 as I already showed you. But let's click 6:19 on one of these projects. Maybe website 6:21 redesign. Okay. As soon as I do that, 6:24 I'll be taken to this project page. Here 6:27 we have the project name. We have these 6:29 icons. We have these filters and this 6:32 share button as well. Then we have three 6:35 columns according to our design. We have 6:37 to-do on progress and done. And under 6:40 each column, we have a few draft task 6:42 cards. And each card has a label, has a 6:45 title, description, these profile 6:47 images, and these icons. But none of 6:49 these cards has a thumbnail. So, we need 6:52 to fix that. But also, we have an issue 6:55 here. As you can see, this section is 6:57 scrollable. That's not what I want. So, 7:00 let's fix that. To fix this issue, I'm 7:02 going to take a screenshot of this 7:05 section. Just like that. And let's just 7:08 copy and paste it here. And I'm going to 7:11 describe what needs to be fixed. I'm 7:13 going to type here. We have an issue. 7:16 This section is scrollable, but it 7:18 shouldn't be. Let's make sure it only 7:19 takes up the available space within its 7:22 parent container. All right, here we've 7:24 got another error. So, let's fix that. 7:27 Okay, we've got another error. So, let's 7:29 try to fix this as well. All right, now 7:31 the issue is resolved. I just need to 7:34 zoom out a bit. So, now let's see what 7:36 kind of functionalities we need for this 7:38 project management app. Of course, we 7:40 need to be able to create these task 7:42 cards. That's the first thing. The 7:44 second thing is that we need to be able 7:46 to rearrange them. And also when a task 7:49 card is moved from for example to-do or 7:52 on progress column to the done column 7:54 the tag should be changed to completed. 7:57 So what I'm trying to do here is make 7:59 these task cards rearrangeable. So 8:02 basically we should be able to drag and 8:04 drop them within each column and also 8:07 between different columns. Okay. So 8:10 let's quickly do that. I'm going to type 8:12 now let's fix a few things related to 8:14 task cards. Then I'm going to say users 8:16 should be able to drag and drop task 8:19 cards to rearrange their order within 8:22 the same column or move them between 8:24 different columns. The next thing I'm 8:26 going to say is when a task card is 8:28 moved to the done column, its status tag 8:31 should automatically change to 8:33 completed. And finally, I'm going to say 8:34 that this task count should update in 8:37 real time to reflect the number of tasks 8:40 currently in that column. So let's say 8:42 the task count for each column should 8:44 update in real time to reflect the 8:47 number of tasks currently in that 8:48 column. Okay, so we've got an error. 8:50 Let's try to fix it. All right, it says 8:52 the issue has been fixed here. As soon 8:54 as I hover over these task cards, I can 8:57 see that the cursor changes to this hand 8:59 icon, indicating that these cards are 9:02 now draggable and droppable. So, if I 9:05 just want to reorder them, as you can 9:07 see, I can easily do that. So, now let's 9:09 see if we can move these cards to other 9:12 columns as well or not. I'm just going 9:14 to move it right here. Yes, I can do 9:16 that. I'm going to move this one on 9:18 boarding illustrations to the down 9:20 column. However, as soon as I did that, 9:23 the label didn't change to completed. 9:25 So, let's fix this issue. Let's type 9:27 when I moved a task card to the done 9:30 column, the label didn't change to 9:32 completed. Or let's say the tag didn't 9:34 change to completed. All right. So, here 9:36 we've got this completed tag. However, 9:38 that's not what I was looking for. I 9:40 wanted these priority level tags to be 9:43 changed to completed. Okay. Instead, now 9:46 we've got an additional tag. So, let me 9:48 just move this one to the down column. 9:51 Just like that. Yeah, that's not what I 9:53 was looking for. So, let's fix that. I'm 9:56 going to say I don't want a new tag to 9:58 be added to the task card. I just want 10:00 the priority tag to be changed to 10:03 completed. All right, it's done. Now, as 10:05 you can see, now we have only this 10:07 single tag. However, I want it to match 10:10 the styling of our priority tags. So, 10:13 let's say I want the completed tag to 10:15 match the style of our priority tags. It 10:18 can be green. There we go. That's what I 10:20 was looking for. By now, for sure, you 10:22 realized how you can modify the UI and 10:25 how you can change the styling of 10:26 different elements by just describing 10:28 what you're looking for. However, 10:30 Lovable has a very cool and new feature 10:32 as well, which allows you to edit the 10:35 interface using the editor. If you just 10:37 want to change the styling of elements 10:39 here, you can simply click on this edit 10:41 icon just like that. And as you hover 10:44 over these elements, you can just select 10:46 them. For example, if you want to modify 10:48 this one, this title, you can just 10:50 select it here. You can change the 10:52 margin, the padding, font size, color, 10:55 etc. That's incredible, isn't it? For 10:57 now, I'm just going to hit save just 10:59 like this. And let's just click on this 11:02 refresh page. Okay. And I'm going to 11:04 give it a try once again. So, I'm just 11:06 going to move this one to on progress. 11:08 Then, I'm going to move it to the done 11:10 column. Nice. I can move it back just 11:13 like this. Everything works perfectly. 11:15 I'm not sure if you've noticed or not, 11:17 but the task count also updates in real 11:20 time. Look at it. That's so cool, isn't 11:23 it? All right. The next thing we need to 11:24 create here is a model to let us edit 11:26 these task cards. Okay. So let's just 11:29 say now add the ability to open a model 11:32 with full task details when a task card 11:35 is clicked with options to edit title, 11:38 description, tags, due date, priority 11:41 level, and assign users. The task could 11:44 optionally have a thumbnail as well. All 11:46 right, now it's creating the task 11:48 details model for us. It's creating the 11:51 component, and then we'll be able to 11:52 edit these tasks individually. All 11:54 right, it's done. Let's see what happens 11:56 when I click on any of these cards. 11:59 Okay, when I click on these cards, 12:01 nothing happens. So, let's just describe 12:03 that. When I click on a card, nothing 12:09 happens. Okay, it says it's fixed now. 12:12 Let's see. As you can see, it's still 12:14 not working as expected. So, I cannot 12:17 open up the model. So, let's just ask 12:19 Lovable to fix it. It's still not 12:22 working. I can only drag and drop cards. 12:25 Let's make them clickable and editable 12:28 by opening a model. All right. Now, 12:30 let's see if it's fixed or not. Yes, 12:33 there it is. So, as soon as I click on 12:35 any of these cards, this task details 12:38 model pops up and we can edit the 12:40 details of each task such as title, 12:43 description, the priority. Here we have 12:45 three different priorities. We have 12:47 these radio buttons. Then we have the 12:49 due date. As soon as we click on it, 12:52 this calendar pops up. Cool. Then we 12:54 have the assigned users. We can manage 12:57 it. However, it doesn't work currently. 12:59 We can fix that. And then we have this 13:02 thumbnail option as well. So, we can 13:04 upload a thumbnail. Again, it doesn't 13:07 work currently. So, let's check out 13:08 these fields first. I'm just going to 13:10 change it to new title like that. And 13:14 the description could be just 13:16 brainstorming like this. Let's change 13:19 the priority level to high. And the due 13:22 date could be 18. Again, the due date 13:25 doesn't work as well. It's good to find 13:28 these issues step by step. And the 13:30 upload image button doesn't work as 13:32 well. Let's click on save changes. So, 13:34 as soon as I click on save changes, the 13:37 title didn't change. So, we need to fix 13:40 these issues. Let's say when I edit the 13:43 task details in the model and I hit 13:45 save, nothing changes. Also, the upload 13:48 thumbnail button doesn't work. And when 13:50 I select the date, it doesn't appear 13:52 properly. All right, it's done. Let's 13:54 check it out once again. So, here I'm 13:57 just going to change the title to 13:59 brainstorming new. The description as 14:01 well. Let's just copy it and paste it 14:04 here. Let's change the priority to 14:06 medium and pick a date. Yeah, now we can 14:10 see the date here. Nice. What about the 14:13 upload image button? Yeah, it works. it. 14:15 Let me upload my thumbnail. And let's 14:17 hit save changes. There we go. Here it 14:20 says task updated. Then we have the new 14:23 title, the new description, and also the 14:25 thumbnail. And now let's see if we can 14:27 still drag and drop these cards. 14:30 Unfortunately, we can't. So, let's 14:32 resolve it quickly. I'm going to say now 14:34 the drag and drop function doesn't work 14:36 at all. All right, let's see if it's 14:38 resolved or not. Unfortunately, not. 14:41 It's still not working. So, let's say 14:44 it's 14:45 still not working. All right. Now, it 14:49 says the car component now correctly 14:51 handles both drag and drop functionality 14:53 and click interactions. Let's see if 14:56 it's true or not. So, I'm just going to 14:58 click on it. Okay, the model opens. And 15:01 I'm just going to drag and drop it. 15:03 However, it doesn't work. Let's say the 15:06 card is clickable. However, it's not 15:08 dragable. All right. Now, let's see if 15:10 it's resolved or not. I'm just going to 15:12 click on it. I can open up this model 15:15 and I'm just going to drag it to another 15:17 column like this. And everything works 15:21 perfectly. All right, cool. Now, let's 15:22 once again check out all these details. 15:25 For example, let's change the priority 15:27 level. I'm going to hit save. Yes, it 15:30 updates immediately here. I'm just going 15:32 to upload an image. Hit save changes. 15:35 Yes, we can see the image perfectly. 15:37 Okay, so now that the model is ready, we 15:40 need to find a way to create a task as 15:42 well because currently these plus icons 15:45 don't work. So what I'm going to do is 15:48 take a 15:49 screenshot like this and I'm just going 15:51 to copy and paste it in the chat and I'm 15:54 going to say when this plus button is 15:58 clicked, the user should be able to 16:01 create a new task. All right, let's see 16:05 if it works or not. I'm just going to 16:07 click on this plus icon. Yes, there it 16:09 is. We have this create new task model. 16:12 Now, let's give it a title. I'm going to 16:14 type new task. The description, new task 16:18 as well, and the priority level could be 16:22 high. Let's set a due date for it. The 16:24 due date doesn't work. And I can upload 16:26 an image, but I'm just going to leave it 16:28 as is. Let's hit create task. And there 16:31 it is. Here we have the new task. But 16:33 there is a couple of issues with this 16:35 new model. One of them is this date 16:38 picker and the other one is that we 16:39 cannot assign users to this task. So we 16:43 need to fix that. Let's say in the 16:45 create new task model the date picker 16:48 doesn't work properly. So we cannot set 16:50 the date and also we don't have the 16:52 option to assign users to a task. All 16:55 right, it's done. Let's check it out 16:57 once again. There we go. Now we have 16:59 this assign users section as well which 17:01 allows us to assign new users to this 17:04 particular task. So I'm just going to 17:06 type UI design. The description could be 17:09 UI design as well. I'm going to set a 17:12 due date. Okay. I'm not going to assign 17:15 any users now. And I can upload an 17:17 image. Then let's hit create task. And a 17:20 new task will be created. Perfect. What 17:23 else do we need? Well, to make the UX 17:25 even better, I'm going to replace this 17:27 share button with a create task button. 17:30 Okay. So, I'm just going to take a 17:32 screenshot here and just copy and paste 17:34 it in the chat. And let's say replace 17:38 this share button with a create task 17:41 button. And once it's clicked, the 17:44 create new task model should open. All 17:46 right, it's done. Now, we have this 17:49 create task button. And here we've got 17:51 an error. So, let's fix it. Okay, it's 17:54 fixed. Now, let's click on create task. 17:56 And there it is. This create new task 17:59 model opens. Awesome. So, this section 18:01 is done. Now, let's move on to the my 18:04 project section here. I'm just going to 18:06 open up another project here. Let me 18:08 just click on mobile app. And here we 18:11 have another project. The project name 18:14 updates properly. Nice. Here we have a 18:16 few draft tasks as well. Okay. But how 18:19 can we create a project? If I just head 18:22 over to the dashboard, you can see that 18:24 we have this button here, create 18:26 project. However, when I click on it, 18:28 nothing happens. So, let's fix this 18:30 issue. I'm just going to take a 18:32 screenshot here. Let's say now let's 18:34 make this button work. When it's 18:36 clicked, a model should appear with only 18:38 one field, project name. All right. Now, 18:40 let's give it a try. I'm going to click 18:42 on create project. There it is. We have 18:45 this new model. And I'm going to type UI 18:48 design. Hit create project. and it says 18:51 project created. However, as you can 18:54 see, there is no project here. So, we 18:56 need to fix this. Let's say when I click 18:59 on the create project button after 19:03 choosing the name, it says the project 19:06 is created, but I won't be taken to the 19:09 project page where I will be able to 19:11 create tasks. The project should also be 19:14 added to the my project section in the 19:17 sidebar. All right, we've got an error. 19:19 Let's fix it. Okay, it says it's fixed. 19:22 Let's give it a try. I'm going to create 19:24 a new project. Let's name it UI design 19:28 and hit create project. Okay, the 19:30 project is created. And it says project 19:33 not found. The project you're looking 19:35 for does not exist. So here we have an 19:38 issue. Let's fix this. I'm just going to 19:40 take a screenshot. Let's paste it here. 19:43 And I'm going to say when I create a new 19:46 project, I get this message. Instead, I 19:52 should see all the columns and elements 19:56 we created before. Essentially, I should 19:58 be taken to the page we were working on 20:02 with the columns and tasks. There it is. 20:05 Now, we've been redirected to the proper 20:07 page. So, here, let's create another 20:10 project. I'm going to call it UX design. 20:14 And as you can see, all our draft 20:16 projects are gone. I'm going to hit 20:18 create project. And everything works 20:20 properly. So, let's create a task. New 20:23 task. Just like this. And hit create 20:26 task. Boom. Everything works as 20:28 expected. So, I'm just going to move it 20:30 here just like this. Awesome. So, now 20:33 that the basic functionalities are in 20:35 place, we need to create a database. But 20:38 what's a database? A database is 20:40 essential for storing and managing data 20:42 in a structured way. In this case, we 20:44 need a database to store user 20:46 information, projects, tasks, and any 20:49 other data related to our app. This 20:52 ensures that data is persistent, easily 20:55 accessible, and can be updated or 20:57 retrieved as needed. Without the 20:59 database, we would be unable to save and 21:02 retrieve the necessary information 21:04 between sessions or for multiple users. 21:07 So currently when we create a new task 21:10 this task is saved locally and if you 21:13 just refresh the page it will be gone. 21:15 Therefore we need to have a database to 21:17 store the user's information do user 21:20 authentication store information 21:22 retrieve information etc. So how can we 21:25 create the database? So here I'm going 21:27 to type now let's implement a database 21:30 to store all the essential information 21:32 for each project and user. The database 21:35 should be properly structured to handle 21:38 user details, project data, and tasks. 21:41 Additionally, ensure that the login 21:44 functionality is set up according to the 21:46 design in the attached screenshot. And 21:49 now I'm going to head over to my Figma 21:50 project and I'm going to take a 21:53 screenshot of this signin page just like 21:56 this. And just copy and let's paste it 22:01 right here as a reference. and submit 22:04 the prompt. Okay, so here it says for 22:06 your request to implement the database 22:07 and login functionality lovable has a 22:10 native integration with superbase that 22:13 would be perfect for this use case. So 22:15 basically what we need to do is click on 22:18 this little icon manage superbase and 22:20 you need to go ahead and create your own 22:22 free superbase account and just connect 22:24 it to your lovable project. So here 22:26 since I already have a superbase 22:28 account, I'm going to click on create 22:30 new project just like this. And here I'm 22:33 going to name this project project 22:35 management. And I'm going to set a 22:36 secure database password for our 22:39 database. I'm going to hit create new 22:41 project. Confirm. And then our project 22:44 will be created. So now what we need to 22:46 do is connect this project to our 22:48 lovable project. Okay. So here as you 22:51 can see I have this new project 22:52 management and I am going to click on 22:55 connect and hit connect again just like 22:57 this. Now it says connected. So I'm 23:00 going to hit back to project. There it 23:02 is. Now it says your app is now 23:04 connected to superbase. So what I'm 23:06 going to do now is just copy and paste 23:08 the prompt that I just wrote. Let's 23:10 remove this part for now. We'll create 23:12 the sign-in page a bit later. So now 23:14 lovable is implementing a database 23:16 structure for us in Superbase. basically 23:19 in the project that we just created in 23:21 Superbase. So here, as you can see, it's 23:23 writing the SQL code for us. Just like 23:26 that. And once it's done, we can apply 23:29 changes and our database will be ready 23:32 to use. And I'm going to hit apply 23:34 changes. All right, it's done. Now I'm 23:36 going to click on O settings. And here 23:38 I'm going to click on email. And I'm 23:40 just going to turn this option off, 23:42 confirm email, because we are just 23:44 building this app. And every time we 23:46 create a new user, we don't want to go 23:48 ahead and confirm the email. So, I'm 23:50 just going to save it. It's just a good 23:52 practice and it's going to save us so 23:54 much time. All right, nice. Now, let's 23:56 give it a try. I'm going to head over to 23:58 the Superbase project we just created. 24:00 And now, if I head over to table editor, 24:02 you will see that we have all these 24:04 tables, right? We have comments, 24:06 profiles, project members, projects, 24:08 task assignees, and tasks. So, these are 24:11 basically the tables that lovable 24:13 created for us. And there is nothing 24:15 inside yet because we haven't created 24:17 anything yet. I'm just going to head 24:19 over to the sign-in page. I'm going to 24:21 go to O. There it is. Here we have login 24:23 and sign up. Looks nice. We can change 24:26 the design later according to our needs, 24:28 but for now, let's just create a new 24:31 account. I'm going to sign up. Okay, it 24:33 says check your email. We've sent you a 24:35 verification link to complete your 24:37 registration, but we already turned it 24:39 off, so we don't need to confirm our 24:42 email. I'm just going to log in now. 24:44 There it is. Now we are inside the 24:46 dashboard. Looks good. Let's create a 24:49 new project here. I'm going to type 24:51 website redesign. Create project. Nice. 24:55 I'm going to create a task. Let's say 24:58 new task here as well. And I'm just 25:02 going to upload a thumbnail as well. Hit 25:04 create task. Okay, a task is created. So 25:08 now if I refresh the page, you see that 25:10 the task is gone. So that's a problem. 25:13 Let's type now when I create a new task, 25:18 it won't be retrieved from the database 25:21 once I refresh the page. All right, 25:24 we've got an error. Let's fix it. Okay, 25:27 let's check it out once again. I'm going 25:29 to create a new task. Hit create task. 25:32 The task has been created. It's right 25:34 here. We can move it to other columns as 25:37 well, just like this. And when I refresh 25:40 the page, the task should still be here. 25:43 Otherwise, it means that it's not being 25:45 saved in our database. And there it is. 25:47 The task is still here. Which means that 25:50 now this task is saved in our database. 25:53 So, as you can see, Lovable is quite 25:55 powerful and it's quite easy to create 25:58 complex apps such as this mentor project 26:01 management app in hours instead of 26:03 months. Of course, this app is not 26:05 complete by any means. However, we've 26:08 created the main functionalities to make 26:10 it work. If you're new to UIUX design 26:12 and looking for a clear road map to 26:14 kickstart your design journey this year, 26:16 you can check out this video. Thanks for 26:18 watching this video and if you found it 26:19 helpful, please hit the like button and 26:21 subscribe to my channel for more design 26:23 tutorials. Have a beautiful day and see 26:26 you