We have reached a point in the course where we need to talk about code refactoring.
Code refactoring is the process of restructuring the existing code without actually changing its behavior.
Which means that after we have refactored the application, it should still look and work the same.
The goal of this refactoring is to improve the readability of the code, making it more maintainable
but also more efficient.
It's a bit of like cleaning up the clutter, making everything a bit nicer.
So after creating a few features, it is not a bad idea to ask the AI to look over the code and to see
if it makes sense to improve it.
This tends to work great, especially if you added some rules that describe a certain style for writing
code.
Or if you notice that there are some problems with the code that need to be fixed.
I went ahead and created an additional rule which is called comments.
And here, as part of the comments, I'm just giving the instruction that I like some parts of the code
to be commented And explain what that particular part of the code does.
I've looked over a few places and I didn't notice any comments, so I think it would be a good idea.
This is for example, here a comment, but in other parts of the code where we're seeing, for example,
here the components, there are no comments written.
So I would expect that there will be some comments added after this.
Now, for this particular task of analyzing the code, I would consider using a reasoning model in order
to enable a reasoning model.
Only to do is click here on the model that we're using and make sure that this thinking is enabled.
If it's not enabled, we're not going to see that particular model.
But if it is enabled, then we're going to get a thinking model.
This is something that I've been using all along.
I think as a thinking model generally performs much better, even if it is a bit slower.
So just a hint, in case you haven't been using a thinking model or reasoning model, now is a good
time to do so.
All right.
So I prepared here a simple prompt.
It's very basic.
It can get a bit bigger.
But essentially it's requesting the AI to analyze the code base, identify any issues and keep everything
working as it is.
And it should follow some principles.
And apart from this it's also referring here these rules.
So I'm just interested to see how this is working.
I'm going to see here somewhere in the logs.
It has also identified here the comments rule.
And it's going to take those into account as well.
So this is just a way to ensure that this particular rule is also being considered for the refactoring.
So we have some changes here that are being executed.
And you can also see here comments popping up.
And now we're going to see here at the end.
The end to end tests are being executed to confirm that the application is working working properly.
And we can see it's actually not working properly.
There's a problem with application.
Good that we have tests.
And now the AI is looking at these results and it's going to say oh something has happened there.
I need to go ahead and fix those issues.
So oopsie.
The tests are still failing.
Probably needs another try to get this to work properly.
So I think it's kind of like out of ideas because it's asking us to restart the development server to
just to make sure that it's working properly.
So we can go ahead and do that, of course, and also go ahead and close some of the tabs that we have
here.
Seems that doesn't know exactly what to do next.
So this is the logs for the application.
This is the server running.
So this is the first application that we have on this specific port.
So what the AI is asking us to do is to stop this application.
If you want to stop this server we're going to press control C regardless of the operating system.
And now what we'll need to do is run this command again to start it, which is npm run dev.
So this is going to restart the server.
I'm going to check if the port is still the same one.
So 5173.
We have here 5173.
From what I can tell it's working properly.
So I can go back and report.
Now it's trying to figure out how to get the end to end test to run as well.
So during such refactorings is not a big surprise that sometimes tests may fail either for a good reason
or because the tests need to be updated as well.
So now, luckily the tests are passing as well.
We can also take a look here and see if the application is still working properly.
After such a refactoring is not a bad idea to do a manual test just to ensure that everything is working
well.
So I'm gonna add all these changes that have been made.
So you can see here a lot of files have been changed.
You can also take a look and see exactly what has happened.
So we have here, for example, the home page.
There are a lot of changes here, so I'm going to accept them first.
I'll accept all these changes.
And we can also take a look here for example in Source Components.
And what we're going to see here are comments.
So this is exactly what we have requested here.
In terms of comments I'm going to click here on Accept All.
And these are the comments that are coming because of this particular rule that we have made here.
So we're going to say okay we agree with these changes.
They are fine with us.
I just wanted to show you the process of doing this.
It's probably also not a bad idea to do like one type of change at the time, especially if you know
what you're doing.
Otherwise, of course, you can also rely on the agent itself, using a powerful thinking model reasoning
model to figure out what are the problems with the code base and to fix them.
So yeah, this is code refactoring using cursor.