In this lecture, we're going to build the first feature for our flashcards app.
So if you're taking a look at a Todo file, what we're going to build actually is the first phase of
the project.
And in an essence we're going to initialize the project, set up the file structure, create some files.
And in the end what we're going to see is only the home page which is going to have three buttons a
study mode, a quiz mode, and a stats page.
So this is all that we're trying to do in this lecture.
You're going to see it's quite a bit of work.
And it does make sense to do everything in small steps.
Now how do we actually get started with this.
Well there's still a few important aspects you need to know.
First of all, you want to make sure that you are using here a genetic mode.
We want to have here agent enabled not ask or manual.
So agent is what we want to have here.
Apart from this in terms of the model selection you can definitely leave it auto.
But I like to choose a specific model.
In this case, I'm just going to use a Gemini 2.5 Pro model, but the list of models that you see here
is probably going to be different for your own cursor installation.
So I'm going to show you in a bit how you can enable or disable some of the models that appear here.
So all you need to do is locate this gearbox here.
And this will open cursor settings.
So this is going to appear in just the tab.
I'm going to see here from the menu models.
And these are all the models that are available.
So you can go ahead enable or disable some of the models.
Of course over time the list of models changes what is currently very popular and hype in one month
for now can be deprecated and all.
So things do change a lot.
I'm gonna attach a resource to this lecture where I'm going to specify which I think are currently the
best models at the time of this recording.
I highly recommend using Cloud or Gemini 2.5.
I think currently they provide the best experience from my own tests, but feel free to use whatever
you want.
But for the upcoming part, I'm just gonna use this particular model that you're going to see listed
here.
This initial step will also run various commands.
Another setting that you can enable from the settings is in regards to the auto run mode.
So if we're taking a look here at features and scroll a bit further down, we're going to see here that
I have enabled auto run mode, but only for npm commands.
I'm probably going to enable a few other commands, but what I want to see is that just because we have
selected this agent mode, it doesn't mean that everything happens automatically.
We still need to keep an eye on the chat to understand exactly what's going on.
But anyway, with that being said, let's get started.
So I'm going to provide you as a resource to this lecture the following prompt, which pretty much instructs
cursor to use the specification file, and also the to do list to do the first phase of the project,
and it will use the to do list to mark as completed any items that are done.
Quite often you will find it useful if you're also specifying the context here.
So you're going to see here this add context.
And this will typically list files that are in your project directory.
If you don't see anything while you're looking at this for example, in my case I'm going to see here
to do and specification.
I can also go here to files and folders and search for specifications.
So if you're searching for something and it doesn't appear save all your files, close cursor, reopen
it.
Once again it should fix that specific problem.
So I'm going to select here specification.
And I'm going to also select here to do.
And these files are going to be explicitly mentioned in terms of this even though I'm mentioning them
in the code again.
But because we want to work with exactly these files, we want to make sure that the context is provided.
Apart from this, one important aspect is that I'm going to say here to build this in the current directory,
you might find yourself already in an open directory.
And if you're having software specification and you're trying to initialize a new project, it's going
to say, oh, there are already some files there, I'm going to create another directory.
So you're going to have a lot of subdirectories.
And this is something that I don't want.
So let's go ahead and click on send.
I'm going to see here the reasoning part.
It's planning everything that is supposed to happen.
And now there are different commands that are being executed.
So in this case npm is a command that is allowed to be executed automatically by the agent.
So it doesn't require my intervention.
But in this case I'm still getting prompted for something.
So you're going to see here the current directory is not empty.
Please choose how to proceed.
This is something that the agent is not going to do on its own.
So I'm going to have to click here on Pop Out Terminal.
The terminal is going to appear here on this side of the screen.
So all I need to do here is select one of the options.
So I'm going to say here ignore files and continue.
While we have tried to do this, we weren't fast enough and the initialization of the project has failed.
So in this case we are being asked like what option do we prefer?
What should we do next?
And the option that we're going to do here is going to ignore the files and we're going to continue.
So option two is what we want to do.
So I'm going to move the file to the current directory.
This is a command that the agent is not allowed to run.
So we need to manually run this.
In your case you may get something totally different in terms of the particular workflow.
And also we asked if we are allowed to create this directory.
We can go here in order run and we can just leave it to auto run.
And we're going to get here.
Disclaimer saying hey, this is potentially dangerous.
In this case.
We're getting a warning about that.
But it does help to get things faster if you just allow the agent to do whatever it wants.
So it looks like the agent currently is done.
Probably took like five minutes or something like that.
I did skip a bit over the entire conversation, but you always need to pay attention to what's happening
because sometimes you may be prompted for something.
And generally speaking, it's a good learning to just understand what is happening also.
Anyway, this application has now been created and a local web server has been started and this is available
on this address.
Whenever you see localhost, it means that this is only working locally on your own computer.
You cannot share this link with anyone else.
So if you press command on a mac or press control on Windows or Linux, this will open up in a browser
window.
So if you're taking a look at this, this is how the application looks like.
I would say it's not great.
I mean it can be a bit better.
We can right click go to inspect and check here the console for any errors.
So if we see errors here we should go back to the application and say, hey, there are some errors
here.
Fix them.
Currently, I'm not happy with the CSS and probably I want to have here some formatting.
So I'm going to go back, write another prompt and fix the UI.
This is the part where we still need to do a bit of back and forth.
So if we notice a bug, then we need to go back and say, hey, fix this particular issue and then we're
going to have to wait a bit in order to get this fixed.
So now it says refresh the page in your browser.
And we're going to take a look and see if this problem has been fixed.
So currently it looks a bit better.
I'm still not happy that these buttons are not colored.
So I'm going to go back and say that I want some colors.
So you can see that even at this level, there are a lot of details that we haven't covered in the specification,
and we haven't really covered them in the to do list.
And of course, if you want to reuse the specification for later on, it does make sense to go back
to the specification and add these details that we noticed are not exactly what we wanted.
And this can help us later on.
Just in case you want to restart building this application from scratch for whatever reason whatsoever.
So now finally we're getting here the study mode, the quiz mode and the stats mode.
It's colored.
This is a starting page.
Nothing worse.
If you're trying to go on any of these pages here, they won't work.
But luckily what we have managed here is to build the first feature.
So if we're happy with all the changes that we have made here, all we need to do is click on this button,
accept all and these changes are going to be saved here as part of the project.
So this is an indication for cursor.
Okay.
You agree with all the changes that have been made.
And I don't need to show you whatever changes I've made here.
So we're going to see here for example to do file now has marked checkboxes for all the features that
have been enabled.
So now we have accepted those changes as they are.