Today we're gonna talk about how to get started with a vibe coating project. There are two types of vibe coating that you're going to be doing by far. The one that you're going to spend more time on is where you already have an existing project. That's what we're going to spend the vast majority of this course on frankly, is because once we get started, then we have something and that is its own set of challenges.

because once we get started, then we have something and that is its own set of challenges. The idea that you have a code base, maybe it's launched to users, maybe it's not, but it certainly has a bunch of existing code and you need to build on top of that code. You need to add new features to it, you need to add new functionality, you need to clean up deck debt. All the stuff that makes engineering fun. That is the type of vibe coding

All the stuff that makes engineering fun. That is the type of vibe coding that you'll probably spend 99% of your time doing. There's only a one little part of getting started and then the rest of the project is not getting started, that it is doing the rest. However, the getting started part is so important. If you're building something from scratch, how you go about that will predict or determine the rest of the project and how well it goes for you.

that will predict or determine the rest of the project and how well it goes for you. Most people fumble on this part, this how to get started part and what it leads to is an endless amount of frustration and ultimately giving up so many people online. I see. And whether or not you're an experienced engineer or someone brand new decoding, they both run into this is vibe coding, worked for the first day maybe. Maybe for the first 30 minutes, maybe for the first week.

is vibe coding, worked for the first day maybe. Maybe for the first 30 minutes, maybe for the first week. But then I hit a wall and we're gonna talk about how to get over that wall. One thing that I really believe is that this advice that you see everywhere to start with a detailed PRD, I think it often does more damage than good. There is a good core here and that is that you need to plan and understand what it is you're going to build. I'm a product manager. I rate PRDs for a living.

and understand what it is you're going to build. I'm a product manager. I rate PRDs for a living. These are a valuable tool for anyone building product. It is really if you don't understand what it's, it's just a fancy way to say it. Plan. You write out, you plan what it is you're going to build that is in itself good. The bad thing that people do is they have chat GPT often, they don't even do it themselves. They have chat GPT, right out an extremely detailed

they don't even do it themselves. They have chat GPT, right out an extremely detailed technical plan from start to finish for the two dozen features they would like in their project and they throw it into their vibe coating tool. And what spits out is something that is often pretty impressive given how far LLMs have come, that you feel encouraged by it, but it is leading you down a path that is very damaging. It is very frustrating

but it is leading you down a path that is very damaging. It is very frustrating and it is bound to leave you in a place where you hit that wall and you can't get over it. It is much better, in my opinion, to start small, to try to figure out the core idea for the app that you want to build and experiment with that core idea. And this is how you write apps. If you're an engineer and you are starting a project from scratch,

If you're an engineer and you are starting a project from scratch, you don't spend the first day building 90% of the functionality, you actually start coding a little bit of these like sort of pseudo prototypes. Um, half working ideas to get a feel for the thing that you're trying to build. And then you build on top of that. You have something that's kind of broken that kind of doesn't work.

You have something that's kind of broken that kind of doesn't work. And if anyone else saw it, they would say you haven't built anything. But to you as the engineer, you know, this is the core, this is the thing that I wanted to build and I can grow this into a real application. And so that is my good advice is to start with throwaway prototypes. Eventually one of these prototypes you will carry on

with throwaway prototypes. Eventually one of these prototypes you will carry on to more features. But I want you to approach a project, especially a highly speculative project where you don't quite know the end result. You have a good idea for what you wanna build, but you don't know the tech stack that you wanna build it on or what libraries will be involved, that sort of thing. How the interaction works perfectly.

or what libraries will be involved, that sort of thing. How the interaction works perfectly. You want to build something that you can throw away. And that seems frustrating to you because most vibe coders, they take their first prompt and they just go with it and go with it and go with it. And they invest so much into that, that that becomes their baby. That first prompt then grows into this massive thing that it feels so close to the product that they want,

That first prompt then grows into this massive thing that it feels so close to the product that they want, that they continue to invest in it. But I promise if you start by investing into prototypes first and that you view all of these as just a throwaway sketch, just like if you were to make a really detailed piece of art, you might start with a sketch that is only meant to get you familiar with the types of things that you will need to do in the project.

to get you familiar with the types of things that you will need to do in the project. So that's what we're going to do. We're going to start in V zero and then we're going to see how to use that as a prototyping tool that you can then use to inform the project that you're going to do. Alright, so the reason that I'm using V zero is because I find that these vibe coding tools, the platforms that sort of end-to-end platforms,

because I find that these vibe coding tools, the platforms that sort of end-to-end platforms, they are really good for prototypes. There is just nothing like being able to type in a prompt and get a product really quickly. And if you start in something like Cursor, if you're familiar with Cursor or um, quad Code or Codex, like if you're super familiar with those, by all means start with those. I just find that throwaway prototypes,

by all means start with those. I just find that throwaway prototypes, I don't want them on my computer, I don't want them cluttering up my, my sort of workspace. It's nice to have them for the long term to go back and look at them. Um, but I just like the the vibe coating apps for this reason. So your your lovable, your bolts, your V zeros, these platforms are so competitive

