WEBVTT 00:02.000 --> 00:08.360 Even if told to only work on a specific feature, it is not uncommon for the AI to start implementing 00:08.360 --> 00:11.640 some features that are part of other to DOS. 00:12.160 --> 00:17.520 In this case, for example, I noticed that we can add a new card and that card is going to be saved. 00:17.520 --> 00:22.800 And this is a function that shouldn't have happened yet, but it's not possible, for example, to move 00:22.800 --> 00:27.400 this card and take a look here at deleting this card is probably also works. 00:27.400 --> 00:29.960 So some features have already been implemented. 00:29.960 --> 00:33.960 So let's go back to our specification and see exactly where we are at. 00:33.960 --> 00:41.520 So inside knowledge going to find here that we are at task number I think three currently. 00:41.520 --> 00:45.720 So basic functionality load columns and cards from Supabase. 00:45.720 --> 00:46.960 This is already happening. 00:47.640 --> 00:49.960 Add ability to create a new card in any column. 00:49.960 --> 00:57.000 This is probably also already done, but what we don't have is this allow drag and drop and also implement 00:57.000 --> 00:58.160 reordering the card. 00:58.160 --> 01:00.120 So I'm not sure if this is already working. 01:00.320 --> 01:02.180 I'm going to copy this exact name. 01:02.340 --> 01:04.220 Let's add another card here. 01:05.260 --> 01:06.140 Where are we at? 01:06.940 --> 01:08.740 So this is going to be card one. 01:09.260 --> 01:11.860 And we're going to have here card two. 01:12.860 --> 01:14.540 And to refresh once the page. 01:14.660 --> 01:16.060 So the cards are still there. 01:16.540 --> 01:19.140 And we can also see that reordering is not possible. 01:19.140 --> 01:20.900 So we cannot drag and drop. 01:21.580 --> 01:26.380 We're going to see here work on three basic functionality. 01:27.780 --> 01:33.580 So now if you're looking at a conversation I'm going to see here that it's recognizing that many things 01:33.580 --> 01:34.580 are already set up. 01:34.580 --> 01:37.820 But drag and drop is not implemented. 01:38.620 --> 01:44.740 So it's going to take a look now at adding drag and drop essentially the moving of cards and also the 01:44.740 --> 01:46.100 reordering of cards. 01:46.260 --> 01:48.020 So I just need to give it a bit of time. 01:48.020 --> 01:50.420 And we're going to test it in a second to see if it works. 01:51.780 --> 01:58.260 So now this functionality has been implemented but unfortunately we're getting here an error. 01:59.100 --> 02:01.600 So let's see what we can do in order to resolve it. 02:02.000 --> 02:05.560 Now typically what we can do is to view the logs. 02:05.760 --> 02:09.440 So this is additional information about this particular error here. 02:10.280 --> 02:15.480 And also going back to exit we can try and fix it. 02:16.280 --> 02:19.120 So then we're going to provide this exact error. 02:19.720 --> 02:22.840 And lovable is going to take a look and fix it. 02:23.160 --> 02:27.440 Now in terms of these errors I just want to say a few words. 02:28.120 --> 02:32.200 Sometimes you might be going with lovable in circles. 02:32.480 --> 02:37.960 In this case you're going to see here you're getting back the exact same error as before. 02:38.600 --> 02:40.800 Or it looks at least very, very similar. 02:41.440 --> 02:47.640 And sometimes lover will make just start going in circles and can figure out a solution to a particular 02:47.640 --> 02:48.040 error. 02:48.320 --> 02:53.160 And this is when you either may need to look a bit deeper into this error to see if it's really the 02:53.160 --> 02:59.000 exact same error, or you may even need to help it out and say, hey, did you actually install this 02:59.000 --> 02:59.360 package? 02:59.400 --> 03:03.390 Or you may need to look and check if to see that particular package has been installed. 03:03.790 --> 03:11.030 So I'm going to see here the error has been fixed by installing the required package, the NDI kit sortable. 03:11.630 --> 03:13.630 But we're still getting this particular error. 03:13.630 --> 03:19.590 So what we can do here is click on refresh just to make sure that this error is still present and it 03:19.590 --> 03:20.590 is still present. 03:20.950 --> 03:23.030 We can go here to dev mode. 03:24.230 --> 03:31.510 And because this is a NodeJS project, we have here the package dot JSON and we can check for ourselves. 03:31.510 --> 03:34.070 This particular package has been added. 03:34.710 --> 03:39.150 So what we're looking for is this sortable package here. 03:40.350 --> 03:45.950 And if I'm going to search for it we're going to see it hasn't been added anywhere. 03:45.950 --> 03:47.510 So it's not really here. 03:48.030 --> 03:53.270 So for that reason what we need to do is better instruct lovable. 03:53.270 --> 03:59.350 I'm going to say, hey, you didn't add this particular package to the package dot JSON so it's not 03:59.350 --> 03:59.910 installed. 04:01.030 --> 04:04.610 So let's see if this renders a better result. 04:04.650 --> 04:09.450 I'm going to go back to the normal mode and see what's going on here. 04:09.450 --> 04:11.530 So I'm going to tell us yeah you're absolutely right. 04:12.530 --> 04:13.130 We are right. 04:13.130 --> 04:16.970 But I think this has actually been added here. 04:16.970 --> 04:21.170 So it's saying here we need to add a missing dependency. 04:21.970 --> 04:25.450 But it doesn't look like this particular change has been done. 04:26.330 --> 04:27.930 So let's see again in the code. 04:29.250 --> 04:29.730 Nope. 04:29.890 --> 04:31.650 It's still not part of the code. 04:32.930 --> 04:37.210 So I'm going to ask it to make changes to package.json. 04:38.410 --> 04:42.450 So this kind of errors can sometimes really be very frustrating. 04:43.090 --> 04:49.490 And if sometimes lovable is super smart and can do a lot of things on its own, sometimes it gets into 04:49.490 --> 04:56.370 this state where it really needs a lot of help, and I cannot really figure out why it's not actually 04:56.370 --> 04:58.170 doing what it's supposed to do. 04:58.810 --> 05:04.030 So it's continuing to say that this is Added, but it's actually not added. 05:04.630 --> 05:10.350 Let's see here the diff can actually not even see the diff because I don't think. 05:10.910 --> 05:12.790 Lover will make any changes to this. 05:12.790 --> 05:18.750 So I'm just gonna go ahead and try to refresh the entire application in the hope that this will render 05:18.790 --> 05:19.990 a better result. 05:21.110 --> 05:25.270 And let's see now if there's anything that it can help us with. 05:25.990 --> 05:27.990 And I'll say again that you didn't make changes. 05:29.230 --> 05:37.430 So until we actually see a change being made, and we only see here that it has thought about this, 05:37.470 --> 05:40.510 it has analyzed it, but it hasn't really made a change. 05:40.750 --> 05:42.150 We're just going to go in circles. 05:42.150 --> 05:42.350 Right. 05:42.390 --> 05:45.230 So this is kind of the problem of this right now. 05:45.630 --> 05:47.110 It says, oh I see the issue. 05:47.710 --> 05:50.950 But here we're going to see nothing has changed. 05:51.150 --> 05:52.470 So this hasn't been added. 05:53.070 --> 05:55.430 And this is super frustrating. 05:55.470 --> 06:01.630 And it's sometimes driving me nuts because I really don't understand why is it doing something like 06:01.630 --> 06:01.950 this. 06:02.130 --> 06:03.690 makes absolutely no sense. 06:04.610 --> 06:11.530 So I'm going to see here that is part of the dependencies part of the package.json. 06:11.890 --> 06:16.730 So what I'm going to try now is something that it's really not beginner friendly, but I'm going to 06:16.730 --> 06:20.130 go ahead and try to add this particular package here. 06:20.170 --> 06:22.290 I just need to figure out what's the latest version. 06:22.290 --> 06:25.770 So I'm going to use npm to search for this particular package. 06:27.130 --> 06:33.530 And I'm going to see here that the latest version is this one here. 06:35.410 --> 06:44.690 So what we need to do in our application is right here at and then specify the version that we want 06:44.730 --> 06:45.210 to have. 06:46.370 --> 06:50.170 And we saw here previously that the version is this one. 06:51.010 --> 06:52.570 Okay I'm going to save the changes. 06:53.250 --> 06:55.450 And I see here update dependency. 06:58.170 --> 07:05.870 It seems here that it is actually installing these packages, or at least trying to install them, but 07:05.870 --> 07:11.910 we're not really making any progress and this can be very, very frustrating. 07:11.910 --> 07:17.670 So this point in time, I don't really have the easy possibility of checking exactly what has been added. 07:17.990 --> 07:23.470 We have here access to the source code, where there are many other files that are here which we don't 07:23.470 --> 07:24.630 have access to. 07:24.670 --> 07:28.430 So typically we would have here a node modules folder. 07:28.430 --> 07:31.230 We'll have a package lock file. 07:31.270 --> 07:34.550 And this will confirm that we indeed have these dependencies. 07:34.790 --> 07:38.910 But at this point in time it's really very hard to understand what's going on. 07:38.950 --> 07:44.950 So we may get lucky and be able to save this, but just as well we can continue this. 07:44.950 --> 07:49.470 Hey, try and solve this and it's still not going anywhere. 07:50.510 --> 07:52.750 I'm gonna ask you to think outside the box. 07:54.390 --> 07:55.350 So this is the problem. 07:55.350 --> 08:01.390 When you don't really have access to reasoning model, you just need to use the model that lovable is 08:01.390 --> 08:02.030 using. 08:02.030 --> 08:09.580 You may not even experience this particular error and you may never see it and encounter it. 08:09.580 --> 08:14.980 You can say, hey, level is really amazing, everything is working fine, or you may get stuck in one 08:14.980 --> 08:21.580 of these errors and you cannot really make any progress because it's telling you, hey, cannot import 08:21.580 --> 08:21.940 this. 08:22.460 --> 08:26.660 Ah, so here I've been informed that there's a critical issue with our package. 08:26.660 --> 08:29.660 Dot JSON file is not valid JSON. 08:29.660 --> 08:32.180 This is the part where it actually started to do something. 08:32.180 --> 08:37.580 So it's possible that when I add it here, something I've forgotten to add this comma here. 08:37.580 --> 08:39.420 And this is an important comma. 08:39.940 --> 08:42.220 So again very very hidden. 08:43.020 --> 08:45.660 Let's see now what's happening. 08:45.660 --> 08:49.060 So we're going to see here that package dot JSON is now valid. 08:51.500 --> 08:58.180 And now finally finally we managed to get out of this troubleshooting problem has been super frustrating. 08:58.940 --> 09:02.840 Let's see if this now is working properly so we can move cards around. 09:02.880 --> 09:04.640 So now we have these cards. 09:04.680 --> 09:09.440 Maybe the transition isn't ideal, but data is being persisted here. 09:10.080 --> 09:12.640 Let's see if we can move this card here. 09:12.960 --> 09:14.440 One in front of the other. 09:15.720 --> 09:17.560 So seems to be working. 09:17.960 --> 09:18.960 I would say fine. 09:20.200 --> 09:24.000 It could be better, but maybe it's outside the scope here. 09:24.560 --> 09:29.120 The main idea of this lecture was how you can troubleshoot this kind of problems. 09:30.320 --> 09:37.320 Now, luckily I've been able to get out of this issue, but I had to use my expert knowledge and try 09:37.360 --> 09:39.080 to understand the specific error. 09:39.520 --> 09:46.880 You may also need to get help from ChatGPT, but in some extreme cases you may need to start this project 09:46.880 --> 09:47.840 from scratch. 09:48.280 --> 09:54.640 And this is where the existing PRD and the to do list come in handy, because you can reuse them to 09:54.680 --> 09:55.960 restart your project. 09:56.240 --> 09:59.960 So this is why it's a good idea to have them and to keep them updated.