Transcription
By simply prompting Wind Surf a couple of times here, with the goal of creating the Google Chrome no internet T-Rex game, we were able to create our own version as quickly as possible. In this tutorial, I'll go over how to take Wind Surf code and actually display it in your browser. Sound good? Let's jump in.
A couple of things to get out of the way before we even begin today's video. First, I wasn't even going to cover Wind Surf; I wasn't going to do any videos on it. But man, the amount of comments I have received across all my videos is tremendous—like, a lot. It even went as far as getting a whole post dedicated to it in my school community. As you know, if you post in my school community and I think it's relevant, I'll make a whole video on it.
Now, if you want to check out the school community, it's in the description down below. To get started here, simply hit download Wind Surf editor. This is going to download it to your laptop, desktop, or whatever you use. I'll make sure to leave a link to this in the description down below.
Let's jump over to the editor. My goal for this video is simple: I'm going to show you not only how to create code effectively with this editor, but I'm also going to show you how to deploy it. One thing that always messes up in these tutorials is that you're watching a 20-minute tutorial and you're like, "Wait, wait, wait! We don't even see what the code looks like! There's no front end, there's no back end!" No, no, no. I'm going to show you.
Let's go ahead and get started. The first option we have, obviously, is to import from VS Code or Cursor. Oh no, Cursor! You also have the option to install Wind Surf. I'm not going to do that personally; you can do it. You can use it in your terminal. This will make more sense. For now, we're going to hit start fresh.
For key bindings, it's completely up to preference. I personally like using VS Code. Next, we get to choose how the code looks when we are editing and creating it. I'm obviously going to go with dark. I don't know about you, but if I'm working late at night, like 11:00 p.m. or 11:30, I don't want to see that super white screen just blasting my eyes. So we're going to do dark.
Next, we go to the sign-up page. I'm going to go ahead and just sign up with Google so all that information is filled in for me. Once you do that, you're going to get redirected to this window. We're just going to simply hit open Wind Surf.
Here we go! Now in Wind Surf, we have similar commands that we saw with Cursor AI, such as Command L and Shift Command P. This is going to open the command palette or the code cascade. Now, what it wants you to do is kick off your entire code base by simply putting something here. Therefore, let's navigate out of some terminal commands here and see if we can do it all within Cascade.
As a side note, if anything happens during this entire tutorial, I'll make sure to leave resource docs in the description down below to help you out. But on top of that, you can use a website called bumpups.com. It will allow you to take this specific video link, put it into a chat, and actually talk with the video. Therefore, if there are any issues in this entire little guide, you can just talk to the video.
Oh, and also, I created this software, so you're actually getting real value and real tutorials from someone who actually runs a software company rather than just some random YouTuber. I'm not a random YouTuber.
Let's go again. Let's see if Wind Surf actually shines here. We're going to say create React-based app. I want to have a directory at this folder /wi surfr. Just initialize it and hit enter. Not bad so far. This is the correct command, but there may have been a skip here for you personally. If you have any issues with npm or if it’s not recognizing a command within the terminal, I suggest you check out that Google Doc down below. Skip down to the step that refers to the ability to install npm and Node.js.
If that didn't make sense, don't worry. We're just going to hit accept here. That's only for people who ran into an error because npx is not recognized. Looking good so far, and I'm actually starting to see the value of Wind Surf here. They're making the terminal commands and the way you typically interact with IDEs (Integrated Development Environments) like Cursor AI and VS Code a lot simpler—like, a lot simpler. Almost like a conversation, which is definitely an advantage compared to what we saw with Cursor AI.
So what you'll notice here is that this is going really far. Whoa! Okay, so I was able to successfully create a Wind Surf Pro based on my information. All right, this is going well. What we want to do, though, is actually open this. This is going to be a React-based app, obviously called Wind Surf. This is actually really impressive.
Let's actually open this. We're going to hit open folder, go into the folder of Cascade projects. I'm actually really glad they created a whole subfolder for this and then specifically select the folder of Wind Surf P. Open.
This is going to open our code. It's going to prompt me whether or not I trust it. Obviously, I'm going to say yes, I trust this folder. Here, with one little prompt, we were actually able to create a React-based app. To check out past workflows or past conversations, I can simply click this, and this will show me the chat we had up to this point.
So make sure if you all have not used this line yet, start your project like this. Go and copy that, write it down, and you're good to go. Obviously, this is what we're calling a project. I call it Wind Surf P, as you'll see right up here in the top left.
Now, typically when working with AI and specifically code, you can go down little rabbit holes here and keep talking to it, so it has previous context. But off this initial prompt here, we got an entire React-based app. I'm going to hit new conversation, and then before I show you anything further, let's go ahead and run this so we can see what this would look like in our web browser.
In order to run this, we can come down here and go to terminal. You'll notice that we're right in our correct terminal here. It also helps us with generating commands. What's impressive, and honestly, I'm starting to see why Wind Surf is getting so much traction here, is they make terminal commands a lot easier.
So hypothetically, I don't know the command is npm start. I just don't know; I don't remember. I could possibly simply ask, "How do I run the app?" But since we know what the command is, here it is: simply npm start, and we should see this run.
Cck! There we go, and boom! We've successfully run that code, and we see it live now. Now let's do some more fun stuff. Let me go ahead and give you some pointers real quick when it comes to this kind of environment, and then we'll jump more into the AI features provided by Wind Surf.
Right off the bat, what you notice is that the whole point of a development environment like this is so that we can edit the code here and see instant reflections. For example, if we say edit source app.js, save to reload—we don't care, we're like no, no, and no—and it shows up right there.
Now your next question might be, "Why does this matter? Why do I care?" If we were to load this and push this to a live environment, e.g., a real URL like bumpups.com or applesandjam.com—like an actual live website link—you can't do instant reflections like this. We have to actually push this in a production-level environment.
So then your next question might be, "How the heck do I do that?" Check out the video down below or just check out this channel. I'm actually going to do a full in-depth guide with Wind Surf here, showing you how to actually deploy to a real website link. The purpose of this video, though, is just to show you its capabilities.
So let's go ahead and make a fun little game with Wind Surf AI. To do this, we're going to go ahead and hit Command L. Now we have a ton of different options here. Your first major advantage that you'll notice with Cascade when it comes to Wind Surf is basically how solid their terminal is.
When it comes to terminal commands, I have noticed a ton of people in my past tutorials always having issues with the terminal, so that should help a lot. Therefore, for us to effectively create an app here, let's reference the code in app.js and app.css. To do so, we're going to hit @app, and we're going to click this.
We'll use a little @ symbol, and then we'll do the @ symbol for CSS. JS is going to be the structuring; the CSS is going to be making it look pretty, making it look good. We'll go ahead and do this prompt right here: "From this code, let's create a side-scroller game like the one Google Chrome does when there is no internet. Have it so we can get new high scores, jump with an 8-bit llama, and so on."
And actually, to give it more context—and I haven't seen Cursor AI do this yet—let's add an image. To do this, we're going to simply hit add images, and the image I'm going to provide is just a reference of what that Google Chrome game looked like.
That right there is an extremely powerful feature that I've covered a ton on my channel, especially when it comes to front-end development. At this point, when it comes to AI and coding, you can basically mimic any type of website with AI just by providing more context, like providing any actual underlying image of the website.
We are generating a full-on game by just doing a prompt. While it's working, it's going to show us a yellow hue. Obviously, when it's editing the CSS, it provided us with the JS correctly. It also gives us kind of like a git commit, or in this context, how many lines have been removed compared to how many lines have been added.
It's even going as far as providing content text on how to actually play the game. What's super cool here is that at the end, it does provide me the ability to hit npm start, but since we're already running that in the terminal, I don't have to. So I'm going to go ahead and hit X here.
Then with the code provided, I can hit accept here, go to our CSS, and it looks like we're going to hit accept here. Accept. Make sure you save! If you don't save, it's not going to reflect in localhost. Save, save!
And with just that simple prompt, we have a game! Let's see what my high score is going to be. Okay, put in the comments right now what you think it is. I'm saying over 10. Okay, we keep going here. Okay, it's definitely over 10. Okay, there we go!
So not bad! With just a little bit of coding, it even has the ability to detect when we hit a cactus or a green block and try again. We have our high score—pretty solid stuff here with just two sentences.
Looking good so far! Now, Cascade also has another additional feature for us to try out here and play around with. Instead of writing to it, which is going to give us live code that's going to mess with our underlying directory, we can actually chat with it.
This is more in the context of maybe you're going through your project and you're scrolling through this, and there's just a part of the code that you're just like, "What the heck is going on?"
Shrink down. So for example, let's say we're in app.js, and this entire return—like everything after return—this return right here, we're like, "What does this mean? What's happening? Why does it seem separate?" I could come over here and just simply ask exactly that.
To do this, I'm simply going to say, "What is return and why does it seem separate?" Provide the code, hit enter. It's going to be chat-based, right? It's going to be a chat back and forth. You have your little private teacher, a 24/7 teacher. I teach code as well, but I'm not 24/7. I guess technically I am if you watch all my videos just on loop.
But the point is that you can talk to it and get more context. So if you don't know what it is, learn something new every day. This is basically how we're going to render on the front end what we see.
If you don't know what I mean by render, it's how the UI reflects the game. So for example, here instead of score, I say big points. We got some big points here, and if I come back to the game here, you'll see big points—just reflection.
This covers a good amount of what I wanted to go over in today's video. I'm going to do a full in-depth video, like 30 minutes plus, of Wind Surf, showing you from start to finish how to deploy this to a live website link. If you want to see that, make sure to subscribe here.
I'm also going to be doing other videos on this channel showing Cursor AI on different platforms and comparing them. If you felt like you learned something, make sure to leave a like. It's completely free, and it helps me out here.
If you have any issues with this tutorial, you can go to bumpups.com. There's a free 60 minutes where you can chat with this video and get all the answers you want.
But without further ado, that completes this Wind Surf video. Get ready for more this week, and I'll see you in the next video. We're doing the outro live! I'm playing the game while doing an outro. Those are two random videos—that's my favorite! And I just lost this game. I'll see you in the next video!