So your your lovable, your bolts, your V zeros, these platforms are so competitive that they're often just going back and forth as to who the, who's the best. I don't have advice for you on who's the best, uh, use the one that feels good to you. To me, V zero feels the best. I believe that VL has really invested a lot into this thing and I think that they will going forward. I trust them on things like security, um, and performance.

and I think that they will going forward. I trust them on things like security, um, and performance. They're trying to make as good of a product as they can and they really understand the engineering foundation that they need to get there. So I like V zero for that reason. So what I'm going to do in V zero, notice how simple this prompt is. This is what 1, 2, 3 sentences, one of which is really short.

This is what 1, 2, 3 sentences, one of which is really short. This is a really short prompt build. A simple infinite canvas app that allows me to add any number of resizable. I frames that point at any website, no backend, just a frontend prototype only to start. So even V zero I'm telling this is a prototype Winder has so many features, countless features. I can create new art boards, I can have

so many features, countless features. I can create new art boards, I can have the LLM make a design from that art board. So you know, I press a button here and it's sending information off to the LLM and then I'm sending all these instructions and somehow through magic and just honestly months and months and months of work, it returns a fairly good looking design. Uh, I can copy that design, I can tweak it,

fairly good looking design. Uh, I can copy that design, I can tweak it, I can edit the text, I can do all kinds of things in here. There is no world in which I type that into this box and paste in the PRD that I got from chat gt and it yields wonder there it's just not going to happen. Maybe in a few years we'll get to that point. Everyone who tells you you can do that today is absolutely lying. They're building quick prototypes, um,

that today is absolutely lying. They're building quick prototypes, um, that they can share on social media, but they're not real products that real users can use. So we are going to instead focus on just experimenting with the core idea. Build a simple, simple infinite canvas app. That's what this is. This is an infinite canvas sort of app and it has I frames these are I frames that render HTML. I had this idea in my head

and it has I frames these are I frames that render HTML. I had this idea in my head so I did have a core idea of how this was going to work. I would render HTML. But the simple way to do that, it's just to use some current HTML and that's a website. So I wanted to see, this is what I really did by the way, is I went into V zero and I wanted to see how does it work and how does it feel to have an infinite canvas app that has little I frames in it that I can rearrange.

and how does it feel to have an infinite canvas app that has little I frames in it that I can rearrange. Will that work? Can I even get that to work with vibe coding? Can I get that far? Nevermind authentication, nevermind a backend nevermind saving. All I want is to sort of experiment with that. So we're gonna hit the button. I'm going to save you as much as possible throughout this course from

So we're gonna hit the button. I'm going to save you as much as possible throughout this course from watching an LLM think that would be an endless amount of time in this course. So I'm going to fast forward ahead. I have already pre-run this prompt. It's like a cooking show where I just take the Turkey outta the oven. So we're gonna take the Turkey outta the oven. I did that exact prompt. It did its thing.

So we're gonna take the Turkey outta the oven. I did that exact prompt. It did its thing. I've done nothing else. And so here is the prototype that results. This is the part where a vibe coder will often get frustrated or encouraged depending on how the result goes. 'cause these things are non-deterministic. They're spinning out a vast array of different results even with the same prompt. So here I have what is clearly an infinite canvas.

of different results even with the same prompt. So here I have what is clearly an infinite canvas. I don't seem to be able to pan very much if I scroll with my scroll wheel, the grid sort of disappears. This very typical start for a vibe coating experiment. It kind of works. I can kind of see kernels of what I want to build here. I'm going to add a website. Okay, so it wants me to enter A URL. What is second fret.net is my little games website

Okay, so it wants me to enter A URL. What is second fret.net is my little games website that I made where I host free games. Look at that. It actually built it. So this is telling me like I can probably get my idea to work. So already I'm fairly encouraged. Don't be too encouraged. This is nowhere near even 1% of what I need to build to make winder. But this is where I got to

to build to make winder. But this is where I got to and I thought, hmm, yeah I think this might work. I think that I can have HTML in an iframe and have it move around. Let's add another one. Let's do lyrica.com. Maybe I have multiples. So yeah, this seems like it'll work that I could have rearrangable Again, it is super broken because I can't pan around, but I can have rearrangable

rearrangable Again, it is super broken because I can't pan around, but I can have rearrangable iframes that would have different designs in them. And I know in my head that I can get HTML from an LLM. So this might actually work that I can make an infinite design canvas app. And so I did this a couple of times to see the sort of different ways that a V zero would build it from scratch. And then I would go in here and then I would say explain the tech stack to me.

And then I would go in here and then I would say explain the tech stack to me. How does it work and what does it use? LMS will often use out of the box libraries. This these are, you're an engineer so you know this, but these are little pieces of code that other people have written. Often what I find is that it doesn't lean into free and open source. Um, sometimes it will use a package

that it doesn't lean into free and open source. Um, sometimes it will use a package that is actually gonna turn out to cost me money. And imagine being months into building wonder and finding out that the library that I've built on actually requires me to pay thousands and thousands of dollars. That is a no-go for me. I wanted to build this as simply as I can. So here's the text stack.

