WEBVTT 00:01.960 --> 00:06.400 In this lecture, we're going to build the first feature for our flashcards app. 00:06.640 --> 00:12.480 So if you're taking a look at a Todo file, what we're going to build actually is the first phase of 00:12.480 --> 00:13.240 the project. 00:13.600 --> 00:19.840 And in an essence we're going to initialize the project, set up the file structure, create some files. 00:20.040 --> 00:25.440 And in the end what we're going to see is only the home page which is going to have three buttons a 00:25.440 --> 00:28.360 study mode, a quiz mode, and a stats page. 00:28.760 --> 00:31.480 So this is all that we're trying to do in this lecture. 00:31.520 --> 00:33.720 You're going to see it's quite a bit of work. 00:33.720 --> 00:37.320 And it does make sense to do everything in small steps. 00:37.800 --> 00:40.160 Now how do we actually get started with this. 00:40.200 --> 00:43.080 Well there's still a few important aspects you need to know. 00:43.520 --> 00:47.400 First of all, you want to make sure that you are using here a genetic mode. 00:47.440 --> 00:51.560 We want to have here agent enabled not ask or manual. 00:51.600 --> 00:54.360 So agent is what we want to have here. 00:54.880 --> 00:59.320 Apart from this in terms of the model selection you can definitely leave it auto. 00:59.800 --> 01:03.280 But I like to choose a specific model. 01:03.760 --> 01:12.000 In this case, I'm just going to use a Gemini 2.5 Pro model, but the list of models that you see here 01:12.000 --> 01:15.880 is probably going to be different for your own cursor installation. 01:15.880 --> 01:20.760 So I'm going to show you in a bit how you can enable or disable some of the models that appear here. 01:21.040 --> 01:23.800 So all you need to do is locate this gearbox here. 01:23.800 --> 01:25.720 And this will open cursor settings. 01:25.720 --> 01:28.040 So this is going to appear in just the tab. 01:28.480 --> 01:31.120 I'm going to see here from the menu models. 01:31.280 --> 01:33.720 And these are all the models that are available. 01:33.720 --> 01:37.440 So you can go ahead enable or disable some of the models. 01:37.800 --> 01:44.480 Of course over time the list of models changes what is currently very popular and hype in one month 01:44.480 --> 01:47.280 for now can be deprecated and all. 01:47.320 --> 01:48.760 So things do change a lot. 01:48.960 --> 01:54.520 I'm gonna attach a resource to this lecture where I'm going to specify which I think are currently the 01:54.520 --> 01:57.200 best models at the time of this recording. 01:57.200 --> 02:03.200 I highly recommend using Cloud or Gemini 2.5. 02:03.240 --> 02:08.880 I think currently they provide the best experience from my own tests, but feel free to use whatever 02:08.880 --> 02:09.280 you want. 02:09.320 --> 02:14.600 But for the upcoming part, I'm just gonna use this particular model that you're going to see listed 02:14.600 --> 02:15.080 here. 02:15.840 --> 02:19.760 This initial step will also run various commands. 02:20.000 --> 02:25.920 Another setting that you can enable from the settings is in regards to the auto run mode. 02:25.960 --> 02:32.320 So if we're taking a look here at features and scroll a bit further down, we're going to see here that 02:32.320 --> 02:37.080 I have enabled auto run mode, but only for npm commands. 02:37.400 --> 02:42.760 I'm probably going to enable a few other commands, but what I want to see is that just because we have 02:42.760 --> 02:47.320 selected this agent mode, it doesn't mean that everything happens automatically. 02:47.440 --> 02:51.440 We still need to keep an eye on the chat to understand exactly what's going on. 02:51.440 --> 02:54.640 But anyway, with that being said, let's get started. 02:54.800 --> 03:00.640 So I'm going to provide you as a resource to this lecture the following prompt, which pretty much instructs 03:00.640 --> 03:08.320 cursor to use the specification file, and also the to do list to do the first phase of the project, 03:08.560 --> 03:13.880 and it will use the to do list to mark as completed any items that are done. 03:14.560 --> 03:19.360 Quite often you will find it useful if you're also specifying the context here. 03:19.360 --> 03:21.800 So you're going to see here this add context. 03:22.000 --> 03:26.400 And this will typically list files that are in your project directory. 03:26.600 --> 03:31.400 If you don't see anything while you're looking at this for example, in my case I'm going to see here 03:31.400 --> 03:32.920 to do and specification. 03:32.960 --> 03:37.400 I can also go here to files and folders and search for specifications. 03:37.400 --> 03:43.400 So if you're searching for something and it doesn't appear save all your files, close cursor, reopen 03:43.400 --> 03:43.520 it. 03:43.520 --> 03:46.000 Once again it should fix that specific problem. 03:46.000 --> 03:47.920 So I'm going to select here specification. 03:48.200 --> 03:50.320 And I'm going to also select here to do. 03:51.360 --> 03:57.680 And these files are going to be explicitly mentioned in terms of this even though I'm mentioning them 03:57.680 --> 03:58.640 in the code again. 03:58.920 --> 04:03.920 But because we want to work with exactly these files, we want to make sure that the context is provided. 04:04.560 --> 04:10.440 Apart from this, one important aspect is that I'm going to say here to build this in the current directory, 04:10.440 --> 04:13.280 you might find yourself already in an open directory. 04:13.280 --> 04:18.680 And if you're having software specification and you're trying to initialize a new project, it's going 04:18.720 --> 04:21.840 to say, oh, there are already some files there, I'm going to create another directory. 04:21.840 --> 04:24.040 So you're going to have a lot of subdirectories. 04:24.040 --> 04:25.880 And this is something that I don't want. 04:26.040 --> 04:27.680 So let's go ahead and click on send. 04:28.480 --> 04:30.200 I'm going to see here the reasoning part. 04:30.240 --> 04:33.480 It's planning everything that is supposed to happen. 04:33.720 --> 04:37.480 And now there are different commands that are being executed. 04:37.960 --> 04:44.480 So in this case npm is a command that is allowed to be executed automatically by the agent. 04:44.480 --> 04:46.600 So it doesn't require my intervention. 04:46.840 --> 04:50.920 But in this case I'm still getting prompted for something. 04:50.920 --> 04:53.320 So you're going to see here the current directory is not empty. 04:53.360 --> 04:54.880 Please choose how to proceed. 04:54.920 --> 04:57.200 This is something that the agent is not going to do on its own. 04:57.200 --> 05:00.120 So I'm going to have to click here on Pop Out Terminal. 05:00.440 --> 05:03.760 The terminal is going to appear here on this side of the screen. 05:03.760 --> 05:07.240 So all I need to do here is select one of the options. 05:07.240 --> 05:10.090 So I'm going to say here ignore files and continue. 05:10.850 --> 05:17.530 While we have tried to do this, we weren't fast enough and the initialization of the project has failed. 05:17.530 --> 05:21.490 So in this case we are being asked like what option do we prefer? 05:21.530 --> 05:22.810 What should we do next? 05:22.810 --> 05:28.090 And the option that we're going to do here is going to ignore the files and we're going to continue. 05:28.090 --> 05:30.490 So option two is what we want to do. 05:31.730 --> 05:33.610 So I'm going to move the file to the current directory. 05:33.610 --> 05:36.410 This is a command that the agent is not allowed to run. 05:36.410 --> 05:38.050 So we need to manually run this. 05:38.810 --> 05:43.650 In your case you may get something totally different in terms of the particular workflow. 05:44.450 --> 05:48.250 And also we asked if we are allowed to create this directory. 05:48.610 --> 05:53.890 We can go here in order run and we can just leave it to auto run. 05:54.090 --> 05:55.010 And we're going to get here. 05:55.010 --> 05:57.330 Disclaimer saying hey, this is potentially dangerous. 05:57.890 --> 05:58.970 In this case. 05:58.970 --> 06:00.450 We're getting a warning about that. 06:00.450 --> 06:07.090 But it does help to get things faster if you just allow the agent to do whatever it wants. 06:08.450 --> 06:11.250 So it looks like the agent currently is done. 06:11.290 --> 06:14.290 Probably took like five minutes or something like that. 06:14.850 --> 06:19.730 I did skip a bit over the entire conversation, but you always need to pay attention to what's happening 06:19.730 --> 06:21.930 because sometimes you may be prompted for something. 06:22.170 --> 06:27.610 And generally speaking, it's a good learning to just understand what is happening also. 06:28.370 --> 06:35.890 Anyway, this application has now been created and a local web server has been started and this is available 06:35.890 --> 06:36.850 on this address. 06:36.850 --> 06:41.210 Whenever you see localhost, it means that this is only working locally on your own computer. 06:41.210 --> 06:43.410 You cannot share this link with anyone else. 06:43.690 --> 06:51.690 So if you press command on a mac or press control on Windows or Linux, this will open up in a browser 06:51.690 --> 06:52.130 window. 06:53.170 --> 06:56.210 So if you're taking a look at this, this is how the application looks like. 06:56.930 --> 06:58.850 I would say it's not great. 06:59.250 --> 07:01.730 I mean it can be a bit better. 07:01.730 --> 07:07.330 We can right click go to inspect and check here the console for any errors. 07:07.330 --> 07:12.530 So if we see errors here we should go back to the application and say, hey, there are some errors 07:12.530 --> 07:12.890 here. 07:12.930 --> 07:13.610 Fix them. 07:13.890 --> 07:19.490 Currently, I'm not happy with the CSS and probably I want to have here some formatting. 07:19.490 --> 07:22.970 So I'm going to go back, write another prompt and fix the UI. 07:24.210 --> 07:28.050 This is the part where we still need to do a bit of back and forth. 07:28.090 --> 07:34.450 So if we notice a bug, then we need to go back and say, hey, fix this particular issue and then we're 07:34.450 --> 07:37.530 going to have to wait a bit in order to get this fixed. 07:38.330 --> 07:41.210 So now it says refresh the page in your browser. 07:41.890 --> 07:44.850 And we're going to take a look and see if this problem has been fixed. 07:46.050 --> 07:48.210 So currently it looks a bit better. 07:48.650 --> 07:51.130 I'm still not happy that these buttons are not colored. 07:51.130 --> 07:54.170 So I'm going to go back and say that I want some colors. 07:55.490 --> 08:00.810 So you can see that even at this level, there are a lot of details that we haven't covered in the specification, 08:00.810 --> 08:03.050 and we haven't really covered them in the to do list. 08:03.410 --> 08:08.250 And of course, if you want to reuse the specification for later on, it does make sense to go back 08:08.250 --> 08:14.210 to the specification and add these details that we noticed are not exactly what we wanted. 08:14.850 --> 08:16.370 And this can help us later on. 08:16.370 --> 08:21.730 Just in case you want to restart building this application from scratch for whatever reason whatsoever. 08:23.330 --> 08:27.890 So now finally we're getting here the study mode, the quiz mode and the stats mode. 08:28.170 --> 08:29.050 It's colored. 08:29.090 --> 08:30.250 This is a starting page. 08:30.250 --> 08:30.890 Nothing worse. 08:30.890 --> 08:35.170 If you're trying to go on any of these pages here, they won't work. 08:35.170 --> 08:39.690 But luckily what we have managed here is to build the first feature. 08:39.930 --> 08:46.610 So if we're happy with all the changes that we have made here, all we need to do is click on this button, 08:46.610 --> 08:52.570 accept all and these changes are going to be saved here as part of the project. 08:52.570 --> 08:55.050 So this is an indication for cursor. 08:55.090 --> 08:55.490 Okay. 08:55.690 --> 08:58.290 You agree with all the changes that have been made. 08:58.570 --> 09:02.290 And I don't need to show you whatever changes I've made here. 09:02.290 --> 09:08.010 So we're going to see here for example to do file now has marked checkboxes for all the features that 09:08.010 --> 09:09.170 have been enabled. 09:09.210 --> 09:12.050 So now we have accepted those changes as they are.