Full App Building Course with Cursor (3+ Hours)

Key Takeaways

This is the definitive guide for building a full application with Cursor if you're non-technical or just getting started with Vibe Coding. And in this video, I'm going to take you step by step through the entire process of building a real application with Cursor and deploying it live with payments, database, authentication, APIs, and everything you need to get a live application that can accept payments and get real customers. I'll be breaking this video down into key sections as we go with all of the chapters in the description. So, if you want to jump to any specific part of building an app with Cursor, you can do that. By the end of this video, you'll know exactly how to build a full application using Cursor, even if you've never used it before. If you don't know me, my name is Chris and for the last 15 years, I've been designing apps and advising startups on product and design. And with that said, let's get straight into building our application with Cursor. build. >> So, let's get started building our full application with Cursor. And we're going to go through all of these different steps in this video. And this might seem like a lot. If you've been sold on the dream of building applications in minutes by other tools that are on the market, then this might seem like a lot of steps. But all of these are 100% critical for building an application that people can access on the web and actually pay money for and then be able to store anything that they need with their application. Login, sign up, all of that sort of functionality. And I'm going to show you how to do the full journey for this. So, we're going to basically go through how to plan your application, create your first prompt, the structure for an application, what a web app looks like, and we're going to be building a web application here using cursor. But you can apply the same principles here to building a mobile app or building a desktop app. It would just be that the technology that you're using is slightly different. We're going to go through the setup in Cursor. Some features that you might want to know about in Cursor before you start building. Nothing that's too technical here. So, I'm going to keep it really, really simple and focused on the key things that you need to know to build an application with Cursor and get it live so that you can start making money with it or turn it into a business or whatever you want to do with your app. Build it for your own business, whatever you kind of want to do. We're going to set up a database. Add authentication so people can log in and sign up to your app. Add payments, which is often one of the most difficult things to do in building applications with AI. I'm going to show you exactly how to do that. Design your application. Build features. And this is a really key part because it will show you the process of how to prompt, how to iterate, how to test features as you go, and how to not stack up hundreds and hundreds of bugs as you build your application that you end up going around in a loop on to try and fix later. We're going to then create a landing page and going to talk about the different ways you can do that with your app. We're then going to go into testing your application, reviewing your code. This is like the key things that you need to be able to do if you're building an application with AI coding tools. and then other tools and services that you might want to integrate into your app like analytics, email sending, that sort of stuff. And then we're going to go into deployment for this application. That is how we're going to start. And so the first thing we're going to cover is planning. So let's get stuck into planning your app. So before we get started actually building our app, we want to go through planning our application. And you can do this in as much detail or as little detail as you want, but I like to think about it as just answering these five questions before you actually start building anything. And this will just give you a bit of clarity on what you're building, why you're building it, what features it's going to have, what it's going to be called, and how you're going to make money from it as well. And if you are a part of my community or you're interested in going deeper on this, I do have a full planning course in my community to actually create a much more thorough plan for your application. But for this video, we're going to just answer these five questions here. So, who is it for? And this is the first question that we want to answer. And so, the app that I want to build today is going to be for anyone writing any documentation who needs to reference other information. So, basically, I want to create and you can either write this like this kind of description or you can do it as like a job title or a persona description if you want to. And you can also work with LLMs to figure this stuff out for you as well. If you just say to chat GBT or Claude, I've got an app idea that's going to do X, Y, and Zed. Can you help me identify like what the customer persona is for this idea? So, this is going to be an app that we're going to be creating for anyone writing any sort of documentation or doing any writing who needs to reference other information. This is a problem that I have kind of come up against myself. If I want to write an article, for example, and I want to reference maybe other articles other people have written or different documentation from different technologies or different press releases from different companies, I wanted to have like an AI document editor where I can kind of prompt it to like write things based on all of this other information and connect all this other information into a document editor. So, what problem does this solve? That is the second question here. So this problem solves basically writing documents without any context or having to manually reference other information. So I think this will be a super useful tool to help solve this problem. And I think this problem is going to be one that a lot of people face as well. In the community course and also in my app app canvas and I've got another video on this if you want to go deeper as well. I talk about there being six different ways of improving your app idea as well. So from this initial kind of idea of your app, what problem it solves, who it's for, you can also go through a bunch of different steps to basically improve the value of your app idea before you even start building it, and also make it much more likely that someone's going to subscribe or like pay you money to actually access that as well. So the third question that we're going to answer here is how does it do this? This is really just the features of your app. So what features is it going to have? We could have it that question could be like what features is your MVP going to have as well. So, we want to write out a list of like MVP features or one feature. And we want to just really focus on one or like a couple of different features that we're going to add in here. So, I'm just going to have one feature here, which is basically a document editor, actually two features. A document editor that can be written with AI. So where the AI can like write on the document for me and also I want to be able to add in any text knowledge to use as context when writing the document. So basically these two key features are going to be my minimum viable product. If you don't know what an MVP is, basically MVP stands for minimum viable product. That means the minimum viable version of your application that people would actually pay money for and actually want to use. So it's the minimum version that will solve the problem that you're trying to solve that you're trying to help people with. The reason that we create an MVP to start off with is because we want to actually validate our idea with a quick initial version of our application. And what you can even do here if you want to before even building your application and what a lot of other people like to do and a way that I've done it before as well is to actually build a quick prototype instead of the full application. put that out across social and then see if anyone is interested in the idea. And if they are, just have a simple weight list that you send people to to sign up for when you actually launch your idea. And the number of people who sign up to that weight list can kind of be a good indication as to whether your idea is bad or good. The next question that we're going to answer here is what is the pricing model? So to start off with, we want to keep it simple. So I would recommend starting off with something very simple like a monthly subscription. So, we're going to do monthly subscription here and just one pricing plan, which is going to be just to access the app basically. So, just you subscribe and you access the app. And we're going to also have a short free trial period because I think with AI apps, it's important that a user can test this before they actually decide if they want to pay for it or not. And I think like a 1 to 3day free trial can actually work really, really well to convert people. So, this is just going to be a 3-day free trial. That's the trial period that I've done for other apps that I've built as well. that's been successful and that will give people a taste of how it works before they actually decide if they want to pay. And that will allow us to kind of set up the payments in a very simple way to start off with because we don't want to over complicate this. We just want to make it really really simple for people to get started and that will also help us to kind of like get the most difficult bit of this build which is the payments part over the line pretty quickly as well. And then the last question here is what is it called? So, I'm going to call this Inkwell, which is an idea, a name that I've played around with for ages, but I think it'll be really fitting for this app and kind of relates to the type of app that we're building here being like a writing app. Again, in my community, I have a full breakdown of how to create a full brand identity for your app that you're building for your AI business. So, if you're interested in going deeper into this, you can actually join the community to learn more about how to build a minimum viable brand identity for your product as well. For this, I've already got some design assets set up that we're going to build with that will help us get this up and running quickly. And that is how to plan your app very, very quickly in just five simple steps. And now, let's move on to breaking down the structure and the text stack for our application. So, let's break down the app structure that we're going to use. Very simple kind of app setup. If you're not familiar with how web apps are usually set up and how the kind of user journey works, I'm going to break that down for you. We're going to also go through the text stack that we're going to be using in cursor to actually build our app. This is all the technology that we're going to need to actually set things up and get our application working. So, first looking at the app structure here. What we're going to do is going to basically break this down into four parts. This is pretty straightforward, very very simple. We're going to keep it super simple for the first version of our app. We're going to create a landing page. If you don't know what a landing page is, this is usually the website that you land on when you type in the URL for a web application and it will give you like a list of all the features, all the benefits and it will link you to sign up to actually start using the application. That is going to be our landing page. That is the first page that people see when they navigate to the URL for your application. Then from that landing page that goes into a sign up or a login flow. This is authentication and this has to have a sign up, a login and a forgotten password feature on here to allow users to actually sign up for your application and then log into their account to continue using the application again in the future. This is going to go onto the payment step next. And the simplest way to add payments into your app is just to add a payments popup after the user signs up for the first time that asks them if they want to subscribe to a paid plan. You might think that it's a bit sudden to kind of like do this as soon as people sign up, but I would recommend always adding in like a payw wall as early as possible because there are some people who are already going to be convinced that they want to pay for your application from the landing page and we want to capture those people and actually get them to pay for the app and then go into using it. The way that we're going to do this is we're going to do this with a free trial. So users will start their free trial and enter their card details and then at the end of the free trial, it's going to charge their card. And you can do this other ways, but this is just the simplest way that we're going to allow users to kind of do payments and then go through to the app. And there's some things that you need to have here for this to work. So, you want to prompt payment after a user signs up, but not when they log in. You want to check their subscription status if the user logs in. So, when a user logs into our app, for example, we're going to check with the payment provider that we're going to set up here. We're going to check, do they have an active subscription or not? If they don't have an active subscription, we're going to show them this payment popup or prompt the payment again. And if they do have an active subscription, what we're going to do is we're going to allow them access to the app. And so this is going to basically allow and deny access to our application based on the subscription status for that user. And there's a few things that we're going to check here as we go through building the application. And I'll take you through everything step by step so that it's super super easy to follow. And then the last step here is the actual application that people are going to use. And this is where all of your app features are going to live. This is where you're going to have account management, subscription management, and any features that you're building for your app. And that is our basic app structure that we're going to be working with. To go on to the tech stack that we're going to be using here, there is a few parts of an application that you need to be aware of before you start building. And these are the fundamentals of the majority of applications out there. Some apps you don't need all of this stuff, but for any app where you're charging people payments, you need to keep track of what users have paid and which users don't. And you also need to allow users to store any information against their account. So, we're creating a document editor. We would want users to be able to save those documents to their account. So, we need to have all of these features here. We're going to have the front end that is going to be built with React and Vit. So, I just want to cut this into the course before we go any further here. In this build, I did choose to build a VIT-based web app and not a Nex.js one. And I want to make it clear why I chose this and what the distinctions between the two are just to make sure that you're choosing the right framework to build your app on as you go through this tutorial. Now, if you are building something that you are planning to scale to a lot of users and is going to have user a lot of user data or sensitive user data, then I would recommend that you build a web application using Nex.js. Whereas, if you're building something a little bit smaller that you want to kind of build a little bit faster and you don't need as much complexity there, then I would go with VIT. However, if you're unsure, then just stick with Nex.js and build a Next.js web app instead. In this project, we're going to build an app using Vit. But you can absolutely follow along with the exact same steps here or Next.js depending on what works best for this app. I think we're going to go with Vit here. But these are just the technologies that we're going to use to build this. We're also going to be using Tailwind for the styling. You don't need to know what these are. Basically, these are the most AI familiar languages and coding frameworks that most AI models are really competent with building with. And the front end is basically the visual part, the bit that you see of your application when you're actually using it. The user interface, the user experience, any interactions, where any information shows, any menus, drop downs, all of that stuff. That is the front end of your application. For the back end, we're going to be using Convex here. If you know anything about vibe coding, you might know about Superbase as a service and a database and authentication option. Convex is kind of a Superbase competitor in that way where it's like your backend or authentication as a service, but you also have access to everything inside of your code, which makes it really really good for AI models and AI agents to understand how your backend and your authentication and your database is going to work. That's one other thing that we need to add in here as well is database. So database we're going to be using convex as well. Then for authentication we're going to be using convex. So convex is super useful in that it has these kind of three things wrapped up in this single technology that you can use. And you can also look at the convex dashboard to actually see the usage of your database and anything that's going on in your application as well. And I'll show you how to connect those things and get everything set up. For payments we're going to be using Polar. Polar is a payment provider that I really really love for applications for web apps because they act as a merchant of record and they are really tailored to specifically accepting payments for software and the merchant of record piece is really important because if you're working with Stripe it can often be difficult to figure out what taxes you need to pay based off of any payments that are made to you. International taxes is a really important thing to make sure you've got covered if you're building software because anyone from around the world can access that software. And so Polar has that all covered for you. The fees are a little bit higher, but they're a little bit higher because they're a merchant of record. There are some other options here that you could use as well. For example, Paddle or Lemon Squeezy are two also really good options for software, but I really like Polar because they're building a really, really good product for AI software specifically. And then deployment. We're going to be using Versell to actually deploy the front end of our application. The back end of our application is going to be deployed through convex and our front end is going to be deployed using Versell. And then APIs, we're going to be using the Open AI API primarily for this. If you don't know what an API is, basically an API is like an external service outside of your app that you can use by basically calling it to get the functionality of that service. So if you want to use AI functionality inside of your application for example, you can kind of call open AI and say, "Hey, the user requested this thing. Can you do something with some of your tech and then send it back to me?" That is exactly what an API is. So we're going to be setting that up inside of our application as well. And I'll show you how to set that up and get your API keys and all of that stuff. And then libraries here. Now, this is something that not a lot of people have touched on when building applications with AI, but this is a very common thing to use if you're a developer. And libraries are basically kind of pre-written code libraries that create some sort of functionality or interaction in your application. Now, I don't know if we're going to use React Flow here or not. We might actually not need to use it for this app that we're building, but it was more to give you an example of a library that a lot of people are using. So, if you've seen any of those canvas applications which have like nodes on a canvas that you can drag around, 99% of those are built using the React Flow code library which already has all of the canvas functionality and everything mapped out that you can build on top of. This can be a really great way of building a complex kind of feature like a canvas where you can drag and create nodes on it very very quickly because the library already exists for it. And if you're building a specific functionality and you want to know if there are any libraries for that, just ask an LLM, are there any libraries for this functionality that I'm building that I can plug in easily and that will save you a bunch of time actually building anything like custom yourself. And so that is our app structure and our text stack that we've got covered here. Now let's get into setting up cursor and getting started with the first prompt for our app. So now we've covered the fundamentals of your application, what you need to build, what the user journey is, what all the steps are to actually build your app, and we've figured out the type of app that we want to build, and actually planned it a little bit so we have an idea of the features in our head, who we're building it for, how we're going to monetize it, and what problem we're actually solving with our application. Let's get started building our app. So what I'm going to do here is with Cursor, and if you don't have Cursor, you can just go to cursor.com and download it from there. You can start building with a free plan on cursor and just see how far you get. And then if you want to carry on building it, then you can upgrade to the pro plan. So you don't necessarily have to pay for this straight away. You can kind of see how you go. And so let's set up our project for our app that we're building. So what we're going to do is we're going to click open project here. You're then going to create a new folder here. So I've already done like a version of Inkwell like five times. So I'm going to create inkwell v5 here. This is going to be our project folder. Now we just click open. And this is our project for our application that we're going to be building. When you first come into this interface, you're going to see a few things and I'm going to guide you around cursor here so that you get familiar with it before you start building. First, on the left hand side here at the top, you've got these two different views, agents and editor. We're going to be primarily using the agents view here. And the agents view is going to be more familiar if you're used to vibe coding tools or you've used anything like lovable or bolt before. Basically, it gives you this chat field in the middle where you have all of these different options. And I'll break down what those options are as well. So you've got your different modes for your coding model that you're using. So you've got agent, which actually builds and writes the code. You've got plan, which creates plans for any features that you're building. And I'm going to show you exactly how to use all of these different modes as we go through building the app as well. And you've got ask, which means you can ask questions about your codebase as you're building. And we're going to need to use that as we go through because chances are here we're going to get some bugs. We're going to come up against some things which maybe aren't working as we expected. We're going to have to do some different things to actually get this to work. And I'm just going to show you the full process the whole way through. You have your model drop down here. So you can select which different models you want to use. I have this set up so that I've got all of my favorite models on here. If you want to change this, you can go to add models here and you'll be able to add a bunch of other models from the cursor settings here. We're going to be using primarily composer one for really quick changes. We're going to be using Opus 4.5 for planning and for also doing any backend and database functionality. We're going to be using Sonic 4.5 for any smaller features that we want to build. We're going to be using Gemini 3 Pro for any UI or design changes that we want to do. And we're going to be using GPT 5.1 Codeex High for any bug fixes. And the best way of thinking about all of these different models in Cursor and when you're building your application is like a full product team. It's not necessarily just a development team. It's a full product and app building team. And on a product team, you would have like a product manager, um, senior developer, front-end developer, back-end developer, QA, all of these kind of different roles. We can do this with all of these different models because they're all specialized and really good at specific tasks. Opus 4.5, for example, is a very highowered model that is quite expensive, but it's very good at complex tasks and back-end functionality. Gemini 3 Pro, for example, is a very visual and contextaware model that is great for user interface design and design changes, but not so much for actual detailed code changes. So, we're going to be using these, mixing and matching the models depending on the task that we're doing. We're also going to be creating rules as we go as well to give specific models even further instructions to specialize them even more. You've got an at command here as well. So if you're in the chat and you press at you can reference anything in cursor or any files in your project which is a super useful way of reducing the context saving you money and also targeting specific files in your app as you're working as well. You can also add documentation, add terminal references and a bunch of other things as well. You've also got this browser button down here as well which if you click this and click browser tab it will give you access to a browser where we're going to be running our application locally. And this is going to give us a very similar view and experience as to a vibe coding tool like Lovable or Bolt. So you can use it in a very very similar way. And I'm going to show you how to get your application up and running using the terminal. All of those sorts of things make it really really super simple for you. So you can just follow every step of the way here. You've also got an upload image button where you can add images in like screenshots. We're going to be creating a bit of a design system for our application from a screenshot later in the build and we're going to be using that to apply a design layer on top of our app that we're building. And you have this other like drop down here which basically requires a Git repository to use. I'm going to show you exactly how to set up GitHub, why that's important, and how to basically manage branches a little bit with your GitHub repository when you're building your app to kind of mitigate any risk that you're changing anything on your kind of main app code once it's live. But we need to set that up and we'll set that up later. You also have in cursor the editor view and this is more of a traditional coding application view or an IDE view and this will give us access to all of our code files on the lefth hand side. You also have access to a bunch of other things like work trees branches in our git repository which I'll show you how to do. You don't have to know exactly what that is. It's absolutely fine. And also extensions that you can install like claw codeex all those sorts of extensions. Code rabbit as well. Any of these kind of like different features that we want to add into our app. And we've also got the basically the agent chat on the right hand side here as well. And any of your code files that you click on you can view in a text editor in the middle here. And we also want to take you through whilst we're looking at cursor and getting familiar with it the cursor settings which I think is very very important to understand a few key areas in the cursor settings to be able to use cursor in a more effective way. In cursor settings we have a few different things which are really important. One of these is tools and MCP. So in here you can add MCP servers to add additional tool functionality to cursor. If you don't know what an MCP is, basically an MCP server is a way of any AI agent accessing a specific tool. So it's a way of our AI coding agent inside of cursor using Figma for example or using Superbase. So, our AI agent can actually go and make changes in our Superbase account because we're connected to Superbase using the MCP server. That is where you set up MCP servers. The next thing that's really important here is rules, memories, and commands in the settings. And this is where you can add in specific rules for your project or just overarching rules for your entire cursor setup. I don't have any set up here. I've kind of cleared this so that we can set these up as you go. The way that I would recommend using this is not to do anything too complex when you're starting out. just to leave cursor in its kind of default settings and then as you go through building add rules specific to your project or just kind of general rules that are kind of going to help guide cursor in the way that you like to work. So an example of a way that you could add cursor rules would be to add a specific set of rules around doing front end or design changes and you can reference these in the chat as you go. So if I create a rule here, I can go at in the chat and then I can actually add my rules in here before I do any command with my agent. And this is a super powerful way of actually extending the cursor functionality to kind of start almost creating these different types of agents with rules. I'm also going to show you a way that you can even create different modes in cursor here as well. We're not going to do this now where you can add specific instructions to create your own custom agents for certain tasks. Now, the next thing I want to cover here is indexing and docs, which is really, really important because we're building with other technologies here. And instead of just pasting in the documentation every single time, what we want to do is we want to be able to let cursor read and access this documentation for anything that we're using as we're building our app. So, all we do here is click add doc, and then we just paste in the URL for that documentation. So, what I'm going to do before we start here is actually going to do this for the text stack that we're using. So, I'm going to go and find the convex documentation. I'm going to paste that in. And I'm going to go and find the Polar documentation for payments and paste that in here as well. So, I'm just going to go to convex.dev and then go to docs. And then we're just going to basically copy this URL here. Go back to cursor. I'm going to click add doc and then I'm going to add this documentation to cursor so that has access to this entire documentation from cursor. It's going to go through and index all of these pages here. I'm also going to add the Polar documentation here. So, let's go to Polar and then go to documentation. So, let's just go to the top level here and go to Polar/Docs. Oh, it's just introduction here. We're just going to add this into cursor as well. So, we're going to add this documentation. This is for Polar and it's going to go through and index all of those pages as well. So, now we've added those. Cursor has access to all of the documentation for these technologies that we're going to be using inside our app. And this is going to help the cursor agent loads in actually knowing how to set up our project properly. So now I've broken down cursor and how to use it and all of the different features that we're going to be using here or a lot of the different features that we're going to be using here. Let's go into actually putting in our first prompt and setting up our app project so that we can get started building. So now that we've added the documentation into cursor, we've had a look through the cursor settings and we understand cursor in a bit more detail. Let's start building our app and start with our first prompt. And I'm going to show you how to write your first prompt here or how I write my first prompt. And you don't have to start with a PRD always. A lot of people will say you need a product requirements document before you even start building your application. I actually think that's not true in a lot of cases. It can really help if you have a very detailed app and you want to go really detailed into the spec for your application, but a lot of people don't understand the technology. They don't understand exactly how all these things are connected. And that is absolutely fine. And in that case, if you get an LLM like chat GBT to create you a PRD and then you use that to actually build your app, you might not even understand all of the technology that it's telling your AI agent to use when it builds it. And it also might have suggested a bunch of technology that you don't even really know, that you don't even really want to use in your app and over complicate things and turn it into this really big application that you don't understand and just has a lot of bugs. And that can be a lot of the time why you get all these bugs when you start building your application is because you've just given it too much kind of detail about all these different things that aren't really quite right for your app. So, I'm going to show you a really simple framework here to get started building and we're going to go through the full process building this so that I can show you that this actually does work where you don't have to have a PRD. And what is really good about a lot of these new really powerful like AI models is that they're going to help us almost kind of write a PRD as we build our application inside of our project so that we don't have to worry about doing that to start off with. So, we're going to set this to plan mode first. And we're going to be using Claude Opus 4.5, which at the moment of doing this video is the best model for like architecting your kind of app, planning your entire app and building like kind of everything, giving you a really, really good starting point. It is more expensive, but it's worth that at the beginning and whenever you're doing planning to actually figure out all the details of the thing that you're going to be building. And you can use that to give less expensive models a much better chance of building and writing your code. it's going to have a higher chance of working basically. So the way that I like to write first prompts is in five kind of separate things. I would use this framework for writing any prompt for any feature as well. First you're going to give the context of the app that you're building. So this is almost like the planning steps that we went through here. So I'm going to write here for the context. Let's create an app to help people writing documents to reference any other documents or knowledge as they write and use AI to write the document with them as they go referencing those added documents. So that is our app context. The reason why it's good to do this is because it's quite useful to give the AI agent an understanding of who you're building this for and why you're building this application because then it knows the problem that you're trying to solve and how you're trying to help people and that can help inform its decision-making as it builds the application for you. The next step that we're going to do here is we're going to add the user journey. And the user journey is basically the steps through the pages that the user is going to go through. And I'm going to add and leave in certain parts of the functionality here because I think some parts are great to include at this point in the process and some parts are better to leave to do as a separate feature. My kind of goal always with this first prompt when you're building is to just create the basic foundation of your application. Don't try and oneshot your full application. Don't try and build an overly complex thing. Just try and create a solid foundation that you can build on top of and work from. And if this first prompt doesn't work, you can always retry over and over again with a slightly different prompt to see if it sets it up better or differently. That is really the beauty in this first prompt. And the fact that you don't have to like go crazily complex with this first prompt if you know what you're building and you've done some planning before you start building. So let's write the user journey here. So here is the user journey that we've added for this app. The app should have a landing page that leads to a login and signup screen and then after users sign up or login take them into the app. They should see a simple dashboard that allows them to create new documents and open any document they have already created. When opening a document, the user should go into a document view showing the document they're editing in the center of the screen with rich text editing controls and a sidebar to let them add knowledge to this document. I'm going to add that's a lefthand sidebar they are editing. Knowledge should just be plain text for now and should be added as context for the AI document editing controls. There should also be a right-hand sidebar with an AI chat that can write or edit text in the main document and uses any added knowledge as context when doing so. The user should also be able to name this document, navigate back to the dashboard, and also see when the document was last saved. So, this is really important in your prompt because it tells the AI exactly how the user is going to interact with your application. And I think this is why it's really important to just build something very simple to start off with that you can actually describe yourself. And part of the reason why I really like this approach is because it forces you to actually think about what the user journey should be for your application as well. Now, if you're not sure on what it should be, you can always work with your LLM or even ask cursor here what the user journey should be to actually build it. You can always let the AI kind of like figure this out and put in a more vague prompt. But I actually like trying to figure out this kind of user journey first before I start building so that you are actually going to get what you're asking for in an app that you're building. And so we've added our user journey here. And now what we're going to do next as part of this first prompt is add any pages that we need to consider that should be created. So the pages that should be created are a landing page, a login and signup page, the dashboard page, and a document editor page. Next, we're going to add in any technical considerations that we need for this app. So, we're going to add in things like any APIs that we want to use, any technology that we want to use for our backend or database, any other tools or libraries that we want to bring in here. So, I'm going to say for the AI writing functionality, use OpenAI and set up the database and authentication using Convex following the Convex documentation here. And we can link to the convex documentation in the chat that we added to cursor settings before we started this project. That is going to reference the documentation for convex as it builds. And I'm not going to add payments in at this point because payments is a separate step that we're going to do because it's a little bit more complex and it takes a little bit more time. You could even separate the database step and authentication step here as well. Sometimes I like to do it after, sometimes I like to do it before. Depends on the complexity of the app. If you want to do design first, you can maybe just do the front end and then get the design right and then connect to your back end afterwards. But for a lot of projects, I actually just like to set this up straight away to kind of get the foundations of the app figured out before we build anything else. And then also one other thing that I'm going to do here is add a bit of design direction. We're not going to do the full design of the app here because we're going to do that in another step using Gemini 3 Pro because it is better at design, but we're going to give it a rough bit of design direction just to give it kind of a starting point. So, we're just going to add in a little bit of design direction here, saying the design direction for this app should be a clean, minimal document editor using serif fonts for a classic and traditional look with soft shadows and rounded corners. So, nothing too crazy here. And then let's say create a thorough plan to build this application. And this is going to create a plan to build this full application for us. So, let's send that now. And what you're going to see now is Opus 4.5 is going to go through and look at the there's obviously nothing in the existing codebase. That's what it's going to do here. It's asking us to run this tool to search the documentation. And this is reading the convex documentation here. And what you'll know if so, if you haven't used cursor before, this may seem unfamiliar. What cursor is going to do as it works is it's going to ask you every time it tries to do something, use a tool or run a command in the terminal if you're okay with it running it or not. And you can just click run. You can change this to always kind of allow this. But to start off with, I think it's good to see what cursor is doing and actually kind of learn a little bit about the things that it's doing here. This is kind of running these tools to access the documentation. So you can see here it's looking through the convex documentation, the convex database documentation. Whilst this is doing this, we're also going to go over to Convex. Let's go to an account in Convex. I'm going to log in to my Convex account and I'm actually going to create a project in Convex for this that we can connect to our app so that we've got something set up and ready to go. So now we're in Convex. Let's create a new project. So we click create project. We're going to call this inkwell and we're going to click create. And this is basically going to give us our kind of backend and database and authentication access in this kind of visual UI where we're going to be able to see all of the tables in our database, see any functions we've got running in our application, any files, any schedules, any logs and also access the settings for all of this stuff including authentication settings as well and also project settings which is going to give us the information that we need to actually connect this to our project in cursor. So let's keep this running in cursor as this builds out the first version of our app. So it says I've gathered enough information about convex and how convex is set up. It's now going to see on the right hand side here, it's opened up a document that it's creating, which is a full plan for how it's going to build this application. And this is where I said it's kind of going to write the PRD a little bit for you cuz this is kind of the PRD for our project. and MD. If you don't know what MD is, it's just a markdown file that's just a text format. So, you don't have to worry too much about what that is. This is going to go through how it's going to set up our application. So, front end is going to be React, TypeScript, Vite, and VIT. Back end is going to be convex. Authentication is going to be convex. The rich tap text editor is going to be tip tap. So, it's found a rich text editor that we can add in here. AI integration, it says GBT4 API. We're actually going to use GBT 5, I think, for this. styling is going to be tailwind CSS with custom serif typography. The design direction is here. Architecture overview. So, it's really good when you're working with these AI tools to build your application to go through and read all this documentation that it's creating, especially to start off with because this is going to give you a really clear idea of what it's actually doing. You might not know what all of this is. And if you don't, you can always take some of the terminology and ask an LLM what it actually is. If you're learning this as you go, it's going to give you a much better understanding of the app that you're building. If anything does go wrong in the future, you're going to have a better understanding of what's actually gone wrong and how to fix it. So, here are the implementation steps we're creating. Initialize the project, install dependencies, configure Tailwind, set up the convex project, define the schema. It's creating the backend for us. Doing the front end, the core setup for the front end, creating the landing page, the authentication page, the dashboard page, the document editor page. That's going to have the left sidebar, the document editor in the middle, the right hand sidebar, phase 8, open AI integration. That's going to integrate Open AI with our application. And if we're happy with this, we can just either click build in the top right here, build, or we're just going to click build down here. And we're going to keep it in Opus 4.5 because Opus is the best model for coding and doing these big complicated things. So, it's really great to use for like setting up your project. Let's click build and let Opus 4.5 build this project for us. As it's doing this, it's going to go through and ask you to run a bunch of different commands in your terminal. What this is doing is just basically installing all of the things that it needs to create your app project. All of the dependencies that it needs. A dependency is basically a package of code that your app is dependent on to run. And dependencies are an easy way again of bringing in specific types of functionality or frameworks into your app. And this is a really common way that applications are built basically by developers. So you don't need to know what all the packages are, but it's just good to know like what a dependency is and why it's installing these dependencies for your application. And the terminal, which is all of these commands that it's running, when it says running command, that is running a command in the terminal. If you don't know what the terminal is, it's basically a text interface that allows you to control your computer and do different actions on it. Things like creating a local development server, which you will need to do in order to see our application as we build it. But all of these things are ways of like installing dependencies to a specific folder, adding things, running things, all of that sort of stuff. And so that is everything that it's doing when it says run command here. You can see now it's writing this index.css file which is our styling basically for our application that we're building. And it's also writing these other files like the vconfig.ts file. And if you want to see all of the code files as cursor is building this, you can jump over to the editor view and you'll be able to see on the left hand side here, you can see all of the files that it's creating for this application. This is where your code lives. And the editor view is a really great way of seeing all of the code in your project so that you can kind of see what's going on. You don't have to look at it, but it is useful to kind of understand that. And the agent view here is the best view for actually running AI agents and doing AI coding tasks like this. So, we're going to let this run some more commands, work through these steps, and you can see on the right hand side here, it's going through these to-dos and ticking them off off as it goes. So, it's initialized the Vit and React and TypeScript project with all the dependencies. Now, it's configuring Convex with schema authentication and connecting to deployment. Once this app is done, we're also going to connect it to our AR project in Convex that we've created as well. I'm going to show you how to do that in the next step, which is basically setting up our database and authentication to make sure that it works. So, as Opus 4.5 is creating our application, what you're going to be able to see if you go over to the editor is you're going to be able to see this readme.md file. And this is basically going to be a readme of everything that you need to know about your application. So, you can see the green and the red here because it's currently editing this as it goes, but it basically is breaking down all the features that we have, the text stack that it's using, getting started, so prerequisites that you need to kind of like connect your convex.dev dev account, how to install the dependencies, set up convex, set up your open API key, start the development server, all of these things to actually get the app working. And this is going to be kind of your guide to how should I actually get the app up and running once it's completed this first prompt. And if I go back to the plan, you can basically see that this is just going through the last steps here. It's just fixing a few things. Basically, it's kind of recognized things that are breaking in the app when it tries to build the app. And then it's going through the code and trying to fix those as well. And this is why it's really good to use a highowered model like Opus 4.5 to start off as well. So now Cursor