Vibe Coding To Build a Digital Product Using Cursor AI

1. Course Introduction: Hey, there. Welcome to the scores on be coding with Cursor. My name is Fassel, and I'll be your guide throughout this exciting journey, where we will explore how AI and no code tools are redefining what it means to code. In a world where technology evolves faster than ever, traditional programming is no longer the only path to build digital products. Tools like cursor are changing the game and making software creation accessible to everyone, even without writing single line of code. In this beginner friendly course, we will dive into exciting world of be coding, which is a creative intuitive, an AI driven way of building apps. You don't need programming experience, just curiosity and willingness to experiment. So here's what we will cover. So first, we'll talk about be coding and we'll understand what it is, how it works, and how it is perfect for non coders and creative thinkers. Then we'll begin by building our first application with the help of cursor, and I'll be hand holding you throughout this entire journey. So I'll show you what exact prompts you're supposed to make use of and how you can set up Cursor onto your system and how you can get your first app running. And all of this without even touching the keyboard for writing the code. We are not going to write a single line of code. Then we are going to have our second application, which would be a little bit advanced version of our app wherein we would be building a blog using cursor and we will learn how we can customize setup and launch a personal log to share our learnings entirely with the help of AI. All of this without any programming experience, you will gain the confidence to build more by doing this, and you'll be able to execute ideas that you have been willing to build from so long. By the end of this course, you will not only be familiar with be coding, but you will also have two functional applications, and also you will have the mindset and the right set of tools to continue building without any traditional barriers. This course is for students, creators, freelancers, entrepreneurs or anyone curious about building cool things using the power of EI. Not background, no problem. I have a solution for you over here. So are you ready to build your first app with just vibes and curiosity? Let's get started. 2. What is Vibe Coding: Now, what is this term be coding? So let us understand this be coding is not a formal programming technique. Of course, it has the word coding in it, okay? But it's not a formal programming technique. It's more of a creative flow based way of building things using AI. Let me explain this to you with the help of some examples then let me elaborate on this. Imagine you have an idea for small app or a specific feature that you want to build in any existing product. Okay? Let's say you have an app idea only, okay? And in past, what you would have to do is if you had an idea and if you want to come, if you want to bring that idea to life, you would need to learn a programming language, okay, or you would have to understand it syntax, and you will also have to write every line of code yourself. Okay? This is one way of doing things earlier if you are doing things by yourself, or you can hire a developer for yourself. Now this required significant time, specialized knowledge, or money if you're hiring a developer, right? Be coding completely shifts this paradigm. Okay, I completely shifts this paradigm. And instead of coding things yourself or hiring a developer, you are basically building software with the help of AI. Now, AI over here means artificial intelligence. Okay? So to put it simply be coding is an approach to building software where you make use of natural language. Natural language, meaning the language in which you communicate and you would talk to your friends and family. That is what natural language is, which is plain English or any human language, okay? And you make use of this natural language to tell an artificial intelligence or AI tool what you want and the AI would generate the code for you. Okay? So that is what be coding is. Now, over here, number one thing, you don't need a lot of knowledge about programming. So earlier you had to write, you know, you had to learn programming language, you had to understand it syntax, how it works. You need to write every line of code yourself, right? Now, there is a shift with be coding in this. You are not going to write every line of code. You are just going to tell AI to write it for you, and AI is going to write the code over here. Okay? So what happens over here, AI is doing the job. AI is writing code, and you are no longer a programmer, but you are actually the architect and the builder. Okay? So you are basically planning the entire application. Now, AI is writing the code, right? The coding responsibility is taken by AI. So you basically have taken the backseat and you are taking care of the high level things like planning your application in what features it should have, how should the features work and whether the output delivered from the AI matches your requirement or not, right? So you are like an architect and the builder who is designing everything, like designing the blueprints, and then you are making sure that every brick in that particular using that particular blueprint is laid properly, okay? So being an architect, you are planning things. Okay. This is something that I've mentioned. Now, AI is your super efficient multi scaled construction crew. Okay? So it's like a builder. Wherein you tell your vision to AI in a crystal clear language, okay? You elaborate things and you add as much of details as you can, and AI is going to do the heavy lifting for you. You don't necessarily need to know how to lay every brick yourself, but AI is going to do the job for you, okay? Now, this be coding term is gaining a lot of popularity because with this, even non codes or people with limited knowledge of coding can build things fast. And even if you're an engineer, you can actually accelerate the development process. Okay? So you describe this is how you can describe what you want to do what you want a software to do in plain English, it can be as simple as create a simple web page with heading that says, My firsts be app and a button that changes its text when it's clicked. Okay. You can even ask it to write a Python script that takes a list of the numbers and returns the average. Okay? So this is a simple Python script that you can get from the AI. You can even build a small task tracker web application where you can add task, mark them as complete, and view the list of all the tasks. So these are a few examples of how you are giving the instructions or the prompt to the AI tool, and AI tool is going to do the job for you. Now, this is similar to the way you would give a task or you would explain a feature to someone, right, someone you hired. So that is how it's working over here, okay. And yeah, this is what it is. Now, how it works. So let us understand the working of this entire process of be coding. Okay? First thing is you give the input to AI in natural language, basically, and you present your vibe. Now what I mean by vibe over here is you describe what you want the software to do in plain English, okay, and be like, add as many details as you can and be as elaborate as possible. Okay. Now, AI is going to interpret your input over here. It is going to analyze your description of all the features and what you want. And it is going to understand your intent and the required functionality and the underlying logic. So this is where the AI is interpreting your requirements. And then it jumps over to the code generation mode, wherein based on its interpretation, the AI is going to generate the actual code. Like an actual code, I mean, DML files, CSS files, Jascript files, Python files, depending on what kind of applications you are building, okay? Then there is an execution observation thing that happens. So you run the generated code to see if it works as intended. Now, of course, you don't need to know how to run the application. You can ask AI itself, okay? And you can just follow the instructions, okay? And most I coding tools. So yes, we are going to make use of some tools to do I coding, and most coding tools have integrated environment where you can run the code immediately. Okay. Then there is this step of feedback and refinement. So this is very important step, okay? So rarely, depending on your requirements, rarely, the first attempt will be perfect. Okay? If there are any errors or functionality isn't quite right, you provide the feedback to the AI and that in natural language, for example, you can say, Hey, this button is not working and nothing happens if I click on it. Okay? You can tell, hey, make the background color of the web page light blue, or you can add a feature, or you can tell AI to add a feature to task tracker that allows me to delete the task. So you can add instructions this way. And depending on your instruction, it is going to iterate, right? If there is any error message that you see, you can page the error message as well as an input to the AI, and it is going to fix for you. Okay? And then there is going to be repetition, so you repeat the steps 1-5 until you achieve the desired outcome. And it's a conversational process, much like working with a human assistant. That is what I mean to say over here. So this is how the entire process is going to work, okay? And there are quite a few advantages for bigness over here, and the major advantage over here that I feel is increased accessibility. This is perfect. This is perhaps the biggest benefit for you. You don't need to have extensive programming knowledge to start building. It lowers the barrier to entry significantly. Even non coders can start having landing pages, can start building things, can start deploying things, and you can bring your ideas to life, create working prototypes, MVPs infraction of time than what it would take with traditional coding. So here you are basically focusing on intent, and you can concentrate on what you want to build and why rather than getting bogged down in the syntax and specific implementation details of a programming language. Okay? Now here, there are a few limitations as well. Not everything is good. You know, the limitation could be codes quality and security. The AI generated code might not always be optimized, efficient or entirely secure. For production ready, applications, of course, human review and understanding of generated code are still crucial. But I would say it's a good starting point if you're building any product, right? Complexity I coding is excellent for simple project and rapid prototyping. But for very high complex projects, large scale systems that require deeper understanding of software architecture, traditional coding practices still remain essential. Okay? And also, the last limitation is about the black box effect. Now what I mean over here is you would get a functional code and you won't even fully understand. So you don't understand the code, but the code is working for you, right? So this can be a good thing as well as a bad thing. It's good for quick results, but less ideal for building deep programming knowledge or later on iterating on it and adding some custom features. So yeah, this could be one drawback, okay? So yeah, these are a few benefits and, you know, limitations that I want to highlight. And I hope you are clear about this entire concept of pe coding. 3. Tools for Vibe Coding: I just want to talk a little bit about the different tools that exist for enabling you to do pe coding. Okay? So one of the tools is cursor, and this is a EI code editor, like it says over here in Big fonts. So this IDE, basically all the coding editor allows you to make use of EI and it is just going to write all the code for you. Okay, so it knows your code base. It is it allows you to edit in natural language. Okay, so it allows you to build software faster, basically. That is what it does. Okay. And yeah, this is the Cursor official website. Then you also have something called as Gu co pilot, which is similar to that of Kursor. It also helps you build software faster. And this is what it looks like over here. Okay? And there is one ID called Visual Studio Code. It integrates very easily into Visual Studio code as well. So this is what Github co pilot is. This is your official website. Then you have plet which also allows you to make use of EI and build software. Apart from these, there are some LLMs or language learning model like hatchibt Cloud or Gemini. All of these help these don't have dedicated code editors, but you can use this general purpose language learning model or LLMs to generate code by prompting, and then you can copy paste the output into your development environment. 4. Setting up Cursor on Local Machine: So now is the time that we install and set up cursor onto our system. So what I'm quickly going to do is I'm going to say download over here. So you will see the download button here at top right. Okay? And if you're on Mac or any other operating system, you are going to see this button appear for your operating system. You can click on all downloads and see on which all machines this application is available. You can see it's almost available on all the applications over here. You can even choose the version if you have any specific version requirements. I would recommend you should click on Download over here or here on the center of the main page to get this downloaded onto your system. I'll say download. The software downloads, we'll also head over to the pricing page over here. Now, I would like to talk a little bit about pricing over here, okay? So here, this is a free plan, and free plan is what we are going to work on. Okay? I'm not going to propose or ask you to upgrade over here. Free gives you a lot a decent limit, okay, to work on your projects. So we are going to get started with free. But if you are a serious user who wish to make use of cursor a lot, you can definitely switch to different paid options. There are different paid versions over here for $20 or $200 a month. But free is what we need for this particular course. And here you have team plans as well. Okay? Now, taking a look at feature, you can also explore the features over here, what are features like mult liner edits, smart rewrites, tap tap tap. Okay. So basically, you have to just press tab, and it allows you jump through edits across the files. There are quite a few features. You can explore this entire page. I'm not going to talk about each one of them over here, and I'm actually going to show you all these features, okay? But if you want to read, you can. Now, once the software is downloaded over what you can do is you can just double click on this and install it like any other software you would install on your operating system. So I can see the setup over here. I'll say I accept next. It will ask where it should install this particular software. So you can see this is a free display requirement for Windows. And for Mac, it will be similar. S next, it is going to create a folder Start Menu in Start menu for myself. On Mac, it might be different. I'll say next, and I'll say next over here. I'll say install. Installation will take a few minutes. It's not a complex software, you install it like any other software. Once this installation is done, you have to click open. So you can see over here, the installation is done. Now you can take on Launch cursor and you can say finish. Okay? So it is going to open Cursor for you. So you can see over here, Curso is open, and here, it's asking to sign up. So you can sign up and create an account if you wish to. I would recommend though that you sign up over here. So I'll say sign up, and it'll take you to the web page, and here it is going to show you different ways of signing up. So you can say Google Github or you can sign up using email. So I'm just quickly going to set up my account over here. Now, once you finish authenticating, you're going to see this kind of a message. Okay so we will return to Cursor. So this is what Cursor is. Now here, it's asking me to import settings from VS code. VS code is just another coding editor. Okay? I can import the settings from VS code or I can say skip and continue. So I'll just start fresh, okay? I have visual studio code or VS code installed on this system as well, and that's why this prompt. So I'll say Skip and continue. And it is asking me to choose the theme. You can choose theme based on your needs and taste. You can even explore themes. I'm going to say continue. Okay. And here, it's asking me, like, what sort of key findings I want. VS code is what I'll choose and whether you want to share any sort of data with cursor to improve. I'll leave this unchecked. Okay. I'll leave. Okay. So there's no option to scape, I see. So I'll say, I'm fine and let's continue. And we'll say continue. Okay? So yeah, this is what the IDE is over here, as you can see, let me zoom in a bit. Okay. Now, let me give you an overview of what we see over here. So here at the top, of course, you can see menu options like any other software, okay? Or you can see this you are in the pro trial sion. Okay? You are not in the unlimited sion. You are in the trial of pro version. Okay? You've got trial for some time. Now, to know more about your trial period, you can come over here. If you go to Cursor pricing, you'll see over here under free plan, it includes P two week trial. So for two weeks, you have this paid version trial. Okay? So that is what we are. That is why we see Pro trial and you can go unlimited. You can open a project, clone a repo, connect to YSSH. These are few options. And on the right hand side, you have a chat window. Okay? You can see and what I would recommend is when you open this, okay, here on the center, you will see this open project. So I would recommend you click on Open Project over here and open a folder where you are going to do all the work. And what I've done is when I said open folder, it opened this sort of exploder for me, and I have navigated to this folder called be coding, and I'll say select the folder. Okay? Now, the moment you select a folder, you can see a shift in the interface here on the left hand side, okay? And here you can see this be coding folder up here, and here you can create a new file, you can see but we are not going to create new file and all over here within this folder, we are going to let AI do the job. You can see a few options over here, like get search and all of this. Okay. And here is where the entire list of files will appear under be coding. And here in the central pane over here, you can see this divide over here in the central pane, you are going to see the code appear. So if you select any file, the code will appear over here. Okay. And then in the AI chat panel, here you can chat with the AI model. Now you have something called as add context over here and it is a powerful feature with the ability to reference a specific file or any such thing that you want to add as a context when talking to AI. So for example, here, you can add files of folder code, documents, it any sort of past conversations, terminals, even web articles, you can add over here. Now, under the chat window, if you click over here, you'll see agent ask and manual. Okay? These are the modes over here. Now, agent mode is a mode that where if you mention anything over here when agent mode is selected, if you say, Hey, I want to tweak my landing page and update the color. So whatever you mention over here, AI model is directly going to make changes in the code. Of course, you will have options to accept or discard, but that is what agent mode is. Ask is basically it is going to simply ask questions about the code base, and it is not going to update or modify your code. Manual means manual mode is designed for making targeted modifications when you know exactly what changes are needed and where. Okay? So it's basically a mode for precise code changes with explicit file targeting. Okay? So here, you need to know what changes you want to do, and that is why it's called as manual mode. Okay, so these are the different modes over here. We'll play around with this mode, so don't worry if you are not sure or haven't understood what these are. Okay. Here you have an option to add new chats or background agents and all of this. And here you have Automde, okay? So automde meaning it will basically so if you disable this, you have an option to change the model. Okay, if you make it auto, it is going to get the model based on some logic in the hindsight. Okay? But if you don't want to do that, if you want to select some model based on your requirement, you have the ability to do that as well. And Max mode, meaning it will enable maximum context. You can see over here in the pop up. Okay? And it is, of course, if it adds maximum context, it is going to cost you more. Okay? So this is what it is, and I'll make sure I'm on the auto mode. So this is about the interface over here. So far, I hope this has been useful. 5. Our First App with Vibe Coding: So now is the time that we begin wipe coding and we create our first app without even writing a single line of code and getting AI to write and do everything. Okay? So what I'm going to do is I'm going to make use of cursor over here, first thing, and I'm going to need one more AI model that is going to play a supporting role, and you can make use of any AI model like hat Tipty or Gemini. So I'll make use of Chat chipty, okay? And I'll open both of these in two different windows. So here I have cursor. What I will do is I will track this cursor and here I have this option. Add two windows. I'll open this in split view like this, o. And there's a reason for this. Okay? So here, basically, in this particular LLM, I'm going to ask all the generic information. So I'm going to pretend that I don't know coding. And as a non coder, how can you code things? In this particular LLM or in this particular AI model on the right hand side, I'm going to ask questions and help take help to generate prompts basically that I can put in over here. And over here, I'm going to actually make the AI write. Okay. So let's come over here on the right hand side, and I'm going to tell the AI model, Hey, I don't know anything about coding or programming, okay? I wish to create a simple app or I should say, a simple web app with title that says my first be app and E button. And button that changes that changes the background of entire app randomly. Okay. Background color is what I can see. Okay? So you can present your thoughts over here, okay? And you can mention over here, I am making use. Okay? I am making use of cursor for the same. Okay. And please share e plan with me. Okay? Now, one thing to note over here is I'm asking for a plan, right? I'm not asking for anything else. I'm asking for a plan. So here, I'm an architect. I am projecting and thinking of myself as a builder or an architect who is going to plan the entire application. So it's going to plan it is going to share entire plan with me, okay? And let's see what output we get over here. So I'm going to just say Enter and let's see what output it gets. Okay, so it knows my name because I've signed up. No worries at all. You don't need to know coding to get started with simple projects like this, Okay, blah, blah, blah. And it's saying has a button, it has to change the Background color randomly. Okay, so here it rerated on the requirement, so it understands what I'm saying. It's telling me open cursor, download cursor, new webpage, and it's giving me this prompt. You can see over here. So it's telling me, create a new file, index dot HTML. This is your main webpage and type this instruction to this particular software over here. Okay? So this is something that can do, and here it has also given you some code. Okay? Now, create a simple web page with the title MF YAP and add a button that changes the background color randomly when clicked. Okay, so I'll copy this. I won't create index dot tm file or I can tell this AI model to skip that part. I don't want to create files myself. But wish to have Cursor do everything for me. Okay? I am in a in a folder right now. I want first app to be created in a folder there. Okay? So I'm telling you that I'm in a folder right now. This folder name is be coding. And within this folder, I want the entire app to be created. That is what I'm telling. So here it says perfect. You are inside the app. Okay, here what you can do is it's asking us to create a new folder, be app. So here you can see be app. Be app. This is what the name has given. It's telling me to create a index or HTML file again. When I've said that I do want to create files myself. I'll just copy this and I'll tell this and answer or give me rom directly in short. Okay? I want the input that I should give to COSA. So that is what I'm asking for over here, and it's giving you the exact prompt. So it's telling you, create a folder named be app with an index or HTML file that shows the title. So you can see it's giving you the entire prompt over here. So it took a couple of repetations over here or a couple of iterations is what I would say. Okay. I can delete this folder as well. Okay. I'll say move to recycle bin, and I'll piece this entire prom Okay. Instead of ask, I'll change this to agent mode because I want cursor to code it for me. Now, the moment I give Cursor this command, let's see what it does. So I'll just open this, and you can see it has started working on it. It has started listing the directories. It has created BAP folder. It has created this index or HTML over here, and you can see it has actually given you the output. Folder IAP has been created with an index or HTML file. This file displays My force YAP and a button when clicked changes the color to random. So this is all the requirements that we have done, and you can see, you can now open this file in the browser to see your app in action. Okay? So what I'm going to do is I'm going to open a new browser tab over here and I'm going to choose tract drop this file over here, something like this, and I can just press Enter. Or you can open this in the folder. Basically, you can navigate to this particular file and you can just double click because it's an HTML file. Okay. Now let us see over here what is the output we get change background color. Oops. You can see how beautiful this is. Okay, how much time did this take? It did not take a lot of time. It did not take a lot of effort as well. Okay? Yes, there were a few repetitions with Ched GBT over here because it was not giving us the right output. But, you know, it's EI and, you know, it takes time sometimes to get the perfect output. Now let's take a look at the output. Here it is given us a file. Okay? This file has this green color code, okay? So here, you can see accept and reject. And here also, you can see accept and reject. Okay, so it's giving you an option that, hey, these are the changes that it has done to this file. Okay. And these changes are highlighted in green, and you can either accept the changes. So I'll accept the changes after seeing the output. I like the output. So I'm going to say accept, and you can see the changes are over here. Okay? So this is what you can get going with COSO, basically. If you want to ask specific questions about this code, you can switch to ask More and you can say, Hey, can you explain the code in less than 500 words. For example, you can ask questions. If you want to understand something, if you're not clear on something, you can see it is explaining me everything. You can see HTML structure, there is a body tag, body uses this and you can see how JavaScript works and how it works. User sees this button, clicking on the button, changes the background color to random color. And we've made use of HTML CSS in Gs in one file for simplicity. You can ask it to have separate files as well that is completely your choice. So I can read on this. I can say, can you separate HTML, CSS, and S for me? Okay. So you can tell it to do so. And absolutely it is going to do this. You can see it is separated. Okay. I realize we are in ask mode, so it does not change the code. Okay? What I can do is I'll copy this, you have an option over here as well. Apply to index HTML. Apply to index dot HTML. You can see. But I'm not going to do this. I'm going to say agent mode. Can you Oops. So this is what is coming in. I'll just copy this prompt over here. Okay. Or I'll send this prompt in agent mode again from here. Okay? So you can do that as well. It is going to generate everything, and it is going to create three files now. One is the HTML file, which we already have. Then we have the CSS and the GS file. Let's wait for a while until the output is generated. Sometimes it can take some time. Now I've got the output, and if you scroll up here you can see it has given all the output, so it has highlighted all the changes that it has removed in red color and the changes that it has added in green color. You can see you have an option to accept and reject everything. So you can see here, you can see the stick except reject. And this code lock you have accept and reject. This code block, you have accept and reject. And you have this button, accept all. So if you don't know coding, okay, all you have to do is accept all. Okay, because you're not going to understand anything, and you want to spend time understanding or learning that. Okay? So I just minimize this oops. So if you happen to close the AI window, you can just click on this toggle AIPane over here at the top. Okay. I'll just keep this disabled the AIPane, but you can see over here, the files have been generated. Okay, you can see how they have been generated, and I'll just see accept all from the chat window itself, and you can see how the three files have been created. Okay. And you did not write any sort of code. If you're fresh, it is still going to work the same way. You can see. You can see it's working the same way. All right. Now, if you want to change anything, if you want to add any sort of thing, so you can iterate over it and it is just going to do the job for you. So, yeah, that's our first application that we built. I hope this has been awesome. 6. Our Second Little Complex App - A Blog: Alright, so it's time that we move on to our next project. And what I'm going to do is here, I'm in the same folder, I coding. I have created a new chat by clicking on this new chat. Icon over here in cursor, and here in the hathPT, I have a new chat created as well. So this particular application that we are going to build will be a little bit complex than the previous one. And it would involve a few features. So basically, it's going to be a blog application, and I'm going to give this prompt to hATGBT. So I'm going to tell JAGBR that, Hey, I wish to build a block, okay, where I can share my daily learnings. Okay? This is my personal objective of why I'm building this. Adding a new block should be as simple as adding a new file, okay? Now, I don't know how what. I'm just telling hATGBT that, hey, adding a new blog because I would be adding new blog every day, right? Since I'm making it to create and share my daily learnings and document my daily learnings. So adding a new block should be as simple as creating a new file. Okay? I need basic filters using tags, so simple filters. App should look modern and beautiful. Okay? And I'm making use of cursor. Okay, hang in there. I'm making use of cursor to build this. I don't have any knowledge of programming. So this is something that I'm telling Chat JBD explicitly. Okay? Now, please share a plan for me to work with and get this up running right away. Also, I've mentioned where I am, so I'm in the folder be coding, and I want the project to reside in a new folder inside that folder. Okay. So these are the things that I have mentioned over here. Okay. Now, should we say send? Let's say send and let's see what output we get over here. So I'll just expand htGBDOe since we are working on it. So you can see over here. This is the goal summary. So here, it's retreating over your goals and telling you that, hey, this is what I've understood. So you have to see over your tag filters, add a blog is equal to new file, blog as daily earnings, modern beautiful design, built using cursor, no coding knowledge. Okay, so hGBD has captured this fairly. Now, come over here. It is telling you and giving you some information about project structure. It's saying next Js. So we'll make use of Next Js. Okay. That's okay if you don't know what next Gs is, it's just telling you, and it's also telling you that it's a modern web framework. So that's absolutely fine. We don't need to know it. MDX file. Now, MDX file is the markdown files that the application would be using. Did we tell Chat JB that, Hey, I want to make use of MDX files? No. So it's telling us that we will be making use of MDX files because we want the functionality to be very simple. Adding a new block should be as easy as adding a new file. Fair enough. Now, tailwind CSS for beautiful styles. Okay, so it has suggested that it is going to make use of tailwind CSS. I don't know what tailwind CSS is. In fact, I know, but we're pretending that we won't know, and we won't write a single line of code. So tailwind CSS, hard CN UI for modern UI components, which is fine and automatic filtering using tags in front matter. Okay? So this is something that it has mentioned. Now over here, it is asking you to create a project folder over here, okay? And it is giving you the entire plan over here, install the dependencies and all of this. Okay. Now I don't want to write this bit of code. It has given me a decent plan, but I don't want to do this. So what I'm going to tell it is I don't want to run commands and write code. Share prompts with me that I can give curso based on plan. Okay. And I want it to give me a list of prompts, so I'll give me only one prompt that would do the magic. Okay, so I'm telling that give me a prompt that would tell cursor to do all of this. So it's telling me to run this command, it's telling me to do this, do that. Okay, it's fine. You can read this up. It's asking you to create this folder as well. You can see over here. Okay, create a project folder and then basically create this my Blog app using this command. I don't want to do this. So I'm telling that give me only one prompt that would do all the magic. So let us hang in there, and it's giving you this magic prompt for cursor, so it's telling you create a modern professional blog app using Next Js tailwind, CSS MDX. I want to add new blog posts by simply placing MDX files in post folder. Okay. And each post should support front matter with title, date, and tags. Okay, that's fine. On homepage, display the list of all the posts with cards sorted with News first. Include beautiful styling using tailwind typography. Shard CN UI components and add tag filter on top as toggle buttons or perhaps chips to filter post. That is fine. Also add a light or dark mode toggle. This is something that we didn't ask, but it's added. Uh, everything should look clean and minimal, mobile friendly. Oh, so one problem over here, it's thinking that, okay, it's mobile friendly, so that's fine. It's a web application. It's not a problem. It's web application, which is mobile friendly. That is what it meant. I thought it's thinking that we want to create a mobile app, but that's not the case. So I'll come over here. Let us piece this over here. It has not given any information on the folder over here, okay? So I'm assuming that Cursor will do the job based on this. Okay, so this is done. And let me see send over here, maybe. Okay? So this is the this is the prompt. Okay, I don't want over here Ital one extra functionality over here. So each post should on homepage, include beautiful styling, add tag filler. Also add Light Mode and do mode toggle. So I don't want this to toggle for light mode and Doc mode. I'll just remove that and I'll say set. If you want it, you can feel free to include it, but I've just removed this. Now we'll wait for the entire magic to happen, okay? I've given this prompt to cursor. Okay? Now, it is not going to run the commands. Okay, creating the project involves running commands on my local machine. So it's not going to run commands by itself, so I'm going to approve the commands. I'm going to run this. So it's running this. You can see. Would you like to use turbopaC? I'll just press Enter or you can say yes. Okay? So you can see, it's running now over here. Okay. So let me go full screen with this, and let me expand this a bit so we can see what's happening. You can see over here, would you like to install turbo pack. So I said, over here. I just press Enter. Okay? And you can see the entire thing over here. Okay? It's basically running the terminal command. We'll wait for a while. Okay. So it's generating the next set of code. You can see the block folder appear over here, right? And it's going to block folder and running some commands again. So I'm going to say run Okay. And I'm going to say run again. It's running a few commands. I believe it's installing all the dependencies that our project needs automatically on autopilot. Okay, we are just approving commands and doing nothing, right? So this is up, and I think it's generating few more commands. So that's approve this. And I think it's generating one more command, run. So I'm just running commands over here. Proceed. I'll just say Enter. Okay. Okay, what happened? Okay. I said yes. You have to press Y over here, and then you can see now it's installing dependency. So we'll wait for a while, once this completes. So the command is complete and it's creating this directory post for our post to reside. I'm going to say run and the directory is created. Let us wait for a while what happens. Okay. So you can see it's doing some job over here. You can see it's searching for some files, listing some files, doing all the things. And you can see all of this happening under this block folder. Okay? I'm not touching the code or doing anything over here, but we can just view it like this as to what is happening. Okay, listed 15 items in block, is that so? So, no, I don't see that happening. S have an AL. We'll run this command. That's absolutely okay. All right. It's generating one more command. Okay. And I'll run this. Okay. So we'll wait for a while. Okay. It's waiting for some approval. I've given the approval, right? What sort of okay, to run this approval to run this. I'll run this. Okay. Okay, so after a while, it ran quite a few commands. It changed a lot of code, and then I have this command finally where it's asking me to run the application. So what it's doing is it is telling me to run CD blog and run NPM run deep. Okay? So from inside to block folder, it is asking me to run the application. So I'll say open terminal, and they should ideally start the application. You can see the application is starting. I'll come over here. To local host, let us refresh. Okay, so we have our blog over here. You can see this. You can see there are a couple of posts also that it has generated. You can see Hello world. You can click on Hello World. You can go back. You can go to Next choose Tips. You can see this, and you can filter, basically, Intro, I can filter. Welcome, next chose tips. Depending on your requirement, you can add more blocks, and yeah, this is our simple blog that has been set up. Now if you come over here, we have this block folder Win that we have pose okay. So within post, we have this kind of files which are like Markdown files. Okay, MD Markdown. And I'll just accept all the code changes. Okay? So this is the Markdown file that we have, and if you want to publish a new blog, you have to write the Markdown file like this. Okay? You can see like this is how the files have been generated. Okay, so this is the version 1.0 of our application, and I feel it's a very decent application without us writing any sort of code, we have not written a single line of code, right? And what we have done is we have got this beautiful blog ASE output. This can be really, really good blog if you want to start your own, you know, online presence, write some posts out there. So this is something that you can start. 7. Improving Our Blog Application - Iterative Coding: So after having the first version of the blog there, it's time that we ask it to add some new features. So I'm going to show you how you can iterate on the blog or any sort of project and you can get some new stuff added. Okay. Now before we move any further, I would want to remind you that we are working out from this E coding project, which has these two projects. One is block and other is a IAP. Now, this SRC folder is created, I believe, by COSO itself, and it does not have anything. So it by mistakenly might have created this over here. I'm going to delete this, as well as I'm going to delete this so you can see this SRC folder is also deleted. We have only two folders now. Blog is a project that we are working on. Now what I would recommend is sometimes Curso might get confused and if you are in a parent directory. So right now we are in a parent directory of block project, but we are actually working on blog. Sometimes Curso might get confused and it might start creating files over here in this folder and this will be outside the block project. What I will do is I'll quickly switch and open the block project and I'll switch over to that directory so that Curso is never confused. For that, I'm going to head over to file. I'm going to say open folder. Now when you open the folder, you are going to see this exploder like this, head over to blog and just say, select the fold. Okay? So you can see the entire Curso will restart, and now you are inside the block project, okay? And you can ask Coso to run this. Hey, can you help me run this project? Okay? Because if you come over here, we restarted Curso actually, we switched folders. So this is going to be shut, right? So I asked it to run the application, but it has given me steps. Okay? So I don't want steps. I'm going to tell it. Can you help me run this project? Don't give me steps, but you run it, something like this. Okay, so it's pretty clear that you have to do it. Okay. So it's asking me to run this install command. I'll just say, okay. And then it will say, Run this command, NBMruntab. Okay. So I just clicked on Open terminal, and it just started this command, and now you should be able to see the blog without any issues. Okay, now we can ask it to treat on anything, depending on your choice. So first of all, I'm going to tell it. I'm going to tell Cursor to add grid layout over here. So this is a list layout, and if you add more blocks, it is going to come in list layout. So let me show you by adding more blocks, okay? So I can say, please add more blocks, add Please instead of more blocks, I'll say, please add three blocks and also include source code format in them. Okay? So we'll also see how source code formatting works because this is a coding block that I've started. I'm just saying it's a coding block. You can start a recipe blog, you can start a, you know, image sharing blog, or photography blog depending on what you do. Okay? I've just mentioned that this is a coding blog, and let's wait for it to add the new blocks. So it is saying that it is reading posts and two other files, and you can see a where it is generating new files over here. Okay, through some error over here that it is unable to read this file and it proceeded further, so I'm assuming that it is going to fix it for us. Okay? So we can wait for a while. Let me see if we are seeing any sort of changes. You can see changes over here over here, right? So if you go to react functional components here, you can see the code has been added. The code has been added over here, right? So this is how the code formatting will look like, you can see, okay? So yeah, you can ask it to improve as well. Okay? So you can say over here. This is how it's coming out. You can ask you to change the color or something like that. So you can take the screenshot. You can piece the screenshot. Okay. The code that is shown, you can see, it's not well formatted in, well formatted. And syntax highlighting is not proper. So I've passed the image over here, and by looking at the image, it is going to help us improve, right? So I'm going to accept all the changes so far, and we'll wait for what sort of changes it is proposing right now. Okay. So here, let us wait. Okay. So we have how many blocks? We have five blocks prox Let us wait over here. Okay, so we'll wait until it gets all the code done. Now, see over here, whatever changes have been done by CO so I've accepted all of them until now, right? I press the accept all button over here. Now, if if you give this command to Cursor and whatever it's generating now, if you don't want to accept, if you want to reject, you can press the reject button over here. So there will be a reject button that will come in after it's finishing generating. Okay? Now, one more interesting thing I would like to highlight, it's searching. You can see it's searching the web for something over here. Okay, it's searching that how it can do syntax highlighting in next Gs 15. That is what it's going to search. So I'm going to say continue. Okay? It was asking for the permission. Okay. We'll wait until it gets the entire solution implemented. It's asking me to install certain commands. I've accepted this and it will install this for me. Let us wait until the entire installation completes. I did a lot of searching, some commands running it did, and then it is asking me. It's giving me the solution that we need to add MDX processing and re hype highlight. This might be some library or something and it is also asking that we'll have to input this. Do you want to do this? I'll say yes, please do whatever knead it and get this up and running. Okay? So I'm giving the permission, okay? Please do whatever it needs and get this up and running. We'll wait for a while. So the application is already running. It has done quite a few changes, and the application is already running, but it's still giving me this run command. The application is running here on the left, so I'll just see skip over here, and here it is giving me this accept all button because it has done a lot of changes in the code. I'm not going to accept all the changes over here. Why? Because I'll first test the application. I'll come over here. There is some problem, it looks like my application has started throwing errors. Here if you go, o here it's throwing error on the post detail page. I'll copy this Okay, here, and I'll also piece this over here. Okay. And I'll say I get this when I visit this URL. So I have to give it I have to give the EI or the cours the error description and when the error occurs. Okay? So occurs when I visit. Please fix for me. Okay. So I'm asking you to fix. Now let's wait until it fixes. Now keep in mind, I've not accepted any of the changes. This button is still there, right? I've not accepted. If you want. If it's not able to generate or if it's not able to improvise on this particular feature, we will have the option to reject all the changes and we'll be back to the state where the project was earlier before we ask for this feature. So that's the benefit of not accepting all the changes over here. The changes have been applied, but we have not accepted it. So if you come over here, you can see all these colors over here, right? So if you could peach this file. You can see all these green thing, this has been added and red thing has been removed. Okay? So these are the changes that are done. Now, the moment I say except this red thing will be deleted and green thing will be added. That is what it does over here. Okay? So, okay, here it's giving me this option over here, okay? So I'll pick the one that is best. It is giving me two options to fix the issue. I'll say pick the one that is best and would work according to you, go ahead. Okay. So I'll just mention this and it will start fixing it. Okay, so it did quite a few changes over here, you can see, okay. And there were a couple of iterations over here, and it says the error should be fixed. So let us go back. And let me refresh. Let me do a quick refresh. Let me visit. Okay, so now you can see the syntax highlighting is better. You can see the color and everything is now basically. So it's keyword based coloring is what you can see over here. Even for JavaScript, let's see, yes. So this is much better. Okay. You can ask these kind of improvements and you can iterate on whatever you have billed. For example, tomorrow, if I want to change this list to that of grid format, I can ask it to do. Okay? That is something we can do. I hope this was useful, okay. I'll also mention over here that sometimes it might not get the right answer in the full scoe. There would be a little bit of to and fro with cursor or DAI model that is being used over here under the hood. So don't worry, don't stress. It's important that you provide the right information to AI over here and it is going to do the job for you. For example, if you see some sort of error message over here or if you're not seeing the output right away, you can take the screenshot and pass it over here and you can say, Hey, please check the screenshot. This is what I see. And this is when I see when I was at this particular page, this is a page, and please fix it for me. Give as much of information as you can, whatever error message you are seeing, whatever you are seeing it is going to do the job for you. Okay. So, yes, I hope this has been useful so far. 8. Important things to know about Cursor: So now it's time that I talk about some of the tips and tricks that you should be aware of when working with cursor, and these tips and tricks can help you get the desired output better and faster. Okay? So first thing I would want to talk about is the context over here, okay? Now, you can add context in your chat. Context, meaning giving some sort of context to the AM model that is being used, okay? So here, I can say context, and I can add a folder first of all, so I can add this entire folder block. Okay? So this folder has my source code over here. So I'm giving this entire folder as the context, and I can type in the message and send it to Koso. So this can result in getting better response from Cursor because it knows that you are referring with respect to or you are talking with respect to this particular whatever is there in this particular fold. Okay? So this is about context. You can add different kinds of context. You can add specific files if you wish to. So within blog, you can add a particular file as well if you wish to. Or you can add some sort of documentation over here, okay, or you can add any sort of past chats. So whatever past chats you have had, you can add that also as a context. Okay. So it might be possible that in past chats, Cursor might have given you something which you are expecting now, and it is not able to generate that same thing now. So you can give your past chat as the context, and you can then ask the questions to Cursor. You can add Git as context terminals. So if you're running multiple terminals over here and if you're getting error on one of the terminal, you can add that terminal as the context. Can add anything from the web. So you can select web over here and you can basically add a URL or something like that, and Cursor is going to read that URL for you. Okay, over and above, if you're using some sort of libraries or frameworks, for example, here, when we use we saw some names like tailwind and Next has, right? So you can add you can add official documentation of those libraries. So here, for example, we'll talk about tailwind, so you can say tailwind. And you can see over here, tailwind CSS official. So this is the official documentation that exists with cursor. So you can just add this in next chase also we are using. I'll say next Js you can see next year is official. So you are adding the documentation, both these documentation over here for cursor to refer. You can see if you click on this, this is the link that will be added tailwind CSS talks. And here you can see nexts.org slash TOC. You can head over to this official documentation over here by clicking on the link and opening it in the browser. Okay? So this is how you can improve the UI. Over and above, you can add things like images and all if you get any sort of errors. Okay? So this is about adding context. I would want to talk about settings, some settings over here. So if you go over here to file, within file, you'll have preferences, and within preferences, you'll have cursor settings. Okay? So let me, hide this toggle AIP over here, okay? Here are a few settings that you can see and go through for cursor. Okay? You can play around with some settings. One important settings that I would want to talk about is rules over here. What is rules? So you can see over here, rules. And if you click on this about icon, it is going to open the speech for you. Okay? So what are rules? So rule is nothing but a sort of rules that you want to mention or some sort of guidelines that you want to mention. So you can see over here. Oh, okay, Rules. If I click over here on rules, you can see. So it did not load properly, so I had to click on rules. So with rules, you can control how agent model behaves with reusable and scoped instructions. So you can add some sort of rules like, for example, give me concise answers, okay, something like that. Or if you are inclined towards using a particular framework. So you can add a rule saying that, hey, always make use of next chase for all my projects, something like that. And there are multiple types of rules that exist project based rules, user based rules, memories, or cursor rules. Okay? So all these kind of rules you can mention over here. So you can see over here, an example, okay? So here, you have added a settings. This is how the rule is applied over here. That is what it's saying. I want to show you some rule example over here. Okay, so when I scroll down here, I could see some rule examples. You can see over here. This is one of the rules. So when working in component directory, always use tailwind for styling, frame of motion for animations and follow our component naming convention. You can see this is one of the rules. So you can copy paste this in your rules page. This is for ABI directory. You can see for boilerplate code over here. So all these kind of rules, basically, rules is nothing but you are setting the behavior for the AIM model and you are telling that this is what will be always expected. So rather than typing in and telling AI model every time when you are asking some questions, you can set the rules globally over here for the agent. Okay. So you can see you can set user based rules, okay? You can manage your custom user rules over here. You can set rules based on projects over here, okay. And yeah, this can help you do a lot of things, okay? And you can add some memories over here as well. So you can see different memories over here. Okay? And you can see what memories is nothing but the information that agent is remembering about you. So you can manage it from here as well. If you want to delete something from the memory, you can get it deleted. Okay. So these are a few important things that you should be aware of when working with Cursor and this can help you get better response from this AI model. 9. Course Conclusion: And now we have reached the conclusion of our journey into the world of be coding with cursor. Throughout the course, we have explored how you can create powerful digital experiences without traditional coding just by collaborating with EI tools like cursor. We started by understanding what be coding is, which is a fresh and intuitive way of building that prioritizes creativity, intention, and human EI collaboration. We saw how cursor enables you to build your first app effort es. Using natural language and prompts. Then we took it further by creating a complete block site all without needing a programming background. Throughout this course, you have witnessed how simple it can be to bring ideas to life with the help of EI. There are no syntax errors, no installation, no prior experience, just curiosity and vision. You have learned how to trust the process, communicate your EI assistant, and build real projects with ease. But remember, this is just the beginning. The future of creation lies in tools like cursor, and the more you experiment, the more confident and innovative you will become. So keep exploring, keep prompting and don't be afraid to push the boundaries of what you think you can build. Thank you for joining me on this journey. I hope this course has been enlightening, empowering and above all, a fun introduction to the possibilities of no code AI development. With this course, in the project section, you are going to find a class project, which I highly encourage you all to complete and share it with the entire class. Happy building.