Even if told to only work on a specific feature, it is not uncommon for the AI to start implementing
some features that are part of other to DOS.
In this case, for example, I noticed that we can add a new card and that card is going to be saved.
And this is a function that shouldn't have happened yet, but it's not possible, for example, to move
this card and take a look here at deleting this card is probably also works.
So some features have already been implemented.
So let's go back to our specification and see exactly where we are at.
So inside knowledge going to find here that we are at task number I think three currently.
So basic functionality load columns and cards from Supabase.
This is already happening.
Add ability to create a new card in any column.
This is probably also already done, but what we don't have is this allow drag and drop and also implement
reordering the card.
So I'm not sure if this is already working.
I'm going to copy this exact name.
Let's add another card here.
Where are we at?
So this is going to be card one.
And we're going to have here card two.
And to refresh once the page.
So the cards are still there.
And we can also see that reordering is not possible.
So we cannot drag and drop.
We're going to see here work on three basic functionality.
So now if you're looking at a conversation I'm going to see here that it's recognizing that many things
are already set up.
But drag and drop is not implemented.
So it's going to take a look now at adding drag and drop essentially the moving of cards and also the
reordering of cards.
So I just need to give it a bit of time.
And we're going to test it in a second to see if it works.
So now this functionality has been implemented but unfortunately we're getting here an error.
So let's see what we can do in order to resolve it.
Now typically what we can do is to view the logs.
So this is additional information about this particular error here.
And also going back to exit we can try and fix it.
So then we're going to provide this exact error.
And lovable is going to take a look and fix it.
Now in terms of these errors I just want to say a few words.
Sometimes you might be going with lovable in circles.
In this case you're going to see here you're getting back the exact same error as before.
Or it looks at least very, very similar.
And sometimes lover will make just start going in circles and can figure out a solution to a particular
error.
And this is when you either may need to look a bit deeper into this error to see if it's really the
exact same error, or you may even need to help it out and say, hey, did you actually install this
package?
Or you may need to look and check if to see that particular package has been installed.
So I'm going to see here the error has been fixed by installing the required package, the NDI kit sortable.
But we're still getting this particular error.
So what we can do here is click on refresh just to make sure that this error is still present and it
is still present.
We can go here to dev mode.
And because this is a NodeJS project, we have here the package dot JSON and we can check for ourselves.
This particular package has been added.
So what we're looking for is this sortable package here.
And if I'm going to search for it we're going to see it hasn't been added anywhere.
So it's not really here.
So for that reason what we need to do is better instruct lovable.
I'm going to say, hey, you didn't add this particular package to the package dot JSON so it's not
installed.
So let's see if this renders a better result.
I'm going to go back to the normal mode and see what's going on here.
So I'm going to tell us yeah you're absolutely right.
We are right.
But I think this has actually been added here.
So it's saying here we need to add a missing dependency.
But it doesn't look like this particular change has been done.
So let's see again in the code.
Nope.
It's still not part of the code.
So I'm going to ask it to make changes to package.json.
So this kind of errors can sometimes really be very frustrating.
And if sometimes lovable is super smart and can do a lot of things on its own, sometimes it gets into
this state where it really needs a lot of help, and I cannot really figure out why it's not actually
doing what it's supposed to do.
So it's continuing to say that this is Added, but it's actually not added.
Let's see here the diff can actually not even see the diff because I don't think.
Lover will make any changes to this.
So I'm just gonna go ahead and try to refresh the entire application in the hope that this will render
a better result.
And let's see now if there's anything that it can help us with.
And I'll say again that you didn't make changes.
So until we actually see a change being made, and we only see here that it has thought about this,
it has analyzed it, but it hasn't really made a change.
We're just going to go in circles.
Right.
So this is kind of the problem of this right now.
It says, oh I see the issue.
But here we're going to see nothing has changed.
So this hasn't been added.
And this is super frustrating.
And it's sometimes driving me nuts because I really don't understand why is it doing something like
this.
makes absolutely no sense.
So I'm going to see here that is part of the dependencies part of the package.json.
So what I'm going to try now is something that it's really not beginner friendly, but I'm going to
go ahead and try to add this particular package here.
I just need to figure out what's the latest version.
So I'm going to use npm to search for this particular package.
And I'm going to see here that the latest version is this one here.
So what we need to do in our application is right here at and then specify the version that we want
to have.
And we saw here previously that the version is this one.
Okay I'm going to save the changes.
And I see here update dependency.
It seems here that it is actually installing these packages, or at least trying to install them, but
we're not really making any progress and this can be very, very frustrating.
So this point in time, I don't really have the easy possibility of checking exactly what has been added.
We have here access to the source code, where there are many other files that are here which we don't
have access to.
So typically we would have here a node modules folder.
We'll have a package lock file.
And this will confirm that we indeed have these dependencies.
But at this point in time it's really very hard to understand what's going on.
So we may get lucky and be able to save this, but just as well we can continue this.
Hey, try and solve this and it's still not going anywhere.
I'm gonna ask you to think outside the box.
So this is the problem.
When you don't really have access to reasoning model, you just need to use the model that lovable is
using.
You may not even experience this particular error and you may never see it and encounter it.
You can say, hey, level is really amazing, everything is working fine, or you may get stuck in one
of these errors and you cannot really make any progress because it's telling you, hey, cannot import
this.
Ah, so here I've been informed that there's a critical issue with our package.
Dot JSON file is not valid JSON.
This is the part where it actually started to do something.
So it's possible that when I add it here, something I've forgotten to add this comma here.
And this is an important comma.
So again very very hidden.
Let's see now what's happening.
So we're going to see here that package dot JSON is now valid.
And now finally finally we managed to get out of this troubleshooting problem has been super frustrating.
Let's see if this now is working properly so we can move cards around.
So now we have these cards.
Maybe the transition isn't ideal, but data is being persisted here.
Let's see if we can move this card here.
One in front of the other.
So seems to be working.
I would say fine.
It could be better, but maybe it's outside the scope here.
The main idea of this lecture was how you can troubleshoot this kind of problems.
Now, luckily I've been able to get out of this issue, but I had to use my expert knowledge and try
to understand the specific error.
You may also need to get help from ChatGPT, but in some extreme cases you may need to start this project
from scratch.
And this is where the existing PRD and the to do list come in handy, because you can reuse them to
restart your project.
So this is why it's a good idea to have them and to keep them updated.