In this lecture, we're going to put the PRD and the to do list that we have created to work and create
a new project.
Now, if you want, you can continue the conversation here in this existing project.
But I'm going to go and create a new project from scratch just to show you how I would ideally do it.
So this is a start page, and in order to provide the instructions I'm going to happily use now, ChatGPT
already have a few good things, and one of them is this context here.
So we're specifying here.
We're building a Trello style Kanban board using react, TypeScript and vite.
So it does explain a bit what we want to use here.
So this would be the first part of this prompt.
And then the second part is exactly telling what needs to be done.
So these are already pretty good steps that we have here.
And we can paste them here as well.
Of course we could provide here this entire configuration.
But I'm going to show you a better way to do that.
So let's give it a bit of time and allow lovable to kick start this app.
And after that, I'm going to show you exactly where we're going to store these instructions and guidelines.
So there we go.
This is how our initial version of the application looks like.
It looks a bit different than before.
And every time, even if we use the same prompt multiple times, it's going to look a bit different.
So a lot of things here that we didn't really specify and lovable was maybe a bit too nice and added
also these tags here that we don't really need.
But anyway, it is what it is for now.
We do notice here that this is not even moving.
So we don't have here a specific functionality.
This is just hard coded here.
So we cannot move this.
But for now I would say this is absolutely fine.
But I wanted to show you actually in this lecture is another thing.
And that is a bit hidden here in the settings.
So if you go here to your project name you're going to notice this here.
This is an Autogenerated project name.
You can click on this and then you can go here to settings.
So this is where you control the project.
You can change the project name if you're not happy with it.
So we're going to see here in the lower part you have here rename project.
So that's a possibility.
Also if you want to delete it later on you're going to go back here as well.
But what I wanted to show you is actually inside here in knowledge.
So this is information about the project.
So there are already a few things that we could specify here is like if you have project specific rules
or best practices, things that we want to use, coding style preferences.
So many of these AI tools allow us to provide these kind of things.
There's also here a button that says get inspiration.
This is going to take us to the documentation page of loveable, and we're going to see here that we
can also have here feature specifications.
So user stories, acceptance criteria and detailed descriptions of each feature.
So this is exactly what we're going to do.
From ChatGPT, we're going to go ahead and copy this entire specification that we have written here.
I'm going to paste it here.
And we're going to have here the tasks.
So this is the part where we have the tasks.
There are the various milestones here which actually we don't really need.
So we can go ahead and remove those.
So it's a good idea to just check again everything that has been done here.
And we're going to find here also an overview.
So it's going to explain us here what this is all about.
And the big advantage of having it here is that we can click now and save.
This has been persisted.
It is aware agent is aware of this.
So we can reference information from here.
And most importantly we can easily go back to the settings go to knowledge.
And if there's something that we need or if there's something that we want to add, we can simply make
the changes here If you would have placed this in a prompt, it would be somewhere here in the conversation.
And it's very difficult to go back and edit such a large document.
So this is why it makes sense to actually store it here.
So if you want to continue this conversation, we can do it from here and reference any information
that's available there.
And that's pretty much the main idea of this lecture.
Now currently the user interface is just too crowded and contains more than we actually need for this
simple example.
So I'm just going to ask loveable to simplify the user interface according to the specification.
So let's see how this goes.
So now by the fact that we have specified here the PRD lovable was able to understand that a lot of
things that were added are actually not needed.
And it has just focused here on the main design elements that are actually needed.