I wanted to build this as simply as I can. So here's the text stack. It's gonna use next js, that's fine. React 18, that's good type script. These are good things. This is what I want. Now each five coding platform is probably going to direct you toward a text stack. So keep that in mind as you build. Every time you build with V zero, it's gonna be next JS, react and TypeScript. That's just how it works.

it's gonna be next JS, react and TypeScript. That's just how it works. Whereas some of the other platforms like rept I've heard are a little bit more open-ended. Maybe they won't tie you into next js. Obviously Versal has a vested interest in putting you on this platform. Um, UI components Shad CN V zero is gonna use Shad cn. That is what it is. It is a shad CN builder. And so all of the stuff that comes out

That is what it is. It is a shad CN builder. And so all of the stuff that comes out of V zero can look a little samey, which is one of the problems that my app was meant to solve. Um, it's gonna use Tailwind, it's gonna use lucid icons. This is very common. So how it works is the core architecture is a single React component. Um, so that is feeling good. It doesn't look like it's using any libraries.

Um, so that is feeling good. It doesn't look like it's using any libraries. Uh, the infinite canvas uh, system is CSS Iframe Window system. Alright, so Global Mouse events. This feels good to me. Um, after much experimentation, uh, the first attempts that I used, uh, or that I took on V zero used various libraries and I was experimenting with them and I, and I did land on something like this where it was a custom

and I was experimenting with them and I, and I did land on something like this where it was a custom uh, sort of react component. Uh, let's see if we can get it to do something. So let's imagine that we've made a couple of prototypes and we want to sort of pursue one that is what I recommend. Make two or three of these things and see if you can dig deeper into one. So let's try that for a little bit. Let's say I want to tell it that the grid lines disappear.

So let's try that for a little bit. Let's say I want to tell it that the grid lines disappear. In fact, I don't even like the grid lines. Canva or Canva doesn't have grid lines or Figma doesn't have grid lines and Adobe Illustrator like you can turn them on, but by default it doesn't have 'em. So I'm gonna get rid of those. Let's see if we can do that. Get rid of the grid lines on the canvas. Now notice what I didn't do is give it 10 things to fix.

Get rid of the grid lines on the canvas. Now notice what I didn't do is give it 10 things to fix. This is how you vibe code. Uh, again, think about context rot. Think about the things that overwhelm the LLM and a bunch of instructions will often overwhelm it. So I could have given it 10 things to do, but instead here's what I'm going to do. I'm going to give it a very simple instruction and say, here's the thing that I don't like.

I'm going to give it a very simple instruction and say, here's the thing that I don't like. Please fix it. Now we're gonna jump ahead and see if it actually worked. Let's try it out. Alright, so we're back and here is our prototype. Now let's try to add another website. If I could spell second fret.net. It's my website. Alright, so now we don't have those grid lines. So we actually got around the problem

Alright, so now we don't have those grid lines. So we actually got around the problem that the grid lines were disappearing and kind of awkward and weird. Um, that is not a problem at all. Can I zoom out somehow? Yes, I can zoom out so I don't have grid lines. Alright, so this is a fairly decent start and this is how you start with vibe coding. Um, make a prototype, make two more prototypes, see which one has the best feel to it

Um, make a prototype, make two more prototypes, see which one has the best feel to it and then start to experiment with adding little bits of functionality. This is how you code and this is how you should vibe code. In my opinion. This is what I get to work the best. This is how I was able to build a very powerful, very robust, very feature rich application is that I never at any point now to be honest, I tried in the early days but after, after failing.

that I never at any point now to be honest, I tried in the early days but after, after failing. Um, the thing that worked is, and never at any point have I told it to build a ton of functionality in one go. I have always said piece by piece, let us build this little thing. And where I go from here is that once I've got it started to feeling good, I will then document the, the sort of functionality that I need on the backend

to feeling good, I will then document the, the sort of functionality that I need on the backend and work with my platform to add a backend. So for this I can already see, I will probably want files. Each file will be its own canvas. I will probably want art boards. So there will be a table of files, a table of art boards. Um, and this is what prototyping does. It helps you think through these things. So each art board will probably have some HTML with it.

It helps you think through these things. So each art board will probably have some HTML with it. So, uh, an art board might have a title, it will have dimensions since I can resize it. Uh, and the LLM will probably know these things based on the prototype that you build. It can then build a backend for you. So I recommend building prototypes for that reason as well is you can sort of start to get a feel for the backend that you need to add.

as well is you can sort of start to get a feel for the backend that you need to add. Alright, so that's enough for today. That's how you get started. First, build a bunch of prototypes. Do use a PRD maybe for your own, uh, sort of uses, but don't use it to hand to the LM Don't have chacha bt right, uh, PRD that you don't know and don't understand. And then have it be tossed into an LLM.

that you don't know and don't understand. And then have it be tossed into an LLM. It's just not going to work. Find the tech stack that you want, find the sort of starting point that you want and then gradually build on top of it. And that's what we're gonna learn how to do next.