WEBVTT 00:01.920 --> 00:07.800 In this lecture, we're going to put the PRD and the to do list that we have created to work and create 00:07.800 --> 00:08.480 a new project. 00:08.520 --> 00:13.160 Now, if you want, you can continue the conversation here in this existing project. 00:13.440 --> 00:19.120 But I'm going to go and create a new project from scratch just to show you how I would ideally do it. 00:20.200 --> 00:25.520 So this is a start page, and in order to provide the instructions I'm going to happily use now, ChatGPT 00:25.680 --> 00:29.640 already have a few good things, and one of them is this context here. 00:29.640 --> 00:30.800 So we're specifying here. 00:30.800 --> 00:34.520 We're building a Trello style Kanban board using react, TypeScript and vite. 00:35.240 --> 00:38.640 So it does explain a bit what we want to use here. 00:39.720 --> 00:43.320 So this would be the first part of this prompt. 00:43.960 --> 00:48.520 And then the second part is exactly telling what needs to be done. 00:49.120 --> 00:51.280 So these are already pretty good steps that we have here. 00:51.280 --> 00:53.600 And we can paste them here as well. 00:54.040 --> 00:57.360 Of course we could provide here this entire configuration. 00:57.360 --> 00:59.990 But I'm going to show you a better way to do that. 00:59.990 --> 01:06.030 So let's give it a bit of time and allow lovable to kick start this app. 01:06.350 --> 01:11.790 And after that, I'm going to show you exactly where we're going to store these instructions and guidelines. 01:12.790 --> 01:13.390 So there we go. 01:13.430 --> 01:16.510 This is how our initial version of the application looks like. 01:16.710 --> 01:18.750 It looks a bit different than before. 01:18.790 --> 01:23.350 And every time, even if we use the same prompt multiple times, it's going to look a bit different. 01:23.550 --> 01:30.550 So a lot of things here that we didn't really specify and lovable was maybe a bit too nice and added 01:30.550 --> 01:33.390 also these tags here that we don't really need. 01:33.550 --> 01:35.950 But anyway, it is what it is for now. 01:36.510 --> 01:39.550 We do notice here that this is not even moving. 01:39.550 --> 01:42.430 So we don't have here a specific functionality. 01:42.430 --> 01:44.230 This is just hard coded here. 01:44.230 --> 01:45.550 So we cannot move this. 01:45.550 --> 01:48.630 But for now I would say this is absolutely fine. 01:48.630 --> 01:52.190 But I wanted to show you actually in this lecture is another thing. 01:52.430 --> 01:55.430 And that is a bit hidden here in the settings. 01:55.590 --> 01:58.740 So if you go here to your project name you're going to notice this here. 01:58.740 --> 02:01.260 This is an Autogenerated project name. 02:01.540 --> 02:04.380 You can click on this and then you can go here to settings. 02:04.420 --> 02:06.500 So this is where you control the project. 02:06.820 --> 02:09.580 You can change the project name if you're not happy with it. 02:10.300 --> 02:14.940 So we're going to see here in the lower part you have here rename project. 02:15.100 --> 02:15.940 So that's a possibility. 02:15.940 --> 02:19.020 Also if you want to delete it later on you're going to go back here as well. 02:19.300 --> 02:23.740 But what I wanted to show you is actually inside here in knowledge. 02:24.020 --> 02:27.340 So this is information about the project. 02:27.340 --> 02:33.620 So there are already a few things that we could specify here is like if you have project specific rules 02:33.620 --> 02:38.820 or best practices, things that we want to use, coding style preferences. 02:38.820 --> 02:42.980 So many of these AI tools allow us to provide these kind of things. 02:43.380 --> 02:45.660 There's also here a button that says get inspiration. 02:45.660 --> 02:51.180 This is going to take us to the documentation page of loveable, and we're going to see here that we 02:51.180 --> 02:54.100 can also have here feature specifications. 02:54.100 --> 02:59.280 So user stories, acceptance criteria and detailed descriptions of each feature. 02:59.520 --> 03:01.280 So this is exactly what we're going to do. 03:01.440 --> 03:08.040 From ChatGPT, we're going to go ahead and copy this entire specification that we have written here. 03:08.040 --> 03:09.320 I'm going to paste it here. 03:09.880 --> 03:11.840 And we're going to have here the tasks. 03:11.840 --> 03:14.640 So this is the part where we have the tasks. 03:15.400 --> 03:18.520 There are the various milestones here which actually we don't really need. 03:18.520 --> 03:20.400 So we can go ahead and remove those. 03:20.880 --> 03:24.360 So it's a good idea to just check again everything that has been done here. 03:24.880 --> 03:27.040 And we're going to find here also an overview. 03:27.040 --> 03:30.480 So it's going to explain us here what this is all about. 03:30.760 --> 03:34.840 And the big advantage of having it here is that we can click now and save. 03:35.080 --> 03:36.360 This has been persisted. 03:36.840 --> 03:40.880 It is aware agent is aware of this. 03:41.280 --> 03:44.120 So we can reference information from here. 03:44.400 --> 03:50.360 And most importantly we can easily go back to the settings go to knowledge. 03:50.600 --> 03:54.960 And if there's something that we need or if there's something that we want to add, we can simply make 03:54.960 --> 04:02.190 the changes here If you would have placed this in a prompt, it would be somewhere here in the conversation. 04:02.590 --> 04:07.390 And it's very difficult to go back and edit such a large document. 04:07.630 --> 04:10.590 So this is why it makes sense to actually store it here. 04:10.830 --> 04:14.990 So if you want to continue this conversation, we can do it from here and reference any information 04:14.990 --> 04:16.470 that's available there. 04:16.870 --> 04:20.270 And that's pretty much the main idea of this lecture. 04:21.190 --> 04:27.230 Now currently the user interface is just too crowded and contains more than we actually need for this 04:27.230 --> 04:28.270 simple example. 04:28.270 --> 04:34.550 So I'm just going to ask loveable to simplify the user interface according to the specification. 04:34.590 --> 04:35.910 So let's see how this goes. 04:37.350 --> 04:44.950 So now by the fact that we have specified here the PRD lovable was able to understand that a lot of 04:44.950 --> 04:47.950 things that were added are actually not needed. 04:48.190 --> 04:52.910 And it has just focused here on the main design elements that are actually needed.