How to Use Cursor To Build a WebApp For Beginners Part 1 (v0, Cursor, Augment, v0, Vercel)

Let's build a quick website using Nex.js and v0ero going end to end. A lot of people will start there and they don't know what to do next. So, let's cover it. In my case, this is going to be simple. We're rebuilding a personal website that I need because I get traffic to it and it is dog water. It's using a lot of the tech that I was fiddling around with, I don't know, a couple months ago. So, the first thing I did is I just disattached it from Vzero and Versell. This is the fastest way to do it is go into Vzero, get a bunch of screenshots. I don't need to walk you through how to get screenshots of stuff that you like, but that's all I did and it took 18 versions of just explaining, providing copy, snagging screenshots. Now, if you need additional help there, what you can do is you map out the site architecture of what you actually need. So this is a process called breadboarding or IIA is the technical term for information architecture which is essentially what are the pages that we're going to have and what are the things on said pages. Boarding is a mechanical engineering term where you would breadboard out what each thing what each component on a chip would be doing. And in the practice of building websites, web apps, mobile apps, you'll write out the route and put an underline under it. So that represents the route and then the affordances that page has. So in my case, we will have social links, link tree essentially. We will have project links. We will have a footer with additional links. I want to have an activity card that won't go anywhere. These will go somewhere. So these will just go to we'll call it external and that will go there. Project links in my case are also external. So a lot of those things are just going away somewhere else. And then the footer, we're going to have it go to other places on the website. So I'll have blog. Underneath blog, we'll have articles. And the footer will go to there. Underneath blog, you will have articles going to the blog slash article. And that will have the content, which doesn't go anywhere. It will have what else on that page? It will have perhaps a table of contents. Perhaps it will have view counting. But this is the process that you'll go through for anything that you're making, right? It's this first step. Then you figure that out. Then what I like to do next for something small like this is you don't have to use a lot of prompting, right? You're just using your noggin. Use your head. Is I just was doing this beforehand. I was like, h, I should probably make a little video about this. But I'll stub out all the design using Vzero, like I said. So, this is where I landed. And it's already published. So, yeah, if I go to here, this is what it looks like currently after 15 minutes of fiddling around in V 0ero. Now, we need to make it functional. But it has everything stubbed out, meaning it is fake. And there is some stuff that you need to do once you get it out of vzero to make it real. This is real and that it's on the internet. You can visit parkerx.com and it's there, which is nice. But this is a lie. I did more than 11 miles. And also these commits not correct. Stars not correct. Those are external links, right? Projects, these are all external links. If we go into bio, that's the copy that I provided. If we go to the footer, we can see the other links. So we have blog. These are all fake. This is a view counter that I was talking about. So, there's something I need to take from a different project that I found that does this in a cool way without having to use any external services. Whiteboards. This would be using either TL Draw or Excaliraw and then taking some of the open source stuff there and jamming it in there. Not sure how, but I just put coming soon. And then content. So, this is external, right? Because these are fake videos. So, the next step is cool. How do we get it out of V0 now that we've figured that out? In order to do that, you do a couple of things. You go and you could do what I tested, which was how did you get it onto the internet if you didn't download the code? You can tie it to a branch now. So, I just had to create a new repository, but the issue with that is the repository that it creates is then in alignment with any change that you make. And it's also in beta. So, it's nice that it has get sync, but I don't want it synced. I want it sunk. I want it out of there and into my IDE. So, that's when you click this download the code. And then you open it up and you'll start changing things. But before we start changing the things now that you have it downloaded, and let's assume that you can open a file by opening up your terminal, go into wherever it is, and then open it up. You have a couple more things you need to do, which is what are the third parties that you're going to be using. So in my case, we need the YouTube API to be able to get all the information from my channels. We need the Strava API to be able to pull down the health stats, the running mileage per week. We need a GitHub API to pull in that metadata that we see on the front page, which I think it's called Stargazer is a really easy one to work with. Excali draw. I'm gonna put a little X next to it because this is outside of the scope of a 15 minutee video. Probably Yeah. And then what are the stack you're going to use? You could use server actions for this. That'd be the fastest way, but I'm building VIV2, which is part of the builder network that we have. There's people like myself and some folks from high growth startups and Microsoft and Google and we're all part of this community and I'm building a big product for it. I'm rolling that out and I'm using TRPC. I'm not that familiar with it, but it's fantastic. A great way to get to learn it is just sets and reps. So, I want to use TRPC instead of just server actions. There's a great article actually if you're interested in learning why you should still be using TRPC. It's in here by this guy named Ravi coding and he makes a really good case for it. So I want to be using that. And then what else? React query. Next, no DB. So what I had done before on the previous website was I had all the markdown files for blog articles were stored in a DB and that's just so overkill and I'd rather just log in. And then I want this view hit counter thing from a repo that I saw. So you'll learn how to do that as well where I will then pull down the repo. So cd into it. We'll open this up so we can get context of how he does it. And we'll be using a mixture of cursor and augment. Congrats cursor for just raising $900 million. 900 big ones. I'm very bullish on cursor in general and even more bullish now. So, let's get into it. Now that we have it pulled down, now that we want to get going, how would you move on from this? What do you need to do? The first thing is I would disconnected if you had done what I did before. I'm just going to go ahead and disconnect and delete that repo that it made. So, let me go back. There it is. I'll go into settings. And as you can see, this is what I don't like, which is like it's automatically synced with your vzero deployments. And that's cool, but not if I'm doing external stuff. And if I actually want to build on top of this without all the batteries included stuff on Verscell where it's, oh, you want to add up stash, cool, let's throw a couple bucks at this, a couple bucks at that. It's just not what I want. So, I'm going to go ahead and delete this and then I'll go and create that from the CLI once we're ready. Cool. That's gone. There's me. And we've had this downloaded. Cool. We don't need to use Vzero anymore. Now, we're moving on to the big boy club. So, we pop this open. That's the old version. We don't want that. Here's prax.com. And on the left, we have an example codebase for this view hit counter thing that I want to have. The first thing that we need to do once we've gotten out of v 0ero, now that we're nine minutes in and you have full context, is start scaffolding out how you want this project to look. So, every V 0ero project ships with Tailwind 3. If you're familiar with Tailwind, you know that four was a big leap in the way that a lot of the code is written. And I think that's fine. We'll keep it at that. But even some of the things inside of your TSON will be different. TS config is the configuration file for TypeScript on how you will compile types. If you're familiar, TypeScript is a subset of JavaScript. Adds types to it. Makes you have autocomplete and all these nice things. If you're not using it, go start using it. So, what I'll do is I'm going to grab a code base that I like to reference and it's midday. I think their architecture solutions are fantastic. I really like them. And I'm just going to look and see what are the difference between the midday project and the one that exported from my v0ero. And so I'll start to find some of the little differences. So I can see even little things like the target and the bundler and all these little things in here like skip the library check. What I'll do is I'll actually just take this one and I will move it over and replace the one that Vzero shipped with. So, this seems fine by me. It's doing some inclusions of a dotsource folder. That's one thing, too. I prefer to have a source or a source folder where the app is inside of source. I think it's just a preference thing, but that's one thing I would change. But I'm going to go ahead and bring this over. Let's see. ReactJS. This seems fine. Name. Next. Plugin. Cool. So, let's go ahead. Now, there's some stuff in here that we do not need because this is coming from a mono repo. If you're not familiar with what a mono repo is, you have a bunch of apps that are nested in the same space. So, under the apps folder, notice how the one on the left from Vzero just says app. That's because it's just a very basic front-end Nex.js app, just one app. And so, all of it's housed in there. Whereas on the right, this has a lot of apps in it. And in fact this one has an API and within the API you have hono and you have a lot of stuff right and then you have a dashboard app and that's an next.js app and then you have docs which is menty and then you have engine which is another API and then you have the website which is another web app. So, there's a couple differences in the way that this is structured and that's what that path means where you can change the way that you do imports by setting these in your config. So, I'm going to go ahead and change this and my food just got out of here. Bye. And so, I just got my pad tie. I'm really excited about it. So, next I will delete this path. So when at is done then I can it'll go to the root basically and what is going on? No inputs were found. Is there something in here for source? Yes, there is. So we don't need to include that. And what else? Let's restart our TypeScript server. When you're messing around with your TS config, you can run into some issues. Oh, we don't have bun types. Cool. Now that looks good to me. Next up is we will we actually don't even need this path thing. Cool. Great. The next thing is when you go into your package.json. So this is where all the packages for your JavaScript based project live. You will see v0ero. So just change that to the name of the project that you're working on. In my case it's purx.com. And then there's a couple other things that we want to add. So having different scripts for when you are wanting to start it up. So this turbo thing is really nice. And so we want to add Turbo to our dev environment. Basically when we run the project we want it to use Turbo. And so what I'll do here is I'm going to go into GitHub and I just again I'm finding examples that I like. So Lero is a guy that works at Verscell. Leobro.io. Let's find his repo real quick. Go into his code. Let's find something that he's shipped recently because he'll probably have a really good example. This next MDX blog looks pretty recent. What else has he been working on? Next AI news. How about this? Simple basketball scores. So, let's go ahead and let's look at his package and see if he has anything in here. Boom. There it is. That's what we're looking for. It is the Dash Turbo Pack. And so, I knew that was the thing, but I wanted to show you an example of how you get around when you're building stuff is just find examples. There's so much gold on GitHub. It's crazy. So, now we have that. And you also will not have your packages installed. So, this node modules thing, that's what all the packages are. So when you start up the project, you can just do PNP PM or npm install. In my case, I just do PN space I and that goes ahead and does it for me. And then next we want to grab this clean. So what clean does is if you're doing a reinstall, if you have a package dependency or something that you want to just have a fresh install, then you can do this. So that way when I run PNP PM clean, it's going to fail. Let's see. Not a git repository. Oh, I don't have git yet. So I'm going to initialize git. Git is version control. So I'll do a get init. And then I'm going to do get add dot. That adds everything staging from uncommitted changes to staging them to be able to go into the version control. That's why they have all these little indicators on them. And then I will do a get commit. So get space commit-m or shorthand gc-m that's in my aliases. And I'll just say init. Cool. And now when I run pnpm clean, it will go ahead and clean the node modules out. So now those are gone. So it's nice to have this little guy here. See if there's anything else in here. These are all for that. I'm going to go ahead and add in biome. So, Biome is the best llinter in my opinion. And so, I'll just look over here and bada bing, there it is. 1.9.4. I'll come down here to dependencies, hit O if you're using Vim motions. And that seems fine. Cool. So what biome will do is when you initialize it, it will give you on the right hand side this file that is a config file for how you want formatting and how you want linting. Now formatting is different than linting. I will probably botch the definition of the two. So I'll just say formatting verse linting. So linting is the process of analyzing the code while formatting focuses on the layout of the code. And you'll notice that this is sometimes separated. What's beautiful about Biome is one, it is incredibly performant because it's written in Rust, but also it just does both. And it has really good smart defaults, which is great. So go ahead and I'll grab this right here. I already put it in the package.json, but um for the example, I'll just go ahead and show you what that would look like. So, you put that in there. And now I will see if there's any other packages in here that need to get updated. The TypeScript version is typically behind for Vzero projects. So, I'll come down to TypeScript and you can see that it's got this carrot, which means that it's pinned to any version greater than five, but I want to have a specific one. So, I'm going to grab this and there go from there to there. Let's see what version of Tailwind was midday on because we're just copying midday. So, let's come down into here and take a look under Tailwind UI/package. Which version? Tailwind 3.4.13. Why not? Let's just do that. Cool. And what about post CSS? Let's get the right versions there. You just pick the ones that you know. And in my case, I find LLMs are a lot better at using these versions. That's why I've stuck to them. And getting those nice defaults in place, I promise you, it'll just save you a lot of time. So, might seem redundant, but you just don't ever want to be in what we call dependency hell because you're just not going to have a good time. And so we're going through right now and just making sure the React one look good. We're going to go through and find if it has auto prefixer. It looks like it does. Let's change out that number to one. What about post CSS? These are all intertwined with styles and how the styles are handled. So now that that is done, we can see we have all the packages that I think we need. How about Tailwind merge? Tailwind merge 255. Let's go to 253 just cuz towing animate. Good. Great. CLSX. Good. Okay. Feel pretty good about this. Now, we don't have any packages in here because we've already gone ahead and deleted them. So, we'll just run a PNPM install and then we'll get our biome set up. This is all the fundamental base like building blocks that you need to do before you go and really start jamming on your project. So, while it might seem redundant, you just got to do it. And so, let's go back into here. This is going to be not a module.js, but I just a JS. Find it easier to work with. So, let's grab that. Cool. See, you can already see that we're starting to see some errors from biome. So, it's telling me that JSX elements without children should be marked as self-closing. Great. Because I'm using cursor, you can already see it's just going to do that for me. So, boom. Tab. Done. Makes it a lot easier. Your code will be more readable. You will burn less tokens when you do stuff like this. And so, now we need to initialize biome so that we have that nice little folder or that little file at the root of the project. So if we go back into here, you'll see the next command is pnpm biome. And is the pattern of most CLI tools for you to be able to initialize whatever that first thing is that you're going to do with the package. Oops. So I'll just put that in. And now it's initialized. I've got this biome.json. And it's grabbing a schema. Now a schema, this defines what the default will be for that project. So it's passing in the link. If I clicked into this, you'll see a bunch of stuff in here, but that's the set of rules. Now, if you didn't like what the defaults are, you can go ahead and change those. You can do whatever you want with them. In my case, this looks pretty good, but let's see what Pontis does over here because he's a smart fell. So, it looks like he's changed the configuration from 1.9.4 to this other one. And so, that's pretty interesting. What else is in here? VCS. He doesn't have anything around VCS. The formatting, it looks like he has indent style of space. Now, his will look a little bit different because he also defines it inside of your extensions. So, you can see he has like Oh, that's not even it. That's what is it? Let's go to VS Code. Yeah, here we go. So, the VSS code pattern as well is something that we'll be adding where when you go into your project, you want to have great defaults. So, in this case, this sets settings per project. So when he opens this up or we open this up that he has the default formatter of biome for JavaScript biome for TypeScript biome all these things for biome and then with this code actions on save this is a setting for VS code where when you hit save it does the quick fixes and they're explicit. It can also explicitly set the organize of the imports. So there's patterns for the way that you do imports if you have a lot of imports. All these things are really great. And if you don't have this, then you'll run into issues when you're trying to save stuff. And you might find that like you get something down at the bottom left that says running file participant and it's just like stuck and you're like, "Oh my gosh, like help." And you're just not going to have a good time. So we'll go ahead and we'll grab this. And now that we've finished biome, let's go. You can edit that if you want, but we're going to add a VSSc code file and then we'll do settings.json and then we'll also do extensions.json. And these are again settings files. So you see the second that I open that up, I got this little popup, it, if you can't read it, it says this workspace contains a TypeScript version. Would you like to use the workspace type script version for TypeScript? and I'll just say, "Yeah, sounds good." So, we've done that. And then, as far as extensions go, based on your project, you probably want to have different extensions. So, if you open this project on a different machine or somebody else opened this, then they'll get a popup similar to what we just saw letting them know, hey, you should probably use these things. So, in our case, we do want that. And we're going to open this up. But, we don't want this expo one. So, you notice when I hit save, it just shifted. That's because of biome. And it's really fast. Did I mention it's fast? So, next up, you can go and these GitHub things are great for workflows as well as instruction files as well as prompts. They're all these things that map to the power of GitHub. But in our case, we don't need to worry about that right now. What we do want to do before we actually start continuing to work on this is set up a directory. And I use this in every project. We can look at one that's a little beefier. So in VI right now, what I'm messing around with on the right hand side is augment guidelines. So it's similar to cursor rules, but they're 2,000 character minimum or sorry maximum. That's what I'm doing in here. But theai pattern is nice. It was popularized by indie dev Dan. You should check out his content. He's fantastic YouTuber and developer, much smarter than me. And so when here what I do for most projects is I start light and I'll start light by just doing and tasks and then within tasks I will have backlog doing and done and it's just really simple stuff. You can sync this into an integration with GitHub if you'd like via augment or if you're not an augment user. Highly recommend it, by the way. It pairs fantastic with cursor. But you could have all the tasks that you're doing in here synced to GitHub and then write rules around it. So as you do them, GitHub's always in sync, which is really preferred when you're working with a team. And then also just having the history in there is nice. But for this case, we don't worry about that. We just worry about setting up the folder structure. So you have backlog, doing, and done. And the way that I do it is I have different folders within done that are broken out by different sprints. Sprints can be up to 10 different tickets or issues or tasks. And it just makes it a lot easier because if you're doing an epic or you're doing a new piece of feature work, there's going to be a lot of stuff in there. So having them in bite-sized chunks makes it a lot easier for LMS to chew through. But also I'm thinking ahead where which are the sprints that I could give to a remote agent and have it autonomously run. So now I'm going to go and create this little folder structure. You can also see I have rules in here. I'm still trying to figure those out as to what would that look like. So, there's going to be rules around how I'd like for APIs to be written in Python versus in HANA versus in Express, whatever it is I'm using. And then there'd be things and rules around the brand guidelines that you wouldn't want to have in every single request. So, you want to basically reduce the amount of tokens that you're sending at any given point to the most tur explanation of the job that you're trying to do. So, I was still trying to figure that out. Then I'll add a references folder. So, references will have all these different bits and pieces inside of it where they're pieces of intel from another project. You notice we've kept going back to the midday project because he is a great developer and I really like the way that he does work. I've used the product and I'm like, "Wow, this is great." So what I'll do is I'll find examples of it and then I'll make these massive documents that basically define everything about that project. Again using augment because of its context engine is just superior. we'll end up something with 21,000 tokens worth of information that explain everything about the API architecture in a great amount of detail down to the highle system architecture of how do all these pieces work together to the request flow diagram all these things and as someone who's trying to learn this is a fantastic way to do it where if you can end up with this and really truly understand it. It's so dope. So, I have all this in here and then that would again sit inside of the reference so that I can either tag it when we're going to do work and then once the work is done then I actually create a rule around it that can be used in tags later. Then last I have LLMs. So these are context 7 or an LLM.txt. It's my local version of that. So if I wanted to use contact 7, I would have to use an MCP and I find them a little bit flaky, but at the same time I understand the value. So in this case, I've just taken the piece of what I need. So when you're doing off with server side rendering or if you're working with the Discord PIBOT documentation, I just want it there. Then I have all of these. So that is the first video in a series. And I hope this was helpful. I've been getting a lot of comments of people wondering like where is the video where you go through all the steps. So this is video one of building a simple website from scratch with all the best practices that I like. In the next video, we will go and head and actually scaffold out the AAI folder and then we'll get into the sauce, which is actually building this thing out, adding in the view counter, adding in the Strava information and the GitHub and the YouTube and all that. So, if you learn just one thing, make sure you like the video. If you learn more than one thing, you like and subscribe to the video. And then if you want to hang out and do weekly product roasts or be a part of VI, you should go ahead and join. The price doubles next week and it's going to be dope when we have a new product. I'm so excited about it. I'm so excited about it that I'm just going to have to show you real real quick what we're building. I think it's in here. Yeah, it is. This is what I'm working on tonight and this weekend, which is this is nice stuff that people are saying. This was the first version of VI, which was I'm just going to have paid educational content. And then I realized I'm not your guru and I want to build a network of people. So, this is where we're going, which is the network. There is content. There's agents for helping you learn. There's dev tools that you get early access to. One of those is a 10 essential docs CLI that I built. There's another one that's free that you don't have to be a part of the AI called AISDLC, the software development life cycle. It's got like close to 100 stars in the first week, which is pretty cool. And I don't know where it is. All these things. And then eventually as more people join, we're going to do V3, which includes a marketplace. So working with companies, providers, ideally cursor, augment, open AAI to get deals for members such that the membership cost itself is covered by the discounts you're going to be receive. And then why does it matter? I think that it is the truth. We're the product of the five people that you're around. And the things that we're bringing are we're migrating off of school. That was the first version. You can't run an AI forward thinking cutting edge company running on school. and why there's a lack of AI features. There's no open APIs, which is tough. The basic content management, I'm not going to tear on it, but yeah. So, what are we doing? There will be video content. Obviously, there will be one account that ties your membership to Discord as well as the website as well as YouTube. So, this channel will have videos that are gated based on your membership status and also live streams, which will be cool with guests. We're going to have a membership directory for everybody in there cuz we got people like business owners that are doing really cool stuff. And if they just have this Discord face, like the default one, you don't even know what they're doing. You're like, "What?" this prompt playground. The more I think about it, the more I realize like it should probably be deeply tied to GitHub because of what they're capable of doing with their new models tool. And then monthly product roasts. We just did our show and tell today, which was cool. Shout out to Devitus for noting that the production quality should no longer be on Discord. So, we're going to move that to Gme and that'll be cool. And then educational agents. What else? Upgrading Discord. We're going to have some co-pilots in there. That's what is coming. So, very cool. I'm excited about it. And I will post the next part of this video tomorrow. Peace.