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

Let's continue. Let's get this bad boy deployed because we're not here to putts around. So, first of all, I messed up my TSC config. So, when you run the project by doing pnpm dev, then I got this little error over here. So, when you see these errors, that's the gold, right? You want to click right here. This copies what's called a stack trace and stack trace versus logs. So what's the difference between tracing and logging? In the context of software development and debugging, stack traces and logs are distinct but related concepts. Stack trace is a list of the function calls that were active in a thread at the moment of an error or an exception. So it's the chain of events versus like just a log which is a record of what happened. So you really want to have the stack traces because it shows you the sequence of calls that led to the error versus just the error. And what's beautiful about next is you have them right here. So you hit copy stack trace. And this is a perfect example of how to do debugging. You should probably figure it out yourself, but I want to show you how you can do with this. So I'm using Augment. Augment's fantastic. It's got the number one context engine in the game. It does this by using a bunch of GCP pipelines, Google Cloud Platform, such that it knows where your codebase is at any given moment. And if you sign up, two weeks free trial, super dope, way more cost effective than using any other product. So what I'm doing is I messed up the TS config. So I want to fix it. And the way that I'm going to do this is I grabbed that stack trace. I opened up augment which is on the right hand side. If you want to move it from the lefth hand side to the right hand side, you just grab it right here by the thread, by the gizzard, and then drag it over here. And it will ask you to index your codebase. After it does that, it gives you a short summary of everything that's going on in there. And then it will provide you with some frequently asked questions that most developers would ask about the project. And I'm going to say fix my config so I can support that. And then I'm going to paste in the stack trace that I copied. I'm going to hit enhance prompt. It's going to stay in chat mode by default. I'm just doing this so I can manually kind of show you the step by-step thing, but if you wanted to go quicker, you would flip it from chat to agent. You can turn on auto. You can see after I hit enhance prompt, it made it a lot cleaner. But what it missed out on was actually the stack tray. So, I'm going to put that back in there. I'm going to hit go. It's going to go ahead and find me what I did wrong. So, I can see that I didn't include an alias. So, we're going to include that, which is this path thing. And you'll also notice when I ran the project, I used bun. Bun is another package manager. It does more than that, but it's very quick. And I'm just so used to typing that in my other projects that I use that. But in your case, don't worry about bun. Just use PN, PM, or npm. npm is the OG one along with yarn but forget that and then PNPM is just a bit faster and then bun is fastest but for maximum compatibility stick to npm for faster experience with less compatibility it's mostly there's PNPM but anyways we're going to then apply this to our TF's config and you can see it highlighted the changes just as you'd expect from any other co-pilot and now when I refresh the page, you'll see it's loading. Cool. Great. So, we have this here and now we've deleted the previous repository and I want to get this version of it live because it actually has a connection to the place that we're working from. So, what I'll do now is I'll open up a new terminal. So, I hit command J to open this and I hit command pipe. So pipe is above your return key. And when you click that, it opens up new ones. Right? So we're gonna kill a bunch of these. And we can just do commanddelete by selecting it and clicking and doing command delete. Now we're going to type in a command that's going to create the repository for us inside of GitHub so that we don't have to go and do all this stuff of clicking it around because clicking is Fernanderthalss. We're going to type in GH, which stands for GitHub. And then you might have this installed. If you don't, what you can do is open up your OpenAI chatgbt companion. I have it bound to alt C. And then I'm going to say we need to get the command for installing the GitHub CLI. Cool. And what I just did there was I used a product called Flow. So that's bound to alt t and you would just do a brew install gh or if you're on yubuntu this is what you would use. Cool. So now we're going to type in gh space repo space create. So we've passed it a command and we want to go do that. There's other things that the GitHub repo does, but I'm just going to do create. And I've already I believe yes, I've already initialized the repository and pushed a commit there. So, we're going to just scroll down to push an existing local repo. Yes, we want the path to the local repository, meaning dot is the top of the project. Where we are right now is the top of the project. We're going to name it px.com. That's good. I'm going to tie it to my repository owner. I'm not going to type in a description. I'm going to make this private. I'm going to hit enter. And then the rest remote means that it is a remote repository. So it's not local. Local means on your computer. You can just enter your way through this until you get y-n. Hit yes. We do want those commits. And now it's up. It just did all that stuff. So a couple of commands later. Now if I go to my repositories, the very top you'll see prex.com updated now. And it's got all the stuff from that initial commit that we made before. Now, I don't know what action I have running on it. Let's see. I don't seem to have an action. It just wanted me to go and look at it. Oh, Versell. Interesting. Ah, now I understand. So, I'm going to go ahead and delete this project because this was the same name as before. So, let's delete this. Cool. That deployment is deleted. Now, let's go to the actual top of this. And we're going to delete this as a project, which it should be in here. Cool. And we have the code already locally, so we're good there. Let's just copy this. This is from my V0 session. And that's why you just want to get it to a point where you've gotten the bare bones of what the interface is going to look like. And then you want to get out of V 0, right? So we got a lot of value out of it, but now we need to go and grow up. So we're back in here. Now, if I do a GS, it's going to show me what stuff has changed that I did not commit. So I'm going to do a GA and a dot. And if you're curious how I have this set up, let me move this over. The way that I have this set up so I can do these little shortorthhand things, they're called aliases. And so I have a dedicated terminal. It's called warp. You guys should check out warp. It has a lot of AI features. So, if I do command I, then I can say go to my ZSH config. ZSH, enter the rabbit hole, is essentially a way for you to customize your terminal. The terminal is the bicycle for the mind. It allows you to become a power user of your computer. And so what I've typed in is, hey, I want to go to here. And it just gave me a bunch of stuff. It told me, here's my setup. It gave me information. I want to say open the GSH in Vim. You probably don't have Vim set up, but I'm just showing you what is possible real quick. So in here, this is my ZSH configuration. This allows me to manipulate machine the way that I want to have it. So in my case, if I want to open up my VI project, which is the community, the the private network that I run that has people from Microsoft and Google and a bunch of high growth startups, then I can just type in V AI and it will go to that, which is cool. But for the shorthand aliases is what they're called, such as GS or GA, you can see I have all of these laid out nicely within a section called git. So I have other ones in here where when I type in ls on my machine, it's going to show these nice looking files and all these things. And that's part of something called Eza. So, that's a whole another thing. If you guys are interested in learning how to get the most out of your terminal, then I can make a video about that as well. There's a lot of cool stuff in here that lets me really just cruise around. But let's get back. And so, if you didn't have that added, then you can do get space add space dot, but I just do g space dot. And then if I do gs, that shows me the status. Now, those are ready to go. It has the changes from our previous session. And I will do a GC, which is get commit. And I'm just going to type in updating sorry chore updating the tsconfig. And so this is called a conventional commit where I put in the category of the commit inside of parenthesis. I'm going to go ahead and do that. And then GP is a push. And now that's live. Great. So we've got some silly little config done. You can notice that our biome has already found some other stuff that it can go and fix. So, if I right click it, I have the option just to do that and it'll go and actually do the thing for me without having to do it. You'll also notice if you do a right click, sometimes it just says copy message. You want to aim for the middle of it and then it'll grab it. So, there you go. Cool. You can see that it's going and it's actually trying to pick up the node modules. You don't want biome to do that. See how I have all these issues? We don't care about the different formatting and linting within our node modules. So, what I'm going to go ahead and do is inside of our both our git ignore and our biome, you'll see when I push to get that I don't push all the node modules, which are the external packages that we defined. Packages are essentially different pieces of projects. They're Lego bricks that people have built elsewhere that you can then leverage to move quicker. But since we don't want to see those, we want to get rid of them, right? So, I'm going to go into here and let's take a look inside and we should see an ignore. So, I can see it already wants to do that. Boom. Done. Now, the problems are gone. Pretty cool. So up next, now that we have everything up and running, let's start to scaffold out what do we want to do on this page. First of all, from a design perspective, is it going to be mobile friendly? Did VZ do that for us? Looks like it did. Pretty cool. What about the bio? Yeah, that works. What about the blog? Cool. Whiteboards. Cool. Content. Cool. It actually did it pretty well. So, we don't have to worry about that. Thank you, V 0. Now, let's go back to home. And that's really nice that we don't have to worry about that because that's super timeconuming. If we did have to worry about that, then I'd be prompting around it. So, next I want to start to think about how would I get this weekly running goal? How would I get this information from GitHub? What about those things? So what we could do is we want to find out what are the commands that we need or the APIs we need that allow us to get real information. Now at the beginning of the video I said let's use TRPC and let's use React Query, but I think that's overkill for a beginner's course, frankly. So forget that. We're going to take the easy street. And this library folder is a perfect home for something small like this. So in inside of any external API or external third party like any third party that you're working with they have what are called methods. So you can think of a method as a part of a set of operations that you can do on that company's behalf. So in the case of GitHub, there would be a method that allows me to get the repository information. And within that method, it will show me what I'm expected to receive from GitHub. Because you're trying to learn how to do this in an abstract way where, you know, this YouTube video will get watched and then you're going to run across a use case that's not GitHub or Strava or YouTube. We're going to do the research instead of me just spoon feeding you the exact solution which I already know. We're going to go through the process of what it would look like to do this for any API. So when we look at this, there's going to be a couple different things for the project that you'll do every single time whenever you need to get some third party involved. And because we're using TypeScript, we're going to need types that defines what it looks like when we get the information back. So let's go ahead and for working with third parties. So we'll just write third party API checklist. What are some of the things? Let me think. So first of all, do they have an SDK? That is a software development kit. It's a set of tools that the company provides on behalf of working with developers. In that case, do they have an API key in order for us to access that information about Parker, the individual at Strava? So, what how does that work? And that brings up another question of a authentication, which is how do they know that it's me? Is that going to be through getting this long key, which is the API key, or is that going to be through something called OOTH 2.0, which is what you see whenever you sign into pretty much anything on the internet and it says login with Google or login with Discord or login with Slack. That's using the OOTH2 protocol. And then another question is there's this phrase right off and everyone just thinks of authentication but they forget about authorization. So authorization is slightly different because you can be authenticated to something meaning you're allowed to get in but once you're in are you allowed to get into the VIP section or is that where it stops? So you can be able to again be authenticated by Google, but then are you authorized to do certain things within Google or not? So I'm thinking about all these things and then I want to just jump into actually looking at some examples. So what I'll do is you could just use a free product like perplexity free and I'll just start doing some research. I am implementing a connection between my Nex.js app in Typescript and the Strava API and I'd like to find examples on GitHub of people who have done this to pull in their workout information. So what I like to do is just this. I like to find examples where it's already implemented and then I'll also open up Strava API. And what this will do is it's going to show me all the information about that. So you'll probably find a playground, which is nice because you can replicate the things that you want to do to see what kind of information comes back. So in this case, I know I was talking about GitHub, but let's do this travel one. It's interesting. In this case, if I wanted to see how many miles out of 20 I ran, then I need to get the information about my mileage for the trailing seven days, right? And so in that case, if I explore the API playground, I can start to see what each method returns. So when I see the word athlete, that is all these different methods that I can do, all these different basically functionalities that are available. So I can get segments, I can get athlete information. Puts means I'm actually updating something. So I can do a get, a put, a post. Get means give me it. Put means update it. Post means create something net new. And this is part of CRUD, which is create, read, update, or delete. You can see all this stuff in here. So it's pretty cool. This is typically available for any API you're going to work with. They have what is called the open API format, also known as swagger. But open API format looks like this where any website that you go to if they have this then you can see exactly what it is that you would expect to get. In this case if we're trying to get the athlete stats so returns the activity stats of an athlete includes data from activities set to everyone visibility. Great. So in this case I can see recent runs total recent run totals. Cool. So, we're doing the research. We're feeling good. This is the sauce right here, right? I need distance. And now I'm wondering like what is recent run? How recent is that? I need to dig in. But I can already see that this get athlete stats is going to be something that we're going to need. So, what I can do is I'll just grab this and I'll go over into our Strava and I'll just put this in here for now. And I'll put it like that. to do tie up athletes for slash ID. So now by reading this, whenever you see something in curies, that means it's dynamic. So I'm going to need an ID, which means I'm going to need to get me Parker the athletes ID. And then that way when I find out what website or URL that I'm hitting by calling out to their system, I would pass in my ID. But it's dynamic because if we were logging in as somebody else, then we could pass in their ID. Cool. So now we probably need to get their athlete number. So I can see here now I have get authenticated athlete. So this would be another one that we need to get. And I can just go ahead and copy that. And let's do this. And I'll do to-do implement the dash alathlete. Cool. So really that should be about enough for what our use case is. We still need to figure out what recent runs is defined by is recent trailing seven days. Not sure. Time for an espresso. It's only nine o'clock on a Friday. Oh, that's good. Nectar of the gods of the god. Sorry. Now, when I look at this, I see an ID. Cool. We're off to the races. So, what's interesting about this is when you're calling out to a system, you can validate what kind of information you're expecting to get back. Now, we don't have to do this, but this would be what is called types. So I he's using the pages router very old school but inside of the index he's going to be using use effect and swr. Okay that's why it didn't load so good. Let's see. He has the straa select. This is not how you want to write the code ladies and gentlemen. This is a very inefficient way of doing it but it's okay. No hate. So when I click on a symbol, I can double click it and then you'll see the information on the right hand side. So then I can see where else this was used. So I can see the Strava select he composed these components in a way that's a little bit confusing where instead of having it broken out by the type with different types of dashboards, he's passing in properties to define what both the data and the actual component looks like. I wouldn't do it like this, but we're still getting what we wanted, which is a way to see how recency works. So, let's keep looking around. We have weekly stats. Let's go into the weekly stats component. Weekly stats. Cool. So, we have an activity model. Oh my gosh. He's just stubbing this out. Is it? Yep. Runs by week, current week. So he's doing this. Where is week? Is he importing this? Yeah, he's using day.js. So we wouldn't copy this, but we've learned. And if I looked at the stat view model or any of these models that he's done, very funky way, it's an old project. That's a fun one. is instead of types in the way that I think about it, he's basically mapped what he's expecting to get back as classes, which is fine in these constructors. But we at least know now know that we are on the right track. So next, I would basically go and start to implement this myself cuz I didn't like the way that he did it. And the way that I would do that is I'd go back into our Strava and let's see, go back. Come on, Strava developers. And then in the getting started guide, let's see. So, you typically see this on all of them, by the way, where they're not like developer focused ones. You'll they're laid all over the place. But let's see some basic info. Cool. You have rate limiting, meaning you can do 200 every 15 minutes. That's plenty. And then you create an application which allows you to access their API. It'll give you a client secret and a client ID. The client, just so you know, is your your computer connecting to theirs. So you have clients and you have servers. And the way that they communicate is over HTTP or RPC. There's different ways, but who cares? You don't need to know that right now. But in our case, Straa is serving their information over a server and that's a computer sitting somewhere or a cluster of computers. And then you have all these clients which are other companies that want to connect. And so in order for them to connect and to know first like Strava basically needs to know is Parker's website who it says it is. And so in order for us to connect and have that handshake, we need an ID and we need a key. And that'll be the same thing with any external API you use for the most part is you'll either get a client ID, a client key or a API key like I mentioned, but the client ID and the client secret is what ooth 2 requires. So you go you'd make this then you can make what's called a curl request. curl request is basically how you can test out the endpoint to see the information that comes back. So in this case you can see that I can get an access token and that's our way in for making a call. So me like I'm calling stra I'm like what's the info? How many miles did I run? In order to do that I also need to have an access token. So the client ID and the client secret connects the server to Parker's website and then the access token is the thing when I go to call again and it's y is it me? Is it me? And so a curl request then would be how I make that phone call. So if I tried to do this, I would basically grab this and I'd open up my terminal and I just paste that in. But I need to get this access token. So you can see that's how I go and I get it right here. So let's test this out. We'll wrap the video. this 30 minute sections. And I'm going to grab my access token real quick. Cut. Make sure I blur this out. So, I got the access token and I sent across that curl request by just pasting it in there and then pasting in this long string called access token. And immediately I see here he is, here's Parker, here's where he's from. Here's his height and his weight and all this information. So, now I have the ID that I need to then start building out these requests. That's it for this segment. And then next one we're going to be getting into actually writing up the API calls. Basically connecting the things. We've covered a lot in this video from how to think about finding the information that you need, digging around through different repositories, doing a little bit of research, some highlevel understanding of how open API works with those specs and getting access tokens and boiling that down to the basics. In the next one, like I said, we're going to get into implementation of those. If you've learned one thing in this video, you have to like it. And if you've learned two or more, then you should subscribe to keep up with new videos that are coming out. And if you want to go deeper and learn from a bunch of builders, then go join VI. See you in the next one.